1. CSS - Quiz #4 Lecture Code: 472962 http://decal.aw-industries.com

2. Today’s Agenda Quiz & Attendance Announcements CSS Position Demo Z-Index CSS / Photoshop Layouts – Part 2 Finish Quiz & Attendance Lab

3. Announcements

4. MP2 Clarifications Headings already bold font-weight: normal; sets to default font-weight: bold; doesn’t do anything, since already bold text-align: right; Not: text-align: right justified; CSS Parse Terminates on Errors CSS Code Style Convention with multiple rules div { font-weight: bold; text-align: left; }

5. CSS Property: z-index Higher numbers stack on top of lower numbers. Object must have position set to relative, absolute, or fixed. If not set, later elements have higher z-index’s that earlier ones. Example: div { position: absolute; z-index: 100; } Common Values: positive integers default 99 100 earlier later 99 100

6. Review Positioning 4 Types of Positioning Static: Default Relative: Offsets relative to static position Absolute: Offsets relative to closest parent who has position set, otherwise relative to document bounds Fixed: Offsets relative to browser window Absolute and Fixed take up no space

7. Review Positioning Please see demos Rearranging Facebook DIV Play

8. Negative Values Negative Values give us even more control Can be applied to Positioning Offsets top, left, right, bottom margins What effect does a negative margin have? right: -Xpx;

9. Web Design: Basic to Advanced Techniques Spring 2010 Tuesdays 7-8pm 200 Sutardja-Dai Hall CSS/Photoshop Layouts – Part 2

10. Where Are We? 1. Website Concept/Idea 2. Photoshop Mockup of Layout 3. Layout to HTML 1. Identify DIVs 2. Code DIVs 4. CSS to Layout 1. Positioning 2. Background Images 5. HTML and CSS content for Site 6. JavaScript, PHP, MySQL 7. Launch Site First lecture Not yet, but soon! Prev. and this lecture Prev. lecture and this lecture First few lectures Not yet.

11. So Far Only Solid Colors… But we want this… Q: How do we get there?

12. A: Background-Images Where do we see them? Gradients and toolbarsLogos Backgrounds.. of course!Most graphics

13. vs. background-image tags for instances where the content is the image itself For Example: Profile Pictures Images in a Gallery Background-image for instances where the image is part of the presentation structure For Example: Menu Buttons and Bars Site background Splash pages Container styling

14. Applying Background-Image CSS Property: background-image Usage: div { background-image: url(/image.png); } Additional properties background-position background-repeat

15. Background-Images in Practice Typically, not one giant image, but rather sub images This gradient repeats This gradient also repeats Multiple Instances of icon Triangles can’t be made from pure HTML and CSS, must be an image Gradient changes

16. Background Tiling (-repeat) Opportunities to optimize code Allows variable length of contents Left cap Middle tile Right cap Projects.wrapper { width: auto; }.leftcap { width: 5px; background-image: url(leftcap.gif); }.middle { width: auto; background-image: url(middle.gif); background-repeat: repeat-x; }.rightcap { width: 5px; background-image: url(rightcap.gif); }

17. Image Types.jpg,.gif,.png JPEG – 16.7M Colors Medium size, medium quality, no transparency GIF – 256 Colors Smaller size, lower quality, transparency, animation PNG – 16.7M Colors Largest size, best quality, transparency Tradeoffs…

18. Not All Transparencies are Equal Please see demo PNG-24, GIF matted white, JPG quality 5 PNG is true transparency under all conditions GIF is transparent if we know the background color it will be placed over JPG is not transparent For basic images PNGs can be small! 28k for PNG, 48k for GIF, 108k for JPG

19. Use Case for Images Do we need transparency? JPEG Do we know the background color of the object we’ll place our image on top of? GIFPNG yesno yesno

20. Photoshop Layout to HTML/CSS Previously… we dissected our layouts into DIV’s Now… we dissect our DIV’s into images

21. Save For Web in Photoshop

22. Save For Web in Photoshop …continued

23. CSS - Quiz #4 Lecture Code: 472962 Then… Lab http://decal.aw-industries.com

24. Citation (websites in this lecture) http://www.jwhanif.net/ http://www.ligatureloopandstem.com/ http://www.artua.com/ http://8interactive.com/