<<< >>>
1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16

3. Page Layout with CSS

During the second week of class, we learned about how an external Cascading Style Sheet can be used to control typography, color, and layout on multiple site pages from a central point. As a refresher for this week's lesson, you might want to review Week 2's lesson as well as the PowerPoint presentation from that week. This week, we'll extend our knowledge of CSS by focusing on how it is being used more and more to replace HTML tables for laying out page designs. Be sure to view the Layout with CSS presentation from this week and explore the Zen Garden examples.

Converting a legacy table-based page to CSS can be a daunting task at first glance, but if you take it slow, you can learn a lot about how CSS works for page layout. The process of "converting" from a table-based page to one with CSS layout involves the following:

  1. Identify functional sections of the original layout - examine your table to identify what function various parts of the table serve on the page. For example, one cell near the top of the page might span two or three columns and serve as the page header, while one of the primary columns in the second or third row might serve as the location for primary textual content. If you need to, use MS Word's table feature to draw sections on a page and determine what names you'll give each section.
  2. Create associated <div>s on a new page - it does not pay to try converting the existing table code over to CSS. You're better off starting with a new XHTML document and creating new <div>s that correspond to the functional sections identified above.
    • Use comments - It helps to create comment for these <div>s to make them easier to identify in the future.
    • Arrange <div>s logically for graceful degradation - arrange the <div>s in vertical order in Source mode so that if they rendered in this order in a non-CSS browser, the page would still make sense. If a browser doesn't support all layout functions of CSS2, the page will "degrade gracefully."
  3. Use header elements consistently - use <h1>s and <h2>s consistently to maintain semanatic hierarchy on the page. In using CSS for typographic styling, you should exploit as many of HTML's pre-existing elements as possible.
  4. In an external CSS file, create classes for each unique <div> placed on the page - as I've mentioned before, it is better to use an external CSSheet, but if you happen to create a page with internal styles, you can always export them to an external sheet. Here are some things to consider as you create a new page:
    • Comment your CSS classes and IDs to help you or another designer understand how selectors correspond to portions of your XHTML code.
    • Use <div>s for larger logical or structural groupings and <span>s for shorter runs of text or images.
    • You may want to create one large container frame <div> to control the borders and alignment of the entire page. All other <div>s and <span>s would reside within this <div>.
    • With highly structured page like a résumé, you may want to start with a two-column structure, then embed <divs> and <spans> within each of the column <div>s to control the vertical spacing of individual chunks of text.
    • For styling beyond existing HTML elements, it is best to use the <span> tag with an added class or ID to control the look of shorter pieces of text.
  5. Be persistent and check results in numerous browsers - having learned page layout the old way, it may take you some time to adapt to CSS layout techniques. All of us are still learning how to best use this new tool, and this week, you'll get the chance to try your hand at designing your résumé with CSS layout. You can still design with HTML tables, which will cover in subsequent classes, but if you're serious about website design, this is where the industry is headed. Just take it slow and be sure to check your results frequently in a variety of different browsers. Eventually, you'll be able to tackle more complicated layouts in the upcoming CSS3 standards.

CSS Layout Techniques

General CSS Links