1. Quiz #3 - CSS Lecture Code: 544698 Get Neighbors’ URLs for MP1 http://fa10.decal.aw-industries.com

2. Announcements Mini-Project 1 due Tonight before 11:59pm Linking to a neighbors’ sites Any questions? Submission (.txt file and upload to FTP) Enrollment should be Finalized Previous lecture slides had some small typos in closing tags Missing / in Corrected Spring 2010 material as reference http://sp10.decal.aw-industries.com Need help? Office hours by request Email, after class

3. Today’s Agenda CSS Properties: Margin, Padding, Border, and CSS Selector: a:hover Where are we in the material? Building a Web 2.0 Website Layouts HTML Element: From Mockup to HTML and CSS CSS Properties: Width, Height, Position Worksheet Lab

4. CSS Property: border Example: div { border: 1px solid #000000; } div { border-top: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; } Common Values: Border width: 1px Border style: solid Border color: #000000 1. p { border: 3px solid #000000; } 2. p { border: 3px dashed #000000; } 3. p { border: 3px dotted #000000; } solid dotted dashed double groove ridge inset outset 1. 2. 3.

5. Margins and Padding? Paragraph One Paragraph Two p{ background-color: red; } p#two{ background-color: blue; } p{ background-color: red; margin: 0; } p#two{ background-color: blue; }

6. CSS Properties: margin, padding Margin: space between this object and others Padding: space between the object’s border and contents Example: div { margin: 5px 10px; } div { margin: 5px 10px 5px 10px; } Order: top, right, bottom, left div { margin-top: 5px; margin-bottom: 5px; margin-left: 10px; margin-right: 10px; } Padding has same syntax Common Values: Pixels: 10px Div_1 Div_2 margin padding

7. CSS Selector: a:hover a { } Selects all links on the page. CSS Selectors a:hover { background-color: … color: … } Style affected by a:hover in CSS Tooltip affected by in HTML a:hover {} Also selects all links on the page but specifies a set of styles only for the hover state.

8. Material So Far… HTML and CSS Purpose and Capabilities Syntax Tags / Properties How to Use Built a HTML5 standards compliant website (by tonight) Q: Are we done?

9. What’s to Come… Dissect existing sites and mockups into HTML and CSS components Use background images to spice up our websites Use CSS positioning to create modular and non-linear layouts A: Not yet… …of course Javascript, PHP, and MySQL Still to come http://www.jwhanif.net/

10. That’s More Like It… http://cssremix.com

11. Building a Web 2.0 Website 1.Inspiration 2.Choose a Layout Style 3.Photoshop Mockup 4.Slicing and Dicing Mockup (HTML & CSS)

12. Choose a Layout Q: What do we mean by “layout”? Q: How many different types of layouts are there? Q: What makes a good layout? Q: How do we go about building our layout? Layouts?... o_0 A: The placement and interaction of your site’s components. A: Infinitely many… but some are more common and better than others. A: Think about: consistency, ease of use, form following function. Then iterate. A: Stay tuned…

13. Components menu slideshow / images heading images header main content footer navigation sub- content

14. Differing Layouts http://www.vreplay.com/

15. http://inspiredology.com/

16. http://www.richbrown.info/

17. http://crushlovely.com/

18. Skip Photoshop for Now Insert “How to create a website mockup in Photoshop” here.

19. Step-by-Step From Mockup to HTML and CSS 1. Identify your site’s different components. 2. Create a that corresponds to each component. (Outside -> Inside, Top -> Bottom, Left -> Right) 3. Working from the outside in, translate each component into HTML. (Outside -> Inside, Top -> Bottom, Left -> Right) 4. Apply CSS.

20. Element ’s are our general layout building blocks/containers Used to logically group HTML elements Separate regions of code into functional regions “these HTML elements make up the menu system” Like span’s they typically have no visual effect on our HTML documents by themselves span’s are inline elements div’s are block elements What happens when we wrap a set of elements in div tags?

21. div Element …continued Menu print story News Story Menu print story News Story

22. Mockup -> HTML & CSS Example 1. Identify Components http://cargocollective.com/

23. Mockup -> HTML & CSS Example 2. Corresponding ’s (Outside -> Inside, Top -> Bottom, Left -> Right) http://cargocollective.com/ … …

24. Mockup -> HTML & CSS Example 3. Translate Each Component (Outside -> Inside, Top -> Bottom, Left -> Right) http://cargocollective.com/ … In your network Featured websites Featured projects Projects People … In your network Featured websites Featured projects

25. Mockup -> HTML & CSS Example HTML Completed embargo.zip > index.html

26. Mockup -> HTML & CSS Example Oops… Layout Totally Wrong? Nothing more CSS can’t fix Q: What happened? A: ’s are block level and naturally appear on their own line

27. CSS Properties: height, width Can only be set on block level elements and a few inline elements such as Example: div { width: 100px; height: 100px; } div { width: 100%; height: 100%; } Common Values: Pixels: 20px Percentage of parent: 100% Not set/auto: width of contents height: 100px; width: 100px;

28. height: 100px; width: 100px; CSS Properties: height, width …continued height: 100px; width: 100px; height: 100%; width: 100%; height: 100%; height: auto; width: auto; width: 100px; height: 100px;

29. CSS Properties: position Example: div { position: absolute; } Common Values: absolute Relative to closest parent who has its position set. If no parent qualifies, relative to document boundaries. Removes object from flow of document. Object takes up no space. relative Relative to the objects natural location. fixed Relative to browser window’s boundaries. Removes object from flow of document. Object takes up no space. static Don’t typically use this because it is already the default behavior.

30. CSS Properties: top/bottom, left/right Used in conjunction with position Example: div { position: absolute; top: 0px; left: 0px; } Common Values: Pixels: 10px

31. position Document Flow A B C code: div { position: static; }div { position: relative; }div { position: absolute; } span: “A” div: “B” span: “C” span: “A” div: “B” span: “C” span: “A” div: “B” span: “C” or div { position: fixed; }

32. top & left Effects div { position: static; top: 10px; left: 10px; } span: “A” div: “B” span: “C” span: “A” div: “B” span: “C” span: “A” div: “B” span: “C” div { position: relative; top: 10px; left: 10px; } div { position: absolute; top: 10px; left: 10px; } div: “B” top: 0px; left: 0px; 10px

33. absolute References top: 0px; left: 0px; A B A B code: div { position: absolute; top: 10px; left: 10px; } div { position: absolute; } #A { top: 10px; left: 10px; } #B { bottom: 10px; right: 10px; }

34. absolute vs. fixed Please see included absolute_vs_fixed.html file for demo

35. Positioning Worksheet positioning worksheet.pdf

36. How Do We Fix This? #sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 200px; } #content { position: absolute; top: 0; left: 200px; height: 100%; width: 800px; }

37. Quiz #3 - CSS Lecture Code: 544698 Then… Lab http://fa10.decal.aw-industries.com