Creating New Pages

A typical web site is composed of many interlinked pages. Dreamweaver provides you with a powerful set of options for creating a new page once you have setup your site. The image below shows the dialog that will appear if you select New... from the File menu.

New Page Dialog

At the left of the dialog are options to select different kinds of new document. For our purposes, we will nearly always be working with the Blank Page group. However, as your site designs become more complex, I will encourage you to work with site templates.

The next column asks you to select a Page Type. Again, we will always be working with the first option of HTML. This will create a web page.

The middle column asks you to select a Layout. There are a wide range of choices here, and which one you chose will depend on how you want your page to look. This page, for example, was created using the selection:

1 column liquid, centered, header and footer

A visual guide to the selected page layout is shown on the top right of the dialog, along with a brief description. The differences between these layouts is discussed below.

Doc TypeYou are also given an option to select a DocType. The default setting in CS6 is XHTML 1.0 Transitional. This is ok, but I recommend setting it to HTML 5 to allow you to work with the latest version of the language.

Finally, you have an option to select where the Layout CSS is to be stored. The exact appearance of the page layout is controlled by an attached Cascading Style Sheet, and you can control whether to add the style information to the head of the page, to create a new file, or to link to an existing style.

CSS ChoiceIf you select the Add to Head option, then all of the necessary style definitions are included with the page itself. This has the advantage of making the page completely self-contained. However, it has the major disadvantage of meaning that you page style cannot be linked into the style of the other pages on your web site, meaning that it will be difficult to maintain a consistent look.

If you select the Create New File option, then Dreamweaver will create a new style sheet for you and put all the style definitions into that file. The first thing it will then ask you is where to save the style sheet, make a mental note of the file name and location. This is usually the best option for the first page you create. However, if you create further pages using the same layout then the next option is the better choice.

If you select the Link to Existing File option, then Dreamweaver will ask you which existing style sheet you want to use to control your page layout. You can use the link icon to browse to the location of the style sheet that you want to use and attach it to your new page as a link. This means that any subsequent changes you make to the style definitions controlling your page layout will be automatically used by every page that is linked to that style sheet.

Dreamweaver Page Layouts

Dreamweaver CS3 offered three different types of page layout:

Each layout offers a different approach to controlling the sizes of the various elements of your page layout. Note that Elastic layouts were dropped in later versions of Creative Suite. However, it is a useful option and can still be created manually.

Fixed LayoutThe fixed layout is very easy to get to grips with - the sizes of all of the elements in the page are measured in pixels. It is called a "fixed" layout because no matter what size the user's screen is, nor how they resize their browser window, the page elements will always have the selected size.

Liquid LayoutIn contrast, both the liquid and elastic layouts resize with the browser window. The difference between liquid and elastic layouts is in how the sizes are measured. The sizes in a liquid layout are measured in percentages of the containing window size, whist the sizes in an elastic layout are measured in em. This is a printer's measure and it refers to the width of a capital M in the current font.

Therefore, the various page elements in a liquid layout will resize as the user resizes their browser window. However, if the user increases or decreases the font size they are using, the window elements will not change. An elastic layout shows exactly the opposite behaviour. The page elements do not resize as the user resizes their browser window, but they do resize as the user changes their font size.

Note that once you understand how to edit CSS rules for yourself you can mix these various kinds of layout. For example, the front page of this site has an elastic left side bar, but the main page layout itself is liquid. Layouts that combine different elements from the varieties described above are known as hybrid layouts.

Width ExampleYou can play with an example page here that lets you try out different kinds of width settings so you can experiment with them to see how they work.

Each of these basic layout types is available with and without header and footer divisions and with various combinations of columns and sidebars. Each layout is defined by a specific style sheet. Once you have created one page using a specific style sheet, you should link all subsequent pages that will have the same layout to the same style sheet. That way, any changes you make to the layout of one page will be reflected in every page using the style sheet.

You can find a lot of discussion of the pros and cons of these different layouts in the following article:

Back back to the main Dreamweaver page