The Basics of Creating Documents

[ LiB ]

Dreamweaver isn't just for HTML anymore, although that still might be the main kind of page that many users will want to work with. With Dreamweaver MX 2004, however, just about any kind of text-based web document can be created, edited, and sometimes even graphically rendered in Design view. This includes not only HTML, but also all the various live data document types, such as ASP, CFM, PHP, and JSP; support document types, such as CSS and JS; and the alphabet soup of document types such as XML, XHTML, and WML.

Because of these choices, creating a new document might still be one of the most basic things you can do in Dreamweaverbut it's no longer the simplest. This section covers the New Document dialog box, which enables you to create documents from scratch, as well as perform various techniques to bring documents and data into Dreamweaver from other sources.

You also can create new documents through the Site panel, but the options differ slightly. See the section "Working with the Site Panel" in Chapter 18, "Site Publishing and Maintenance," for more on this.

New Document Dialog Box

When you choose File > New or press Ctrl/Cmd+N to create a new document, by default the New Document dialog box appears (see Figure 3.1). This dialog box presents you with a wealth of options for creating almost any kind of web document.

Figure 3.1. The New Document dialog box.

Types of Document to Create

Most of the dialog box is taken up by the many options for creating different document types. The leftmost column of choices represents the categories of document types: Basic, Dynamic, Template, and so forth.

Many of these types are beyond the scope of this chapter and are referenced later in this book. Table 3.1 lists the categories along with some of their entries and a brief description of each. To create a standard, plain- vanilla HTML page, use the Basic > HTML option. Select the Basic category from the left column and HTML from the right column.

Table 3.1. Document Types Available in the New Document Dialog Box

Category	Description
Basic Page	These are the most commonly used document types for websites that don't involve server-side scripting and live data. They include HTML and XML for creating viewable web pages, and other file types that will hold supporting information for web pages (for instance, JS for JavaScript and CSS for style sheet information). In addition, with library items and templates, you can create special documents for use with Dreamweaver sites. (See Chapter 21, "Building Dynamic Sites with Dreamweaver," for more on Dreamweaver library items and templates.)
Dynamic Page	These file types create web pages that will use server-side scripting to connect with databases and provide dynamic data websites. The entries in this category represent all the live data technologies Dreamweaver supports: ASP, ASP.NET, ColdFusion, PHP, and JSP. (See Chapter 22, "Creating Dynamic Pages," for more on live data sites.)
Templates Page	The entries in this category enable you to create Dreamweaver templates (predefined documents with special Dreamweaver coding for design team productivity) using a variety of web languages, including good old HTML and various languages related to live data sites.
Other	This catchall category enables you to create just about any kind of text-based document you can imagine, including TXT files.
CSS Style Sheets	Cascading Style Sheets (CSS) enable web authors to store page-formatting information outside the web pages themselves , in external CSS documents that can be referenced by many pages in a website. This category contains a whole selection of predefined CSS documents. (See Chapter 11, "Using Cascading Style Sheets," to learn all about CSS.)
Framesets	Framesets are collections of individual documents that will be displayed together in one browser window. This category contains a selection of predefined framesetsincluding all documents needed to create a frame-based web page. When you choose from this category, you're creating several new documents at once! (To learn what frames are and how to work with them, see Chapter 10, "Designing Frame-Based Pages.")
Table-Based Layouts and Page Designs (Accessible)	These categories contain predefined "stationery" web pagesPage Designs HTML pages with basic layout setup and placeholder elements (Accessible) ready for you to customize. The accessible designs have been specially created to be accessible to visitors with disabilities . (See the section "Making Your Pages Accessible" at the end of this chapter for more on this.)

Because you have such an overwhelming number of choices to sift through, the dialog box includes a description area in its lower-right corner to help you. Select any file type from the second column and read a quick description of what it's for before you choose to create that kind of document. For some choices, you also can see a preview in the upper-right corner.

Note that although Dreamweaver can create any of the document kinds listed here, not all of them display in Design view. Only the file types intended for creating viewable web pages will show a usable preview in Design view. Other file types, such as JS, CSS, and TXT, must be viewed and edited in Dreamweaver Code view.

Stationery

As Table 3.1 shows, Dreamweaver ships with a variety of predefined page layouts that are yours for the customizing. They're in the Page Designs and Page Designs (Accessible) categories. Dreamweaver also comes with predefined CSS documents, ready to be applied to your documents to quickly add text and layout formatting.

To create a web page based on one of the stationery HTML pages, select an entry from either of the Page Designs categories and click OK. Dreamweaver creates a new document with the placeholder content and formatting in place (such as the one shown in Figure 3.2). Save this document as part of your website and customize its content to create your own new web page quickly.

Figure 3.2. A new document based on the Data: Comparative Grid stationery.

Creating a CSS document based on the choices in this dialog box won't give you a page that can be viewed in a browserCSS files are meant as supporting files for HTML and other viewable documents. To create a CSS style sheet from one of the stationery choices listed here, select an entry from the CSS category and click OK. Dreamweaver creates a CSS file (it won't display in Design view) that contains a list of styles for formatting HTML pages. Save this document in your website with the .css file extension. To make use of your new CSS document, you must link one or more HTML pages to it. (See Chapter 11 for instructions on doing this.)

It's general use to refer to files that create documents that browsers can displayfiles that hold web pages, in other wordsas HTML files. This is true even though many viewable document types, such as ASP, don't have the .html or .htm filename extensions. Throughout this book, when you read about creating and working with HTML files, know that this generic term includes documents with .shtm, .shtml, .asp, .cfm, .jsp, .php, and possibly other file extensions. As long as the document uses HTML coding to create a page that the browser can display, it can be generically described as an HTML document.

XHTML Compliance

As long as you're choosing one of the file types that creates a viewable "HTML page," the dialog box offers you the choice of making your new document XHTML-compliant or not. XHTML is the newest flavor of HTML, intended to eventually replace HTML. XHTML is based on XML. It has some very slight syntactical differences from HTML and is stricter in its rules than HTML. The browsers of the future will require XHTML to create valid documents. If you tell Dreamweaver to make your new document XHTML-compliant, it will create slightly different syntax as it writes code for you.

If you're creating web pages that just need to work properly in the popular browsersNetscape Navigator, Internet Explorer, Opera, and a few othersyou don't need to worry about XHTML compliance quite yet. All that the standard browsers require is HTML.

New Document Preferences

By default, when you choose File > New, Dreamweaver presents you with the New Document dialog box, with HTML as the default file type and XHTML compliance turned off. To change these and a few other defaults, click the Preferences button at the bottom of the New Document dialog box. This opens the Preferences > New Document dialog box (see Figure 3.3). Note that this is the standard Dreamweaver Preferences dialog box. You can access this same dialog box by choosing Edit > Preferences and choosing the New Document category from the list on the left side of the dialog box.

Figure 3.3. New Document Preferences.

If you like, you also can change the default file extension that your default file type comes withfor HTML files, you can change from .html to .htm, for instance. This is a little bit more involved, however. From the New Document Preferences dialog box, click the link to the document type XML file (shown in Figure 3.3). This opens Dreamweaver Help at the "Document Type Definition File" section that provides instruction on modifying the Dreamweaver document type configuration information. (Of course, you can always override the default file extension when you save your files just by typing in your own extension.)

[ LiB ]