Chapter 8: CSS Design Gallery

Exploring the Original Document

This example was developed by me and Eric A. Meyer (technical editor of this book) as a demonstration for attendees of the User Interface 7 conference, using the UI7 conference home page (Figure 7.1). All the markup examples described in this chapter can be downloaded from the book's web page.

Figure 7.1: The original page

The example was such a good choice for an exercise of this nature that we both knew we should include it in this book to demonstrate the way that structure and style relate to one another in contemporary web design.

The original page uses fairly complicated tables as well as font tags and style to create the ultimate look. The page is heavy with graphics and uses many spacer GIFs to position page elements within the layout tables.

Figure 7.2 shows the document with table borders styled so you can see the complexity of the nested tables. The table borders are red (7.2A), the cells borders are green (7.2B).

Figure 7.2: Examining the nested, complex layout tables

Another problem with the document is that it is filled with proprietary elements and attributes for presentation, as well as scripting and elements proprietary to Adobe GoLive.

As the chapter progresses, you'll see how overly complex and weighty this kind of design is-not to mention invalid. As the page is converted to a more structured document using CSS and following web standards in general, the page becomes far more manageable and lighter in file size. The page also validates and will retain its general look and feel within most browsers.