• In Code view, Dreamweaver MX displays the actual HTML markup and content.
• In Design view, Dreamweaver MX displays a representation of the document as the user will see it viewed in a Web browser. Note that subtle formatting differences exist between the document represented in Dreamweaver MX and what the user will see in a Web browser.
• In Code and Design view, both the code (HTML markup and content) and the visual representation appear. Basically, the Code view and Design view windows are split on the screen.

Figure 1 shows an HTML document in Code and Design view.

Figure 1: HTML document in Design and Code view

As shown in Figure 1, the top part of the window contains the HTML markup and content. The bottom part of the window contains the content as it will be viewed by the user in a Web browser. Note that the viewer only displays a rough approximation of the HTML document as it will appear in the Web browser. When testing a Web page, it should be viewed in an actual browser such as Internet Explorer. The following points are relevant related to editing the HTML document:

• The View menu contains menu items named Code, Design, and Code and Design, which are used to switch between the three different views.
• In Code and Design view, the windows are synchronized. That is, editing the HTML will cause the Design view window to be updated. Editing the visual text will cause the Code view window to be updated.

Panel Windows

Panel windows are most commonly docked along an edge of the main Dreamweaver MX window. The term docked means that a window is anchored along an edge of the developer interface. A window may be docked along any edge of the developer interface. In this document, we only discuss a few of the Panel windows. The menu items on the Window menu allow you open or close the various Panel Windows. A check mark appears to the left of the menu item for those Panel windows that are visible.

One of the most commonly used Panel windows is the Properties Inspector, which appears in Figure 2.

Figure 2: Properties Inspector

The Properties Inspector allows you to format document content much in the same way that you format document content in Word. That is, you select the text to format in the Design view window, and then apply the desired formatting attribute or attributes. The following list describes features of the Properties Inspector. Note that the items on the Text menu duplicate many of the buttons in the Properties Inspector.

• In the Format list box, you define heading levels, and paragraphs. HTML heading levels operate similar to heading levels in a book or any other document. Heading levels are numbered consecutively from Heading 1 to Heading 6.
• In the Font list box, you select the font to be applied to the text.
• In the Size list box, you define the relative size of the text. HTML documents use a relative size structure instead of explicitly setting the point size. The larger the value, the larger the font size.
• The various buttons control boldface, italics, justification, bulleted, and numbered lists.
• A color box allows you to apply a particular foreground color to the selected text.
• The Link list box creates hyperlinks to other HTML documents. Creating hyperlinks is discussed later in this document.

Creating and Editing a Page

Generally, you will create and work on your Web site in different sessions. Thus, you must know how to create a new Web page, edit existing Web pages, and where and how to save them.

First, we suggest creating a directory on a floppy disk or in your folder in the student labs. All of the Web pages, images, and other objects should be stored in this folder. If you place Web pages and images in different folders, then the Web site will likely not work correctly once it is uploaded to the Web server.

• To create a new Web page, start Dreamweaver MX, click File, and then click New on the menu bar. In the New Document dialog box, make sure that the Category is set to Basic Page, and select HTML. Be sure to set the page title immediately. Next, save the file using a name of your choice by selecting File, Save As from the menu. Remember to save all files to the same directory.
• To edit an existing document, click File and then click Open. Locate and select the file in the open dialog box.

Defining Page Properties

You define general properties of the current HTML page using the Page Properties dialog shown in Figure 3. To activate the Page Properties dialog, right-click anywhere in the HTML document, and then click Page Properties from the context menu.

e

Figure 3: Page Properties dialog

The following list describes the settings in the Page Properties dialog box:

• The contents of the Title property appear in the title bar of the Web browser when the page is displayed.
• The Background Image allows you to define an image that will appear on the background of the Web page.
• The Background, Text, Links, Visited Links, and Active Links properties define the color of the page background, text, and so on.

It is imperative that you give a document a title changing the default name from "Untitled Document" to something else. Otherwise, when hyperlinks to other documents are created, they will be created incorrectly. Thus, before adding text, formatting, or adding hyperlinks to a document, set the page title first.

Inserting Images

Most Web pages have images. An image is inserted into an HTML document by clicking Insert, and then clicking Image on the menu bar. In the dialog box that appears, select the image to insert. The image will be inserted at the cursor position. Once the image has been inserted, it can be resized by selecting the image, and then dragging the image border. Any images that you intend to include in the Web site should be copied to the same directory as the directory containing the Web pages.

When inserting images into a Web page, the images are not embedded into the Web page itself. Rather, each image is stored as a separate disk file. Images are downloaded from the Web server as the page is rendered. Examine the following HTML tag that defines an image:

<img src="FigDream3.jpg">

The preceding tag is an Image <img> tag. The name of the image is FigDream3.jpg. Note that this image is considered a relative reference because only the image name appears. An absolute reference would contain the full URL of the file to be downloaded. When the browser downloads this Web page, it will be downloaded from the same directory (folder) containing the Web page itself. This is one of the reasons why we strongly suggest that you place all of the files related to your Web site in the same physical directory. Furthermore, remember that file names are case sensitive on UNIX servers. Thus, the files named "FigDream3.jpg", and "figdream3.jpg" are not the same.

It is imperative that you pay attention to the case of the file names that you create as hypertext links and image links will not work. So that the images you create will be inserted correctly, create all the HTML pages in the same directory containing the images. DO NOT SELECT IMAGES FROM OTHER DIRECTORIES. In addition, we suggest that you use lower case characters for all file names.

