Working with Pages in Microsoft Expression Web
- Mar 23, 2007
Having set up a Web site in Chapter 2, you're ready to create individual pages. This chapter also covers other page basics, such as saving, renaming, retitling, and deleting pages. Finally, you'll learn how to preview your pages in a variety of Web browsers.
Creating Web Pages
As in creating Web sites, you have two routes to go: start from scratch with a blank page or use a CSS-based template page. Depending on the situation, you'll probably do a little of both. If you've created a lot of pages before, starting with a blank page may be perfect for your needs. If you're looking to learn the ins and outs of CSS, however, starting with one of Expression Web's CSS-based page templates can save time by giving you a jump start. "To create a new CSS-based page" on page 36 offers a quick overview; it's covered in depth in "Creating Layouts with CSS" on page 145.
To create a new blank page:
Open the Web site in which you want to work, and choose File > New > Page (Figure 3.1).
When the New dialog box appears, HTML is selected automatically (Figure 3.2). (To change that, see last tip on the next page.)
Figure 3.1 To create a new blank page, choose File > New > Page.
Figure 3.2 HTML is selected automatically in the New dialog box.
Click OK, and a new blank Web page appears in the Editing Window (Figure 3.3).
Figure 3.3 A new blank Web page appears in the Editing Window ready for your content.
To create a new CSS-based page:
- Open the Web site in which you want to work, and choose File > New > Page.
When the New dialog box appears, select CSS Layouts in the left column and make a choice in the middle column based on the Preview area (Figure 3.7).
Figure 3.7 To create a new CSS-based page, select CSS Layouts in the left column and make a choice in the middle column based on the Preview area.
Click OK, and an untitled—and apparently blank—page appears in the Editing Window (Figure 3.8).
Figure 3.8 Underwhelming: a blank CSS-based page with all the visual aids turned off.
To really see what's going on, turn on Expression Web's visual aids. Choose View > Visual Aids > Show () (Figure 3.9), and then select all but the two ASP.NET items in the drop-down menu (Figure 3.10).
Figure 3.9 To see what's going on in a CSS-based page, choose View > Visual Aids > Show.
Figure 3.10 In the Visual Aids drop-down menu, select all but the two ASP.NET items.
The previously blank page now shows a rough version of the step 2 preview (Figure 3.11).
Figure 3.11 The previously blank page now shows a rough version of the step 2 preview. For an even better sense of how the page works, switch to Split View and turn on the CSS Properties task pane.
Now that you can see the page's CSS-based layout sections—known as divs—in the Design and Code windows, you can start adding content (Figure 3.12).
Figure 3.12 Once you can see the page's CSS-based layout sections in the Design and Code windows, you can start adding content.
Be sure to save your changes. When you do, Expression Web will ask you to name and title the HTML page and its related CSS file (Figure 3.13).
Figure 3.13 Expression Web automatically generates a companion CSS file for the page you create.
Though the page remains far from done, press to see how it looks at the moment in your default Web browser (Figure 3.14).
Figure 3.14 To see how the still rough CSS-based page looks, take a quick peek using your Web browser.