7/9/09
Chapter 1 Lessons
1. Explore the Dreamweaver workspace
2. View a Web page and use Help
3. Plan and define a Web site
Adobe Dreamweaver CS3
Revealed
4. Add a folder and pages, and set the home page
5. Create and view a site map
CHAPTER ONE: GETTING STARTED WITH DREAMWEAVER
Getting Started with Dreamweaver
Using Dreamweaver Tools
 What is Dreamweaver?
 What does Dreamweaver CS3 offer?
 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
Figure 1: Dreamweaver Workspace
Title bar
Menu bar
Select tool
Design tools that can create dynamic and
interactive web page without writing HTML code
 Organizational tools
 Site management tools
 Graphic site maps
Working with Dreamweaver Views
 Design view
Hand tool
 Code view
Insert bar
Document
toolbar
  Code and Design view
Zoom tool
Document
window
Tag
selector
Property
inspector
Status bar
1
7/9/09
Starting Dreamweaver: Windows
Figure 3: Starting Dreamweaver CS3
 Click the Start button on the taskbar
 Point to All Programs, click Adobe Web Premium
CS3, then click Adobe Dreamweaver CS3
Adobe
Dreamweaver CS3
Fig. 4: Starting Dreamweaver
(Macintosh)
Changing Views
 Click Finder in the Dock, then click Applications
 Click the Show Code View button
 Click the Adobe Dreamweaver CS3 folder, then
double-click the Dreamweaver CS3
application
 Click the Show Code and Design Views
button
 Click the Show Design View button
Figure 5: Code view for
new document
Show Code
View button
Show Code and
Design View button
Viewing Panels
Show Design
View button
 Expand the Application panel
 Click each panel tab
 Collapse the Application panel
 Study the CSS and Files panel groups
Coding
toolbar
 Collapse the CSS panel group
2
7/9/09
Opening a Web Page
Basic Web Page Elements
 Create new or open existing
 Text
 Web site
 Hyperlinks (links)
 Web page
 Graphics
 Homepage
   Banners
First Web page that appears when
viewers go to a Web site
 Navigation bars
Sets the look and feel of the Web site and
directs viewers to the rest of the pages in
the Web site
 Flash button objects
Figure 7:
Common Web Page Elements
 Image map
Figure 8: Striped Umbrella
web page elements
Banner
Images
Small form
for signing
in and
checking
out
Navigation
structure
includes
several sets of
text links
Text
Form to fill out
for free shipping
Using Dreamweaver Help
Flash button
objects that
link to other
pages in the
Web site
Text links to
other pages
in the Web site
Text
Image
Web Site Development Process
 Contents
 Index
 Search
 Favorites
FIGURE 10
Phases of a Web site development project
3
7/9/09
Planning a Web Site
Creating Storyboards
 Audience needs
 Site goals
 Gathering content
 Budget
 Schedule
 Team
 Updates
FIGURE 11
The Striped Umbrella Web site storyboard
Testing the Pages
Modifying the Pages
 Browsers and browser versions
 Changes are constantly needed
 Screen sizes
 Test page after each change
 Connection download time
 Modifying and testing is an ongoing process
 Testing is a continuous process
Publishing the Site
Publishing the Site
 Transfer all the files to a Web server
 IP: Internet Protocol
 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
 IP address
 Example: 207.456.123.2
 ISP: Internet Service Provider
 Hosts Web site
 FTP: File Transfer Protocol
 Host, host directory, login, password
4
7/9/09
Fig. 12: Creating a Root Folder
(Windows)
Publishing the Site
 Create a root folder
 Define the Web site
 Set up Web server access
Root folder
FIGURE 12
Fig. 14: Site Definition
Striped Umbrella Web Site
Creating a root folder using Windows Explorer
Fig. 15: Setting the Remote Access
Web site name
Remote info
category
Links relative
to options
Access list
arrow
Local root
folder
Enable cache
The Assets Folder
Setting the Home Page
 Stores all non-HTML (media) files:
 Starting point for a site map
 Image files
 Sound files
 Video files
 Tells Dreamweaver which page you have
designated to be your home page
 Usually index.html (.htm), or default.html (.htm)
 Set it as the default location to store the Web
site images
 You might want to create subfolders for each
type of file
5
7/9/09
Adding Pages to a Web Site
Fig. 16: Striped Umbrella Assets Folder
(Windows)
 Once you add and name pages to your web site,
you can add content to each page (text and
graphics)
 You have a choice of several default document
types you can generate when you create new
HTML pages
 XHTML 1.0 Transitional is the default document
type when you install Dreamweaver
Site list arrow8
New assets
folder
Root folder
 The default document type is designated in the
Preferences dialog box
Fig. 18: Site Definition with Assets
Folder Set as Default Images Folder
Fig. 19: Index.html Placed in
Striped_Umbrella Root Folder
Path for file
Default images
folder text box
Browse for file
icon
Broken link
icon
Root folder
Fig. 21: Adding New Pages to Striped
Umbrella Web Site
Index.html
Creating a Site Map
 Keeps track of relationships between pages
 Graphical representation of pages
 Shows the folder structure
 View visual clues to learn about details
 Checked out pages
New pages
added to root
folder
su_banner.gif in
the assets folder
6
7/9/09
Viewing a Site Map
Verifying Page Titles
 Map view in the Files panel
 Search engine keywords
 Show file names or page titles
 Title in browser window
 Edit page titles in the site map
 Uses a tree structure to visually represent the how
pages are linked
Using Site Maps for Visitors
 Bookmark in browser
Fig. 24: Options for Site Map Layout
 In the Web site as an informational
tool
 PNG or JPEG
 Print for report or meeting
 Site Map Layout
option
BMP or PICT
 Create an XML site map, or a listing
of the Web site links that can be
made available to search engines
Fig. 25: Expanding the Site Map
Path for home
page
Page titles
option button
Chapter 1 Tasks
 Explore the Dreamweaver workspace
Site list arrow
 View a Web page and use Help
View list arrow
 Plan and define a Web site
 Add a Folder and Pages, and set the home page
 Create and view a Site Map
Expand to show
local and
remote sites
7