In addition to relative file names, Dreamweaver MX will allow you to create absolute file names, although you generally do not want to do so. Compare the preceding <img> tag with the following <img> tag:

<img src="C:\FigDream3.jpg">

The preceding statement says that the image is located on the root folder of the C: drive on the local computer. This absolute directory reference may work while you are developing the Web page. However, once the Web page is uploaded, the Web server will not be able to locate the image. This happens because the Web server has no notion of the C:\ drive on your computer. Thus, when referencing an image make sure to use relative file references.

If you see Dreamweaver MX displaying file names in the format "File:\\\A:\SomeFile.htm" then you are creating an absolute directory reference. Make sure that you have changed the default document name before creating any links to other pages or any images. Furthermore, make sure that you create all images and all of the Web pages that comprise your Web site in the same directory. Otherwise, you will have difficulty uploading the Web site to the Web server.

Note that when an image is selected, that the Properties Inspector displays different items related to formatting an image. Some of the more significant items appear in the following list:

• The Align item controls how the image is aligned about the surrounding text.
• The Alt item contains text that is displayed as a Tool Tip when the mouse appears highlighted over an image. Also, the contents of the Alt tag appear if the user has disabled graphics.
• The V Space and H Space items control the amount of vertical and horizontal space surrounding an image.

When sophisticated Web developers create Web sites, they use clever techniques to align images appropriately. The topic of sophisticated image alignment is beyond the scope of this document.

Creating Hypertext Links

The real power of the Web comes from hypertext links. It is possible to create hypertext links to other Web pages within a Web site or to Web pages on the Internet. To create a hypertext link, click on the folder icon in the Properties inspector. The Select File Dialog appears as shown in Figure 4. Of course, the files that appear in the dialog will differ depending on the files that appear in the current disk folder.

Figure 4: Creating a hypertext link

In the Select File dialog, select the file to which you want to create a link. If the link is to another Web page in your Web site, then create a document-relative link. That is, make sure that Document is selected in the Relative to list box. In the URL field, enter the name of the page for the link. If you examine the HTML created, you will see the following:

<a href="index.html">index.html</a>

The preceding statement uses an anchor <a> tag. The "href" argument denotes the file name of the link; in this case "index.html". Next, the text appears that will appear in the link. This is the text that the user will see. Note that images can be made into links too. Simply select the image, and then define the link in the Properties Inspector. Note that the Properties Inspector displays different options when an Image is selected than when text is selected.

If you accidentally create an absolute reference, view the HTML by clicking View, and then clicking Code, change the HTML to remove the file name reference. Again, make sure that you have given the document a title before creating hypertext links or the link will be created incorrectly. As mentioned already, create all the HTML documents the comprise your Web site in the same physical directory.

Creating Links to the Internet

The steps to create a link to a Web page on the Internet are the same as the steps to create a link to Web page on a local Web site. However, instead of using relative references, absolute references must be used and contain a complete URL. For example, the following illustrates a link to the Macromedia home page:

http://www.macromedia.com/

It has the following Anchor tag:

<a href="http://www.macromedia.com">http://www.macromedia.com/</a>

The link contains an anchor tag and an "href" argument to denote the link. However, instead of containing a relative file name, the link contains the URL of another web site.

Creating E-Mail Links

The steps to create an E-Mail link are not that much different than the steps to create a hypertext link. Select the document text, and then enter the link in the Properties Inspector. In the Link field enter the text mailto, followed by a full colon, followed by the E-Mail address as in mailto:ekedahl@ix.netcom.com. When the user clicks on the link, the program configured as the default mailer will be opened automatically.

It has the following MailTo tag:

<a href="mailto:ekedahl@ix.netcom.com">mailto:ekedahl@ix.netcom.com</a>

Creating Tables

Tables consist of rows and columns, and work similarly to tables in Microsoft Word. To create a table, click Insert Table on the menu bar to display the Insert Table dialog shown in Figure 5.

Figure 5: Creating a table

The elements shown in Figure 5 should be straightforward.

• The Rows and Columns fields define the number of rows and columns appearing in the table. Don't worry if the table that you create does not have the correct size, as Dreamweaver MX makes it easy to change the size of the table, and the number of rows and columns in the table.
• Remember that a Web page is resized as the user resizes the browser window. Thus, the table width is generally expressed as a percentage, relative to the width of the page displayed in the Web browser.
• The Border field defines the thickness of the border surrounding the cells.

Once a table has been created, you have considerable flexibility in formatting that table. You use the same Properties Inspector to format table elements.

The following list describes some of the techniques applicable to formatting tables.

• To resize a table, column drag the column separator. A different cursor appears when the cursor is placed over a column. Resizing the row height can be accomplished using the same technique.
• Align a column by selecting all of the rows in a column, and then clicking the desired alignment button in the Properties Inspector.
• Note that a table can contain images. In addition, tables can be nested. That is, a table cell can contain another table.
• Set fonts or font attributes in a table by selecting the text in a cell or cells, and then use the Properties Inspector to format the cell contents.
• Apply color to a cell or cells by selecting the desired cell(s), and then select the color in the Properties Inspector.

Checking the Document spelling

Dreamweaver MX supplies a spell checker to check the spelling of a document. To start the spell checker, click Text, and then click Check Spelling on the menu bar. A dialog box appears identifying spelling errors and providing possible suggestions to correct those errors.

Summary

Much more can be said about the capabilities of Dreamweaver MX. In this document, we discussed only the features necessary to complete the Personal Web page assignment. Dreamweaver allows you to manage complex Web sites. In addition, it allows you to develop scripting code, such as JavaScript, that executes on the client browser.