Fireworks & Dreamweaver Tutorial.pdf

Fireworks and Dreamweaver

Tutorial

.............................................

Introduction

Macromedia Dreamweaver, the program for visually creating and managing Web

sites and pages, and Macromedia Fireworks, the program for designing and

producing Web graphics, offer two powerful solutions for creating professional,

graphics-rich Web pages. In addition to their individual strengths, Dreamweaver

and Fireworks offer integration features that let you use the programs together to

edit Web pages and graphics.

With the excellent round-trip integration between the two programs, you can

place Fireworks images and tables in a Dreamweaver page and make changes to

their HTML code using Dreamweaver tools. You can then launch Fireworks

directly from Dreamweaver to make further edits to the graphics using Fireworks

tools, without losing the changes you made in Dreamweaver. When you return to

Dreamweaver, the graphics in the page automatically update with all your

Fireworks edits intact.

This tutorial shows you how to use Dreamweaver together with Fireworks to

prepare, place, and edit graphics in an HTML page. The tutorial can be

completed in less than one hour and requires that you have both Dreamweaver 4

and Fireworks 4 installed on your system.

What you’ll learn

By completing the tutorial, you will create a Web page that contains a range of

image and table elements. Along the way, you’ll learn to do the following tasks,

part of the typical Dreamweaver and Fireworks workﬂow:

•

Set external image editor preferences for Dreamweaver

•

Launch and edit a Fireworks image from Dreamweaver

•

Launch and optimize a Fireworks image from Dreamweaver

•

Export a Fireworks HTML table to a Dreamweaver site

•

Insert a Fireworks HTML table into a Dreamweaver page

•

Launch and edit a Fireworks table from Dreamweaver

................................................

What you should know

Although this tutorial is targeted toward novice users of Dreamweaver and

Fireworks, you may want to become familiar ﬁrst with the basic features of each

program. Dreamweaver and Fireworks each come with an introductory tutorial

that covers the basic skills needed to use the program.

To review the Dreamweaver tutorial, see

Using Dreamweaver;

to review the

You can also ﬁnd these tutorials in

Dreamweaver Help and Fireworks Help.

Using Fireworks.

Locate the tutorial files

All the ﬁles you need to complete this tutorial are contained within the same

folder as this document in a ﬁle named sample.

Preview the completed Web page

Before beginning the tutorial steps, preview the completed Web page at: http://

www.macromedia.com/support/ﬁreworks/programs/fw_dw_tutorial/ to get a

sense of what your page will look like when you are ﬁnished.

Set up the tutorial site structure

Now you’ll set up the site structure for the tutorial ﬁles.

Define a local site

The ﬁrst step in setting up the tutorial site structure is to deﬁne a local site. A local

site is a folder on your local drive where Dreamweaver will store all the ﬁles for

your Web site. Each Web site you create in Dreamweaver must have a local site

associated with it.

You’ll deﬁne the xtutorial_dwfw4 folder as your local site.

Start Dreamweaver.

Choose Site > New Site.

In the Site Deﬁnition dialog box, make sure Local Info is selected in the

Category list.

In the Site Name ﬁeld, type

xtutorial

Click the folder icon to the right of the Local Root Folder ﬁeld.

In the dialog box that appears, navigate to the xtutorial_dwfw4 folder on your

desktop, and do one of the following:

Fireworks tutorial, see

•

In Windows, click Open, and then click Select when xtutorial_dwfw4 appears

in the Select ﬁeld.

On the Macintosh, select the xtutorial_dwfw4 folder in the ﬁle list, and

click Choose.

The Local Root Folder ﬁeld updates to display the path to the local site.

Select Enable Cache (Windows) or Use Cache to Speed Link Updates

(Macintosh) to create a cache ﬁle for the site.

The cache option creates a record of existing ﬁles to help Dreamweaver update

links more quickly when you move, rename, or delete a ﬁle.

Click OK to close the Site Deﬁnition dialog box, and click OK to close the

cache message box.

Fireworks and Dreamweaver Tutorial

•

The Site window displays a list of all the folders and ﬁles in your local

xtutorial site.

Open the start file

Now you’ll open the Web page that you’ll be working with in the tutorial.

In the Dreamweaver Site window, double-click the icon for the start.htm ﬁle to

open it.

The start.htm page consists of an HTML layout table containing several

images that have been prepared in and exported from Fireworks. You’ll work

with your own copy of this page.

For information on working with images in Fireworks, see Fireworks Help.

Choose File > Save As.

In the dialog box that appears, navigate inside the xtutorial_dwfw4 folder,

name the ﬁle

my_xtutorial.htm

, and click Save.

Set Fireworks as the external image editor

Before trying out the cross-product integration between Fireworks and

Dreamweaver, you’ll make sure that Fireworks is designated as the primary

external image editor for Dreamweaver.

In Dreamweaver, choose Edit > Preferences and select File Types/Editors from

the Category list.

This preference lets you specify the external program to launch from

Dreamweaver when editing a ﬁle of a certain type. You’ll designate Fireworks as

the editor to launch for Web image ﬁles.

In the Extensions list, select the Web ﬁle extension .gif.

By default, Dreamweaver speciﬁes Fireworks as the primary editor for GIF ﬁles.

If the default has been changed, you’ll need to specify Fireworks as the editor

yourself.

If needed, in the Editors list, select Fireworks 4 and click Make Primary.

In the Extensions list, select the Web ﬁle extension .jpg. If needed, in the

Editors list, select Fireworks 4 and click Make Primary.

Click OK to close the Preferences dialog box.

Launch and edit a Fireworks image

Now you’ll use the cross-product integration that you’ve set up to edit the

Dreamweaver page. You’ll use Fireworks to make changes to the Featured

Destination image on the right of the page and watch it update automatically in

Dreamweaver.

Launch a Fireworks image from Dreamweaver

The Featured Destination image was designed, optimized, and exported using

Fireworks, and then placed in the right column of the layout table in

Dreamweaver. For more information on how to import Fireworks ﬁles into a

Dreamweaver page, see “Using Dreamweaver and Fireworks Together” in either

Dreamweaver Help or Fireworks Help.

You’ll launch Fireworks to make some graphical changes to the title text of the

Featured Destination image.

Fireworks and Dreamweaver Tutorial

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: