Dreamweaver is a very powerful Web developing environment. This page will introduce you to the basic features you will need to use in Dreamweaver. It is important to note that if ever you need individual assistance or become frustrated, the Web office is more than happy to help out. Give us a call anytime at (509) 962-5109 or email daysj@cwu.edu.

To start Dreamweaver, go to your Start Menu —> Programs —> Macromedia —> Macromedia Dreamweaver.

Or if you have the Dreamweaver icon on your desktop, you may double-click it to start the program.

Top of Page

Go to File —> New... You will get a new window that looks like the image below. (Keyboard shortcut to create a new page: press Ctrl and N on your keyboard simultaneously.) If you click on the Templates tab in this window, you should see three files to choose from:

1. BaseTemplate: You will never need the base template. This is used by Dreamweaver so you can ignore this.
2. LevelOneTemplate: Choose this template if you would like to create a new department homepage (level 1 page).
3. LevelTwoTemplate: Choose this template if you would like to create a new lower level page (level 2 page).

More details on editing a new homepage or editing a lower-level web page.

Top of Page

To open an existing Web page, go to File —> Open and then browse to your Web page.
(Keyboard shortcut to open page: press Ctrl and O on your keyboard simultaneously.)

Or you may open the desired page by double-clicking the filename that displays in your Files panel, which will be located on the right or left side of your screen. If you do not see this panel, it may be hidden from view. Find the arrow indicated in the picture below to display this panel.

Top of Page

To save changes to a Web page, go to File —> Save.
(Keyboard shortcut to save a page: press Ctrl and S on your keyboard simultaneously.)

Top of Page

Dreamweaver has three different views available for you to edit your Web pages.

1. Code: This view will allow you to edit the HTML code behind your Web page.
2. Design: This view will allow you to edit Web pages without seeing the HTML code.
3. Split: This view allows you to edit your Web page with both Code and Design View.

We suggest you use the Split View so that get used to both views and can see the code that is generated.

Avoid using Design View when possible. Editing using Design View autogenerates a best guess of HTML code that could lead to an inaccessible Web page that will not validate. Using Code View familiarizes you with HTML code, which allow you the most flexibility in the design of your page.

Top of Page

Find out more on editable code regions for your homepage.

Find out more on editable code regions for lower level pages.

Top of Page

Document Toolbar

This toolbar displays common buttons for such things as the different view options or the Preview/Debug Browser button used to view your page in a browser.

If you do not see this toolbar, you can go to your menu and choose View —> Toolbars —> Document.

Standard Toolbar

This toolbar displays common buttons for such things as saving, opening, copying, and pasting.

If you do not see this toolbar, you can go to your menu and choose View —> Toolbars —> Standard. Below shows some of your commonly used buttons.

Insert Toolbar

This toolbar is actually several toolbars in one. There is a drop down arrow that allows you to browse through eight different toolbars. The most commonly used toolbars that you will use are the Common and Text toolbars.

If you do not see this toolbar, you can go to your menu and choose View —> Toolbars —> Insert. Below shows some of your commonly used buttons.

More on how to use the Insert Toolbar.

Top of Page

There are a number of panel groups that can display in Dreamweaver at any given time. You will have a panel group on the side and on the bottom of the screen.

The side panel will display on the left or right side of the screen, depending on what version of Dreamweaver you are using. By default, this panel should display the site environment in which you are working. This site will display a list of all your Web files within this environment.

Top of Page

Find out more on uneditable code regions for your homepage.

Find out more on uneditable code regions for lower level pages.

Top of Page

If you have a Web page open in Dreamweaver and would like to see how it would look on your computer browser, you may click on the Preview/Debug Browser button in your top toolbar.

Note: Depending on how your version of Dreamweaver was set up, your web page may display without colors and images. If this is the case, give us a call at (509) 963-2810 and we will be happy to run through your Dreamweaver settings.

Top of Page

Dreamweaver, like many software applications, has a find and replace feature. If you would like to take advantage of this useful feature, go to Edit —> Find and Replace...

Top of Page