Exit tutorial


HTML Tutorial
Dreamweaver Tutorials
Creating a Web Page Layout In Dreamweaver

The first step in creating a Web page is laying out the basic structure. Although it may not be apparent, the basic structure of Web pages are in tables. The following steps will teach you how to layout a header, scan column, main body column and footer in Macromedia Dreamweaver.

Creating the Header:
The header is the top of the Web page. It contains the title and other important information about a Web site, letting viewers see what the page is about at first glance. Open Macromedia Dreamweaver. On a new page, select Insert then Table. In the Insert Table dialog box, set the Rows to "1" and the Columns to "1". Make sure there is no value for the Cell Padding or Cell Spacing. With the units in Pixels, set the Width at "600" (600 pixels is a "Web safe" width, meaning most people should be able to see a Web page that is 600 pixels wide without having to scroll horizontally. To be "printer safe" this value should be no more than 535 pixels). Set the Border at "0". When the screen looks like the following picture, click OK.

1 row; 1 column;

Click inside the header table. If you have a graphic title to use, insert it now. If you prefer a text title, simply type it in.

Creating a Scan Column and Main Body Column:
The scan column and main body column are the primary parts of your page. The scan column displays links to reach different parts of a site. The main body column displays text, graphics and other information.

Create a Table
First, click after the header table so that the insertion point is outside of it. Add another table using the same steps and settings as before. Your page should now look like this:

Title of Web page

Split the Table
Click inside of the new table. From the Modify menu, select Table, then Split Cell. In the Split Cell dialog box select Columns after Split Cell Into, and set the Number of Columns at "2". Click OK. Your table should now be split into two cells.

Resize the Two Columns
The main body column is always wider than the scan column, so you will need to resize the two columns. Right-click inside of the scan column (the left one). Select Properties from the menu. The Property inspector should now appear if it was not already up. First, make sure the Property inspector window is expanded by clicking the Down Arrow in the lower right hand corner (if it shows an Up Arrow instead, then the window is already expanded). Now, with the lower half showing, type in "130" after the W (marked by the red arrow below) and hit <Enter>.

W 130

Now click inside the main body column (the right one). Change the width of this cell to "470" (not going over the Web safe limit because 600 pixels minus 130 pixels equals 470 pixels). Hit <Enter>.

Modify the Scan Column and Main Body Column
Something should be done to set the two columns apart. Click inside of the scan column and, from the Property inspector, change the Bg color. Add some links to your scan column. Click inside of your main body column and add some graphics or type some text.

Example layout

There are several problems with what's happening. First, as the length of the main body column becomes longer, the scan column length becomes longer and the links center themselves in it. Also, there is no space between the cells. Click inside of the scan column and, in the Property inspector, click the Down Arrow after Vert (shown below) and select Top. Do the same for the main body column.

Properties box

Now, select the entire table (you must do this by clicking on the lower border, right border or partition that divides the two cells. Clicking on the upper border or left border will select both cells instead of the whole table). Enter "5" for the CellPad (shown below) value and hit <Enter>.

Properties box

Creating the Footer:
The footer can contain email links, a "last revised" date, other information and, most importantly, links to other sections of your site. Even if those links have been made further up the page, by the time a viewer gets to your footer, they may not be able to see the top of the page. Click after your scan column/main body column table so that the insertion point is underneath. Insert a table using the same settings as your header (1 row, 1 column and a width of 600 pixels). Modify your footer, using the techniques, you've learned. Try splitting it into two cells, changing their widths, adding a background color and changing the padding. 

Your finished page should look similar to this one.

[Back to the Stage 4 Index]