Download dreamweaver_ch01

Adobe Dreamweaver CS3
Revealed
CHAPTER ONE: GETTING STARTED WITH DREAMWEAVER
Chapter 1 Lessons
1. Explore the Dreamweaver workspace
2. View a Web page and use Help
3. Plan and define a Web site
4. Add a folder and pages, and set the home page
5. Create and view a site map
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
Using Dreamweaver Tools
 What does Dreamweaver CS3 offer?

Design tools that can create dynamic and
interactive web page without writing HTML code

Organizational tools

Site management tools

Graphic site maps
Figure 1: Dreamweaver Workspace
Title bar
Menu bar
Select tool
Hand tool
Insert bar
Document
toolbar
Zoom tool
Document
window
Tag
selector
Status bar
Property
inspector
Working with Dreamweaver Views
 Design view
 Code view
 Code and Design view
Starting Dreamweaver: Windows
 Click the Start button on the taskbar
 Point to All Programs, click Adobe Web Premium
CS3, then click Adobe Dreamweaver CS3
Figure 3: Starting Dreamweaver CS3
Adobe
Dreamweaver CS3
Fig. 4: Starting Dreamweaver
(Macintosh)
 Click Finder in the Dock, then click Applications
 Click the Adobe Dreamweaver CS3 folder, then
double-click the Dreamweaver CS3
application
Changing Views
 Click the Show Code View button
 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
Coding
toolbar
Show Code and
Design View button
Show Design
View button
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
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
Basic Web Page Elements
 Text
 Hyperlinks (links)
 Graphics

Banners
 Navigation bars

Image map
 Flash button objects
Figure 7:
Common Web Page Elements
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
Figure 8: Striped Umbrella
web page elements
Banner
Flash button
objects that
link to other
pages in the
Web site
Text links to
other pages
in the Web site
Text
Image
Using Dreamweaver Help
 Contents
 Index
 Search
 Favorites
Web Site Development Process
FIGURE 10
Phases of a Web site development project
Planning a Web Site
 Audience needs
 Site goals
 Gathering content
 Budget
 Schedule
 Team
 Updates
Creating Storyboards
FIGURE 11
The Striped Umbrella Web site storyboard
Testing the Pages
 Browsers and browser versions
 Screen sizes
 Connection download time
 Testing is a continuous process
Modifying the Pages
 Changes are constantly needed
 Test page after each change
 Modifying and testing is an ongoing process
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
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
Publishing the Site
 Create a root folder
 Define the Web site
 Set up Web server access
Fig. 12: Creating a Root Folder
(Windows)
Root folder
FIGURE 12
Creating a root folder using Windows Explorer
Fig. 14: Site Definition
Striped Umbrella Web Site
Web site name
Links relative
to options
Local root
folder
Enable cache
Fig. 15: Setting the Remote Access
Remote info
category
Access list
arrow
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
Setting the Home Page
 Starting point for a site map
 Tells Dreamweaver which page you have
designated to be your home page
 Usually index.html (.htm), or default.html (.htm)
Adding Pages to a Web Site
 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
 The default document type is designated in the
Preferences dialog box
Fig. 16: Striped Umbrella Assets Folder
(Windows)
Site list arrow8
New assets
folder
Root folder
Fig. 18: Site Definition with Assets
Folder Set as Default Images Folder
Default images
folder text box
Browse for file
icon
Fig. 19: Index.html Placed in
Striped_Umbrella Root Folder
Path for file
Broken link
icon
Root folder
Index.html
Fig. 21: Adding New Pages to Striped
Umbrella Web Site
New pages
added to root
folder
su_banner.gif in
the assets folder
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
Viewing a Site Map
 Map view in the Files panel
 Show file names or page titles
 Edit page titles in the site map
 Uses a tree structure to visually represent the how
pages are linked
Verifying Page Titles
 Search engine keywords
 Title in browser window
 Bookmark in browser
Using Site Maps for Visitors
 In the Web site as an informational
tool

PNG or JPEG
 Print for report or meeting

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. 24: Options for Site Map Layout
Site Map Layout
option
Page titles
option button
Path for home
page
Fig. 25: Expanding the Site Map
Site list arrow
View list arrow
Expand to show
local and
remote sites
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