Macromedia Dreamweaver 8 Revealed DREAMWEAVER GETTING STARTED WITH
Macromedia Dreamweaver 8 Revealed
DREAMWEAVER GETTING STARTED WITH
2Macromedia Dreamweaver 8 Revealed Chapter 1
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
Chapter Lessons
3Macromedia Dreamweaver 8 Revealed Chapter 1
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
Getting Started with Dreamweaver
4Macromedia Dreamweaver 8 Revealed Chapter 1
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
Using Dreamweaver Tools
5Macromedia Dreamweaver 8 Revealed Chapter 1
Title bar
Menu bar
Insert bar
Document window
Status bar
Property inspector
Select tool Hand tool
Zoom tool
FIGURE 1 Dreamweaver 8 workspace
6Macromedia Dreamweaver 8 Revealed Chapter 1
Working with Dreamweaver Views
Design view
Code view
Code and Design view
7Macromedia Dreamweaver 8 Revealed Chapter 1
Starting Dreamweaver (Windows)
Click the Start button on the taskbar
Click (All) Programs Macromedia Macromedia Dreamweaver 8
8Macromedia Dreamweaver 8 Revealed Chapter 1
Dreamweaver 8
FIGURE 3 Starting Dreamweaver 8 (Windows)
9Macromedia Dreamweaver 8 Revealed Chapter 1
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)
10Macromedia Dreamweaver 8 Revealed Chapter 1
Changing Views
Click the Show Code View button
Click the Show Code and Design Views button
Click the Show Design View button
11Macromedia Dreamweaver 8 Revealed Chapter 1
Show Code View button
Show Code and Design View button
Show Design View button
Coding toolbar
FIGURE 5 Code view for new document
12Macromedia Dreamweaver 8 Revealed Chapter 1
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
13Macromedia Dreamweaver 8 Revealed Chapter 1
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
14Macromedia Dreamweaver 8 Revealed Chapter 1
Basic Web Page Elements
Text
Hyperlinks (links)
Graphics– Banners
Navigation bars– Image map
Flash button objects
15Macromedia Dreamweaver 8 Revealed Chapter 1
Graphic
Form
Navigation bar
FIGURE 7 Common Web page elements
16Macromedia Dreamweaver 8 Revealed Chapter 1
Banner
Table
Flash button object
Text links
Text Graphic
FIGURE 8 Striped Umbrella Web page elements
17Macromedia Dreamweaver 8 Revealed Chapter 1
Getting Help
Contents
Index
Search
Favorites
Keywords …
Topics found
… in results
FIGURE 9 Dreamweaver 8 Help
window
18Macromedia Dreamweaver 8 Revealed Chapter 1
Web Site Creation Process
FIGURE 10 Phases of a Web site development project
19Macromedia Dreamweaver 8 Revealed Chapter 1
Planning a Web Site
Audience needs
Site goals
Gathering content
Budget
Schedule
Team
Updates
20Macromedia Dreamweaver 8 Revealed Chapter 1
Creating Storyboards
FIGURE 11 The Striped Umbrella Web site storyboard
21Macromedia Dreamweaver 8 Revealed Chapter 1
Testing the Pages
Browsers and browser versions
Screen sizes
Speed on different connections
Testing is a continuous process
22Macromedia Dreamweaver 8 Revealed Chapter 1
Modifying the Pages
Changes are constantly needed
Test page after each change
Modifying and testing is an ongoing process
23Macromedia Dreamweaver 8 Revealed Chapter 1
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
24Macromedia Dreamweaver 8 Revealed Chapter 1
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
25Macromedia Dreamweaver 8 Revealed Chapter 1
Publishing the Site
Create a root folder
Define the Web site
Set up Web server access
26Macromedia Dreamweaver 8 Revealed Chapter 1
Root folder
FIGURE 12 Creating a root folder using Windows Explorer
27Macromedia Dreamweaver 8 Revealed Chapter 1
FIGURE 13 Creating a root folder using a Macintosh
28Macromedia Dreamweaver 8 Revealed Chapter 1
Links relative to options
Enable cache
Refresh local file list
automatically
Web site name
Local root folder
FIGURE 14 Site definition for The Striped Umbrella dialog box
29Macromedia Dreamweaver 8 Revealed Chapter 1
Remote info category
Access list arrow
FIGURE 15 Setting the remote access for The Striped Umbrella Web site
30Macromedia Dreamweaver 8 Revealed Chapter 1
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
31Macromedia Dreamweaver 8 Revealed Chapter 1
Setting the Home Page
Usually index.html (.htm), or default.html (.htm)Starting point for a site mapTell Dreamweaver which page you have designated to be your home pageAdd folders to the Web site– Set the default images folder
32Macromedia Dreamweaver 8 Revealed Chapter 1
FIGURES 16 and 17 The Striped Umbrella site in Files panel with assets folder created Windows (left) and Macintosh (right)
33Macromedia Dreamweaver 8 Revealed Chapter 1
Default images folder
Browse for file icon
FIGURE 18 Site definition for The Striped Umbrella Web site with assets folder set as the default images folder
34Macromedia Dreamweaver 8 Revealed Chapter 1
Index.html
Page title and path
FIGURE 19 index.html placed in the striped_umbrella root folder
35Macromedia Dreamweaver 8 Revealed Chapter 1
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
36Macromedia Dreamweaver 8 Revealed Chapter 1
Verifying Page Titles
Search engine keywords
Title in browser window
Bookmark in browser
37Macromedia Dreamweaver 8 Revealed Chapter 1
Uses of a Site Map
In the Web site as an informational tool – PNG or JPEG
Print for report or meeting– BMP or PICT
38Macromedia Dreamweaver 8 Revealed Chapter 1
Site Map Layout category
Page titles option button
Path for home page
FIGURE 24 Options for the site map layout
39Macromedia Dreamweaver 8 Revealed Chapter 1
Site list arrow
View list arrow
Click to hide all panels
FIGURE 25 Expanding the site map
40Macromedia Dreamweaver 8 Revealed Chapter 1
Chapter 1 TasksExplore 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