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

Case Problem 3

Use divs to
create the page
structure, create
and edit styles,
and duplicate
pages for a Web
site for a life
coach.

Data Files needed for this Case Problem: tess.docx

Success With Tess With the plan and design for the Success With Tess site approved,
you're ready to create the pages of the site. Tess has already written the text for the pages,
although you can edit and enhance that content to achieve the site goals. For now, Tess's
contact information is a telephone number, which you will use as the sole avenue to
drive business to Tess until she obtains her new e-mail address. You need to move the
existing styles to an external style sheet, and then edit the existing CSS styles and create
new styles. You will create the other pages for the site, and then add and format the text
on those pages.

1. Open the Success With Tess site you created in Tutorial 3, Case 3, and then open the
index.html page in Design view.
2. Select the body tag in the status bar, and then insert a div tag that wraps around the
body tag.
3. Create a new CSS rule for the div using ID as the selector type, #container as the
selector name, and defi ned in the tess_styles.css style sheet. In the Background cate-
gory, set the background color to #FFF. In the Box category, set the width to 750px, set
the top margin to 0, and then set the right and left margins to auto. In the Border cat-
egory, create a border that has a solid style, a thin width, and a line color of #FFA011.
4. Inside the container div, create a header div with a height of 150px, place the logo
text inside the header, and then delete the placeholder text. ( Hint : When you select
the text, select the h1 tag in the status bar to ensure that the h1 tags surrounding the
logo text move with the text.)
5. Create a content div after the div #header that has 5px margins to separate the text
from the outside border of the container div, move the content into the content div,
and then delete the placeholder text.
6. In Design view, select the content div, switch to Code view to see that everything in
the div tag is highlighted in blue, including the opening and closing div tags. This is
one method for locating a closing div tag if you have not added comments to distin-
guish one closing div tag from another.
7. In Design view, create a logo div inside the header div that has a white background
color and solid, thin, color #06C borders. Float the logo div right, set the left, right,
and bottom margins to 15px, set the top margin to 5px, set the padding to 5px, and
then center align text in the div.
8. Move the logo text into the logo div, move the insertion point before Call and press
the Enter key to move the text to another line, and then delete the placeholder text.
9. Create a footer div outside of the container div, set the text color to #FFF, set text-
align to center, set the width to 750, set the top margin to 0, set the right and left
margins to auto.
10. Select the existing body style, and change the background color to #06C.
11. Select the existing h2 style, and change the color to #06C then delete the place-
holder text in the footer div. Enter the following content into footer div: © Tess, 2012
12. Save the page and the style sheet, preview the page in a browser, and then close the
browser.
13. Duplicate the home page to create the other pages of the site, and then rename the
duplicated pages with the fi lenames you used when you created the links for the
navigation text.