Working with Graphics and Tables - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 306

Also, if you are creating a site for older browsers or other devices that do not fully sup-
port CSS functionality, you might need to use tables to structure the page layout.
Before you begin, it is a good idea to sketch what you want the page content to
look like, just as you did before you added div tags to a page. Planning the page layout
enables you to determine where to place the cells and tables on the page so that the
information can be conveyed effectively.
Gage wants you to add a page to the NextBest Fest site to promote bands that will
appear at the fest. A link from the home page of the site, when clicked, will load the new
page in a new browser window. The new page will use tables for structure. It will not
have a navigation system because it is a pop-up promotion instead of a regular page in
the site. Figure 5-49 shows a sketch of the layout for the new page.

Figure 5-49 Sketch of the layout for the new page

Band image or logo Band information and

link to Web site or
MySpace page

NextBest Fest logo and a
tagline

You'll start by creating the hot.html page, adding a page heading, and attaching the
external style sheet to the page.

To create the hot.html page and attach the nbf_styles.css style sheet:

◗

1. Open the New Document dialog box, click HTML , under Page Type, click <none>
under Layout, click Create . A new page opens in the Document window.

◗

2. In the Title box on the Document toolbar, type NextBest Fest - What's Hot , and
then press the Enter key. The page title is entered.

◗

3. Save the page as hot.html in the local root folder of your NextBest Fest site. The
hot.html page appears in the Files panel.

◗

4. In the CSS Styles panel, click the Attach Style Sheet button . The Attach

External Style Sheet dialog box opens.

◗

5. If necessary, click the Browse button, navigate to the stylesheets folder in the
local root folder of your NextBest Fest site, and then double-click nbf_styles.css .
The external style sheet is attached to the hot.html page.

◗

6. Click the OK button, and then save the page.