1 / 37

Quiz #3 - CSS Lecture Code: 544698 Get Neighbors’ URLs for MP1

Quiz #3 - CSS Lecture Code: 544698 Get Neighbors’ URLs for MP1. http://fa10.decal.aw-industries.com. 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

bryony
Download Presentation

Quiz #3 - CSS Lecture Code: 544698 Get Neighbors’ URLs for MP1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Quiz #3 - CSSLecture Code: 544698Get 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 </tag> • 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: <div></div> • 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. 2. • solid • dotted • dashed • double • groove • ridge • inset • outset 3. 1. p { border: 3px solid #000000; } 2. p { border: 3px dashed #000000; } 3. p { border: 3px dotted #000000; }

  5. Margins and Padding? <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> <p>Paragraph One</p> <p id=“two”>Paragraph Two</p> </body> </html> p{ background-color: red; margin: 0; } p#two{ background-color: blue; } p{ background-color: red; } 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 margin Div_2 padding

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

  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 Inspiration Choose a Layout Style Photoshop Mockup Slicing and Dicing Mockup (HTML & CSS)

  12. Layouts?... Choose a Layout o_0 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? 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 header menu navigation heading main content slideshow / images sub- content images footer

  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-StepFrom Mockup to HTML and CSS • Identify your site’s different components. • Create a <div> that corresponds to each component. (Outside -> Inside, Top -> Bottom, Left -> Right) • Working from the outside in, translate each component into HTML. (Outside -> Inside, Top -> Bottom, Left -> Right) • Apply CSS. <div id=“page”></div> <div id=“page”> <div id=“menu”></div> <div id=“content”></div> </div> <div id=“page”> <div id=“menu”> <ul> <li><a></a></li> </ul> </div> <div id=“content”></div> </div>

  20. <div> Element • <div>’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 <div id=“menu”> <h3>Menu</h3> <a></a> <a></a> <a></a> <a></a> <a></a> </div> <h3>Menu</h3> <a></a> <a></a> <a></a> <a></a> <a></a> <a>print story</a> <h1>News Story</h1> <p> <a></a> </p> <div id=“newsStory”> <a>print story</a> <h1>News Story</h1> <p> <a></a> </p> </div>

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

  23. Mockup -> HTML & CSS Example2. Corresponding <div>’s(Outside -> Inside, Top -> Bottom, Left -> Right) … <body> <div> <div id=“sidebar”> <div id=“menu”></div> <div id=“search”></div> </div> <div id=“content”> <div id=“header”></div> <div id=“entries”></div> </div> </div> </body> … <div> <div id=“sidebar”> <div id=“menu”></div> <div id=“search”></div> </div> <div id=“content”> <div id=“header”></div> <div id=“entries”></div> </div> </div> http://cargocollective.com/

  24. Mockup -> HTML & CSS Example3. Translate Each Component(Outside -> Inside, Top -> Bottom, Left -> Right) … <div id=“sidebar”> <div id=“menu”> <ul> <li><a href=“…”>In your network</a></li> <li><a href=“…”>Featured websites</a></li> <li><a href=“…”>Featured projects</a></li> </ul> </div> <div id=“search”> <form action=“…”> <p><input type=“text” /><input type=“submit” value=“search”/></p> <p><input id=“prj” type=“radio” /><label for=“prj”>Projects</label><input id=“ppl” type=“radio” /><label for=“ppl”>People</label</p> </form> </div> </div> … <ul> <li><a href=“…”>In your network</a></li> <li><a href=“…”>Featured websites</a></li> <li><a href=“…”>Featured projects</a></li> </ul> http://cargocollective.com/

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

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

  27. CSS Properties: height, width • Can only be set on block level elements and a few inline elements such as <img /> • 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. CSS Properties: height, width …continued width: 100%; width: 100px; width: 100px; width: 100%; height: 100%; height: 100px; height: 100px; height: 100%; height: 100px; height: auto; width: 100px; width: auto;

  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 code: <span>A</span><div>B</div><span>C</span> div { position: static; } div { position: relative; } div { position: absolute; } or div { position: fixed; } span: “A” span: “A” span: “A” span: “C” div: “B” div: “B” div: “B” span: “C” span: “C”

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

  33. absolute References code: <div id=“A”><div id=“B”></div></div> top: 0px; left: 0px; top: 0px; left: 0px; A A B B 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 - CSSLecture Code: 544698Then… Lab http://fa10.decal.aw-industries.com

More Related