Dreamweaver CS5.5 : Creating a Web Page

From the left-hand list of document categories, choose Blank Page.

The Blank Page category lets you create a new empty document—maybe a web page or something a bit more esoteric, like an XML file , an external JavaScript file, or one of the several server-driven pages, such as a PHP file .

Both the Blank Template and “Page from Template” categories relate to Dreamweaver’s Template. The “Page from Sample” category lets you choose from several files with already-created designs. Most of the designs are old and left over from earlier versions of Dreamweaver, aren’t very attractive, and don’t use the best techniques for building a web page. However, Dreamweaver CS5.5 includes some starter pages for creating mobile-only websites and web applications. The last category, Other, lets you create documents for different programming languages, like ActionScript or Java—unless you’re a Flash or Java programmer, you probably won’t ever need these.

From the Page Type list, choose HTML.

You can \ create other types of documents, too, most of which you’ll learn more about later in this book, such as PHP pages for database-driven sites, XSLT files for processing XML, templates, Library items, and CSS files .

From the Layout list, choose “<none>.”

This choice creates a blank document. The other choices (“1 column elastic, centered”, “1 column elastic, centered, header and footer”, and so on) are predesigned page layouts. These designs (not to be confused with the designs under the “Page from Sample” category) use CSS. Because CSS-based layout can be tricky, Dreamweaver includes all the code you need to create many of the most common types of page designs.

Select a document type from the DocType menu.

Selecting a doctype, or document type, identifies the type of HTML you’ll use to create your page. It affects how Dreamweaver writes the HTML code and how a web browser understands it. Fortunately, since Dreamweaver writes all the code for you, you don’t need to worry about the subtle differences between the different document types.

XHTML 1.0 Transitional is the normal setting in Dreamweaver, but HTML 4.01 Transitional, HTML 4.01 Strict, and XHTML 1.0 Strict are also fine choices. The transitional doctypes let you use a few HTML tags and properties that have been phased out of the strict types. Most notably, transitional doctypes can use the “target” property for links—a simple way to force links to open in a new browser window.

If you don’t really understand or care about doctypes, just select HTML 4.01 Transitional. But make sure you avoid None (which can force browsers to display pages in what’s called “quirks mode” and makes perfecting designs difficult), XHTML Mobile, and XHTML 1.1 (which is not only obsolete, it also requires a special setting on your web server to work properly).

If you like to live on the technological edge of web development, you can choose HTML5. HTML5 offers a simplified document type, plus a whole range of new HTML tags and features. Unfortunately, Dreamweaver CS5.5 doesn’t offer ready access to these new HTML5 tags or features—in other words, you won’t find any of the new tags in the Insert panel, or tools for using cool new features like the <canvas> tag for drawing on a web page.

Tip:

If you don’t want to deal with the New Document window every time you create a page, choose Edit→Preferences in Windows (Dreamweaver→Preferences on a Mac). In the Preferences dialog box, click the New Document category and then turn off the “Show New Document Dialog on Control-N” checkbox.

While you’re at it, you can specify the type of file Dreamweaver creates whenever you press Ctrl+N (⌘-N). For example, if you usually create plain HTML files, choose HTML. But if you usually create dynamic pages, choose a different type of file—like PHP, for example.

With these settings, pressing Ctrl+N (⌘-N) instantly creates a new blank document of your choosing. (Choosing File→New, however, still opens the New Document window.)

Click Create.

Dreamweaver opens a new, blank web page ready for you to save and title (see Figure 2).

Choose File→Save.

The Save As dialog box appears. You need to save the file somewhere inside your local root folder. You can save it inside any subfolder within the root folder as well.

Type a name for the file and then click Save.

Make sure the name doesn’t contain spaces or any characters except letters, numbers, hyphens, and underscores, and that it ends in either .html or .htm.

Although most operating systems let you save files with long names, spaces, and characters like #, $, and &, some browsers and servers have trouble interpreting anything other than letters and numbers.

Furthermore, web servers rely on file extensions like .htm, .html, .gif, and .jpg to know whether a file is a web page, graphic, or some other type of file. Dreamweaver for Windows automatically adds the extension to your saved document names. But on the Mac—which lets you save files without extensions—make sure the file ends in the suffix .html or .htm when you save it.

At the top of the document window, click inside the Title box and then type a name for the page.

Every new document Dreamweaver creates has the unflattering title “Untitled Document.” If you do a quick search on Google for “Untitled Document,” you’ll find (at the time of this writing) 27,500,000 results (obviously there are still some people who need to pick up a copy of this book). Dreamweaver probably created most of those pages. You should change this to a descriptive title indicating the main topic of the page, like “Contact Chia Vet,” “About Chia Vet’s Chia Pet Services,” or “Technical Specifications for the Anodyne 3000 Indoor Lawn Mower.” Not only is replacing “Untitled Document” more professional, but providing a descriptive title can improve a web page’s ranking among search engines.