Setting Preferences

To set preferences for using Dreamweaver, choose Edit > Preferences.
This dialog box appears:

You may be happy to leave the preferences as they are, or you may wish to change something to fit your style of working. It is a good idea to take a look at the different preferences you can set, even if you have no plans to change the defaults at this point.

Preferences are grouped by categories. To change the preferences, click a category heading on the left side of the dialog box.

For example, you may wish to change the defaults for the browser in which to preview your Web pages (Preview in Browser item in category) or the programs for editing different file types (File Types / Editors category)

In the Preference category for New Document, it is a good idea to check the box labeled "XHTML Compliant." This helps to ensure that the code Dreamweaver creates will be consistent with current html standards.

Setting page properties

To view options for page properties, choose Modify > Page Properties.

A dialog box appears that allows you to set options for the page, organized into categories. For example, the appearance category allows you to set options such as the page's default text font and size, text color, background color, background image (if desired), and margins.

Adding keywords for search engines

So that search engines will find your site, you may want to add "metatags" to the head portion of your html document. To do this, go to the HTML Insert toolbar and click on the icon for keywords. (You can also enter a description or metatags if you wish by choosing those options.)

In the dialog box that appears, enter the keywords (separated by commas) or the description.

Adding Text

You can add text to your Web page by

entering it directly on your page. To enter text, click on the page where you want the text to go and start typing.
cutting and pasting text from another document. To add text from another document, copy it (in most programs, Edit > Copy). Then click in your Dreamweaver document and choose Edit > Paste Text.
importing a Microsoft Word document. To import a Microsoft Word document, first save the Word document in HTML format. Then in Dreamweaver, choose File > Import > Word document. The word document is converted into a new Dreamweaver document.

When you are adding or editing text in Dreamweaver, you should keep the properties palette on the screen (to display it, choose Window > Properties). The Properties palette allows you to format the text.

Inserting images

To insert images, you can do any of the following.

Choose Insert > Image.
Click the image icon () on in Common Insert panel.

With either of the above methods, a dialog box will appear to allow you to browse to an image file. When you choose an image, it appears on the Web page at the location of your cursor.

Drag an image file from the Files panel to your document.

The properties panel shows the properties for the image. (If the properties panel is not on your screen, choose Window>Properties to display it.) You can adjust properties such as its position (V space and H space), border, and alignment. You can also make the image a link by entering a file name or url into the Link field in the properties panel while the image is selected.

Note: You can change the dimensions of your image by selecting it and entering values for width (W) and height (H) in the properties panel. But keep in mind that Dreamweaver is not an image editor. If you need to make major changes in the size or other attributes of an image, use Photoshop or another imaging software program.

Creating Links

Linking to a url or file:

To create a link, select the text or image that you want to link from. Then do one of the following:

Choose Modify > Make Link
Type (or paste) a url or file name in the Link text box in the properties panel
Click on the folder next to the Link text box in the properties panel. A dialog box will appear that allows you to browse to the file to which you want to link
Click on the globe icon next to the Link box in the properties panel, and drag the mouse to a file name in the Files panel.

In the following example, the text "ACP Journal Club" was selected, then the globe icon next to the Link box in the properties was clicked, and the mouse was dragged from the globe icon to the file name "key_resources.htm" in the Files panel.

Linking to another place on the same Web page:

To link to a place within the same Web page, do the following:

1. Create an anchor. An anchor specifies a location to which you want to link within a Web page.

a. Put the cursor where you want the anchor to be.

b. Choose Insert > named anchor, or click the anchor icon ()
in the Common Insert toolbar.

c. In the dialog box, enter a name for the anchor.
(Important: this name must not include any spaces!)

2. Create a link to the anchor. To do this,

a. Select the text or image to which you want to attach the link.

b. Specify the destination (anchor) for the link. You can do this in any of these ways:

Press shift. Then drag from the selected text or image to the anchor.

In the properties panel Link box, enter a pound sign (#) and the name of the anchor.

In the properties panel, click the globe icon next to the Link box, and drag to the anchor on the page.

Linking to a specific place within another Web page:

This is a combination of linking to another page and linking to an anchor. When you create the link, the link box in the properties palette needs to show both the HTML page and the anchor.

You can create this kind of link using the properties panel.

1. Open both pages in Dreamweaver so you can see both pages on the screen.

2. Create an anchor on the page to which you want to link.

3. Highlight the text or image from which you want to link.

4. Click the globe icon next to the Link box, and drag to the anchor on the other page.

Inserting rollover images

To insert a rollover image, choose Insert > Image Objects > Rollover Image.

rollover menu item

The Insert Rollover Image dialog box will appear.

Enter the names of the original image and rollover image. Type Alternate text (this is for disabled users). If you want the rollover image to include a link, enter the address (or anchor) of the link in the "When clicked, go to URL" box. The above example shows how the following Top of Page rollover image was added to this page.

Looking at the HTML

Dreamweaver allows you to easily view (and change, if you wish) your html code. You can easily find precisely the code you want to examine.

To look at the html, select the portion of your document you want to examine. Then click on either "Code" or "Split" in the Document toolbar to see the code. In the following example, the heading "1. Welcome" was selected, and "Split" was clicked, which displayed both the code and the design views at the same time

Split View

You can modify the html source code if you like and the changes will be reflected
in your Dreamweaver design view window simultaneously. This is an excellent way to learn and test how html code works. Some people even prefer to work in code or split view. But even if you don't normally work in code or split view, they are great options to have for troubleshooting.

Previewing in a Browser

You can preview your work in a browser anytime by choosing File > Preview in Browser or by pressing the F12 key. It is a good idea to do this frequently so you know what your work will look like. To change the default for the browser in which your file will be displayed, go to Edit > Preferences, and choose the Preview in Browser category.

Exercises

Note: For instructions on how to set up practice files for these exercises, go to the Exercise Instructions page.

1. Create a launcher that includes the Properties palette (Hint: open the preferences).

2. Open the Web page called Pwelcome.htm. Change the Properties so that the background is a different color.

3. Add some keywords to Pwelcome.htm so that Web search engines will find it.

4. Add the image "title.gif" to the top of the page. Add the same image to the tops of Pui.htm, Pconcept.htm, and Pselect.htm.

5. Insert images into Pui.htm and Pconcept.htm.
(Note: see the notes inside asterisks on these pages to see where to insert images)

6. Add links from Pwelcome.htm to the other pages in your site.

7. Highlight part of your page, then take a look at the html for the page. Notice how Dreamweaver highlights the html code for you.

8. Insert "top of page" rollover images on Pui.htm, Pconcept.htm, and Pselect.htm. Use top.gif as the original image and topov.gif as the rollover image. Link it to the top of the page (hint: you need to put an anchor at the top of your page).

9. Insert the "next.gif" image at the bottom of the page. Link it to UI.htm. Then add "previous.gif" and "next.gif" at the end of the other pages, and add the appropriate links.

10. Preview your page in a browser.