Dreamweaver tutorials: Creating a new page using tables is a great way to create a template for every page on your Web site. Design professional Web pages using these great Dreamweaver tutorials

Learn this great Web site authoring tool with our Dreamweaver tutorials. Learn everything from creating a new Web site, to mouseovers, stylesheets, and more

Home > Dreamweaver > Page layout

Page layout

Using tables is a great way to layout your Web site. Understanding html tables will reduce your development time, and help your Web pages look more professional. If you're exporting your Web pages from Macromedia Fireworks, you'll need to understand the intricacies of table layout. This tutorial guides you through the basics of table layout in Dreamweaver.

The table structure

Below is a look at a page of our site. The table borders are defined as "0", so you don't really notice the structure of the html table.

Now take a look at the same page with the table borders drawn in to show the table structure. (Note the nested table in the main part of the screen.)

Creating your page

Click on the insert table icon, and enter the properties shown at the right. This will create the template for our pages.

Now, click on modify > page properties, and change the left margin to '0'. This will prevent a horizontal scroll bar for visitors using 800x600 resolution.

Next, we'll add spacer gifs to prevent our table from 'collapsing' or shifting. Create a 1x1 pixel transparent image in Fireworks (or any graphics program). Name it "spacer.gif".

We'll add our spacers to the bottom of the page. That way they don't disrupt the content when we add it later. Click the Insert image icon to add your spacer.

Select the bottom left cell, and insert your spacer. Change size to 120w x 1h. Tab to the next cell, and make it 530x1. Tab to the last cell and make it 120x1. Your screen should look like this:

Now, you've completed the basic structure for your page. The left and right side are 120 pixels. The left side will be for your navigation buttons, and the right for secondary navigation and AdSense ads. The middle of the page will be your primary content area.

Now we'll add placeholder graphics to complete our page (for now). Click on the Image Placeholder button, and insert 4 graphics:

120x600 on the left side

120x600 on the right side

770x60 on the top (for our page headers)

530x600 to represent main content in the middle of the page

Your page should now look like this (shown at 800x600):

[Back to top]

Home | Design | Dreamweaver | Fireworks | Photoshop | AdSense

©2006 Wilk Web Works
All rights reserved.