Fw Dw Tutorial

8/3/2019 Fw Dw Tutorial

1/20

1

Fireworks and Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Tutorial

Introduction

Macromedia Dreamweaver, the program for visually creating and managing Websites and pages, and Macromedia Fireworks, the program for designing andproducing Web graphics, offer two powerful solutions for creating professional,graphics-rich Web pages. In addition to their individual strengths, Dreamweaverand Fireworks offer integration features that let you use the programs together toedit Web pages and graphics.

With the excellent round-trip integration between the two programs, you canplace Fireworks images and tables in a Dreamweaver page and make changes totheir HTML code using Dreamweaver tools. You can then launch Fireworksdirectly from Dreamweaver to make further edits to the graphics using Fireworkstools, without losing the changes you made in Dreamweaver. When you return toDreamweaver, the graphics in the page automatically update with all yourFireworks edits intact.

This tutorial shows you how to use Dreamweaver together with Fireworks toprepare, place, and edit graphics in an HTML page. The tutorial can becompleted in less than one hour and requires that you have both Dreamweaver 4and Fireworks 4 installed on your system.

What youll learn

By completing the tutorial, you will create a Web page that contains a range ofimage and table elements. Along the way, youll learn to do the following tasks,part of the typical Dreamweaver and Fireworks workflow:

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


2/20

2

What you should know

Although this tutorial is targeted toward novice users of Dreamweaver andFireworks, you may want to become familiar first with the basic features of eachprogram. Dreamweaver and Fireworks each come with an introductory tutorialthat covers the basic skills needed to use the program.

To review the Dreamweaver tutorial, see Using Dreamweaver; to review theFireworks tutorial, see Using Fireworks. You can also find these tutorials inDreamweaver Help and Fireworks Help.

Locate the tutorial files

All the files you need to complete this tutorial are contained within the samefolder as this document in a file named sample.

Preview the completed Web page

Before beginning the tutorial steps, preview the completed Web page at: http://www.macromedia.com/support/fireworks/programs/fw_dw_tutorial/ to get asense of what your page will look like when you are finished.

Set up the tutorial site structure

Now youll set up the site structure for the tutorial files.

Define a local site

The first step in setting up the tutorial site structure is to define a local site. A localsite is a folder on your local drive where Dreamweaver will store all the files foryour Web site. Each Web site you create in Dreamweaver must have a local siteassociated with it.

Youll define the xtutorial_dwfw4 folder as your local site.

1 Start Dreamweaver.

2 Choose Site > New Site.

3 In the Site Definition dialog box, make sure Local Info is selected in theCategory list.

4

In the Site Name field, typextutorial.5 Click the folder icon to the right of the Local Root Folder field.

6 In the dialog box that appears, navigate to the xtutorial_dwfw4 folder on yourdesktop, and do one of the following:


3/20

Fireworks and Dreamweaver Tutorial 3

In Windows, click Open, and then click Select when xtutorial_dwfw4 appearsin the Select field.

On the Macintosh, select the xtutorial_dwfw4 folder in the file list, andclick Choose.

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

7 Select Enable Cache (Windows) or Use Cache to Speed Link Updates(Macintosh) to create a cache file for the site.

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

links more quickly when you move, rename, or delete a file.8 Click OK to close the Site Definition dialog box, and click OK to close the

cache message box.


4/20

4

The Site window displays a list of all the folders and files in your localxtutorial site.

Open the start file

Now youll open the Web page that youll be working with in the tutorial.

1 In the Dreamweaver Site window, double-click the icon for the start.htm file toopen it.

The start.htm page consists of an HTML layout table containing severalimages that have been prepared in and exported from Fireworks. Youll workwith your own copy of this page.

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


5/20


2 Choose File > Save As.

3 In the dialog box that appears, navigate inside the xtutorial_dwfw4 folder,name the file my_xtutorial.htm, and click Save.

Set Fireworks as the external image editor

Before trying out the cross-product integration between Fireworks andDreamweaver, youll make sure that Fireworks is designated as the primaryexternal image editor for Dreamweaver.

