Page Layouts

You can use Dreamweaver to create the general page layout (within the template) using either tables or css. The advantages and disadvantages of both these approaches are give below:

Table Layouts: Advantages

• Easy to design
• Works well on older browsers

Table Layouts:Disadvantages

• Loads only once all the elements within the table have loaded - usually slower than css layouts
• Changes to the tables will need to be made on each page and all the pages will need to uploaded to the server again

CSS Layouts: Advantages

• Loads fast - the css file just needs to be loaded once
• Can easily change the layout of the entire site by tweaking the .css file as the design elements are separated from the content

CSS Layouts: Disadvantages

• More challenging to design
• May not work on some of the older browsers

Creating the Page Layout using Tables

Using the "tables approach" your layout will be structured within tables and cells.
Analyze your layout (created in Adobe Fireworks or Photoshop) to figure out how many tables with how many rows and columns you would need to recreate it in Dreamweaver.
Now start creating your tables. You can use pixels or percentages to define the width and height. If you have more that 1 column make sure the widths of all the columns add up to the width of the table. [Insert > Table]
The Properties Inspector is extremely useful for editing the properties of any element in your page. To edit the properties of a table simply select the table and open the Properties Inspector. [Window > Properties]
Try and create separate tables as much as possible. This is because a table will load only once all the elements within it have loaded.
Explore creating the layout you designed using tables. You can give background colors, create tables within tables, specify the alignment of the content within the cell etc. So go ahead and try it out. You will apply this concept later in Project 1: Table-based Dreamweaver CS3 layout. 

Creating the Page Layout using DIV Tags and CSS

Using the CSS approach you will be creating the layout webpage using div tags to separate different types of content on the page and positioning these div tags in CSS.
You will need to create a css style sheet and attach it to the template.
For every div that you create in the template you will need to create a corresponding style in the css file. You can specify position the location of the div in the page, background colors, borders and other properties in the style. You will apply this concept later when you do Project 2: CSS/ DIV based tableless layout.
An easy way to create a css, div based layout is to use one of the pre-built Dreamweaver layouts. [File New > Blank Page > HTML > Select layout best suited to your needs]

Prebuilt CSS layout options within Dreamweaver 
You can also get pre-built page layouts and cusomize them.

Posted in: Dreamweaver Tutorial