New Document Options for HTML Pages in Dreamweaver - dummies

New Document Options for HTML Pages in Dreamweaver

By David Karlins, Doug Sahlin

The Dreamweaver New Document dialog box has four main areas: choices on the left that determine the type of file (HTML, CSS, or any of a large set of possible other file types), whether you’re using a sample or template to generate your page, and other options.


The Page Type column is where you choose a file type (HTML if you’re creating a new HTML web page). The Layout column is where you choose from available samples or starter pages (or choose none to start with a blank page).

The preview area in the upper right of the dialog previews how your page will look if you use a layout. In the lower right of the New Document dialog box, you can change the doctype (stick with the default, HTML5), and you can use the link icon (it looks like a chain link) to attach a CSS style sheet.

To begin creating a page, you click the appropriate item from the choices on the left side of the screen:

  • Blank Page: Choose this to create a basic, blank HTML page. Choose HTML as the Page Type, <none> as the Layout, and then HTML5 as the declared document type (from the DocType popup in the right column). Click the Create button, and you see what’s shown here.


    Note: Choose HTML5 as the document type because older, deprecated versions of HTML impose out-of-date rules that trigger annoying and unnecessary browser errors. Using HTML5 avoids all that and keeps browsers from intelligently interpreting page content including fixing recognizable errors (like a missed closing tag on a paragraph, for example).

  • Blank Template: This category provides a set of sample Dreamweaver Templates.

  • Fluid Grid Layout: Dreamweaver CS6 users have an additional category tab for creating what Dreamweaver calls Fluid Grid Layouts or Multiscreen Projects. These are pages with more than one associated CSS style sheet: that is, pages that display differently depending on the size of the media (screen) in which they are viewed.

  • Page from Template: Generate new pages from existing Dreamweaver Templates.

    Dreamweaver Templates are not generic sample layout-builder pages. For that, Dreamweaver supplies sample or starter pages. Dreamweaver Templates is a proprietary tool that governs sitewide page elements of Dreamweaver and isn’t usable if you want to integrate other web-design tools.

    Don’t use Dreamweaver Templates because they are nonstandard, easily corruptible, and not really suited to sitewide updating in large sites. The functionality provided by Dreamweaver Templates is better managed with external CSS style sheets and other nonproprietary tools.

  • Page from Sample: Sample pages are different than Dreamweaver Templates and more useful. They come packaged with CSS styles that provide formatting and placeholder text and images that you can replace with your own content.

    You can preview samples in the preview area of the New Document dialog box to get an idea of whether or not you want to use one of the available samples to start creating your own page.

  • Other: The Other category has options for creating complex, advanced, or obscure file types, with an emphasis on obscure. Among the more used options, you can create a Flash ActionScript file (ActionScript is the programming language used by Adobe Flash) or a page coded in Microsoft’s Visual Basic programming language.

If you select an HTML file as the Page Type from the second column in the New Document dialog box, the Layout column displays a variety of CSS-based page designs. The fourth column in the New Document dialog box displays thumbnails of the page-generated layout for whichever layout you select.

Not only does the New Document dialog box preview how a selected layout will look, but it also provides three options in the Layout CSS popup: Add to Head, Create New File, or Link to Existing File.

  • The first option (Add to Head) embeds CSS in your HTML file, something that keeps you from sharing your style sheet with other HTML pages in your site.

  • The Create New File option, on the other hand, generates an external style sheet that can be linked to from many pages in your site.

  • The Link to existing file option allows you to substitute your own, already created CSS file for the one associated with the sample — which is kind of an odd option since it pretty much undoes the sample package of HTML and CSS.