"How to" Guideline series is coordinated by Helen Mongan-Rallis of the Education Department at the University of Minnesota Duluth. If you have any questions, comments, or suggestions to improve these guidelines please me at e-mail hrallis@d.umn.edu.

rainbow bar

How To: Macromedia Dreamweaver Basics

The purpose of these Dreamweaver basic guide is to help first time users create a basic web page using Macromedia Dreamweaver. The topics in the guide are as follows:

  1. Setting Dreamweaver Default
  2. Open Dreamweaver
  3. Give your page a title
  4. Save your page
  5. Using the text properties palette
  6. Using the object properties palette
  7. View your page in a browser
  8. Practice exercise (this is a link to a new page)

Setting Dreamweaver Default

If you have your own copy of Dreamweaver you should customize up the default properties to suit your needs. To do this follow the guidelines from the UMD ITSS workshop Opening Dreamweaver and Setting Defaults. If you are using one of the UMD lab computers or someone else's computer, then skip this step.

Open Dreamweaver

Depending on the settings of your computer, opening the program may automatically open a blank, untitled web page. If it does not, go to the File menu and select New. This will open an untitled document.

Give your page a title

The title is the part that appears at the top of a Web browser and is also the name that will appear in the bookmarks of the browser. Thus you should choose a title that makes sense to others and not just to you (example: "Helen's Home Page"). To enter a page title:

In Dreamweaver 3: click on the title icon on the top left of the blank screen. If this icon does not show upper, from the View menu --> choose "head content."

    screen shot of title icon
    The title icon is the one on the left with the little arrow pointing at it.

When you click on this icon the title box appears. Type the title of your page in the space provided.

In Dreamweaver 4: A blank title box appears at the top of the page. To enter the page title, all you need to do is click on this box and type in the name of the page title.

Save your page

To do this, from the File menu choose Save. When the save dialog box appears on the screen, navigate through your computer to the location where you intend to keep your web pages [Note: If your page is going to be part of a web site, you should save it to your web site folder (see guidelines for creating a web site)]. In the space provided, enter the name of the page.

Important:

The names of web pages must be one word (no spaces). If you want the file name to have more than one word in it, then you need to run these words together to form one word. There are different conventions to naming web pages. There is no one "correct" way (so long as you have no spaces), but it's a good idea to decide which you want to use and then stick to the same format for all your pages. Examples:

If you are using a Mac, you must make sure that the file name is followed by the file extension .html (if you are using a PC,the extension will be added in automatically for you. Macs use the extension ".html" while PC's use ".html" -- but both work).

Using the text properties palette

screen shot of text properties palette

The text properties palette is used for formatting the text on your page. It contains the following functions:

Creating links:

Creating an absolute link:

  1. Highlight the word that you want to make into a link.
  2. In the properties palette, click in the blank link box. Type in the URL of the page to which you wish to link.
    [Note: It is actually better to copy the page URL from your browser so that you avoid typing in an incorrect address. (highlight the URL --> choose Edit --> Copy) and then paste it into the link box in Dreamweaver by using the shortcut Option --> V (Windows) or Apple --> V (Mac). ***This will not work unless you use the shortcut for paste***

To create a relative link (to a file within your site):

  1. Highlight the word that you want to make into a link.
  2. In the properties palette, click on the icon of a folder (this is in the middle of the palette).
  3. Browse through your computer to your web site and locate the file to which you want to link.
  4. Click on the "open" button (this is a bit confusing as you aren't trying to open the file -- you just want to link to it! Nevertheless, by clicking on "open" you creating the link command).

Creating an e-mail link

This is used when you want users to be able to send an e-mail without having to type in the e-mail address. When users click on an e-mail link a new message window will open using the mail program associated with the user's browser (e.g. Outlook Express will open, and a new message window will appear with the e-mail address already entered).

  1. To insert an e-mail link, place the cursor on your web page in the place in which you want to insert the link or highlight the text words that you want to appear as the e-mail link.
  2. Click on the Insert E-Mail Link on the object palette.
  3. In the E-mail field, type the e-mail address mail should be addressed to.
  4. Click OK.

Using the object properties palette

The object palette contains buttons for inserting objects such as tables, layers, and images. In this Dreamweaver Basics guide only some of the items from the common object palette will be explained. If the object palette is not visible when you open Dreamweaver, go to the Window menu and select objects. This will place the palette on your screen:

screen shot of object properties palette

Insert an image:

Before inserting an image onto your web page, make sure that it is (a) saved either as a .jpg (or .jpeg) or .gif (b) saved into your web site folder [to learn more about web site organization, see web site guidelines]. It is a good idea to have a separate folder (directory) for images contained within your web site.

  1. To insert an image, place the cursor on your web page in the place in which you want to insert the image.
  2. Click on the picture of the little tree (top left of the object palette). This will bring up a dialog box asking you to select the image source. Navigate to the folder in which you have the image saved and click the "open" button. This will insert the image onto your page.

photo of sunsetTo have the text wrap around the image:

  1. Click at the start of the paragraph next to which you want the image to appear (even if you want the picture to appear at the end of the paragraph and on the right). Next,
  2. Insert the image (see above for how to do this).
  3. Click on the picture to select it.
  4. Then, from the properties palette, click on the arrow next to the word "align." From the pop up menu make a choice. Example: If you choose "right" the image will appear to the right of the text, as shown here with the sunset photo.

Provide alt. tag for image:

It is very important to include a description of the image for (a) those users who choose to set their web browsers not to load images [this helps speed up the load time of pages and is very useful if you have a slow modem connection] (b) for people who have vision impairments and who use a screen reader to read out loud what is written on the web page.

  1. Once you have inserted the image, click on it. Notice that the properties palette switches from the text properties palette to the image properties palette.
  2. Click in the box next to where it says "Alt." Type in a short description of the image (e.g. the alt tag I used for the image properties palette image below says, "Screen shot of image properties palette").

screen shot of image properties  palette

Align image

You can align the image left, center, or right by selecting it (click on it) to bring up the image properties palette. Change the alignment by clicking on your choice of alignment boxes from the 3 in the bottom right corner of the image properties palette.

Insert and work with tables

  1. To insert a table, place the cursor on your web page in the place in which you want to insert the table.
  2. Click on the picture of the table on the objects palette. This brings up the "insert table" dialog box.
  3. In "insert table" dialog box select the appearance of your table:
  4. To select the entire table, do one of the following:
  5. To select rows or columns, do one of the following:
  6. To select one or more cells, do one of the following:

Insert a horizontal rule

This is used to separate different sections of a web page.

  1. To insert horizontal rule, place the cursor on your web page in the place in which you want to insert the rule.
  2. Click on the picture of the horizontal rule on the object palette.

View your page in a browser

In order to see what your page will look like when you upload it to the web you can preview it in your browser. (This does not mean that it is actually on the web, however -- to do that you have to upload your page, This will be described later).

To preview your page:

  1. from the File menu --> select Preview in browser.
  2. Select the browser from the list (usually Internet Explorer or Netscape).

If your preferred browser doesn't appear in the list, then:

  1. Select "Edit Browser List" from the list that appears when you chose the "Preview in browser" option above.
  2. Click on the edit button and browse through your computer to locate your choice of browser.
  3. When you locate the browser, click the box next to "Primary Browser" to make this your default choice.
  4. Click OK

To try out some of these steps using the text palette, go to the Practice Exercise.

rainbow bar

Return to the Index of How To Guidelines