47
Attach 3-D menus.................................................................................................................24
Save changes and test page...................................................................................................24
Two types of layouts: “Fixed-width” and “liquid”................................................. 25
Create a “fixed” layout..........................................................................................................25
Create a “liquid” layout ........................................................................................................26
Create a 3-column layout..................................................................................... 28
Familiarization exercise........................................................................................................28
Create a new template based on our previous work..............................................................28
Alter the markup (the structure) of the new template...........................................................28
Add new div elements, one for each column........................................................................28
Insert the “messagebox” div that will contain special announcements ................................28
Disable style rendering in Dreamweaver..............................................................................29
Get new text for page............................................................................................................29
Apply markup to the text ......................................................................................................29
Add photos to the section “Department in the News!”.........................................................29
Apply a style rule (called a “custom class”) to each image..................................................29
Create some “null links” for Column 3.................................................................................30
Add sub-menu items.............................................................................................................30
Apply links to each of the new list items..............................................................................30
Re-enable Style Rendering ...................................................................................................30
Update links to style sheets...................................................................................................30
Switch back to Design view..................................................................................................31
Save the template (File > Save or Ctrl+S) and close it.........................................................31
Create a new page from the template....................................................................................31
Preview the page in the browser...........................................................................................31
Review the 3-column exercise.............................................................................. 31
Appendix 1: Cascading Style Sheets ............................................... 32
What are cascading style sheets? ........................................................................ 32
CSS rules...............................................................................................................................32
Breaking it down.................................................................................................. 32
Anatomy of a rule.................................................................................................................32
Anatomy of a declaration......................................................................................................32
Grouping selectors and rules.................................................................................................33
Categories of CSS selectors.................................................................................. 34
Type selectors .......................................................................................................................34
Class selectors.......................................................................................................................34
ID selectors ...........................................................................................................................34
The Universal selector ..........................................................................................................34
Pseudo-elements ...................................................................................................................34
Pseudo-classes.......................................................................................................................34
Editing style sheets.............................................................................................. 35
The “cascade”...................................................................................................... 35
Creating a modern, standards-compliant website
Page 3 of 40
Last revised: 1/10/2007 6:25 PM
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education
(Grant # P333A050015).