LESSON 1: The basics for creating a website

Welcome to Building websites with Microsoft Expression Web    Page 1 of 6

Welcome to Building websites with Microsoft Expression Web. As the internet has grown in use and popularity, it's become almost imperative that businesses, especially small businesses, have a website to attract customers. Microsoft Expression Web is easy website creation software that helps you build functional, eye-catching websites for your business.

This class teaches you all the basics for creating a website using Microsoft Expression Web software. Here's what you'll learn in each lesson:

Each lesson is accompanied by a short assignment and quiz, which are designed to help you more fully understand the numerous concepts covered in this class. You should also use the message board—your virtual classroom for this class—to exchange questions and comments about lesson topics with your classmates and instructor, share your expertise and offer feedback to make this class more enriching.

Take a moment now to visit the message board, introduce yourself and get to know your instructor and classmates. Let them know why you're taking the class and what you hope to accomplish in the end.

Let's get started with the topics in Lesson 1.

Introduction to websites    Page 2 of 6

Before you dive into building your website, you need to understand what exactly you're building. A website is a collection of interconnected web pages, accessible from a common web address or universal resource locator (URL). Your website serves as your organization's way of interacting with current and potential customers on the internet.

Your website can be as simple as a brochure, providing information about who you are and the services or product you provide, or it can be as complex as an online store, enabling customers to buy from you directly over the internet.

The individual web pages that make up a website can be either static or dynamic. Static web pages appear all the time and are built using simple Hypertext Markup Language (HTML). Dynamic web pages can contain different information based on user input and are built using scripting languages, such as ASP.NET and Extensible Markup Language (XML).

You can create static web pages in HTML but must use a scripting language for dynamic web pages.

Now that you're familiar with what makes up a website, you can move on to how to select a domain name for your website.

Understanding and selecting domain names

The first thing your website needs is a domain name, which is the unique identifier for your site. It tells the web browser how to find the server where your website is stored. Domain names can consist of letters (English alphabet a to z), numbers (0 to 9), hyphens (-) and an extension (.com, .org, .edu or .net, among others) known as a top-level domain. Each level of the domain name is separated by a dot (.) The most common domain names consist of three levels—hostserver.company.extension, for example www.deli5.com.

All domain names must be registered with a domain name registry service to ensure that names aren't duplicated on the World Wide Web. Registering a domain name costs between $8 and $35 per year. How much you pay for your domain name depends on the registry service you sign up with.

Think of your domain name as an alphanumeric phone number for your website. It's unique—no two phone numbers can be the same—and when a customer dials your number, it connects them to your business. However, your phone number is randomly assigned to you, but you get to pick your own domain name.

Keep these things in mind when selecting your domain name:

Understanding web hosting

To be accessible on the internet, your website needs to be stored on a server with special internet connectivity. For most small businesses, this is best accomplished by using a web hosting service. Several types of hosting servers are available in a wide range of costs. The type of hosting server you select depends on the size and complexity of your website.

Some of the things to keep in mind when selecting a web hosting solutions are:

The following are common types of web hosting services:

Because the service is free, this is the least costly hosting option available. However, the limitations in bandwidth and server space offered by most free hosting services might mean fewer customers are able to visit your website.

Next to free web hosting, shared hosting is the least expensive option available.

The cost of this type of service is usually negotiated based on the server size and bandwidth you require. Prices for this service tend to be higher than shared hosting services.

This is the most expensive hosting option. However, the services might be worth the added expense, especially if you don't have a web manager on your staff.

Now that you know what to look for in a web hosting service, you need to think about some other things when creating your own website.

Planning a website

Your website is your home on the internet, and building it is much like building a house. The task of creating a website might seem a bit overwhelming at first; however, follow these basic principles and you can be off and running in no time:

1. First decide on the scope and purpose of your site. Are you building a brochure or a fully functioning store?
2. Lay out a storyboard that shows all of the pages you need to build and how they'll interact with each other. This helps you to know how information will be arranged throughout your website before you start building pages.
3. Make design choices based on maintaining a continuity of look and feel across all pages in your website.

