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


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


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


Title bar

Menu bar

Insert bar

Document window

Status bar

Property inspector

Select tool Hand tool

Zoom tool

FIGURE 1 Dreamweaver 8 workspace


Working with Dreamweaver Views

Design view

Code view

Code and Design view


Starting Dreamweaver (Windows)

Click the Start button on the taskbar

Click (All) Programs Macromedia Macromedia Dreamweaver 8


Dreamweaver 8

FIGURE 3 Starting Dreamweaver 8 (Windows)


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)


Changing Views

Click the Show Code View button

Click the Show Code and Design Views button

Click the Show Design View button


Show Code View button

Show Code and Design View button

Show Design View button

Coding toolbar

FIGURE 5 Code view for new document


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


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


Basic Web Page Elements

Text

Hyperlinks (links)

Graphics– Banners

Navigation bars– Image map

Flash button objects


Graphic

Form

Navigation bar

FIGURE 7 Common Web page elements


Banner

Table

Flash button object

Text links

Text Graphic

FIGURE 8 Striped Umbrella Web page elements


Getting Help

Contents

Index

Search

Favorites

Keywords …

Topics found

… in results

FIGURE 9 Dreamweaver 8 Help

window


Web Site Creation Process

FIGURE 10 Phases of a Web site development project


Planning a Web Site

Audience needs

Site goals

Gathering content

Budget

Schedule

Team

Updates


Creating Storyboards

FIGURE 11 The Striped Umbrella Web site storyboard


Testing the Pages

Browsers and browser versions

Screen sizes

Speed on different connections

Testing is a continuous process


Modifying the Pages

Changes are constantly needed

Test page after each change

Modifying and testing is an ongoing process


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


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


Publishing the Site

Create a root folder

Define the Web site

Set up Web server access


Root folder

FIGURE 12 Creating a root folder using Windows Explorer


FIGURE 13 Creating a root folder using a Macintosh


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


Remote info category

Access list arrow

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


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


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


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


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


Index.html

Page title and path

FIGURE 19 index.html placed in the striped_umbrella root folder


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


Verifying Page Titles

Search engine keywords

Title in browser window

Bookmark in browser


Uses of a Site Map

In the Web site as an informational tool – PNG or JPEG

Print for report or meeting– BMP or PICT


Site Map Layout category

Page titles option button

Path for home page

FIGURE 24 Options for the site map layout


Site list arrow

View list arrow

Click to hide all panels

FIGURE 25 Expanding the site map


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

macromedia dreamweaver 8 revealed dreamweaver getting started with

Documents