Unit G: Using CSS for Page Layout
Understanding CSS Layouts


Divs vs Tables for layout
o Divs let you place content anywhere on the page
o Dreamweaver offers CSS page layouts
AP Divs
o AP divs are absolutely positioned
o They can be stacked on top of each other to create animations and other effects.
o Can be used to show or hide content on the page by using them with Javascript to create dynamic
content.
Creating a Page Using CSS Layouts




Open Striped Umbrella website
File -> New blank page, HTML, 1 column fixed centered header and footer
In CSS Styles panel, Attach Style Sheet -> su_styles.css -> attach as link
In CSS Styles panel, All -> expand both <style> and su_styles.css sheets
Adding Content to Divs










Open Striped Umbrella page.
Select the three paragraphs and all contact information.
Copy
Paste it in the new page, replacing the content between header & footer.
Index page -> copy copywight & last updated information -> paste in footer of new page.
Index page -> copy banner -> paste in header of new page (in place of logo placeholder).
Index page -> copy menu bar -> paste under banner, in header -> then insert paragraph break after.
Close index.html
Save new page as index.html (overwrite original index).
Make sure these 2 lines are in the header (copy from activities.html):
o <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
o <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
Editing Content in Divs







Now you have two style sheets
Select text in second paragraph.
Change Class to none.
Notice that the font is different from the other paragraphs.
Select text in second paragraph and change class to body_text.
Click <div.content> tag in Tag selector.
Move cursor over one of the paragraphs to show tooltip.

Save the page.
Editing CSS Layout Properties









Click .header in CSS Styles panel.
o Note the properties panel below it.
o Click to select background color and type #FFF -> then click somewhere else.
Change Footer background to white.
Change Body background to white.
.container -> Edit Rule -> border
o Make a solid border
o Thin
o Color -> #003
Change Title to The Striped Umbrella Beach Resort and Spa, Ft. Eugene, Florida.
Save page.
Preview in browser.
Click .header in CSS Styles panel -> Box -> padding same for all -> type 5 in Top Padding -> click OK.
Preview in browser.
Inserting an AP Div



About AP Divs:
o AP Divs have a fixed position.
o AP divs can be stacked on top of each other.
View -> Rulers -> drag guide down to 500 pixel mark.
Insert panel -> Layout -> Draw AP div -> 300px wide, 130px tall.
o Move it to the right of the contact information.
o Name it contest.
o Change Overflow to auto.
o Change Vis to visible.

Positioning and Sizing an AP Div



Code View -> select <div id=”contest”></div> and cut it.
o Locate <div class=”container”>.
o Paste <div id=”contest”></div>.
o Notice that the div stays in the same place.
o Design View -> .container -> change position to Relative.
Select AP div -> change L value to 420px.
o Change T value to 467px.
o Change W value to 200px.
o Change H to 175px.
Experiment with z-index.
Adding Content to an AP Div



Select the AP div -> browse for file -> go to Unit G data files -> Assets -> contestants_bak.jpg.
Contest rule -> edit styles
o Font-family: Arial, etc.
o Font-size: small
o Font-weight: bold
o Color: #006
o Apply
o Block -> Text-align -> center.
Save, Preview in browser.
Using the AP Elements Panel





AP Elements panel lists all AP divs in order of their z-index.
When you select an AP div in the panel, it is selected on the page also.
Visibility: open eye means “visible”, closed eye means “invisible”.
Change stacking order by moving AP divs up or down in panel.
Nested divs move with the parent div.