Working with Pages
- Creating Web Pages
- Working with Web Pages
- Setting Other Page Properties
- Previewing Pages in a Browser
This chapter is from the book
This chapter is from the book
This chapter is from the book
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.
)
)
)
TIPS
- In step 1, if you want to use a standard, HTML-based Web page, choose File > New > HTML and a blank Web page appears without going through the New dialog box. Or if the Common toolbar is visible, click the New button (Figure 3.4).
Figure 3.4 You also can create a new page by clicking the New button in the Common toolbar.
- If you're adding pages to an existing site, you also can click the New button in the Folder List's title bar, which by default also creates a new HTML page (Figure 3.5).
Figure 3.5 A New button also resides in the Folder List's title bar.
- While you could create a free-standing page without first opening a Web site, you'll avoid potential file chaos by working within an already created site—even if it's a site with just a single page.
- In step 1, if you want to use a format other than HTML, in the middle column click another choice such as CSS. To change the default format, click Page Editor Options (Figure 3.2). Or choose Tools > Page Editor Options. In the Page Editor Options dialog box, click the Authoring tab and use the Default Document Type drop-down menu to make a choice. Click OK to close the dialog box and apply the change (Figure 3.6). While you also can change the default doc type declaration and schema here, they really should be applied site-wide so don't change it from page to page within a site. (The default schemas of XTML 1.0 Transitional and CSS 2.1 are your best bets for new sites; you may have to change it HTML 4.01 Transitional for older sites laden with pre-XTML pages that you have not yet updated.)
Figure 3.6 The Authoring tab in the Page Editor Options dialog box lets you change the default document type used for new pages.1
)
)
)
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.
)
)
)
)
)
)
)
)