HTML CSS PHP PERL

Laying the Groundwork

 
Previous Page Table of Contents Next Page

Laying the Groundwork

The first thing we need to do is take a look at the existing all-HTML page in a Web browser and then look at its markup. Figure 1.1 shows what the page looks like.

Figure 1.1. The page as it exists in an all-HTML format.

graphics/01fig01.jpg

Now it's time to look at the HTML itself. Unfortunately, we can't provide it here because a listing of the page's source code would be about seven pages long! So we'll have to consider another approach.

graphics/hand_icon.jpg

You can see the source code for Figure 1.1 by loading the file ch0101.html into your favorite text editor.


Instead of going through the HTML line by line, let's get a quick look at how the page has been put together. To do this, we're going to add some temporary styles to the simple style sheet that already appears at top of the document.


<head>

<title>Cleveland Eats: Matsu</title>

<style type="text/css">

body {font-family: Verdana, Arial, Helvetica, sans-serif;}

a.navlink {text-decoration: none;}

/* temporary styles */

table {border: 2px solid red; margin: 2px;}

td {border: 1px dotted purple; padding: 1px;}

/* end temporary styles */

</style>

</head>

The first of the new rules will put a two-pixel red border around the outside of any table elements and add two pixels of blank space (margin) around them. The second new rule gives td elements a one-pixel dotted purple border and one pixel of padding. The result of this addition is shown in Figure 1.2.

Figure 1.2. Adding a simple style sheet to figure out the page structure.

graphics/01fig02.jpg

What's a Rule?

graphics/note_icon.jpg

A rule in CSS is a complete style statement, which is composed of a selector and a declaration block. For example, p {color: gray; font-weight: bold;} is a rule.


Since every thick red border represents the outer edge of a table, we can quickly determine the page's structure. The "banner" (or "masthead") across the top of the page is in its own table. The rest of the document is wrapped in a second table, with a few tables nested within it and a fairly complicated cell structure. One point of interest is that the left-hand sidebar is actually laid out using two separate tables in different cells, even though the visual effect is that of a single box.

Another layout trick revealed by these temporary styles is the use of "empty" table cells to hold open space. Look, for example, to either side of the main text column in the center of the page and also to either side of the large block of text set into the main content. (This is known as a "pullquote.") In both cases, you can see empty cells outlined by a dotted purple border.

These cells are not, in fact, emptythey contain image files called spacer.gif. This is a 1x1 image whose sole pixel has been set to be transparent. A quick search of the HTML reveals that there are 18 img elements that refer to this same image file. By the time we're done, they'll all be gone.

    Previous Page Table of Contents Next Page
    © 2000- NIV