Dreamweaver MX 2004 Basics

UCLA Center for Digital Humanities – Instructional Technology Resources

Dreamweaver Basics - 1 of 20
Dreamweaver MX 2004 Basics

Dreamweaver is a powerful web-authoring application. You can create complex
webpages with or without knowing HTML, and organize, manage, and upload your
website files. This document gives a very brief overview of basic Dreamweaver
functions. For greater detail:

• Consult the built-in Dreamweaver help and tutorials. Open Dreamweaver and go
to Help > Getting Started and Tutorials or Help > Using Dreamweaver.

• Check out the tutorials recommended by UCLA's Teaching Enhancement Center,
a unit of the Office of Instructional Development:
http://www.oid.ucla.edu/units/tec/tectutorials/dreamweaver

• Visit the HTML and Web Design section of our site, to learn more about coding
and web design principles:
http://www.humnet.ucla.edu/itc/resources/webdesign.html


This document covers the following topics:

Part 1: Dreamweaver Overview
o The Dreamweaver Workspace
o Creating and Saving a Webpage
o Previewing a Webpage

Part 2: Site Management
o Setting up a Dreamweaver Site
o Using the Files Panel to Manage Files
o Global Find and Replace
o The Check-Out and Check-In System
o Using the Files Panel to Upload and Download Files

Part 3: Using Templates
o Creating a Dreamweaver Template
o Creating a webpage based on a Template
o Making changes to a Template and updating webpages based on that
Template

The instructions apply specifically to Macromedia Dreamweaver MX 2004, but the steps
in earlier and later versions of Dreamweaver should be similar.

---

UCLA Center for Digital Humanities – Instructional Technology Resources

Dreamweaver Basics - 2 of 20
Part 1: Dreamweaver Overview

This section introduces the application and explains how to create and save a simple
webpage.

The Dreamweaver Workspace

When you run Dreamweaver for the first time, you will be asked to choose between
Coder's View and Designer's View. Regardless of which view-type you choose, you will
be able to switch back and forth between these three views:

1. Code view shows the actual contents of the document, the plain text HTML (or
other scripting language) that is sent to the browser for display. Dreamweaver
color-codes this text to help you distinguish between tags and text that will
display as content.

2. Design view shows how the document will appear. Keep in mind that
Dreamweaver is not an actual web browser, so sometimes the way things display
in Design view is not always how they end up in the browser.

3. Split view shows code in one half of the Document Window and the design
preview in the other half.

At the top of the Dreamweaver program you will see a Menu Bar that gives you access
to all the Dreamweaver tools and functions. The rest of the Dreamweaver workspace is
setup as a series of panels. The arrangement of the panels is slightly different for Mac
and Windows (see Figures 1 and 2). You can also move these windows around as you
work.

Figure 1: Dreamweaver workspace in Windows XP

---

UCLA Center for Digital Humanities – Instructional Technology Resources

Dreamweaver Basics - 3 of 20
Figure 2: Dreamweaver workspace in Mac OS 10



Most of the time you will be working in the Document Window (see Figure 3). This is
where you type your code or text and insert page elements like images, links, and
tables. At the top of the Document Window is the Document Toolbar, where you can
click the buttons to switch between Code, Split, and Design views, define the title of
your page, and access a few other tools.

Figure 3: Document Window and Document Toolbar

---

UCLA Center for Digital Humanities – Instructional Technology Resources

Dreamweaver Basics - 4 of 20
The easiest way to add elements to your page is by using the Insert Bar (see Figure 4).
On this bar you will see icons representing many of the most common page elements,
like link, named anchor, table, image, and comment. Click in the Document Window
where you want the element to appear, then click the appropriate button on the Insert
Bar. Voila, the element will be added to your page and you can change its properties
further.

Figure 4: Insert Bar



To change the properties of individual elements, you use the Properties Panel (see
Figure 5). The Properties Panel will change depending upon what element you have
selected, since different elements have different attributes. Click on the element you
would like to edit, and then specify the settings in the Properties Panel.

