Class Info
Instructor: Laurence Liss
email:
email for homework:
Class Web site: www.laurenceliss.com/sfcc/css
Phone: 215-397-3964
Class Info
Examples
List Style Menu - Week 2
- List Styles Example (zip)
- Solution Method 1 (good for templates)
- Solution Method 2 (simpler)
Text Replacement - Week 3
- Text Replacement Example (zip)
- Solution Method 1 (simpler)
- Solution Method 2 (more versatile
- Article - 9 Methods for Image Replacement
Pop-Up Tool Tips - Week 4
- Tool-tip Pop-up (start)
- Solution (zip)
- Another Solution (This one is great, the bubbles actually expand to the content. It requires more code and a couple extra <span> tags but it's pretty effective. The one thing it won't allow is for links in the tool-tip because it applies the tool-tip to an <a> tag so of course you can't have a link within a link. But it works in IE6 and above!)
Wide Screen Layouts - Week 5
- Wide Layout (start)
- Wide Layout Solution (pay special attention to this and make sure you can recreate it. It may come up around the MIDDLE OF THE SEMESTER, wink, wink) If you want another simple example of a wide screen layout take a look at this very page...
- Reset Style Sheet (Thanks to Eric Meyer)
Some Crazy Text Stuff - Week 6
- Crazy Text Stuff (start)
- Crazy Text Solution - I'll credit this technique to this article though it's possible someone else came up with it first. But if you want to get even more details and examples it's very cool thing to read.
- That Crazy Silverback App Effect - The designer posted an excellent explanation of this. It's well work a read.
- Font Stacks!
Some Crazy Text Stuff - Week 7
- Images and Navigation (start)
- Cool Rollover Nav with 3 state image
- Give the Presidents Mustaches
- Give the Presidents Mustaches with a single image
- The second of the methods to give the presidents mustaches is good because it only requires one image to be downloaded so it will be faster and will not cause any flashing or loading delays. It's a little bit tricky but it's very cool and I'm sure you can find more practical uses for it than my example.
Midterm - Week 8
- Midterm Assignment (start)
- My Original Midterm Solution
- Midterm Solution we build together in class
- Student Solution 1(A fine example from one of your classmates)
- Student Solution 2 (Another method used by one of your classmates)
CSS Drop Downs - Week 10
Wrapping Text - Week 11
- Wrapping text (start)
- Wrapping text (solution) Notice the difference beween index.html and index2.html (index2 has conditional style rules added to it)
- IE specific comments
- Full spec on conditional comments from Microsoft
Styling Forms - Week 12
Frames and Rounded Corners- Week 13
- Frames on images
- Rounded Corners with CSS (start)
- Rounded Corners with CSS (solution)
Final Project
The final project will be a one page (please ONLY ONE page) website on one of the following topics:
- NASA
- French Cooking
- The Pacific Crest Trail
- Orchids
- History of New Mexico
- The Great Barrier Reef
- Samurai
- Monet
- Venice
- South American Wines
You should be as creative as possible and make the most compelling design possible. It's a very good idea to create your design first and then build it. Use Fireworks, Photoshop, Illustrator or whichever graphics program you prefer to make your design.
An A+ project will have an HTML page which validates, CSS in a separate CSS page, and use elements from at least three of the exercises we have covered in class. It will also have been tested and be functional in ALL BROWSERS. That doesn't mean it needs to the the same in all browsers but it must work and look intentional. An A+ project will also use HTML intelligently so that if a user were to have CSS disabled, the general feel and flow of the page would still be coherent.
You are encouraged to make the most compelling design possible and use the strongest images and graphics you can find. To find some images for use ONLY IN ACADEMIC PROJECTS check out ArtStor (look for the ArtStor link under "databases" and log in with your SFCC Jack info).
The Texts
Head First HTML with XHTML & CSS
by Elisabeth Freeman and Eric Freeman
O'Reilly Media
ISBN: 0-596-10197-X
CSS Pocket Reference
by Eric Meyer
O'Reilly Media
ISBN-10: 0596515057
ISBN-13: 978-0596515058
HTML and XHTML Pocket Reference
by Jennifer Niederst Robbins
O'Reilly Media
ISBN-10: 0596527276
ISBN-13: 978-0596527273