So far, you've explored the basic information you need to consider before creating your own website. Now you're ready to learn how to use Expression Web to build your own website. To complete this lesson, you should purchase or download a trial copy of Expression Web and install it on your workstation so that it's ready to use. If you haven't already, you can access the software by visiting the Microsoft Expression website.

Key Microsoft Expression Web software capabilities    Page 3 of 6

Expression Web combines the functionality of older web design applications—Microsoft Office FrontPage and Visual Studio—with features for creating and working with some of the most advanced web design languages available today. The following table describes some of the web languages used by Expression Web.

Table 1-1: Web languages used by Expression Web.

With CSS, you can define a set of styles and formats to be used across all web pages in your website. If you decide to change the look of your website, you can do so without rewriting or reformatting each page.

Because Expression Web supports XHTML and CSS, you can build standards-compliant websites. Your web pages render correctly on all commonly used web browsers. Expression Web also offers real-time standards validation to help you catch coding discrepancies before they become problems.

Expression Web offers a simplified user interface for working with XML. The drag-and-drop interface, query builder and Really Simple Syndication (RSS) feed data retrieval work together to help you be more productive with XML.

The addition of ASP.NET lets you make web applications for interactive websites. Expression Web offers tools for controlling ASP.NET 2.0 functions without complex coding through the use of toolbars and action menus.

Now that you understand some of the things you can do with Expression Web, let's take a look at how to navigate the interface.

Navigating Expression Web    Page 4 of 6

All of the features of Expression Web are available through user-friendly menus, toolbars, dialog boxes and toolboxes. The Expression Web main interface window shown in Figure 1-1 contains four main functional areas:

Figure 1-1: Expression Web main interface window.
 

Using the toolbars

Expression Web provides feature-specific toolbars for each functions set. These toolbars can be made visible or hidden at your convenience. You can also customize your toolbars by adding or removing icons. The following toolbars are available:

To arrange the docking order of the active toolbars to customize your workspace, just drag and drop the toolbars into the desired positions.

Next, learn how to start a new website.

Starting a new website    Page 5 of 6

Before creating individual web pages, you need to set up the basic structure of a website. This tells Expression Web to create an empty folder on your hard disk where all of the files associated with your website can be saved.

To start a new website:

1. Select File > New Web Site to open the New dialog box shown in Figure 1-2.
    

Figure 1-2: New dialog box.
 

2. On the Web Site tab, you can begin creating your website from scratch, or you can use a predefined template:

3. At the bottom of the dialog box, as shown in Figure 1-3, specify the name you want to give your new website. Expression Web assigns a generic name, such as Web1, Web2 and so on, which you can alter to be more meaningful and therefore easier to find and retrieve later. When naming your website, you can also change the location of where your website will be saved. You can save your website to any location accessible on your computer—either local or network disks.

Figure 1-3: The website's name and location are displayed at the bottom of the New dialog box, Web Site tab.
 

4. Click Browse to open a browse dialog box and navigate to the desired location.
5. Click OK to select the location and return to the New dialog box.
6. Alter the website folder name and replace it with the name you want to give your new website.
7. Click OK.

Now that you've created and named your website folder, you can begin creating new pages.

Creating a new web page    Page 6 of 6

Most websites you make contain several HTML pages. To start a new HTML page, select File > New > Page. On the Page tab, select General and HTML, and then click OK. This creates and opens a blank HTML document you can save in your website folder. You can add content directly into the page by typing text and using the formatting toolbars and menus as you would in a word processing application, such as Microsoft Word.

Because Expression Web is a What You See Is What You Get (WYSIWYG) application, you can build your page visually instead of entering HTML code. However, you must set certain page level parameters, such as hyperlink colors and page titles, in the Page Properties dialog box shown in Figure 1-4. To set your page properties, select File > Properties.

Figure 1-4: Page Properties dialog box.

The Page Properties dialog box has five tabs:

