Sandra Smith-Gordon's Basic Instructions for Dreamweaver

DW page layouts

home | dictionary | instructions pages list

Dreamweaver offers a variety of ready made page layouts with different properties.

 

To get the different layouts:

 

File → new → blank → HTML → then choose the one you want. 

(Note: you do not have to have any of them, just choose None)

 

As you click through the choices different layouts appear in the window on the right of the list.  The curly lines show that the element will adapt: em shows that area is elastic, % shows that area is liquid.

 

Elastic

The design of an elastic page adapts if the site visitor changes the font size by having different text settings.  He might do this if he needs to have a larger font to read the page.  The design does not change based on the size of the browser window.  See my example of an elastic page

 

In elastic pages or parts of pages the box width of the container or element is set in ems (a text size measurement) so it adapts if the font size changes.

 

Liquid

The design adapts if the site visitor adjusts the size of the browser window.  This might happen if he has a particularly large or small screen/browser window. 

 

In liquid pages or parts of pages the box width of the container or element is set in % of browser width;  so it adapts as the browser width changes. 

 

See my example of a liquid page

 

Fixed

This does not adapt to a change in font size or browser window. Width is specified in pixels.

 

Hybrid

There is a range of pages offered by DW with and without headers, footers, columns, sidebars, etc. including some with different parts of the page fixed or liquid, etc.

 

The best way to see the range of layouts and what they do is to open the DW samples and experiment with them.

 

See also DW Help: Create a Blank Page.  This gives information about addidng your own CSS files to your new page to enable you to create several pages with similar layouts without using a template.

 

 

 

|