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 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

Chapter A

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 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

Chapter A

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

Chapter A

Working with Dreamweaver Views

Design view Code view Code and Design view

Getting Started with Dreamweaver MX 2004

Chapter A

Change view

Show Code View Show Code and Design View Show Design View

Getting Started with Dreamweaver MX 2004

Chapter A

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

Chapter A

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

Chapter A

10

Opening a Web page

Web site Web page Home page

Getting Started with Dreamweaver MX 2004

Chapter A

11

Basic Web page elements

Text Hyperlinks Graphics Navigation bars Flash objects Tables Forms
Getting Started with Dreamweaver MX 2004 Chapter A 12

Common Web elements

Page Title Form Graphics

Text

Navigation structure Including several sets of text links

Getting Started with Dreamweaver MX 2004

Chapter A

13

Common Web elements

File Currently open Show View Buttons Banner

Table used for page layout

Text

Layer Link

Flash buttons

Getting Started with Dreamweaver MX 2004

Chapter A

14

Getting Help
Search help for topics

Contents Index Search Favorites

Getting Started with Dreamweaver MX 2004

Chapter A

15

Web Site Creation Process

Getting Started with Dreamweaver MX 2004

Chapter A

16

Planning a Web Site

Audience needs? Site goals Gathering content Budget Schedule Team Updates
Getting Started with Dreamweaver MX 2004 Chapter A 17

Storyboard

Getting Started with Dreamweaver MX 2004

Chapter A

18

Testing Web Pages

Browsers and Browser versions Platforms Screen sizes Speed on different connections Links Client review
Getting Started with Dreamweaver MX 2004 Chapter A 19

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 Chapter A 20

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 Chapter A 21

Create a root folder

Windows

Your drive may differ

Click the drive to select it

Trip Smart Root folder

Getting Started with Dreamweaver MX 2004

Chapter A

22

Create a root folder

Macintosh

Trip Smart Root folder

Getting Started with Dreamweaver MX 2004

Chapter A

23

Define a Web site

Categories

Root folder

Default Image folder

Getting Started with Dreamweaver MX 2004

Chapter A

24

Set up Web server access

Remote Info

Access List Arrow

Getting Started with Dreamweaver MX 2004

Chapter A

25

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 Chapter A 26

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

Chapter A

27

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 Chapter A 28

Page Title

Search engine keywords Title in browser window Bookmark in browser

Getting Started with Dreamweaver MX 2004

Chapter A

29

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

Chapter A

30

Site Map options Site Definition dialog box

Home page Layout Icon labels
Site Map Layout Option Button Page Title Option button Home page path

Getting Started with Dreamweaver MX 2004

Chapter A

31

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 Chapter A 32