Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Opening a Ne236 Page

At this point you've defined the Jade Valley Web site in Dreamweaver. The next step is creating a ne236 page in Dreamweaver.

You can also use the Start page to create a ne236 document (choos218 under the Create New section).

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, and so on) 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 o219 so it's 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 an217 is that XHTML is a little more structured about the way it's written. For example, bot221 and XHTML have a tag used for marking up paragraphs. I227, both <P> and <p> are acceptable ways of writing this tag. But in XHTML, only <p> is acceptable because uppercase tags are forbidden in XML. Another difference is that all tags in XML must be closed. Certai227 tags are open tags; for example, the <hr> (horizontal rule), <br> (line break), and <img> (image) tags do not need a corresponding close tag (</hr>, for example). In XHTML, these tags are <hr />, <br />, and <img />. This convention both opens and closes the tags; basically, it's 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 essentiall238 written to be in compliance with XML, that is sufficient.

Tip

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

Before developing th218 pages for the Jade Valley Web site, take a few minutes to become familiar with Dreamweaver's work environment. You will notice that Dreamweaver provides many panels, inspectors, and windows, which is quite different from, say, a word processor's workspace. To open any Dreamweaver panel, inspector, or 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 o219 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 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 th218 document by typing in the Title text field in the Document toolbar.

The Document window displays the document you're currently working on.

The Property inspector , as in 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 commands and options.

Panel groups are sets of related panels that are 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're 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).

[View full size image]

Now that you've learned how to create a new document and explored Dreamweaver's workspace, let's close the document and get to work on the template you're creating.

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 specify a descriptive page title for all your pages.

Dreamweaver switches to code view, which displays th218 code of the document. You can return to the visual design view by clicking the Design View button in the Document Toolbar. Also of note is the Split View button, which enables you to see a split screen revealing both the code and the visual design. Leave it in code view for a moment.

[View full size image]

A comment, which i227 is surrounded by <!-- and --> markup, is disregarded by the browser, but is often used by developers to make comments on their pages to help them while they're coding. Aside from contributing a small amount to the file size, comments do no harm. We're not certain why Fireworks inserts this comment, but it's of no use in the Jade Valley site, so you can delete it.

[View full size image]

At this point, you're ready to insert the proper document type information at the beginning of the document.

This inserts the correct document type at the beginning of the document (visible only in code view).

As you complete this step, you'll see a warning dialog indicating that two images (the logo and navigation bar) lack alt attributes. You'll fix that in a moment, so just click OK for now.

[View full size image]

With the alt attribute, the logo is now more accessible than it was before.

[View full size image]

You don't need to add an alt attribute to the navbar graphic on the right, because you'll be deleting it soon and replacing it with the real navigation bar.

After cleaning up the file, you're now ready to insert the navigation bar.