CSS - Quiz #4 Lecture Code:

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

Announcements

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; }

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 earlier later

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

Review Positioning Please see demos Rearranging Facebook DIV Play

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;

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

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.

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

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

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

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

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

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); }

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…

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

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

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

Save For Web in Photoshop

Save For Web in Photoshop …continued

CSS - Quiz #4 Lecture Code: Then… Lab

Citation (websites in this lecture)