Transcript Lecture_5 - Announcements

CSS - Quiz #4
Lecture Code: 472962
http://decal.aw-industries.com
Web Design:
Basic to Advanced Techniques
Today’s Agenda
 Quiz & Attendance
 Announcements
 CSS Position Demo
 Z-Index
 CSS / Photoshop Layouts – Part 2
 Finish Quiz & Attendance
 Lab
Web Design:
Basic to Advanced Techniques
Announcements
Web Design:
Basic to Advanced Techniques
MP2 Clarifications
 Headings <h1></h1> 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;
}
Web Design:
Basic to Advanced Techniques
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; }
later
 Common Values:
 positive integers
Web Design:
Basic to Advanced Techniques
default
default
earlier
100
99
99
100
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
Web Design:
Basic to Advanced Techniques
Review Positioning
 Please see demos
 Rearranging Facebook
 DIV Play
Web Design:
Basic to Advanced Techniques
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?
Web Design:
Basic to Advanced Techniques
right: -Xpx;
Web Design:
Basic to Advanced Techniques
Spring 2010
Tuesdays 7-8pm
200 Sutardja-Dai Hall
CSS/Photoshop Layouts – Part 2
Web Design:
Basic to Advanced Techniques
Where Are We?
1. Website Concept/Idea
First lecture
2. Photoshop Mockup of Layout
3. Layout to HTML
Not yet, but soon!
Prev. and this lecture
1. Identify DIVs
2. Code DIVs
4. CSS to Layout
Prev. lecture and this lecture
1. Positioning
2. Background Images
5. HTML and CSS content for Site
6. JavaScript, PHP, MySQL
7. Launch Site
First few lectures
Not yet.
Not yet.
So Far Only Solid Colors…
But we want this…
Web Design:
Basic to Advanced Techniques
Q: How do we get there?
A: Background-Images
 Where do we see them?
Most graphics
Logos
Gradients and toolbars
Backgrounds.. of course!
<img /> vs. background-image
 <img /> 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
Web Design:
Basic to Advanced Techniques
Applying Background-Image
 CSS Property: background-image
 Usage: div { background-image: url(/image.png); }
 Additional properties
 background-position
 background-repeat
Web Design:
Basic to Advanced Techniques
Background-Images in Practice
 Typically, not one giant image, but rather sub images
This gradient
also repeats
This gradient
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
<div class=“wrapper”>
<div class=“leftcap”></div>
<div class=“middle”>Projects</div>
<div class=“rightcap”></div>
</div>
.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…
Web Design:
Basic to Advanced Techniques
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
Web Design:
Basic to Advanced Techniques
Use Case for Images
Do we need transparency?
yes
no
Do we know the
background color of
the object we’ll place
our image on top of?
yes
GIF
Web Design:
Basic to Advanced Techniques
JPEG
no
PNG
Photoshop Layout to HTML/CSS
 Previously… we dissected our layouts into DIV’s
 Now… we dissect our DIV’s into images
Web Design:
Basic to Advanced Techniques
Save For Web in Photoshop
Web Design:
Basic to Advanced Techniques
Save For Web in Photoshop
…continued
Web Design:
Basic to Advanced Techniques
CSS - Quiz #4
Lecture Code: 472962
Then… Lab
http://decal.aw-industries.com
Web Design:
Basic to Advanced Techniques
Citation (websites in this lecture)
http://www.jwhanif.net/
http://www.ligatureloopandstem.com/
http://www.artua.com/
http://8interactive.com/
Web Design:
Basic to Advanced Techniques