Chapter 2: Working with Web Pages

No matter how big your Web site becomes, the basics for putting it together are the same: Create a Web site (we tell you how in Chapter 1) and fill it with Web pages. At its simplest, a Web site contains a single home page. After that, the sky's the limit; you may end up with a handful of pages, or hundreds.

In this chapter, we go over the different ways to create, open, and save pages. By the end of this chapter, you'll be comfortable with all the basics of Web pages and ready to launch into the real fun of Web site building: adding content (which we introduce you to in Chapter 3).

Creating and Saving Pages

Web pages are the canvases onto which you paint your brilliant ideas. Creating a new page in Expression Web is simple: A few clicks of the mouse and you've got a blank page ready for action.

To create a new, blank page in an existing Web site, follow these steps:

1. Launch Expression Web, and open the Web site you want to work with.

   Chapter 1 explains how to create and open Web sites.

2. Choose File New Page.

   Or, on the Common (or Standard) toolbar, click the down arrow next to the New Document button. You can also press Ctrl+N.

   The New dialog box appears, with the Page tab selected. The options General and HTML are selected.

3. Click OK.

   The New dialog box closes, and a new, blank page appears in your view of choice (Design, Split, or Code view). The cursor blinks patiently on and off in the editing window, waiting for your content. The default filename for the new page, Untitled_x.htm, appears on its tab. Until you save your Web page and give it a name, this is the default name Expression Web has assigned to it. That's it. You're ready to add content and then save your page.

REMEMBER 

If you were to close Expression Web right now without saving the page you just created, Expression Web would simply discard the page. When you next open the site, your page will have vanished into cyber-obscurity. This isn't a big deal because as soon as you type even a single character, Expression Web notices the content and prompts you to save your changes before closing the page. But it's worth keeping in mind.

Note 

Although we only cover adding HTML pages here, you follow the same basic process outlined in this section to add other types of pages to your Web site. We tell you how to add style sheets in Chapter 9. We cover Dynamic Web Templates in Chapter 11.

Tip 

The care and naming of Web pages

Here are a few tips to keep in mind as you consider what to name your Web pages:

• Filename: Keep your filenames short and intuitive. Your best bet is to stick to one-word names that use only lowercase letters. If you must use more than one word, fill the spaces with underscores, like this: fall_catalog.

• Home page filename: The host Web server, on which you will eventually publish your finished Web site, determines your home page filename. Most Web servers recognize either index or default as the home page filename, with the extension .htm or .html (or .aspx for ASP.NET sites). Before you publish your Web site, ask your system administrator or a helpful person at your hosting provider which home page filename you should use.

• Filename extension: It's up to you whether to use the htm or html filename extension-they're interchangeable. Expression Web automatically appends the .htm extension to whichever filename you choose; if you prefer to use html, when you save the file, add .html to the file name you specify.

Saving a Web page in the current site

If there's one thing we've discovered as writers, it's to obsessively save our work. In fact, pressing Ctrl+S has become almost as automatic as ending a sentence with a period. We recommend that you adopt this habit as well. That way, when you accidentally step on your surge protector's power button or a truck plows into the power pole down the street and your computer monitor goes sickeningly black, you're covered.

To save a Web page, follow these steps:

1. With Expression Web running and the Web site open that you want to save the page in, choose File Save As.

   The Save As dialog box appears. The Save In text box displays the location of the Web site folder.

2. In the File Name text box, enter the filename you want to give the Web page.

   The nearby sidebar "The care and naming of Web pages" contains tips for choosing filenames.

3. To change the page title, click the Change Title button.

   The Set Page Title dialog box appears.

   Tip 

   When you view a Web page in a Web browser, the title appears on the browser's title bar-the colorful strip at the top of the browser window. Page titles also appear in search indexes (such as Yahoo! and Google) and in visitors' lists of browser bookmarks (although your visitors can rename their browser bookmarks if they want). A good title for your Web page should sum up the page's content in a way that's meaningful to visitors. For example, whereas the title My Home Page or Home could apply to millions of different pages all over the World Wide Web, a more specific title, such as Tips and Tricks for Northwest Gardeners, tells the visitor exactly what to expect on that page.

4. In the Page Title text box, enter a title.

5. Click OK to close the Set Page Title dialog box.

   You return to the Save As dialog box.

6. Click the Save button.

   The Save As dialog box closes. If pictures appear on the page, the Save Embedded Files dialog box appears. See the sidebar "Saving pages containing pictures," a little later in this section, for tips on dealing with pictures. When Expression Web is done saving, the Folder List task pane lists your new, saved page.

Saving pages containing pictures

If you save a page that was originally opened from a location outside the current Web site and that page contains pictures, or if you added pictures to your page, Expression Web prompts you to save the associated picture files too. (You discover lots more about Web pictures in Chapter 5.)

