Presentation is loading. Please wait.

Presentation is loading. Please wait.

Original Slides by Ivan Lee Updated for 2012 by Jason Chen, Madiha Mubin, RJ Yates 1.

Similar presentations


Presentation on theme: "Original Slides by Ivan Lee Updated for 2012 by Jason Chen, Madiha Mubin, RJ Yates 1."— Presentation transcript:

1 Original Slides by Ivan Lee Updated for 2012 by Jason Chen, Madiha Mubin, RJ Yates 1

2 Mac:  TextEdit  TextMate  Coda (editor + FTP + Terminal + CSS editor) Windows:  Notepad  Notepad++ Linux:  Vi  Emacs Note: do NOT be using WYSIWYG functionality – we can tell! Many of the above editors are good for auto-complete though 2

3 Class   w3schools.com  Google Chrome Inspector  Firebug  PixelPerfect - Misc:  Color Palettes: kuler.adobe.comkuler.adobe.com 3

4  Ids are unique  Id attribute: #p20, Example:  Classes can be used multiple time in the same document.  Class attribute:.large, Example:  “There are not any major advantages of IDs over classes”  Browser will display multiple ids. 4

5  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 5

6   ▪ …  ▪ …   …  6  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

7  Important attributes to remember:  cellspacing=“ O ”  border-spacing  width (remember the different units)  Pay attention to the border, padding, and margin for the table, tr, and td ▪ Notes - For ‘tr’: border, padding, margin does not work. For ‘td’: margin does not work. 7

8 8 Source:

9  a:link  a:visited  a:hover  a:active  a:focus  cursor: default | auto | crosshair | text | help… 9

10  What color do you see on hover?  body { color: black; }  a { color: green; }  a:hover { color: red; } 10

11 11

12  visibility:hidden – object just becomes invisible  display:none – as if the object were not there at all  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 12

13  Two paragraphs  How do we make the background color of the second paragraph purple?  How do we make the first paragraph invisible?  How do we make the first paragraph as if it weren’t there? 13

14 14

15  padding-top: 10px;  padding-right: 12px;  padding-bottom: 5px;  padding-left: 100px; =  padding: 10px 12px 5px 100px; 15

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 Unicorns woooooot 17

18  _upload _upload  XHTML 1.0 Strict  validator/#validate_by_upload validator/#validate_by_upload  CSS level 2. CSS level 3 is OK, but all parts are doable with CSS2 which is prefered. 18

19  Three things wrong with this example.  Can you figure out what they are? 19

20 20

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

22 22

23 23

24 24


Download ppt "Original Slides by Ivan Lee Updated for 2012 by Jason Chen, Madiha Mubin, RJ Yates 1."

Similar presentations


Ads by Google