1 In Dreamweaver, choose Edit > Preferences and select File Types/Editors fromthe Category list.

This preference lets you specify the external program to launch fromDreamweaver when editing a file of a certain type. Youll designate Fireworks asthe editor to launch for Web image files.

2 In the Extensions list, select the Web file extension .gif.

By default, Dreamweaver specifies Fireworks as the primary editor for GIF files.If the default has been changed, youll need to specify Fireworks as the editoryourself.

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

4 In the Extensions list, select the Web file extension .jpg. If needed, in theEditors list, select Fireworks 4 and click Make Primary.

5 Click OK to close the Preferences dialog box.

Launch and edit a Fireworks image

Now youll use the cross-product integration that youve set up to edit theDreamweaver page. Youll use Fireworks to make changes to the FeaturedDestination image on the right of the page and watch it update automatically inDreamweaver.

Launch a Fireworks image from Dreamweaver

The Featured Destination image was designed, optimized, and exported usingFireworks, and then placed in the right column of the layout table inDreamweaver. For more information on how to import Fireworks files into aDreamweaver page, see Using Dreamweaver and Fireworks Together in either

Dreamweaver Help or Fireworks Help.Youll launch Fireworks to make some graphical changes to the title text of theFeatured Destination image.


6/20

6

1 In Dreamweaver, click to select the Featured Destination image at the right ofthe Travel Detail page.

2 If the Property inspector is not open, choose Window > Properties to display it.If needed, click the triangle at the lower right corner of the Property inspectorto display the expanded inspector.

The Property inspector displays special icons indicating that the selected imageoriginated in Fireworks. The Src field at the top of the inspector displays thename of the actual GIF file placed in the Dreamweaver page, while theFireworks Src field at the bottom of the inspector displays the source PNG file.

The Featured Destination image began as native PNG file in Fireworks and wasthen optimized and exported in GIF format. Although the Dreamweaver pageincludes only the GIF version of the image, it still references the sourceFireworks PNG file, because that file is located in the Dreamweaver site. Youllsee why this reference is important in the next step.

3 Click the Edit button in the Property inspector to launch Fireworks 4.

Fireworks automatically launches with a special editing window. The icons inthe upper area of the editing window indicate that you are editing the PNGversion of the Featured Destinations image and that you have launched theimage from Dreamweaver.

Whenever you launch and edit a Fireworks image from Dreamweaver,Fireworks automatically looks for the source PNG file of that image. If

Fireworks cannot find the source PNG file (for example, if the file is locatedoutside the Dreamweaver site), it displays a message asking if you want tospecify a source file to open. For best results, always include your sourceFireworks PNG files in your Dreamweaver site so that Fireworks can locatethem during launching and editing.


7/20


Edit the image in Fireworks

Now youre ready to use the Fireworks tools to edit the Featured Destinationimage. Youll change the color of the title text at the top of the image and add adrop shadow to it.

1 In Fireworks, if needed, choose Window > Tools to display the Tools panel.

2 In the Tools panel, select the Pointer tool, and click to select the FeaturedDestination text container.

3 In the Tools panel, click the Fill Color box to display the color swatches, andselect a new swatch. We selected a dark blue.

The Featured Destination text is filled with the new color. Next, youll add adrop shadow effect to the text.

4 Make sure the Featured Destination text is still selected. If needed, chooseWindow > Effect to display the Effect panel.


8/20

8

5 In the menu at the top of the Effect panel, choose Shadow and Glow > DropShadow. Adjust the Drop Shadow settings as desired, and then click away fromthe settings box to close it.

We used the following Drop Shadow settings:

6 When you finish, click the Done button at the top of the editing window tosave your edits to the image and return to Dreamweaver.

The source PNG file is updated with your edits and reexported in GIF format.

The Dreamweaver page updates with the new GIF image to reflect the editsyou made in Fireworks.


9/20


Launch and optimize a Fireworks image

In addition to launching Fireworks from Dreamweaver to make image edits, youcan launch Fireworks to make quick edits to an images optimization settings.When you launch and optimize a Fireworks image from Dreamweaver, aFireworks dialog box appears, letting you preview and adjust the optimizationsettings.

