MacromediaDreamweaver MX 2004 –Design Professional

DreamweaverGETTING STARTED WITH

2Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Explore the Dreamweaver WorkspaceView a Web page and use HelpPlan and Define a Web siteAdd a Folder and Pages, and set the Home pageCreate and View a Site Map

Chapter Lessons

3Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

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

4Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

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

5Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

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

6Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Explore the Dreamweaver workspace

Title bar

Menu bar

Insert bar

Document toolbar

Standard toolbar

Document window

Status bar

Tag selector

Property inspector

7Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Working with Dreamweaver Views

Design view

Code view

Code and Design view

8Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Start Dreamweaver (Windows)

Click the Start button on the taskbar

Point to Programs,then click Macromedia Dreamweaver MX 2004

Start Menu

9Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Start Dreamweaver (Macintosh)

Double-click the hard drive icon, then double-click the Macromedia Dreamweaver MX folder

Double-click the Macromedia

Dreamweaver MX program icon

HardDrive Icon

10Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Change view…

Show Code View

Show Code and Design View

Show Design View

11Getting Started with Dreamweaver MX 2004 Web Collection: 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

12Getting Started with Dreamweaver MX 2004 Web Collection: 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

13Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Opening a Web page

Web site

Web page

Home page

14Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Basic Web page elements

Text

Hyperlinks

Graphics

Navigation bars

Flash objects

Tables

Forms

15Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Common Web elements

Page Title

Graphics

Navigation structureIncluding several sets of text links

Text

Form

16Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Common Web elementsFile Currentlyopen

Show View Buttons

Table usedfor page layout

Flash buttons

Banner

Layer

Text

Link

17Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Getting Help

Contents

Index

Search

Favorites

Search help for topics

18Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Web Site Creation Process

19Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Planning a Web Site

Audience needs?

Site goals

Gathering content

Budget

Schedule

Team

Updates

20Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Storyboard

21Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Testing Web Pages

Browsers and Browser versions

Platforms

Screen sizes

Speed on different connections

Links

Client review

22Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

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

23Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Publish a Web SiteIP: Internet Protocol– IP address– Example: 207.456.123.2

ISP: Internet Service Provider– Hosts web site– Evaluate

FTP: File Transfer Protocol– User, password, path

24Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Create a root folderWindows

Your drivemay differ

Click the driveto select it Trip Smart

Root folder

25Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Create a root folderMacintosh

Trip SmartRoot folder

26Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Define a Web site

Default Image folder

Root folder

Categories

27Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Set up Web server access

AccessListArrow

RemoteInfo

28Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

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

29Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Home page

index.htm or index.html (usually)

Designate home page in Site Definition dialog box

Starting point for a site map

30Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Site Map

Graphical representation of pages

Displays folder structure

Page link type/status

Checked out pages

Site Map commandorMap View command

31Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Page Title

Search engine keywords

Title in browser window

Bookmark in browser

32Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

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)

33Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

Site Map optionsSite Definition dialog box

– Home page– Layout– Icon labels

Site Map Layout Option Button

Page TitleOption button

Home page path

34Getting Started with Dreamweaver MX 2004 Web Collection: Dreamweaver MX 2004 Chapter A

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