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

14. Open each new page, enter an appropriate page title, and then add content to the
pages of the site using the information in the tess.docx document located in the
Tutorial.04\Case3 folder included with your Data Files. You can shorten and edit
the content Tess provided to maximize the user's experience and better achieve
the site goals. Create additional styles as needed to format the content.
15. Save the pages and the style sheet, and then preview the pages in a browser.
16. Upload the pages and the stylesheets folder to your remote server, and then preview
the pages over the Internet.
17. Submit the fi nished fi les to your instructor.

Case Problem 4

Create a
navigation
system and
create and apply
CSS styles to text
in a Web site for
a coffee bar.

Data File needed for this Case Problem: coffeeback.png

Coffee Lounge Tommy wants you to create structure for the pages of the Coffee Lounge
site, to create styles, as necessary, to create the other pages of the site, and to add text to
the site. He will provide the events calendar and list when the schedule is confi rmed.

1. Open the Coffee Lounge site you created in Tutorial 3, Case 4, and then open the
index.html page in Design view.
2. Design a page structure that follows your site plan and reinforces the site goals. Keep
the target audience in mind when you decide on the page width, the way you will
structure information, and what type of layout (fi xed-width, liquid, elastic) you will
use. Create a sketch that shows the divs and where you will use them in the page
structure.
3. Create the divs you need for the page structure or use one of the prebuilt CSS
layouts.
4. Create and modify existing styles for the site as needed. You can use the
coffeeback.png image located in the Tutorial.04\Case4 folder included with your
Data Files to create a translucent white background for the container div.
5. Duplicate the index.html page to create the other pages of the site, and then rename
the duplicated pages with fi lenames that match the links you created for the naviga-
tion system.
6. Open each new page, change the page title, and then add appropriate headings and
content to the page. Use your research to create a simple food and drink menu and
to create the other page content.
7. Draw an AP div in the home page, name the AP div feature , create an appropri-
ate style for the AP div, and then add text that advertises this week's featured
coffee drink.
8. Save the pages and the style sheet, and then preview the pages in a browser, testing
the links and reading the content.
9. Upload the pages and the stylesheets folder to your remote server, and then preview
the pages in a browser.
10. Submit the fi nished fi les to your instructor.