Save your pages with meaningful names. The home page in your website should be named in accordance with your web host's naming conventions (usually default.htm, index.htm or home.htm). Because some hosts have strict file-naming conventions, you should avoid spaces and non-alphanumeric characters in your file names.

Working with page layouts with layers

After you set up at least one page, you can start creating your page layout. The Layers feature helps you build visually interesting pages easily and efficiently. Expression Web enables you to place layers on the page and fill each layer with unique content. Layers can contain any content including text, images and other files.

Layer placement is absolute, meaning that you define the pixel placement of the layer, and that placement doesn't change regardless of the web browser in which the page is viewed. This type of content layout is achieved using div tags and CSS.

To add layers, do the following:

1. Click the Layer tag icon, shown in Figure 1-5, in the Toolbox on the right side of the window and drag it onto the page. The layer automatically appears in the upper-left part of the page.

Figure 1-5: Layer tag icon.

2. To move the layer, click and drag it to the desired location.
3. To resize the layer, click and drag any of its corners. You can click the CSS Properties task pane tab and enter the desired number of pixels for the height and width, as shown in Figure 1-6.

Figure 1-6: CSS Properties task pane settings.

After you set the first layer, you can begin adding content to it, or you can continue adding layers until the entire page layout is defined. If you want to add an image but don't know the exact size of the image, you can place the layer on the page and then insert the image into the layer. If the layer is smaller than the image, the layer will resize to fit the image precisely.

Formatting headlines

Headlines are an important tool to help visitors find their way around your website. Style, font, size and color are as important as content when it comes to getting your readers' attention. Expression Web lets you create styles in CSS as you format text.

To format a headline:

1. Type the headline text and select it.
2. Select the desired heading level (Heading 1 for top level heading, Heading 2 for second level heading and so on) from the Style list on the Common toolbar, as shown in Figure 1-7. This applies the appropriate heading tag (such as h1, h2 and so on) to the selected text.
    

Figure 1-7: Applying a headline style.

You can change the style attributes of the heading style to suit your needs. Here's how:

1. Click New Style in the Apply Styles or Manage Styles task pane. The New Style dialog box appears, as shown in Figure 1-8.

Figure 1-8: New Style dialog box.

2. Open the Selector list, scroll down and locate the style you want to modify and select it from the list.
3. Select Font in the Category list and define the font attributes you want for the heading style.
4. When you're finished defining the style, click OK to apply the new style to the heading level tag.

Now you can move on to creating links.

Creating links

Links provide the interconnections that make the World Wide Web useful. You can create links to other web pages in your website as well as links to other websites on the internet.

Before creating a link, you need to decide what to use as the hot spot. A hot spot is the text or image you can click to activate the link and jump to the linked page.

To create a link:

1. Select the text or image that'll be the link's hot spot.
2. Select Insert > Hyperlink from the main menu. The Insert Hyperlink dialog box appears, as shown in Figure 1-9, where you define the destination page for the link.

Figure 1-9: Insert Hyperlink dialog box.

3. If you're linking to another web page in your website, select the page you want to link to. If you're linking to another website, enter the full URL of the destination page in the Address field.
4. Click OK to set the link.

Adding pictures and files

Pictures and other files add depth, richness and interest to websites, and adding them is easy with Expression Web. You can add pictures and other files that are stored on your computer directly into your pages, and Expression Web automatically saves copies of those files to your website folder when you save the page.

To add a picture file, do the following:

1. Make sure that your cursor is in the layer where you want the picture to appear.
2. Select Insert > Picture > From File. The Picture dialog box appears.
3. Navigate to and select the picture file you want to add.
4. Click Insert to add the picture to your web page.

To enable accessibility compliance, an Accessibility Properties dialog box appears, in which you can type in alternate text and a long description for the image. This text is hidden behind the image and used by the web browser to assist people with hearing or visual impairments.

You can add other types of files, including sound and animations to your pages as well.

Now you know the basic functions and navigation capabilities to help you start building websites in Expression Web.

Moving on