Advanced CSS Layouts

Create attractive, modern Web layouts with powerful CSS techniques

CSS-based layouts are essential to the modern Web designer's toolkit, enabling complex symmetric, asymmetric, and column-based designs with great flexibility for the designer and the user. Advanced knowledge of floats, positioning, source ordering, and frameworks can set you apart as a professional designer and bring greater sophistication to your client projects.

This 3-lesson course begins by extending your experience with float-based layouts, exploring multi-column fixed and fluid designs, grid-based designs, and sophisticated navigation techniques. You'll then learn all about the types of precision positioning and how to incorporate them in layouts with headers and footers. The course also explores important strategies for working with CSS, from tips on writing and formatting your code to creating print styles and working with frameworks.

Course developer and CSS Cookbook author Christopher Schmitt brings expert techniques and insight to this course, leading the way through hands-on lectures and challenging exercises. Course projects include creative float-based pages, art-inspired pages created with positioning, and a personalized framework and complete mini site. Exercises will test your creative Web design skill as well as your understanding of CSS techniques.

Tuition: $450 US

Course Instructor(s):

Sessions Web design instructor Christopher Schmitt
Christopher Schmitt  is an award-winning Web designer and developer.
Course content developed by Christopher Schmitt.
back to top

Requirements:

To take this course you'll need:
  • Computer with Internet connection (56 Kbps modem or faster).
  • HTML and CSS Essentials or equivalent experience hand coding CSS.
  • Web Design I or equivalent experience with Web page design and development.
  • Adobe Photoshop or Fireworks, or equivalent digital imaging program.
back to top

Prerequisites:

The following courses can help you meet the above requirements:
back to top

Course Objectives:

Students learn how to:
  • Learn how float behavior works in Web browsers using CSS.
  • Create fixed and fluid column-based layouts using floats.
  • Create horizontal, vertical, and sprite-based navigation using float
  • Create an image gallery using a float-based grid.
  • Construct absolute, relative, and fixed positioned layouts.
  • Apply headers and footers to multi-column positioned layouts.
  • Use source ordering in positioned and float-based layouts.
  • Write well-structured CSS code.
  • Install, customize, and work with a CSS framework.
  • Develop a print style for effective translation of a Web page to print.
back to top

Course Outline

LESSON 1 Designing with Floats

The CSS "float" property takes a page element out of normal flow so other content can wrap around it. Sounds simple, but many complex layouts can be created with this technique. Multi-column fixed and fluid layouts are explored in-depth and hands-on, as well as refined navigation techniques, image grids, and techniques for breaking out of the boxy routine. You'll create flowing float layouts in this lesson's exercise, a design for a scuba resort client.

LESSON 2 Positioning Elements

The Web Standards movement is beginning to give Web designers what they've always wanted: total control in their CSS layouts. This lesson explores techniques for getting exactly the look you want on your pages using absolute, fixed, and relative positioning. You'll learn ways to add headers and footers to your layouts, overlap content, and create asymmetric designs. In the exercise, you'll choose a favorite artist and design positioning-based layouts inspired by his or her unique style.

LESSON 3 Extending Multi-Column Layouts

The techniques you've learned so far depend heavily on normal flow and the ordering of source code. To extend this, Lesson Three explores source-ordered float layouts that give you better control over your content and future page changes. In addition, you'll learn important methods for writing and structuring CSS code, working with print styles, and implementing time-saving frameworks the professionals use. The final exercise is a mini site that challenges your CSS coding skill and your Web design creativity—you'll develop advanced CSS layouts, a print style, and even a framework you can use on your future Web design creations.

back to top
 
student work
CSS layout by student Marek Malkowski