3.  Add one element at a time  If it doesn’t do what you want, › Delete it › DON’T just keep piling on more items

4.  Good for general questions, › NOT for debugging your work  Very hard to guess what else you have (or don’t have) in your CSS  And please don’t post a lot of code

5.  Revisions and saving  SAVE  UPDATE  SET AS BASE  But Komodo gives you more hints to help

6.  No regrades. Period. › We will fix errors in grading, but NO reworking  No lates until after the first exam.  Labs › Do not ask for help on labs before we start working on them › Only grading of labs outside of class are excused absence or our mistakes  Switching to single form

8.  Word doc for you to download › Link at the beginning of class › 7 Questions. Drop low  Answers to be added inline  Post to Sakai when completed  SAVE TO YOUR DESKTOP OFTEN

9.  Just what you have already been doing › Writing and correcting HTML and CSS  Objective: to see if you can do the tasks in a limited time on your own  Open computer and notes › You can use any tools at your disposal (except chat)

10.  When class begins have ready › jsFiddle › Komodo › Link to validators  How to proceed › Build your answer in one of the tools › Validate it › Copy and paste into test

13.  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?

14.  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

15.  Consistent placement  Top, bottom, both  Often at the left and right edges  Next week  Structurally keep them together NAV  Text  Images  Also next week

16.  IDENTICAL CONTENT ON ALL PAGES › May want to distinguish current page visually › Do not recommend using #, use page name  Horizontal or Vertical  Horizontal › separate section: nav › inline list › Bottom (repeat)  Vertical two styles › Table of contents › Side bar (next week)  Better for long lists  Takes width

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

19.  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)

20.  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

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

23.  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 › Less problematic if you format “this page” differently

24.  Margins  Positions  Heights

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