1. Section led by Ivan Lee Reachable at ivan period lee at cs period stanford period edu 1

2. Mac:  TextEdit  DashCode  Komodo Edit  TextMate  Coda (editor + FTP + Terminal + CSS editor) Windows:  Notepad  Notepad++ (!!)  Adobe Dreamweaver  Microsoft Expression Web Note: do NOT be using WYSIWYG functionality – we can tell! Many of the above editors are good for auto-complete though 2

3.  w3schools.com  Firebug  PixelPerfect Class  http://www.piazzza.com/stanford/cs142 http://www.piazzza.com/stanford/cs142 Misc: kuler.adobe.com 3

4. Unicorns woooooot 4

5.  http://validator.w3.org/ 5

6. 6 Source: http://www.iis.sinica.edu.tw/~trc/public/courses/Spring2007/week6/boxdim.png

7.  7  Table  Must have row to have a col  Can have multiple cols/row  Content generally goes in cols  But every tag can have a class  Remember to close tags 

8.  Important attributes to remember:  border-spacing  width (remember the different units)  Pay attention to the border, padding, and margin for the table, tr, and td  Note: tr border, padding, margin does not work td margin does not work 8

9. 9

10.  a:link  a:visited  a:hover  a:active  a:focus  cursor: default | auto | crosshair | text | help… 10

11.  div:  Logical divisions within your web page  Can divide it up into sections with their own attributes  Can have own class  Covers entire horizontal width of parent, with line break before and after  span:  Just like a div, but without the line break  Doesn’t do any formatting on its own  Formatting applies within the line 11

12.  display:none – as if the object were not there at all, not merely invisible  display:block – the element will be displayed as a block-level element, with a line break before and after the element  display:inline – the element will be displayed as an inline element, with no line break before or after the element  visibility:none – object just becomes invisible 12

13. 13

14.  padding-top: 10px;  padding-right: 12px;  padding-bottom: 5px;  padding-left: 100px; =  padding: 10px 12px 5px 100px; 14

15.  Table method:  %  px  em  ex  in  cm  mm  pt  pc 15  UL method:  Relative vs. absolute positioning

16. Part 1:  Figure out what’s required by HTML in both  Then work on CSS and hiding what’s superfluous in each Part 2:  Introduction to images on web pages  (hint: use background images) Part 3:  No need to validate  Easy Peasy 16

17.  1.. Create content first - HTML  2.. Begin styling - CSS  3.. Test - Firebug/PixelPerfect  4.. Repeat ...  5.. Validate  6.. Success! 17

18. 18