Macromedia Dreamweaver 8
Revealed
GETTING STARTED WITH
DREAMWEAVER
Chapter Lessons
Explore the Dreamweaver workspace
View a Web page and use Help
Plan and define a Web site
Add a folder and pages, and set the
home page
Create and view a site map
Macromedia Dreamweaver 8 Revealed
Chapter 1
2
Getting Started with
Dreamweaver
What is Dreamweaver?
– Web design software for creating a
Web page or a complex Web site
What is a Web site?
– A group of related Web pages that are
linked together and share a common
interface and design
Macromedia Dreamweaver 8 Revealed
Chapter 1
3
Using Dreamweaver Tools
What does Dreamweaver offer?
– Design tools that can create dynamic
and interactive web page without
writing HTML code
– Organizational tools
– Site management tools
– Graphic site maps
Macromedia Dreamweaver 8 Revealed
Chapter 1
4
FIGURE 1
Dreamweaver 8 workspace
Select tool
Hand tool
Title bar
Menu bar
Insert bar
Zoom tool
Document
window
Status bar
Property
inspector
Macromedia Dreamweaver 8 Revealed
Chapter 1
5
Working with Dreamweaver
Views
Design view
Code view
Code and Design view
Macromedia Dreamweaver 8 Revealed
Chapter 1
6
Starting Dreamweaver
(Windows)
Click the Start button on the taskbar
Click (All) Programs 
Macromedia  Macromedia
Dreamweaver 8
Macromedia Dreamweaver 8 Revealed
Chapter 1
7
Dreamweaver 8
FIGURE 3
Starting Dreamweaver 8 (Windows)
Macromedia Dreamweaver 8 Revealed
Chapter 1
8
Starting Dreamweaver
(Macintosh)
Click Finder in the Dock, then click
Applications
Click the Macromedia Dreamweaver 8 folder,
then double-click the
Dreamweaver 8
application
Dreamweaver 8
FIGURE 4 Starting Dreamweaver 8
(Macintosh)
Macromedia Dreamweaver 8 Revealed
Chapter 1
9
Changing Views
Click the Show Code View button
Click the Show Code and Design
Views button
Click the Show Design View
button
Macromedia Dreamweaver 8 Revealed
Chapter 1
10
FIGURE 5
Show Code
View button
Code view for new document
Show Code and
Design View button
Show Design
View button
Coding toolbar
Macromedia Dreamweaver 8 Revealed
Chapter 1
11
Viewing Panels
Expand the Application panel
Click each panel tab
Collapse the Application panel
Study the CSS and Files panel
groups
Collapse the CSS panel group
Macromedia Dreamweaver 8 Revealed
Chapter 1
12
Opening a Web Page
Create new or open existing
– Web site
– Web page
Homepage
– First Web page that appears when
viewers go to a Web site
– Sets the look and feel of the Web site
and directs viewers to the rest of the
pages in the Web site
Macromedia Dreamweaver 8 Revealed
Chapter 1
13
Basic Web Page Elements
Text
Hyperlinks (links)
Graphics
– Banners
Navigation bars
– Image map
Flash button objects
Macromedia Dreamweaver 8 Revealed
Chapter 1
14
FIGURE 7
Common Web page elements
Navigation bar
Graphic
Form
Macromedia Dreamweaver 8 Revealed
Chapter 1
15
FIGURE 8
Striped Umbrella Web page elements
Banner
Text
Graphic
Table
Flash button
object
Text links
Macromedia Dreamweaver 8 Revealed
Chapter 1
16
Getting Help
Contents
Index
Search
Favorites
Keywords …
… in results
Topics found
FIGURE 9
Dreamweaver 8 Help
window
Macromedia Dreamweaver 8 Revealed
Chapter 1
17
Web Site
Creation Process
FIGURE 10
Phases of a Web site development project
Macromedia Dreamweaver 8 Revealed
Chapter 1
18
Planning a Web Site
Audience needs
Site goals
Gathering content
Budget
Schedule
Team
Updates
Macromedia Dreamweaver 8 Revealed
Chapter 1
19
Creating Storyboards
FIGURE 11
The Striped Umbrella Web site storyboard
Macromedia Dreamweaver 8 Revealed
Chapter 1
20
Testing the Pages
Browsers and browser versions
Screen sizes
Speed on different connections
Testing is a continuous process
Macromedia Dreamweaver 8 Revealed
Chapter 1
21
Modifying the Pages
Changes are constantly needed
Test page after each change
Modifying and testing is an ongoing
process
Macromedia Dreamweaver 8 Revealed
Chapter 1
22
Publishing the Site
Transfer all the files to a Web server
– Web server: a computer that is
connected to the Internet with an IP
address
A Web site must be published to the
Web server before it can be viewed
by others
Macromedia Dreamweaver 8 Revealed
Chapter 1
23
Publishing the Site
IP: Internet Protocol
– IP address
– Example: 207.456.123.2
ISP: Internet Service Provider
– Hosts Web site
FTP: File Transfer Protocol
– Host, host directory, login, password
Macromedia Dreamweaver 8 Revealed
Chapter 1
24
Publishing the Site
Create a root folder
Define the Web site
Set up Web server access
Macromedia Dreamweaver 8 Revealed
Chapter 1
25
Root folder
FIGURE 12
Creating a root folder using Windows Explorer
Macromedia Dreamweaver 8 Revealed
Chapter 1
26
FIGURE 13
Creating a root folder using a Macintosh
Macromedia Dreamweaver 8 Revealed
Chapter 1
27
Web site name
Links relative
to options
Local root
folder
Enable cache
Refresh local
file list
automatically
FIGURE 14
Site definition for The Striped Umbrella dialog box
Macromedia Dreamweaver 8 Revealed
Chapter 1
28
Remote info
category
FIGURE 15
Access list
arrow
Setting the remote access for The Striped Umbrella Web site
Macromedia Dreamweaver 8 Revealed
Chapter 1
29
The Assets Folder
Stores all non-HTML (media) files:
– Image files
– Sound files
– Video files
Set it as the default location to
store the Web site images
You might want to create
subfolders for each type of file
Macromedia Dreamweaver 8 Revealed
Chapter 1
30
Setting the Home Page
Usually index.html (.htm), or
default.html (.htm)
Starting point for a site map
Tell Dreamweaver which page you
have designated to be your home
page
Add folders to the Web site
– Set the default images folder
Macromedia Dreamweaver 8 Revealed
Chapter 1
31
FIGURES 16 and 17 The Striped Umbrella site in Files panel with assets folder created
Windows (left) and Macintosh (right)
Macromedia Dreamweaver 8 Revealed
Chapter 1
32
Browse for file
icon
Default images
folder
FIGURE 18
Site definition for The Striped Umbrella Web site with assets
folder set as the default images folder
Macromedia Dreamweaver 8 Revealed
Chapter 1
33
Page title and
path
Index.html
FIGURE 19
index.html placed in the striped_umbrella root folder
Macromedia Dreamweaver 8 Revealed
Chapter 1
34
The Site Map
Graphical representation of pages
Displays folder structure
Page link type/status
Checked out pages
Map view in the Files panel
Tree structure
Macromedia Dreamweaver 8 Revealed
Chapter 1
35
Verifying Page Titles
Search engine keywords
Title in browser window
Bookmark in browser
Macromedia Dreamweaver 8 Revealed
Chapter 1
36
Uses of a Site Map
In the Web site as an
informational tool
– PNG or JPEG
Print for report or meeting
– BMP or PICT
Macromedia Dreamweaver 8 Revealed
Chapter 1
37
Site Map Layout
category
Path for home
page
Page titles
option button
FIGURE 24
Macromedia Dreamweaver 8 Revealed
Options for the site map layout
Chapter 1
38
Site list arrow
View list arrow
Click to hide all
panels
FIGURE 25
Macromedia Dreamweaver 8 Revealed
Expanding the site map
Chapter 1
39
Chapter 1 Tasks
Explore the Dreamweaver
workspace
View a Web page and use Help
Plan and define a Web site
Add a Folder and Pages, and set the
home page
Create and view a Site Map
Macromedia Dreamweaver 8 Revealed
Chapter 1
40