How to Create a New Page with a CSS Layout in Dreamweaver - dummies

How to Create a New Page with a CSS Layout in Dreamweaver

By Janine Warner

Dreamweaver includes two CSS layouts designed with HTML5 tags that you can customize to create a seemingly infinite variety of page designs. These layouts give you a head start when you create a new page, and they’re designed to work well in a variety of web browsers, so they can help you avoid common problems caused by the different ways web browsers display HTML5 and CSS.

For all these reasons, you should start your design work in Dreamweaver with a CSS layout chosen in the New Document window, especially if you want to use HTML5.

To create a new page using one of Dreamweaver’s CSS layouts, follow these instructions:

  1. Choose File→New.

    The New Document dialog box appears.

  2. Choose Blank Page from the left column and HTML from the Page Type column in the middle.

    Alternatively, you can choose an option in the bottom part of the Page Type section that corresponds to the programming language used on your site, such as ASP.NET, PHP, or ColdFusion, and then progress to Step 3. (If you’re not familiar with these programming options, stick with HTML.)

  3. In the Layout section, select either CSS layout.

    Note that when you select a CSS layout, a preview of the layout is displayed at the top right of the dialog box.


  4. From the Layout CSS drop-down list, choose the type of style sheet you want to create as you design the page:

    • Add to Head creates an internal style sheet and includes all the styles for the layout in the header area of the new document.

    • Create New File creates a new external style sheet with all the page styles as you create the new document with the design.

    • Link to Existing File adds the style sheet information for the new document to an existing external style sheet.

    Note: You can always change how the style sheet is set up later by moving styles from an internal style sheet to an external one or from one external style sheet to another.

  5. Click Create.

    The new page is created and opened in the main workspace.

  6. Choose File→Save to save the page and styles.

    If you saved the styles in an external style sheet, a second box prompts you to save the style sheet separately. If the styles are contained in an internal style sheet, they’re saved automatically when you save the page.