This document provides an overview and introduction to using Dreamweaver MX, including: - Its capabilities for designing and managing websites visually or with code - How to set up a local website and add pages, text, images and links - Tools for previewing pages, uploading sites, and checking links - Recommended prerequisite knowledge includes familiarity with HTML, websites, and how they work.

1. Introduction to Dreamweaver MX Sarah Bombich
Arc: Library Technology Center
1/6
Introduction to Dreamweaver MX
Goals
 Familiar with Dreamweaver’s capabilities
 Knowledge of when it is (or is not) appropriate to recommend Dreamweaver as a
solution
 Understanding of learning curve
 Familiar with Dreamweaver’s workspace and basic tools
What is Dreamweaver?
 “…the professional choice for building web sites and applications. It provides a
powerful combination of visual layout tools, application development features, and
code editing support. With robust features for CSS-based design and integration,
Dreamweaver enables web designers and developers to easily create and manage any
website.” [macromedia.com]
 A WYSIWYG (What You See Is What You Get) web page editor
 A website development and management tool
What Can I Do With Dreamweaver?
 Create web pages graphically or with straight HTML
 Create web sites, including the use of templates if desired
 Maintain web sites
 Upload and synchronize local copy of web site with server
 View a site map
Prerequisite and Helpful Knowledge
 Familiarity with the World Wide Web (WWW) required
 Understanding of how the WWW works, including familiarity with web servers, web
browsers, and web standards, is strongly recommended
 Understanding of how a web site is structured, both the underlying files and the user-
experienced site structure, is strongly recommended
 Working knowledge of HTML is strongly recommended

2. Introduction to Dreamweaver MX Sarah Bombich
Arc: Library Technology Center
2/6
Introduction to the Workspace
 Document Window
o Code View vs. Design View
 Insert Panel
o Common, Layout, Text, Tables, Frames, Forms, Template, Characters, Media,
Head, Script, Application
 Properties Inspector
o Changes according to what you have selected
 Panel Groups
o Design: CSS Styles, HTML Styles, Behaviors
o Code: Tag Inspector, Snippets, Reference
o Files: Site, Assets (Can remove site files from panel)
o Answers

3. Introduction to Dreamweaver MX Sarah Bombich
Arc: Library Technology Center
3/6
Setting Up a Website
 Set up a local copy, with structure identical to the site that will be placed on a server.
Place all files in the same root folder, with an images folder within it. Macromedia
suggests the structure root folder > Assets > Images. All other CSS, scripts, etc. can
also be placed in the Assets folder.
Set up a local site using the Site Definition Dialog Box
 Site > New Site
Create a New Page
 Enter a descriptive title in the "Title:" textbox at the top of the document window. This is
the title that will appear in the title bar of the browser window when people view your
page; it is also the text that will be used when someone creates a bookmark to your
page.
 Save the document. Make sure the main page (in the root folder and any subfolders) is
named ‘index.htm’ or ‘index.html’
Page Properties
 To set properties that affect the entire page, choose Page Properties from the Modify
menu.
o Title: You set this when you created the new page.
o Background Image: You can specify a relative or absolute path to an image to
appear in the background of every page. You may also browse your hard drive for

4. Introduction to Dreamweaver MX Sarah Bombich
Arc: Library Technology Center
4/6
an image and the path will be automatically listed.
o Background: Choose from dropdown color palette; use the eyedropper to pick any
color on your computer screen (such as a color from the background image if you're
using one); or type in the hexadecimal code.
o Text, Links, Visited Links, Active Links: For each of these, you can choose from
dropdown color palette, use the eyedropper to pick any color on your computer
screen, or type in the hexadecimal code.
o Left Margin, Top Margin, Margin Width, Margin Height: Keeps your graphics and
images away from the edge of the page. Left Margin and Top Margin are supported
by Internet Explorer, not part of the official W3C html spec (4.0). Margin Width and
Height are part of the official spec and supported by all three browsers. Although
supported my most browsers, deprecated in favor of using CSS.
o Tracing Image and Image Transparency: The tracing image and its corresponding
transparency setting allow you to pick an image which will be displayed in the
background of the document design window while you work.
Text
 You can type text or cut and paste text from another source.
 Properties panel allows text formatting. Text options are also available from the Text
menu.
o Format: Choose Heading levels and other formatting styles from the dropdown
menu.
o Default Font: For each selection on the dropdown, there are several fonts listed, to
allow for differences among computer platforms (e.g., Windows, Macintosh, and
Unix).
o Size: When specifying a size, you can use font size (1, 2, 3, etc.) or + and - sizes
(+1, +2, +3, etc.). None = size 3.
o Color: Choose from the dropdown color palette, use the eyedropper to pick any
color on your computer screen, or type in the hexadecimal code
o Ordered and Unordered Lists: Use the buttons provided to create an ordered
(numbered) or unordered (bulleted) list. To customize the formatting of a list, click
the List Item button and make selections in the List Properties dialog box.
o Increade or Decrease Indent Buttons: Use these in the same way you would in a
word processing program.
 Inserting Special Characters. To insert special characters, such as the copyright
symbol © or the Spanish language character ñ, select Special Characters from the
Insert menu and make a choice from the cascading menu that appears. If you choose
"Other" a grid will be displayed from which you can make your choice.

5. Introduction to Dreamweaver MX Sarah Bombich
Arc: Library Technology Center
5/6
Links
 Absolute and Relative Links. Highlight the text or object that you want to make into a
link. Then use Properties panel to enter the appropriate link information.
o If you click the Browse for File icon (a folder) you can browse and select a file from
within your own site. Pay attention to whether your relative link is within your site
folder and whether you have saved your document.
 Internal Links (or "Jump Links"). To insert an internal link do the following:
o Click on the location you would like an anchor.
o Insert > Named Anchor. Name the anchor. An anchor icon will appear in the
document. It is not throwing off your formatting, even if it looks like it is.
o Select the link text. Type the name of the anchor in the Link: box of the formatting
palette.
 Email Links
o Insert > Email Link
Inserting Common Objects
 Image
o Insert > Image. Locate and select an image within your site (File name:) or type the
URL for a non local image (URL:).
o Be sure to use the Properties panel to add alternate text that describes the image
(Alt). You can also change image alignment (Align) in relation to the text or make the
image a Link. You can also vertical and horizontal space (V Space or H Space) or
add a border (Brdr) around the image.
 Current Date. Using Insert > Date you can insert the current date in a format you
specify by selecting options in the dialog box that appears. If you select "Update
Automatically on Save", the date will be updated every time you modify and re-save the
page.
Previewing a Page
 Although Dreamweaver is called a WISIWIG program, each web browser has its own
rendering engine, none of which are indentical to Dreamweaver’s. To avoid
embarrassingly poor page rendering, you should preview your pages in a Netscape-like
browser (Mozilla, Firefox), Internet Explorer, and Safari (Mac).
 Click the Preview/Debug in Browser button on the Document toolbar and select

6. Introduction to Dreamweaver MX Sarah Bombich
Arc: Library Technology Center
6/6
a browser. To add a browser to the list, you can use Edit Browser List option on the
dropdown menu. After adding browsers, you can use the specified Function keys to
quickly preview your work.
Uploading to a Web Server
 Synchronize local and remote site
o Site > Synchronize to transfer the latest versions of your files to and from your
remote site
 Upload specific files
o In the Site panel
 Click the Put button on the Site panel toolbar
 Choose Put from the context menu
o If the file is currently open in a Document window, you can instead choose Site
> Put from the Document window.
 Site Map
o Use the site map to lay out site structure and to share graphic images of your
site structure with others; it also helps you visually check your links within the
site
o You must define the home page for your site before you can display the site
map
o To view a site map select View > Site Map
 Select map only to view the site map without the local file structure or
site and map to view the site map with the local file structure
 Check Links Sitewide
o Search for broken links and unreferenced files in an open file or the entire local
site
o Dreamweaver only verifies links to documents within the site; Dreamweaver
compiles a list of external links that appear in the document(s), but does not
verify them
o When finished checking, results are listed in the Link Checker panel
o Site > Check Links Sitewide
 Clean Up HTML
o Commands > Cleanup HTML
o Will correct any poor or invalid HTML