Macromedia Dreamweaver 8 Revealed

DREAMWEAVER GETTING STARTED WITH

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

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

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

5Chapter 1

Title bar

Menu bar

Insert bar

Document window

Status bar

Property inspector

Select tool Hand tool

Zoom tool

FIGURE 1 Dreamweaver 8 workspace

6Chapter 1

Working with Dreamweaver Views

Design view

Code view

Code and Design view

7Chapter 1

Starting Dreamweaver (Windows)

Click the Start button on the taskbar

Click (All) Programs Macromedia Macromedia Dreamweaver 8

8Chapter 1

Dreamweaver 8

FIGURE 3 Starting Dreamweaver 8 (Windows)

9Chapter 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)

10Chapter 1

Changing Views

Click the Show Code View button

Click the Show Code and Design Views button

Click the Show Design View button

11Chapter 1

Show Code View button

Show Code and Design View button

Show Design View button

Coding toolbar

FIGURE 5 Code view for new document

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

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

14Chapter 1

Basic Web Page Elements

Text

Hyperlinks (links)

Graphics– Banners

Navigation bars– Image map

Flash button objects

15Chapter 1

Graphic

Form

Navigation bar

FIGURE 7 Common Web page elements

16Chapter 1

Banner

Table

Flash button object

Text links

Text Graphic

FIGURE 8 Striped Umbrella Web page elements

17Chapter 1

Getting Help

Contents

Index

Search

Favorites

Keywords …

Topics found

… in results

FIGURE 9 Dreamweaver 8 Help

window

18Chapter 1

Web Site Creation Process

FIGURE 10 Phases of a Web site development project

19Chapter 1

Planning a Web Site

Audience needs

Site goals

Gathering content

Budget

Schedule

Team

Updates

20Chapter 1

Creating Storyboards

FIGURE 11 The Striped Umbrella Web site storyboard

21Chapter 1

Testing the Pages

Browsers and browser versions

Screen sizes

Speed on different connections

Testing is a continuous process

22Chapter 1

Modifying the Pages

Changes are constantly needed

Test page after each change

Modifying and testing is an ongoing process

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

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

25Chapter 1

Publishing the Site

Create a root folder

Define the Web site

Set up Web server access

26Chapter 1

Root folder

FIGURE 12 Creating a root folder using Windows Explorer

27Chapter 1

FIGURE 13 Creating a root folder using a Macintosh

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

29Chapter 1

Remote info category

Access list arrow

FIGURE 15 Setting the remote access for The Striped Umbrella Web site

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

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

32Chapter 1

FIGURES 16 and 17 The Striped Umbrella site in Files panel with assets folder created Windows (left) and Macintosh (right)

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

34Chapter 1

Index.html

Page title and path

FIGURE 19 index.html placed in the striped_umbrella root folder

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

36Chapter 1

Verifying Page Titles

Search engine keywords

Title in browser window

Bookmark in browser

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

38Chapter 1

Site Map Layout category

Page titles option button

Path for home page

FIGURE 24 Options for the site map layout

39Chapter 1

Site list arrow

View list arrow

Click to hide all panels

FIGURE 25 Expanding the site map

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