Set the Fireworks Launch and Edit preferences

Before making changes to your Web page, youll check the Launch and Editpreferences in Fireworks. These preferences specify what to do if Fireworks cannotfind the source PNG file for the launched image.

1 Switch to Fireworks.

2 In Fireworks, choose Edit > Preferences, and click the Launch and Edit tab(Windows), or choose Launch and Edit from the pop-up menu at the upperleft of the Preferences dialog box (Macintosh).

By default, the preferences When Editing from External Application and WhenOptimizing from External Application are both set to Ask When Launching.

You dont need to worry about the When Editing from External Applicationpreference; this preference has no effect when Fireworks images are launchedand edited from Dreamweaver. However, you may need to reset the WhenOptimizing from External Application preference if it has been changed.

3 If needed, in the When Optimizing from External Application pop-up menu,select Ask When Launching.

When this option is selected, Fireworks displays a dialog box when it cannotfind the source PNG file for a launched image. The dialog box lets you specify,

if desired, a source file to launch in place of the original image.4 Click OK to close the Preferences dialog box.


10/20

10

Launch and optimize a Fireworks image

Now youll adjust the optimization settings for the airplane image at the left ofyour page to reduce its file size.

1 Switch to Dreamweaver.

2 Select the airplane image at the left of the Travel Detail page.

3 Choose Commands > Optimize Image in Fireworks.

4 In the Find Source for Optimizing dialog box, click No to launch the JPEGversion of the airplane image, instead of a source file, directly in Fireworks.

Fireworks launches with the image preview displayed in the Optimize Imagesdialog box. Notice the current file size of the image (around 40K) that isdisplayed above the image preview.

Youll keep the airplane image optimized in JPEG format but adjust its Qualitysetting to compress the file size further.


11/20


5 In the Quality field, enter 75 to reduce the file size of the optimizedJPEG image.

The new setting affects the visual quality of the preview only slightly. However,the file size (around 10K) has reduced dramatically.

6 Click the Update button at the lower right of the Optimize Images dialog boxto return to Dreamweaver.

Insert a Fireworks table

So far, youve experienced the cross-product integration from Dreamweaver toFireworks and back to Dreamweaver again. Now youll explore the completeround-trip process of placing a Fireworks table in Dreamweaver, editing it in both

Dreamweaver and Fireworks, and returning finally to the updated file inDreamweaver.

Youll start by adding a Fireworks table image to the empty center area of theTravel Detail page.


12/20


13/20


5 Choose File > Export. In the Export dialog box, do the following:

Navigate inside the table folder located within the xtutorial_dwfw4/imagesfolder.

Name the file content.htm.

In the Save As pop-up menu, select HTML and Images.

In the HTML pop-up menu, select Export HTML File.

In the Slices pop-up menu, select Export Slices.

Select Include Areas Without Slices.

6 Click Save to export the image as slice files, along with the HTML file neededto assemble the table slices.

7 In Fireworks, close the content.png window without saving it. Leave Fireworks

running.


14/20

14

Insert the Fireworks table into Dreamweaver

Now that youve exported the Fireworks table to your Dreamweaver site, you canplace it in the Travel Detail page.

1 Switch to Dreamweaver, and make sure the Travel Detail window is active.

2 Click in the upper left corner of the empty layout table cell to set an

insertion point.

Youll add the Fireworks table by inserting the content.htm file you exported.When you insert Fireworks HTML code, all of the images referenced by theHTML are also included.

3 In Dreamweaver, click the Insert Fireworks HTML button in the Commoncategory of the Objects panel.

Click here to setinsertion point


15/20


4 In the dialog box that appears, click Browse. Navigate to the xtutorial_dwfw4folder, and open content.htm, located within the images/table folder.

5 Click OK to insert the Fireworks table.

6 Choose File > Save to save the Travel Detail page with the Fireworks tableinserted in it.


16/20

16

Edit the Fireworks table in Dreamweaver

