Download Unit A

Macromedia
Dreamweaver MX 2004
Design Professional
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
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
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
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
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
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
4
Understanding Platform
Interfaces
Use Dreamweaver in two interfaces:
– Windows and Macintosh
Differences are slight; for example:
– Use [Ctrl] and [Alt] keys in Windows
– Use [command] and [option] keys in
Macintosh
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
5
Explore the Dreamweaver
workspace
Title bar
Menu bar
Insert bar
Document toolbar
Standard toolbar
Document window
Tag selector
Status bar
Property
inspector
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
6
Working with Dreamweaver
Views
Design view
Code view
Code and Design view
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
7
Start Dreamweaver
(Windows)
Click the Start button on the taskbar
Point to Programs,
then click Macromedia
Dreamweaver MX 2004
Start Menu
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
8
Start Dreamweaver
(Macintosh)
Double-click the hard drive icon, then doubleclick the Macromedia Dreamweaver MX folder
Double-click the
Macromedia
Hard
Dreamweaver MX
Drive Icon
program icon
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
9
Change view…
Show Code View
Show Code and
Design View
Show Design View
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
10
Change views…
Click the Show Code View button
Click the Show Code and Design
Views button
Click the Show Design View
button
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
11
…and view panels
Expand the Code panel
Click each panel tab
Collapse the Code panel
Repeat for Design, Application,
Files and Answers panels
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
12
Opening a Web page
Web site
Web page
Home page
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
13
Basic Web page elements
Text
Hyperlinks
Graphics
Navigation bars
Flash objects
Tables
Forms
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
14
Common Web elements
Page Title
Form
Graphics
Text
Navigation structure
Including several
sets of text links
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
15
Common Web elements
File Currently
open
Show View
Buttons
Banner
Text
Table used
for page
layout
Layer
Link
Flash buttons
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
16
Getting Help
Search help for topics
Contents
Index
Search
Favorites
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
17
Web Site
Creation Process
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
18
Planning a Web Site
Audience needs?
Site goals
Gathering content
Budget
Schedule
Team
Updates
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
19
Storyboard
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
20
Testing Web Pages
Browsers and Browser versions
Platforms
Screen sizes
Speed on different connections
Links
Client review
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
21
Publishing the Site
Means that you transfer all the files to
a web server
A web server is a computer that is
connect to the Internet with an IP
address
A web site must be published to the
web server before it can be viewed
by others
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
22
Publish a Web Site
IP: Internet Protocol
– IP address
– Example: 207.456.123.2
ISP: Internet Service Provider
– Hosts web site
– Evaluate
FTP: File Transfer Protocol
– User, password, path
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
23
Create a root folder
Windows
Your drive
may differ
Click the drive
to select it
Getting Started with Dreamweaver MX 2004
Trip Smart
Root folder
Web Collection: Dreamweaver
MX 2004 Chapter A
24
Create a root folder
Macintosh
Trip Smart
Root folder
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
25
Define a Web site
Categories
Default
Image
folder
Root folder
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
26
Set up Web server access
Remote
Info
Getting Started with Dreamweaver MX 2004
Access
List
Arrow
Web Collection: Dreamweaver
MX 2004 Chapter A
27
Assets folder
Add the folder in the Site panel
Designate as the “default image
folder” in the Site Definition
dialog box
Stores all non-HTML (media) files:
– Image files
– Sound files
– Video files
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
28
Home page
index.htm or index.html (usually)
Designate home page in
Site Definition dialog box
Starting point for a site map
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
29
Site Map
Graphical representation of pages
Displays folder structure
Page link type/status
Checked out pages
Site Map command
or
Map View command
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
30
Page Title
Search engine keywords
Title in browser window
Bookmark in browser
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
31
Uses of a Site Map
In the Web site for as an
informational tool (PNG or
JPEG)
Print for report or meeting
(BMP or PICT)
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
32
Site Map options
Site Definition dialog box
Home page
path
– Home page
– Layout
– Icon labels
Site Map
Layout Option
Button
Page Title
Option button
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
33
Chapter A 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
Getting Started with Dreamweaver MX 2004
Web Collection: Dreamweaver
MX 2004 Chapter A
34