When you save a page containing pictures, in addition to saving the page, Expression Web pops open the Save Embedded Files dialog box. It enables you to save the picture files and to change the filenames and specify the folder in which the pictures are stored. You can also click the Picture Options button in the dialog box to specify details about the picture file's format details. After you specify your preferences, click OK to save the pictures.

After you save a page and give it a name, click the Save button on the Common or Standard toolbar or press Ctrl+S to resave it. Expression Web tells you when a page needs saving because an asterisk appears next to the page's filename on the tab, like this: pagename.htm*. If you made changes to several pages in your Web site, you can save all pages and files at one time by choosing File Save All.

Tip 

Add the Save All command to your favorite toolbar so that it's right there where you need it. We tell you how to add commands to a toolbar in Chapter 1. (You find the Save All command on the File menu.)

We suggest dropping the Save All command to the right of the Save button, as shown in Figure 2-1.

Figure 2-1: Add the Save All command to the Common toolbar.

Adding new pages and folders in the Folder List

If you're the big-picture type, you may prefer to begin by setting up all your site's Web pages first and then filling them with content and linking them. (We show you how to build hyperlinks in Chapter 4.) This is how our friend the professional Web designer does it: She builds the site's basic framework to make sure that she doesn't forget any important pages, such as a contact information page or a site map. You can always add or delete pages later on, but this method gives you a good place to start. The easiest way to do it is to add new Web pages by using the Folder List task pane.

To add a new Web page in the Folder List task pane, follow these steps:

1. With Expression Web running, open the Web site you want to add pages to.

2. In the Folder List task pane, select the folder that will contain the new page.

   If you want to add the page to the main Web site folder or you do not yet have subfolders, select the top-level folder of the Web site. (We show you how to add subfolders at the end of these instructions.)

3. On the Folder List task pane title bar, click the New Page button, as shown in Figure 2-2.

   
   Figure 2-2: Add new pages to your Web site quickly in the Folder List task pane.

   A new page icon appears, with the default title Untitled_x.htm.

4. To rename the file, right-click it and, from the pop-up menu, choose Rename. Then type the filename.

Warning 

Do not delete the file extension htm. If you do, Expression Web doesn't recognize the file as a Web page and can't open it.

To add a page title to the new page, right-click the page's icon and then, from the pop-up menu that appears, choose Properties. In the General tab Title text box, type the page title and then click OK to save.

Adding subfolders in the Folder List task pane is simple. Follow the same steps as for adding a page, except click the New Folder icon. To rename the subfolder, right-click it and, from the pop-up menu, choose Rename and type the name. After you create a folder, you can drag and drop files into it just like in Windows.

REMEMBER 

The Folder List task pane shows you the full file and folder structure of the open Web site. You will come to love this handy task pane as you use it to navigate in your Web site. As you can in Windows, you can press the + and − buttons to collapse and expand the contents of a folder, and you can double-click an icon to open a file.

Creating a page based on an existing page

Expression Web knows how to use an existing page as the basis for another page-a major timesaver when you want to create a bunch of standard pages with slightly different content. This is also useful if you want to see how changing a few page elements will look but keep everything else the same (for example, if you're wondering what red headings would look like).

Tip 

If you expect to create similarly laid-out pages regularly, consider creating a page template. Expression Web gives you several ways to work with templates, depending on your needs. See "Creating and Using Page Templates," later in this chapter, for how to create a template from an existing page and use it as a basis for creating new pages. After you experience the timesaving power of page templates, you may want to consider using a template as the foundation for your entire site. We explain how in Chapter 11.

To create a new page based on an existing page, follow these steps:

1. Open the Web site to which you want to add the new page.

2. In the Folder List task pane, right-click the file you want to use as the base page, and then, from the pop-up menu that appears, choose New from Existing Page.

   A new page, named Untitled_x.htm, with the same content appears in the editing window.

3. Choose File Save As and, in the Save As dialog box, navigate to where you want to save the file.

4. In the File Name text box, type the new page's filename.

5. Click the Change Title button, and, in the Set Page Title dialog box, type the new page's title then click OK.

6. In the Save As dialog box, click Save.

REMEMBER 

Expression Web keeps track of your Web site's folder and file structure and the links between pages. At this point, you might not yet have created any links; we cover hyperlinks in Chapter 4.) When you add, rename, or delete a page or change its location within your Web site by moving it to a new folder, Expression Web updates any affected page links. For this reason, always make changes to your Web site file and folder structure inside Expression Web rather than use Windows Explorer. If you move files and folders outside the safe confines of Expression Web, you end up wrestling with error messages and, potentially, broken hyperlinks.