Using CSS for Page Layout Working with Floating and AP - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 184

◗

8. Resize the browser window. The page width doesn't change even when the
browser window changes size. You will use this fixed-width layout style for the
NextBest Fest site.

◗

9. Close the browser, and then close the page.

You don't need any of the prebuilt pages you reviewed for the NextBest Fest site. You'll
delete these pages from the local root folder so that the site contains only the fi les for the
pages you want.

To delete the prebuilt CSS layout pages:

◗

1. In the Files panel, click fluid.html to select it in the files list, and then press the
Delete key. A dialog box opens, confirming that you really want to delete the
selected file.

◗

2. Click the Yes button. The page is deleted from the local root folder of your
NextBest Fest site.

◗

3. Repeat Steps 1 and 2 to delete the fixedWidth.html page from the local
root folder.

Planning the CSS Layout
You can create custom CSS layouts. Before you begin creating a CSS layout, you should
determine which CSS elements the pages require. For example, most pages need a head-
ing area, a content area, and a footer area in each page of the site. Because each page
will have only one heading, a content area, and a footer area, you will use ID type styles.
Gage has created a diagram, which is shown in Figure 4-8, showing how div tags will
be used to create the page structure for the NextBest Fest site. You'll use this to create the
layout of the home page.

Figure 4-8 Layout of the NextBest Fest site

green-dashed line
shows the outer edge
of the container div

yellow line shows the
outer edge of the
content div

orange line shows
the outer edge of the
footer div

background expands
to fill the user's
browser