 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate

 Pictures  Backgrounds  Link displays  List markers

 Your own  Publicly available › Flickr and the Creative Commons Flickr › Google and labeled for reuse Google  IMPORTANT TO ASSURE NO COPYRIGHT INFRINGEMENT

caption

 Default: window size › Advantage: grows and shrinks easily › Disadvantage: harder to design  Making body fixed width › Advantage: easier to control › Disadvantage: scroll bars and unused space  Using fixed width section in default body › Combines advantage of fixed width without scroll bar › Allows complex backgrounds

 Body background › Need to assure readability › Simple images (see resources) › For busier images: use overlay  Use div or section or …  Opacity (0 to 1) to let it show through › Background-image  Background-size  Background-repeat

 Three possible models › NEXT and PREV (when fixed order) › Navigation bar to the parts › Single page with links (hub & spokes)  When use?  Mix and match? Multiple ways?

 Link to the exact spot › Heading, not paragraph › Top of the page  Make it easy to get to the navigation (top)  TOO MUCH NAVIGATION IS AS BAD AS NONE!  NEVER DEPEND ON BROWSER BACK BUTTON

 Consistent placement  Top, bottom, both  Often at the left and right edges  Next class  Structurally keep them together  Text  Images

 IDENTICAL CONTENT ON ALL PAGES › May want to distinguish current page  Horizontal or Vertical  Horizontal best practice › separate section: nav › inline list › top (below title) or top and bottom  Vertical two styles › Table of contents › Side bar (next week)  Better for long lists  Takes width

 Should you distinguish?  Two different bars › Horizontal (site) and vertical (page) › Color, size, font differentiation

 Remove bullets from list li { list-style-type: none; }  Make the list horizontal li { display: inline; }  Position where you want it (left, right, center, top, bottom)

 Format the individual link boxes li { border: 1px solid black; padding: 10px; margin: 0px 1px 0px 1 px; }  Padding will space within box, margin between boxes › May want to make it negative  Size of box › Vertical: line-height › Horizontal: based on text or define width

 Focus on layout  Simple is best  Basic parts › Header › Nav(igation) – may be in header › Section or div for main body › Footer

 Recommendation › Keep nav bar code the same on all pages › Simple copy and paste  This page: › Can use href=“#” or disable link › But then have to remember to change it  Exception: › If you want to format this page differently

 Margins  Positions  Heights

 How wide should your elements be? › Consistency › Enough white space  People have spent time working on it › 978 model 978 model  Example Example