Going from an all-HTML design to a CSS-driven layout requires two steps: shedding the HTML-based presentation and adding in CSS to replace it. In many cases, it's easier to do this in a gradual fashion by stripping down a small portion of the document and styling it before moving on to the next section. For this project, though, we're going to go the hardcore route and strip the file all the way down to its minimum state before we start styling. (It makes the figures look a lot better, too.)
Stripping Down to the Minimum
It's time to make a copy of the original all-HTML file and strip out nearly all of its HTML-based presentation. This is undeniably the toughest part of converting an all-HTML design to a CSS layout. A good deal of the work can be done using find-and-replace utilities, but there is still the need to go through and delete any leftover HTML-based presentation manually.
Tidying Up Your Markup
It should be mentioned that sometimes it's easier to just copy the text from a page and create a new structure around it, rather than trying to convert the old markup to newer, more efficient markup. We'll go through a conversion process in this project that will help illustrate how certain kinds of table-oriented markup can be drastically simplified. Just keep in mind that it's sometimes easier to just bring across the content and build up new markup around that content.
No matter how you slim down the markup, things to eliminate include:
We also want to cut out layout tables to the maximum extent possible. Because the original markup is kind of complicated, we'll take it a step at a time.
The Skeletal Structure
First assume that we've taken out all of the things mentioned in the preceding list. That leaves us with a document whose general structure is still fairly difficult to describe. For example, the masthead contains three different slices of an image, each in its own cell, and then another cell that contains a table holding the "navbar" links near the top right of the page. In the main page area, we have a left-hand sidebar that's been broken across two lines to achieve some alignment effects: The restaurant name and "Bottom Line" line up with the bottom of the table to their left. Managing this are a forest of interlocking table cells whose purpose is to make the sidebar look like a single continuous box, even though it isn't.
The list could go on for a while, but instead let's just rip out all the tables we can and see where it leaves us. After doing this, we end up with a document structured something like the skeleton shown in Listing 1.1.
Listing 1.1. The Table's Beginning
<table> [...masthead...] </table> <div > [...navbar links...] </div> <div > [...title...] [..."bottom line"...] <div >[...sidebar info...]</div> [...review...] </div>
Wait a minute a table? Yes, we're going to leave the masthead table in place for the moment. What we've done is simplify the table a bit and move the navbar outside of it. That makes the masthead's markup read like this:
<table cellspacing="0" > <tr> <td><img src="/books/2/884/1/html/2/mast1.gif" alt="Cleveland Eats"></td> </tr> <tr> <td bgcolor="#666666"><img src="/books/2/884/1/html/2/mast2.gif" alt=""></td> </tr> <tr> <td><img src="/books/2/884/1/html/2/mast3.gif" alt="A Guide to Fine Northeast Ohio Dining"></td> </tr> </table>
We're leaving this in place because it's simpler to do so right now. This is entirely due to the "stretchy" line in the middle of the masthead that extends from the bottom of the platter. In the table, this is done with a one-pixel slice out of the image and a background color on a cell. We could convert this to a nontable structure and actually will do so at the end of the project. Leaving this change until the end will help illustrate a point or two.
Meanwhile, let's look at the changes to the navbar. With the table cells all gone, we need to include something to separate the links from one another. In this case, we've chosen to insert a vertical-bar character wrapped in a b element.
<div > <a href="/myprofile">my profile</a><b>|</b><a href="/logout">logout</a><b>|</b><a href="/top10">top 10</a><b>|</b><a href="/search">search</a><b>|</b><a href="contact">contact us</a> </div>
Tables? Boldface elements? Are we sure this is a CSS book? Yes! Have patience. All will be revealed in the fullness of time, but for now, remember that b is a part of the document type we're using (HTML 4.01 Transitional) and so is perfectly valid. We'll return to it in just a bit.
As for the rest of the document, it's just a div wrapping the whole review, which has been converted to a simple structure.
<div > <h2>Matsu</h2> <p ><strong>Bottom line:</strong> Friendly, cozy, and oh so tasty</p> <div >[...all sidebar info...]</div> [...review text...] </div>
The last notable change is that the pullquote is now represented using a classed blockquote element.
<blockquote > It's so good, it beats out most of the San Francisco-area sushi places we've tried. </blockquote>
That's it, and the result is shown in Figure 1.3. It may look like a train wreck right now, but just wait. It'll get better pretty quickly.
Figure 1.3. It's improved structurally, but the visuals could use some work.