For instance, if you inserted an image, you could select it, and then specify its width,
height, alignment, a URL to link to, and so on. Just choose what you want in the
Properties Panel, and Dreamweaver will insert the appropriate code.

Figure 5: Properties Panel



Above or below the Properties Panel, you will see the Results Panel. This panel will
probably be collapsed, unless you are running a Find/Replace search or checking your
code for errors. In this case, the results of your search/check will display in the Results
Panel.

The Design Panel allows you to control the appearance of your page using CSS
(Cascading Style Sheets) (see Figure 6). Select the CSS Styles tab, and use the small
buttons at the bottom to attach an external style sheet, add a new style, edit an existing
style, or delete a style. Working with styles through the Design Panel allows you to
control all the attributes through dialog boxes instead of editing the CSS code.

---

UCLA Center for Digital Humanities – Instructional Technology Resources

Dreamweaver Basics - 5 of 20

Figure 6: Design Panel



The Code Panel has two tabs (see Figure 7). Snippets will give you bits of prewritten
code that you can insert into your webpage. Reference provides guides to many web
languages, including HTML, CSS, Javascript, and PHP. You can look up individual tags
and attributes to find out what they do and how to use them. This is very handy!

Figure 7: Code Panel



You probably won't use the Application Panel at this point. It allows you to control
settings for elements on dynamic webpages.

---

UCLA Center for Digital Humanities – Instructional Technology Resources

Dreamweaver Basics - 6 of 20
The Tag Inspector Panel is also for more advanced editing. The Relevant CSS tab
provides another way to edit styles for your webpage, but the interface is trickier. It's
probably best to use the Design Panel to edit styles unless you are very familiar with
CSS attributes and values.

The Files Panel is extremely useful (see Figure 8). This is where you can manage all
your website files without having to leave Dreamweaver. It works much like Explorer
(on Windows) or Finder (on Mac). You can create folders, copy, move, and rename
files, and upload and download files to and from your remote server. Part 2 of this
tutorial contains some instructions on using the Files Panel.

Figure 8: Files Panel



This ends our introductory tour of the Dreamweaver workspace. There are many
panels, tools, and menu options, so be sure to explore on your own and consult the
Dreamweaver Help (at far right of Menu Bar).


Creating and Saving a Webpage

Follow these steps to create a simple webpage in Dreamweaver:

1. On the Menu Bar, go to File > New…

2. In the New Document dialog box, make sure the General tab is selected. Under
Category choose Basic Page and under Basic Page choose HTML (see Figure
9). You can also choose whether your document will be standard HTML or
XHTML compliant by checking the box in the bottom right.

---

UCLA Center for Digital Humanities – Instructional Technology Resources

Dreamweaver Basics - 7 of 20

Figure 9: the New Document dialog box



3. Click Create and the new webpage will open in the Document Window.

4. Give your page a title by clicking next to Title: on the Document Toolbar (it
should currently say "Untited Document"). This is the title that will appear at the
top of the web browser window when someone views your page. It does not
appear on the page itself.

5. Add content to your page by clicking in the Document Window and doing one of
the following:

a. Switch to Code view and type the HTML code.
b. Click a button on the Insert Bar, fill out the information requested by the
dialog box, and click OK.
c. On the Menu Bar, go to the Insert Menu, select the desired element, fill
out the information requested by the dialog box, and click OK.

6. Customize the page content as desired by clicking on elements and using the
Properties Panel. You can also switch back and forth between Code, Split, and
Design views if desired.

7. To save your webpage, go to the File Menu and choose Save as… Browse to
the location on your computer where you would like to save this file. Type a

---

UCLA Center for Digital Humanities – Instructional Technology Resources

Dreamweaver Basics - 8 of 20
name in the File name: box (see "Naming Tips" below). When finished, click
Save.

