• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 4. Preparing a New Site > Opening a New HTML Page

Opening a New HTML Page

At this point you have defined the Jade Valley Web site in Dreamweaver. The next step is creating a new HTML page in Dreamweaver.

Choose File > New to create a new HTML document in Dreamweaver.

You can also use the Start page to create a new HTML document (choose HTML under the Create New section).

In the New Document dialog, select Basic page as the document category from the Category list on the left. Select HTML as the document type from the Basic page list on the right. Select the Make Document XHMTL Compliant option. Click Create to create a new HTML document.


Another way to create a new page is to click the HTML link in the Create New section of the Start page.

The New Document dialog enables you to easily and quickly create new documents in Dreamweaver. You can create a new page based on the nature of the page (e.g., basic page, dynamic page, frameset, page designs, etc.) or based on an existing template from other sites. The list on the right changes based on the document category of your choice. A description and a preview of the selected document type (for most categories) are available upon selection.

XHTML (Extensible Hypertext Markup Language) is a reformulation of HTML to be compliant with XML syntax. In general, using XHTML ensures the backward and future compatibility of your Web pages. HTML is a relatively loose and forgiving language, whereas XML is more strict. In the long run, this strictness actually makes it easier to ensure consistency. For the most part, the difference between XHTML and HTML is that XHTML is a little more structured about the way it is written.

For example, both HTML and XHTML have a tag used for marking up paragraphs. In HTML, both the <P> and <p> are acceptable ways of writing this tag. But in XHTML, only <p> is acceptable because upper-case tags are forbidden in XML. Another difference is that all tags in XML must be closed. Certain HTML tags are unclosed, for example, the <hr> (horizontal rule), <br> (line break), and <img> (image) tags. In XHTML, these tags are <hr/>, <br/>, and <img/>. This convention both opens and closes the tags; basically, it is equivalent to <hr></hr>, <br></br>, and <img></img>. A further discussion of XHTML is beyond the scope of this book, but as long as you understand that XHTML is essentially HTML written to be in compliance with XML, that is sufficient.


To create XHTML-compliant documents by default, select Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac OS X) and select the New Document category. In the New Document category, select a document type and select the Make Document XHMTL Compliant option. Click OK.


To make an existing HTML document XHTML-compliant, you need to open the document, and select File > Convert > XHTML.

Take a moment to explore the Dreamweaver work environment.

Before develping the HTML pages for the Jade Valley Web site, take a few minutes to get familiar with Dreamweaver's work environment. You will notice that Dreamweaver provides many panels, inspectors, and windows, totally different from a word processor's work space, for example. To open any Dreamweaver panel, inspector, and window, use the Window menu.

Below is an overview of Dreamweaver's tools and panels:

The Insert bar contains buttons for inserting various types of “objects,” such as images, tables, and layers, into a document. Each object is a piece of HTML code that enables you to set various attributes as you insert the object. For example, you can insert an email link by clicking the Email link button in the Common category of the Insert bar. Alternatively, you can also insert objects using the Insert menu.

The Document toolbar contains buttons that provide options for different views of the Document window (such as Design view, Code view, and Split view), various viewing options, and common operations such as previewing in a browser. In addition, you can title the HTML document by typing in the Title text field in the Document toolbar.

The Document window displays the current document you are working on.

The Property inspector, like other Macromedia applications, lets you view and change a variety of properties for the selected object or text. Each object has different properties.

The Tag selector in the status bar at the bottom of the Document window shows the hierarchy of tags surrounding the current selection. Clicking any tag in the hierarchy enables you to select that tag and all its contents. Right-clicking (Windows) or Control-clicking (Macintosh) tags yields several additional comands and options.

Panel groups are sets of related panels grouped together under one heading. To expand a panel group, click the expander arrow at the left of the group's name; to undock a panel group, drag the gripper at the left edge of the group's title bar.

The Files panel enables you to manage your files and folders, whether they are part of a Dreamweaver site or on a remote server. The Files panel also enables you to access all the files on your local hard drive, much like Windows Explorer (Windows) or the Finder (Macintosh).

In the Document toolbar, enter Jade Valley Website Template as this new document's page title in the Title text box.

The title appears in the title bar of the Document window in Dreamweaver as well as in the browser's title bar when you view the page in most browsers. The title appears in the results page of many search engines as well. It's a good habit to always specify a descriptive page title for all your pages.


To modify a page title, enter a new title for the page in the Title text box in the Document toolbar. You can also change the title using the Page Properties dialog (Modify > Page Properties).

Choose File > Save. Save the new HTML document as jadevalley template in the root folder of the Jade Valley site.

The default extension is .htm. Change the file extension for this new HTML page to .html after you enter the file name.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint