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
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