Webpage Naming Tips
Follow these conventions to give your webpage a workable name:
• Use the extension .html or .htm so the web browser will recognize
your file as a webpage.
• Use all lowercase letters. Most web servers are case-sensitive, so
consistently using lowercase helps prevent errors in links and coding.
• Use only letters, numbers, and underscores. Spaces and special
characters cause problems on many web servers.
• Keep the name short. Visitors may have to type the name of your
webpage, and other webmasters may link to it, so it shouldn't be too
long.
• Keep the name meaningful. Full words are easier to remember and
understand, for yourself and visitors, so don't make the file name too
cryptic.



Previewing a Webpage

The way that a document displays in Dreamweaver isn't always how it appears in an
actual web browser. Different browsers may display elements with slight differences,
and some scripted or hidden elements won't appear in Dreamweaver. Before
publishing your page, you should make sure it appears correctly in several web
browsers.

To preview your webpage in an external browser, follow these steps:

1. Go to File Menu > Preview in Browser and choose the browser you would like
to use.

2. If the browser you want to check isn't in the list, choose Edit browser list… and
add the browser. Click the + (plus sign) and fill out the required information.
Click OK, then click OK again.

3. Your webpage should open in the external browser. Make note of any
irregularities and return to Dreamweaver to make adjustments.

We recommend that you check your page on Windows in Internet Explorer and at least
one Mozilla-based browser (Firefox, Mozilla, or Netscape) and check it on a Macintosh
using Safari and at least one Mozilla-based browser. You want to be sure all visitors
can see your page, regardless of their operating system or web browser.

---

UCLA Center for Digital Humanities – Instructional Technology Resources

Dreamweaver Basics - 9 of 20

Part 2: Site Management

Dreamweaver includes several panels and tools that allow you to manage files within
Dreamweaver itself. You do not have to open a separate Explorer or Finder window to
delete or rename files, or a separate FTP application to upload them. Additionally, there
are tools that allow you to make changes to your entire site at once (such as updating a
link) and manage the workflow among multiple page designers.


Setting up a Dreamweaver Site

To take advantage of these tools, you must first define a site in Dreamweaver. Follow
these steps to define a new site:

1. On the Menu, click Site > Manage Sites. . ..

2. Click New. . . > Site. The Site Definition Screen opens. If the Basic tab isn't
selected, click on it.

3. Type a name for the site (like “English Fall 05 Site”) and click Next.

4. Choose, “No, I do not want to use a server technology” and click Next. (You can
always change this later if you are using a server technology.)

5. Choose “Edit local copies on my machine, then upload to server when ready”; for
where to store your files, click on the little folder next to the box and navigate to
the folder on your computer where you want to keep the files; click Open, then
Select, then Next.

6. For “How do you connect to your remote server?” choose None if you won't be
using Dreamweaver to upload files. If you will be (and we recommend it if you
can) choose FTP:
a. Hostname: enter webserver host name (example: www.humnet.ucla.edu)
b. Folder to store files: if the files will go in a subfolder on the server, enter
the name of the folder here
c. FTP login: enter your username
d. Password: enter your password
e. Don’t check the box for Secure FTP, unless your server requires it
f. Test the connection; if it works, click Next. If not, adjust the settings
and/or contact your server administrator.

7. Choose “Yes, enable check in and check out” and “Dreamweaver should check it
out”; enter your name and email address and click Next. (The check in and
check out system will be explained below.)

---

UCLA Center for Digital Humanities – Instructional Technology Resources

Dreamweaver Basics - 10 of 20
The site should now appear in the Files Panel (usually to the left or right of the
workspace). Click the Files tab if it's not selected.

To change these settings later, go to Site > Manage Sites. . . , select the site name,
and click Edit. You can also create and edit sites from the dropdown box in the Files
Panel. Click the down arrow and choose Manage Sites. . . from the bottom of the list.


Using the Files Panel to Manage Files

Once you have defined the site in Dreamweaver, your files will appear in the Files
Panel.

Choose which site to view in the left-hand dropdown box (see Figure 10).

Figure 10: Files Panel left-hand dropdown box



Switch between Local view (showing the files on your computer) and Remote view
(showing the files on the server) in the right-hand dropdown box (see Figure 11).

---