Understanding and Defining Web Page Layout Chapter 21

Understand Layout on the Web Define the content area Header, navigation, content, footer Add <div>s, <span>s as structural "hooks" Note use of <div class="page"> to set width Here he uses float: and widths in %. Don't forget to set a width if you use float:

Navigation Considerations Do Be consistent Let visitors know where they are and how they got there Show and tell if the navigation is vague. Give the visitor control and flexibility Give the visitors somewhere to go Don’t Waste space with navigation Lose the navigation Confuse navigation types Rely on the browser’s controls for navigation Don’t put every link on every page.

Links and navigation Note use of text-decoration: none; and border-bottom: 2px dotted #f99; Decision to use descendant selector #nav a {} Can style table {} if you have one, and now add tr:hover {}

Forms Sort of a given now that your form elements are styled with CSS (for final project) Try input.classname {} select.classname {} See simple script to erase instructions in the fields (3-line script, p. 472)

Frames If you ever need them, there's a trick here to clear the border frameborder = "no" (add this to frameset on p. 478 then add a frame image instead background: white url(pattern.gif) repeat-y)