|
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.

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:

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>.

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.

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.

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>.

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.
|