Lesson Three: Maintaining Uniformity Throughout Your Site.

This lesson will be using a version of this page which you can find if you click here.

Using Tables to structure your page.
How to keep the table centred on launch in your browser. Aligning Tables and Content.
You can set the alignment for a table on a page or within another table, just as if it were text.

Be aware that in Dreamweaver there are two modes for designing in:
Standard and Layout, easily accessed by the tabs of the same names in the menu bar.

To set table alignment:
1 Select the table in Standard mode.
2 In the Properties inspector, click on the Align drop-down menu, and select Default, Left, Centre, or Right. Your table will change alignment.


Using Auto-stretch table cells to keep vital content in the same place regardless of which browser you are in.

Width settings in tables are generally expressed in pixels or in percent or the window size. In Layout mode, you can also set the width of a table or column to auto-stretch: that is, the table will always fill the browser window, no matter what size the window is. Auto-stretch columns are spaced proportionally to preserve your design.

Planning width settings.
What you want out of Layout mode width settings is flexibility in your design so that it will appear readable and visually pleasing regardless of the size of the visitor's browser widow.
To set auto-stretch for a column in Layout mode:
1 First choose a container cell, which is generally the widest cell on the page. This is the cell that will be your auto-stretch cell.
2 The width or each column in a selected table appears as the column header or footer.
* If it's a pixel width, you'll see a whole number.
* If it's auto-stretch width, you'll see a wavy line.
* If the content of the column is wider than the column's fixed width, you'll see two numbers in the colunn header or footer.
3 Click on the tab of the layout table that contains your column. The column headings will appear.
4 Select the column you want to auto-stretch, then click the colunn header button. From the menu that appears, select Make Column Autostretch.
5 You will be asked to choose whether to let DW create a spacer gif or use an existing one, choose Create a spacer image file.


To set an exact width in Layout mode:
If you need a column to have an exact width, eg. if it contains a Navigation bar, this is what you do:
1 Click the tab of the layout table that contains your column.
2 Click the column header button.
3 From the menu which will appear choose Make Column Fixed Width. Dreamweaver will set the width of the column to the content that appears in the column header.

About height settings:
Dreamweaver sets table and row heights in a layout table to fill out the page, based on the size of the Document window when you first draw the table. After you fill the table with content, you may want to clear these settings.

To clear row heights:
1 Click on the column header so that the menu appears
2 From the menu, select Clear All Heights. Rows without content may shrink.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Using Templates. You can create your own template, creating editable regions, but maintaining a consistent style. See Using Templates.

Plotting the position of your Layers from the distance from the origin (0x0). When you highlight your layer and its black square handles are showing you will see in the Properties Inspector the L and T distance in pixels from the point of Origin.
You can change the position of the Layer if you change these numbers.

Lesson Three: Wow Factor Design Feature:
Using InlineFrames to scroll through content.
More information on Lesson Eight page.

Using Remote Rollovers to display variety of content.

Text Formatting.
Images.