GDT 150 Design for the Internet: Fall 2001

Class Notes 10.2.2001

Moving into Dreamweaver

Eliminating Top and Left Margins

By default, there are margins at the top of the page and the laft of the page. Unfortunately, Netscape 4 and Internet Explorer 4 use two different methods for turning these margins off, both of which invalidate the code. There are four attributes that should be set to zero in the <body> tag: marginheight, marginwidth, topmargin, and leftmargin. Modern browsers, such as Netscape 6, Internet Explorer 5 and above, and Opera, allow body margins to be set with stylesheets. So if you're designing for these browsers, you don't need to use the "four horsemen" of non-validation.

Dreamweaver allows you to set the body margins in the Modify > Page Properties dialog box, along with background color and image.

Using Tracing Images in Dreamweaver

Also in the Page Properties dialog box are the tracing image options. A tracing image is a background only seen in Dreamweaver to help you lay out your page. If you browse to the gif that you saved and posted, and then reduce the opacity to 50%, you'll see a knocked back version of the final layout, so you can check your progress against it.

Using tables to lay out a page

Tables are the only way to gain control over page layout in standard HTML 4. Without tables, precise placement of any element in the document would be impossible. But, tables can be very quirky, and Dreamweaver doesn't do a very good job with precision table layout.

Tables are block-level elements, like paragraphs, which mean that each table starts on a new line; two tables will not be next to each other on a web page.

Code

<table border="1">  table
	<tr>  row
		<td>content</td>  cell
		<td>content</td>  cell
	</tr>  close row
	<tr> row
		<td>content</td>  cell
		<td>content</td>  cell
	</tr>  close row
</table>  close table

This will give you a table that looks like this: Table Example 1

There are three attributes that should be set to 0 in the <table> tag in order to achieve precise layout: cellspacing, cellpadding, and border.

Cellspacing is the space between cells. Cellpadding is the space between the inner edge of a cell and its content. Border is the border around the outside of the table. Setting the border equal to anything but 0 also shows the borders between cells, but their widths don't change. If these three attributes aren't set to 0, you can't precisely align anything between cells. So the tag should look like this: <table cellspacing="0" cellpadding="0" border="0">

Additionally, it's a good idea to declare width in both the <table> tag and the <td> tags. If you don't set widths, the browser will figure it out for you, and it often doesn't do it as you expected. Only set height if the cell you're setting it for is a spacer cell, meaning that it's taking up blank space.

Tables work off a simple grid system. Each row must have the same number of cells allotted to it. Columns and rows are size-dependent on each other. Every cell in a column is as wide as the column's widest cell. Every cell in a row is as tall as the row's tallest cell. But every column can be a different width and every row can be a different height.

Cells can span several columns or several rows. This is done with the colspan attribute for spanning columns and the rowspan attribute for spanning rows. For example: Table Example 2

For pages that aren't extremely simple, tables can be nested inside one another. Be careful with nested tables, though, because Netscape 4 renders nested tables very slowly. Sometimes there's no way around it.

In order to hold space, each cell whose size isn't determined by other cells in the same row and column must contain something, whether it's an image, text, or another table. Dreamweaver uses non-breaking spaces to hold empty cells open. Unfortunately, this is a very poor way of holding spacer cells in any type of accuracy is important. Non-breaking spaces change size based on the font size as determined by the user or by a style sheet. So the size of spacer cells is incorrectly rendered in two situations: #1 if the user has their fonts set large; #2 if the size of the spacer cell is smaller than the default size of the text. Practically, this means that any spacer cell smaller than 20 pixels tall or wide will be larger than intended. A spacer cell set in this fashion will change size as font size changes.

There are two generally accepted ways to correctly take up a spacer cell: a transparent gif, or a nested table. Generally, a one pixel transparent gif is stretched by setting the width and height to the appropriate size, the same as the cell is set to. I prefer the nested table method. Inside the spacer cell, make a new table with 1 row and 1 column. Set the nested table's and cell's width or height, or both, equal to the outer cell, and set nowrap. Dreamweaver incorrectly applies nowrap, as well. DW puts it in the <tr> tag; it should go in the nested <td>. Nowrap prevents the cell from closing in Netscape 4.x. Also, the spacer cell should all be on one line. The corrected code should look like: <td width="15"><table cellspacing="0" cellpadding="0" border="0" width="15"><tr><td width="15" nowrap></td></tr></table></td>

Change the font size and watch the height of the cells in the table below. The upper two are straight out of Dreamweaver, the lower one has been done with a nested table. Table Example 3

Cells can also have background colors and background images contained in them. This is done by specifying bgcolor="#339966" in the <td> tag or by specifying background="graphics/background.gif" Keep in mind that background images tile, or are repeated over and over again as many times as they will fit in the allotted space. This is one reason to use a background image rather than a foreground image. If you can't control the height of a cell because there's text in it, but want a graphic that goes all the way down the side of that text, a background graphic is perfect.