Week 5
Monday * Jan. 31
Layout and positioning in CSS; the Box Model.
- LAB In-class exercises to demonstrate margin and padding conflicts; absolute positioning.
- LECTURE 1 Web site planning; use of wireframes.
- LECTURE 2 Examples of recent news packages that use Flash.
DUE 9 a.m. Monday (via e-mail): Exercise 4
READ Cederholm, Chapters 3 and 8
Make sure you understand how padding and margins differ before you come to class today. Pay attention to the browser issues.
EXAMINE 40 Creative Design Layouts
Review points from Cederholm for this week:
- What's wrong with setting a fixed height for a box or DIV in your CSS?
- How should you handle "nonessential graphics"? This includes their positioning as well as the general principle.
- What does Cederholm do in the HTML to get his rounded-corners images to work on the top and the bottom?
- What are "opposing floats," and why would you use them?
- Understand the difference between the "fluid" and "elastic" methods for page layout. In particular, Cederholm makes a very good point about absolute positioning and footers.
- Understand gutters and padding. (There is a relationship.)
- Know which of the layout methods in Chapter 8 is preferred.
Notes * * *
For your Portfolio, you will need to create at least two different page layouts -- usually the home page has a different appearance than the interior pages. You might decide to have more than two layouts (although your navigation must be consistent throughout). Regardless, it's important that you get the hang of DIVs and how to create bulletproof page layouts once and for all.
If you create your layouts from scratch, then YOU are in control. If you copy or adapt someone else's layout, you never really know what you've got or how it works.
These are our last classes about CSS. We are ready to start Flash. However, your CSS skills will acutely affect your Portfolio grade, so DON'T make the mistake of thinking you are finished with CSS. You're not!
Supplemental * * *
- Page Layout | HTML Dog
- Page Design Basics: Journalists' Toolkit
- Redesigning the ExpressionEngine Site: Look for the subheading "Wireframing." This article by a professional Web developer provides an insider's view of the process of Web site design.
- Design: Journalists' Toolkit (see links under "Page Design and Layout" and "Web Design, in General")
- Modern CSS Layouts, Part 2: The Essential Techniques
- 7 Awesome CSS3 Techniques You Can Start Using Right Now
- Using CSS3 Transitions, Transforms and Animation