Next youll use Dreamweaver to add some new copyright text to the bottom of thetable you just inserted.

1 In Dreamweaver, select the white horizontal slice at the bottom of theFireworks table you just inserted, and press Backspace (Windows) or Delete(Macintosh) to delete the image source for the slice.

Deleting the image source clears the table slice so that you can enter text in it.

2 With the insertion point still at the left edge of the slice, type Copyright 2000.

3 Select the Copyright 2000 text you just entered. In the Property inspector, dothe following:

In the Size pop-up menu, select 1.

Click the Bold button to apply bold style to the text.

Click the Align Center button to center the text in the table cell.

You have just changed a table slice that formerly contained an image to onecontaining text. Notice that you have changed only the contents of the table

slice without altering the layout of the table as a whole. Preserving the tablelayout ensures that Fireworks will recognize Dreamweaver edits made tothe table.


17/20


Launch and edit a Fireworks table

Next youll launch Fireworks to continue making edits to the table.

Launch a Fireworks table from Dreamweaver

With Dreamweaver 4 and Fireworks 4 together, you can launch and edit not onlyindividual images on a page but also images contained as slices in a Fireworkstable. When you launch and edit a table slice, Fireworks looks for and opens thesource PNG file for the entire table image.

1 In Dreamweaver, click inside the Fireworks table that you just placed in theTravel Detail page.

2 In the status bar at the bottom of the document window, click the secondTABLE tag to select the Fireworks table.

Be sure to click the second TABLE tag; clicking the first TABLE tag selects thelarger table layout instead.

3 If needed, choose Window > Properties to display the Property inspector.

The icon at the upper left corner of the Property inspector indicates that theselection is a Fireworks table. The inspector also identifies a Fireworks PNG filewithin the local Dreamweaver site as the source for the table.

You should always include your source Fireworks PNG files in yourDreamweaver site so that Fireworks can locate them when launchingand editing.

4 Click the Edit button in the Property inspector to launch Fireworks.

The source PNG file for the entire table image opens in a Fireworksediting window.

5 In Fireworks, if needed, click the Show Slices icon at the bottom of the Toolspanel to display the slice boundaries in the image.

6 Select the bottom slice in the image, and notice that it still contains the HTMLcode for the text edits you made in Dreamweaver.


18/20

18

Add links to the table

Dreamweaver and Fireworks recognize and preserve a variety of edits made tographics files in either program, including hotspots, links, and ALT tags. In thissection, youll use Fireworks to add links to the More graphics in the table image.

1 In Fireworks, select the graphic slice directly above the Fly Fishing in the RockyMountains text.

2 If needed, choose Window > Object to display the Object panel.

If you were really building an entire Web site, you might link the slice toanother page containing more information on fly fishing. To simplify mattersfor this tutorial, youll just link the graphic to a Web page of your choice.

3In the URL field of the Object panel, type the URL of your choice.

4 Repeat steps 1 through 3 to add different links to the More slices above the

Puget Sound Kayaking and Level 5 Rapids text.5 Click Done at the top of the editing window to return to Dreamweaver.

The source PNG file is automatically updated and reexported to reflect the sliceedits you made.

6 In Dreamweaver, select each More slice in turn, and notice that the Propertyinspector displays the link destinations you specified in Fireworks. Notice alsothat the Copyright 2000 table slice has survived the round-trip betweenDreamweaver and Fireworks.

7 Choose File > Save.


19/20


Preview your finished page in a browser

Now that youve finished editing your Web page, youre ready to preview the finalresults in a browser.

1 In Dreamweaver, press F12 to open the Travel Detail page in abrowser window.

2 When you are finished previewing the page and testing its links, close thebrowser window.

3 In Dreamweaver, close the Travel Detail window.

Now that youve finished the cross-product tutorial, youre ready to exploreDreamweaver and Fireworks on your own. You can use what youve learned tostart work on your own projects, or you can explore more learning tools, availablefrom the Help menu in both Dreamweaver and Fireworks.


20/20

Fw Dw Tutorial

Documents

Transcript of Fw Dw Tutorial