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

You will duplicate the home page to create the other pages planned for the NextBest
Fest site.

To duplicate the home page:

◗

1. Collapse the CSS Styles panel, and then close the index.html page.

◗

2. In the Files panel, select index.html , right-click the selected page to open the
context menu, point to Edit , and then click Duplicate . A duplicate of the home
page, named index - Copy.html , is created and appears in the files list.
Trouble? If you do not see Copy of index.html in the files list, you probably need
to refresh the Files panel. On the Files panel toolbar, click the Refresh button.

◗

3. In the Files panel, click index - Copy.html to select the page name, click
index - Copy.html again to open the page name for editing, type about.html ,
and then press the Enter key. The duplicated page is renamed.

◗

4. Open the about.html page in Design view.

◗

5. On the Document toolbar, in the Title box, change the page title to NextBest
Fest : About .

◗

6. In the Document window, select the page heading, type About , and then
delete the remaining content from the page, leaving the navigation text and the
footer text.

◗

7. Save the page, and then close it.

◗

8. Repeat Steps 2 through 7 to create the following pages: lineup.html , schedule.
html , tickets.html , and contact.html , using the appropriate filename and the
corresponding page title and page heading.

You've created all the pages needed for the NextBest Fest site. You'll preview the pages
in a browser, and confi rm that the navigation system works by linking between the pages.

To preview the site pages and test the navigation system:

◗

1. Open the index.html page, and then preview the page in a browser.

◗

2. In the browser window, click the about navigation link to open the about.html page.

◗

3. Click each of the following links to move between the pages you created and test
that all of the links work: lineup , schedule , tickets , and contact .

◗

4. Close the browser.

Editing the Style Sheet from the CSS Styles Panel
The most powerful thing about having an external style sheet that is connected to all the
pages of the site is that any change made in one place will affect all the pages in the site.
You can edit a style from within the CSS Styles panel.
Gage thinks that the footer text appears too far below the content div in the pages.
This is caused by the 10px bottom margin of the content div. He wants you to change the
bottom margin to 0px. Rather than changing the bottom margin in each page, you make
the change just one time in the external style sheet.