Design Page with Dreamweaver CS3 Layouts
Dreamweaver has many CSS layouts which help contstruct pages. Select a CSS Layout. In this case we used a thee-column hybrid layout. Note that the entire web page layout is designed in divisions. We also need to add a little more text here to make the "floatright" pictures line up properly. The <img src="" class="fltrt" />
The design comes with its own Internal cascading style sheet. The internal CSS is stored in the Header of the document. These CSS styles have to be moved to an external style sheet to be consistent with 508 accessibility rules applicable to the college. See page 209 of your textbook for moving Internal Styles to an External style sheet. The process has been improved in Dreamweaver CS3. We then gave the new external style sheet the same name as the file, i.e., three_col_hybrid_mc_sp08.css. We place sufficient text in this paragraph to scroll around the picture so the "floatright" pictures display effectively.
We then marked up this style sheet to get it to look how we wanted the page to look. We changed the background colors in the columns, and reduced the type size from 100% to 80%, to be more consistent with the current Montgomery College type size. We continued to use Verdana as the primary font (the college uses Arial) but this could easily be changed.
Spry Widgets
We then added a Horizontal Navbar division to hold the spry widget navigation lists. We'll teach you how to add a new division and give it a style in class. Then we'll show you how to add the Spry Widget horizontal menu bar, and mark up the accompanying styles of the Widget to conform to the styles of your page.