Preview the completed Web page
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 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
1
What you should know
Although this tutorial is targeted toward novice users of Dreamweaver and
Fireworks, you may want to become familiar first 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
Fireworks tutorial, see Using Fireworks. You can also find these tutorials in
Dreamweaver Help and Fireworks Help.
Locate the tutorial files
All the files you need to complete this tutorial are contained within the same
folder as this document in a file named sample.
Preview the completed Web page
Before beginning the tutorial steps, preview the completed Web page to get a
sense of what your page will look like when you are finished.
1
Open a the sample folder and navigate to final.htm.
You will create your own version of this page.
2
Close the new browser window when you are finished viewing the page.
Set up the tutorial site structure
Now you’ll 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 local
site is a folder on your local drive where Dreamweaver will store all the files for
your Web site. Each Web site you create in Dreamweaver must have a local site
associated with it.
You’ll define the xtutorial_dwfw4 folder as your local site.
2
1
Start Dreamweaver.
2
Choose Site > New Site.
3
In the Site Definition dialog box, make sure Local Info is selected in the
Category list.
4
In the Site Name field, type xtutorial.
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 your
desktop, and do one of the following:
• In Windows, click Open, and then click Select when xtutorial_dwfw4 appears
in the Select field.
• On the Macintosh, select the xtutorial_dwfw4 folder in the file list, and
click 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.
Fireworks and Dreamweaver Tutorial
3
The Site window displays a list of all the folders and files 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.
1
In the Dreamweaver Site window, double-click the icon for the start.htm file 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.
4
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 and
Dreamweaver, you’ll make sure that Fireworks is designated as the primary
external image editor for Dreamweaver.
1
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 file of a certain type. You’ll designate Fireworks as
the 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, you’ll need to specify Fireworks as the editor
yourself.
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 the
Editors list, select Fireworks 4 and click Make Primary.
5
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 files 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
5
1
In Dreamweaver, click to select the Featured Destination image at the right of
the 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 inspector
to display the expanded inspector.
The Property inspector displays special icons indicating that the selected image
originated in Fireworks. The Src field at the top of the inspector displays the
name of the actual GIF file placed in the Dreamweaver page, while the
Fireworks 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 was
then optimized and exported in GIF format. Although the Dreamweaver page
includes only the GIF version of the image, it still references the source
Fireworks PNG file, because that file is located in the Dreamweaver site. You’ll
see 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 in
the upper area of the editing window indicate that you are editing the PNG
version of the Featured Destinations image and that you have launched the
image 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 located
outside the Dreamweaver site), it displays a message asking if you want to
specify a source file to open. For best results, always include your source
Fireworks PNG files in your Dreamweaver site so that Fireworks can locate
them during launching and editing.
6
Edit the image in Fireworks
Now you’re ready to use the Fireworks tools to edit the Featured Destination
image. You’ll change the color of the title text at the top of the image and add a
drop 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 Featured
Destination text container.
3
In the Tools panel, click the Fill Color box to display the color swatches, and
select a new swatch. We selected a dark blue.
The Featured Destination text is filled with the new color. Next, you’ll add a
drop shadow effect to the text.
4
Make sure the Featured Destination text is still selected. If needed, choose
Window > Effect to display the Effect panel.
Fireworks and Dreamweaver Tutorial
7
5
In the menu at the top of the Effect panel, choose Shadow and Glow > Drop
Shadow. Adjust the Drop Shadow settings as desired, and then click away from
the 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 to
save 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 edits
you made in Fireworks.
8
Launch and optimize a Fireworks image
In addition to launching Fireworks from Dreamweaver to make image edits, you
can launch Fireworks to make quick edits to an image’s optimization settings.
When you launch and optimize a Fireworks image from Dreamweaver, a
Fireworks dialog box appears, letting you preview and adjust the optimization
settings.
Set the Fireworks Launch and Edit preferences
Before making changes to your Web page, you’ll check the Launch and Edit
preferences in Fireworks. These preferences specify what to do if Fireworks cannot
find 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 upper
left of the Preferences dialog box (Macintosh).
By default, the preferences When Editing from External Application and When
Optimizing from External Application are both set to Ask When Launching.
You don’t need to worry about the When Editing from External Application
preference; this preference has no effect when Fireworks images are launched
and edited from Dreamweaver. However, you may need to reset the When
Optimizing 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 cannot
find 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.
Fireworks and Dreamweaver Tutorial
9
Launch and optimize a Fireworks image
Now you’ll adjust the optimization settings for the airplane image at the left of
your 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 JPEG
version of the airplane image, instead of a source file, directly in Fireworks.
Fireworks launches with the image preview displayed in the Optimize Images
dialog box. Notice the current file size of the image (around 40K) that is
displayed above the image preview.
You’ll keep the airplane image optimized in JPEG format but adjust its Quality
setting to compress the file size further.
10
5
In the Quality field, enter 75 to reduce the file size of the optimized
JPEG 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 box
to return to Dreamweaver.
Insert a Fireworks table
So far, you’ve experienced the cross-product integration from Dreamweaver to
Fireworks and back to Dreamweaver again. Now you’ll explore the complete
round-trip process of placing a Fireworks table in Dreamweaver, editing it in both
Dreamweaver and Fireworks, and returning finally to the updated file in
Dreamweaver.
You’ll start by adding a Fireworks table image to the empty center area of the
Travel Detail page.
Fireworks and Dreamweaver Tutorial
11
Export a table image from Fireworks
First, you’ll open the source Fireworks PNG file for the table.
1
Switch to Fireworks.
2
In Fireworks, choose File > Open.
3
In the dialog box that appears, navigate inside the xtutorial_dwfw4 folder,
select the content.png file, and click Open.
The content.png file consists of a single large image that has been divided into
rectangular slices. For information on creating sliced images in Fireworks, see
“Using Hotspots and Slices” in Fireworks Help.
4
Click the Show Slices icon at the bottom of the Tools panel to display the slice
boundaries in the image.
Show Slices
When you export this image, each slice will become its own HTML table cell.
12
5
Choose File > Export. In the Export dialog box, do the following:
• Navigate inside the table folder located within the xtutorial_dwfw4/images
folder.
•
•
•
•
•
Name the file content.htm.
6
Click Save to export the image as slice files, along with the HTML file needed
to assemble the table slices.
7
In Fireworks, close the content.png window without saving it. Leave Fireworks
running.
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.
Fireworks and Dreamweaver Tutorial
13
Insert the Fireworks table into Dreamweaver
Now that you’ve exported the Fireworks table to your Dreamweaver site, you can
place 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.
Click here to set
insertion point
You’ll add the Fireworks table by inserting the content.htm file you exported.
When you insert Fireworks HTML code, all of the images referenced by the
HTML are also included.
3
14
In Dreamweaver, click the Insert Fireworks HTML button in the Common
category of the Objects panel.
4
In the dialog box that appears, click Browse. Navigate to the xtutorial_dwfw4
folder, 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 table
inserted in it.
Fireworks and Dreamweaver Tutorial
15
Edit the Fireworks table in Dreamweaver
Next you’ll use Dreamweaver to add some new copyright text to the bottom of the
table you just inserted.
1
In Dreamweaver, select the white horizontal slice at the bottom of the
Fireworks 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, do
the 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 one
containing 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 table
layout ensures that Fireworks will recognize Dreamweaver edits made to
the table.
16
Launch and edit a Fireworks table
Next you’ll 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 only
individual images on a page but also images contained as slices in a Fireworks
table. When you launch and edit a table slice, Fireworks looks for and opens the
source PNG file for the entire table image.
1
In Dreamweaver, click inside the Fireworks table that you just placed in the
Travel Detail page.
2
In the status bar at the bottom of the document window, click the second
TABLE tag to select the Fireworks table.
Be sure to click the second TABLE tag; clicking the first TABLE tag selects the
larger 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 the
selection is a Fireworks table. The inspector also identifies a Fireworks PNG file
within the local Dreamweaver site as the source for the table.
You should always include your source Fireworks PNG files in your
Dreamweaver site so that Fireworks can locate them when launching
and 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 Fireworks
editing window.
5
In Fireworks, if needed, click the Show Slices icon at the bottom of the Tools
panel to display the slice boundaries in the image.
6
Select the bottom slice in the image, and notice that it still contains the HTML
code for the text edits you made in Dreamweaver.
Fireworks and Dreamweaver Tutorial
17
Add links to the table
Dreamweaver and Fireworks recognize and preserve a variety of edits made to
graphics files in either program, including hotspots, links, and ALT tags. In this
section, you’ll 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 Rocky
Mountains 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 to
another page containing more information on fly fishing. To simplify matters
for this tutorial, you’ll just link the graphic to a Web page of your choice.
3
In 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 slice
edits you made.
18
6
In Dreamweaver, select each More slice in turn, and notice that the Property
inspector displays the link destinations you specified in Fireworks. Notice also
that the Copyright 2000 table slice has survived the round-trip between
Dreamweaver and Fireworks.
7
Choose File > Save.
Preview your finished page in a browser
Now that you’ve finished editing your Web page, you’re ready to preview the final
results in a browser.
1
In Dreamweaver, press F12 to open the Travel Detail page in a
browser window.
2
When you are finished previewing the page and testing its links, close the
browser window.
3
In Dreamweaver, close the Travel Detail window.
Now that you’ve finished the cross-product tutorial, you’re ready to explore
Dreamweaver and Fireworks on your own. You can use what you’ve learned to
start work on your own projects, or you can explore more learning tools, available
from the Help menu in both Dreamweaver and Fireworks.
Fireworks and Dreamweaver Tutorial
19
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 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
1
What you should know
Although this tutorial is targeted toward novice users of Dreamweaver and
Fireworks, you may want to become familiar first 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
Fireworks tutorial, see Using Fireworks. You can also find these tutorials in
Dreamweaver Help and Fireworks Help.
Locate the tutorial files
All the files you need to complete this tutorial are contained within the same
folder as this document in a file named sample.
Preview the completed Web page
Before beginning the tutorial steps, preview the completed Web page to get a
sense of what your page will look like when you are finished.
1
Open a the sample folder and navigate to final.htm.
You will create your own version of this page.
2
Close the new browser window when you are finished viewing the page.
Set up the tutorial site structure
Now you’ll 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 local
site is a folder on your local drive where Dreamweaver will store all the files for
your Web site. Each Web site you create in Dreamweaver must have a local site
associated with it.
You’ll define the xtutorial_dwfw4 folder as your local site.
2
1
Start Dreamweaver.
2
Choose Site > New Site.
3
In the Site Definition dialog box, make sure Local Info is selected in the
Category list.
4
In the Site Name field, type xtutorial.
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 your
desktop, and do one of the following:
• In Windows, click Open, and then click Select when xtutorial_dwfw4 appears
in the Select field.
• On the Macintosh, select the xtutorial_dwfw4 folder in the file list, and
click 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.
Fireworks and Dreamweaver Tutorial
3
The Site window displays a list of all the folders and files 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.
1
In the Dreamweaver Site window, double-click the icon for the start.htm file 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.
4
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 and
Dreamweaver, you’ll make sure that Fireworks is designated as the primary
external image editor for Dreamweaver.
1
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 file of a certain type. You’ll designate Fireworks as
the 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, you’ll need to specify Fireworks as the editor
yourself.
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 the
Editors list, select Fireworks 4 and click Make Primary.
5
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 files 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
5
1
In Dreamweaver, click to select the Featured Destination image at the right of
the 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 inspector
to display the expanded inspector.
The Property inspector displays special icons indicating that the selected image
originated in Fireworks. The Src field at the top of the inspector displays the
name of the actual GIF file placed in the Dreamweaver page, while the
Fireworks 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 was
then optimized and exported in GIF format. Although the Dreamweaver page
includes only the GIF version of the image, it still references the source
Fireworks PNG file, because that file is located in the Dreamweaver site. You’ll
see 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 in
the upper area of the editing window indicate that you are editing the PNG
version of the Featured Destinations image and that you have launched the
image 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 located
outside the Dreamweaver site), it displays a message asking if you want to
specify a source file to open. For best results, always include your source
Fireworks PNG files in your Dreamweaver site so that Fireworks can locate
them during launching and editing.
6
Edit the image in Fireworks
Now you’re ready to use the Fireworks tools to edit the Featured Destination
image. You’ll change the color of the title text at the top of the image and add a
drop 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 Featured
Destination text container.
3
In the Tools panel, click the Fill Color box to display the color swatches, and
select a new swatch. We selected a dark blue.
The Featured Destination text is filled with the new color. Next, you’ll add a
drop shadow effect to the text.
4
Make sure the Featured Destination text is still selected. If needed, choose
Window > Effect to display the Effect panel.
Fireworks and Dreamweaver Tutorial
7
5
In the menu at the top of the Effect panel, choose Shadow and Glow > Drop
Shadow. Adjust the Drop Shadow settings as desired, and then click away from
the 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 to
save 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 edits
you made in Fireworks.
8
Launch and optimize a Fireworks image
In addition to launching Fireworks from Dreamweaver to make image edits, you
can launch Fireworks to make quick edits to an image’s optimization settings.
When you launch and optimize a Fireworks image from Dreamweaver, a
Fireworks dialog box appears, letting you preview and adjust the optimization
settings.
Set the Fireworks Launch and Edit preferences
Before making changes to your Web page, you’ll check the Launch and Edit
preferences in Fireworks. These preferences specify what to do if Fireworks cannot
find 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 upper
left of the Preferences dialog box (Macintosh).
By default, the preferences When Editing from External Application and When
Optimizing from External Application are both set to Ask When Launching.
You don’t need to worry about the When Editing from External Application
preference; this preference has no effect when Fireworks images are launched
and edited from Dreamweaver. However, you may need to reset the When
Optimizing 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 cannot
find 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.
Fireworks and Dreamweaver Tutorial
9
Launch and optimize a Fireworks image
Now you’ll adjust the optimization settings for the airplane image at the left of
your 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 JPEG
version of the airplane image, instead of a source file, directly in Fireworks.
Fireworks launches with the image preview displayed in the Optimize Images
dialog box. Notice the current file size of the image (around 40K) that is
displayed above the image preview.
You’ll keep the airplane image optimized in JPEG format but adjust its Quality
setting to compress the file size further.
10
5
In the Quality field, enter 75 to reduce the file size of the optimized
JPEG 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 box
to return to Dreamweaver.
Insert a Fireworks table
So far, you’ve experienced the cross-product integration from Dreamweaver to
Fireworks and back to Dreamweaver again. Now you’ll explore the complete
round-trip process of placing a Fireworks table in Dreamweaver, editing it in both
Dreamweaver and Fireworks, and returning finally to the updated file in
Dreamweaver.
You’ll start by adding a Fireworks table image to the empty center area of the
Travel Detail page.
Fireworks and Dreamweaver Tutorial
11
Export a table image from Fireworks
First, you’ll open the source Fireworks PNG file for the table.
1
Switch to Fireworks.
2
In Fireworks, choose File > Open.
3
In the dialog box that appears, navigate inside the xtutorial_dwfw4 folder,
select the content.png file, and click Open.
The content.png file consists of a single large image that has been divided into
rectangular slices. For information on creating sliced images in Fireworks, see
“Using Hotspots and Slices” in Fireworks Help.
4
Click the Show Slices icon at the bottom of the Tools panel to display the slice
boundaries in the image.
Show Slices
When you export this image, each slice will become its own HTML table cell.
12
5
Choose File > Export. In the Export dialog box, do the following:
• Navigate inside the table folder located within the xtutorial_dwfw4/images
folder.
•
•
•
•
•
Name the file content.htm.
6
Click Save to export the image as slice files, along with the HTML file needed
to assemble the table slices.
7
In Fireworks, close the content.png window without saving it. Leave Fireworks
running.
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.
Fireworks and Dreamweaver Tutorial
13
Insert the Fireworks table into Dreamweaver
Now that you’ve exported the Fireworks table to your Dreamweaver site, you can
place 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.
Click here to set
insertion point
You’ll add the Fireworks table by inserting the content.htm file you exported.
When you insert Fireworks HTML code, all of the images referenced by the
HTML are also included.
3
14
In Dreamweaver, click the Insert Fireworks HTML button in the Common
category of the Objects panel.
4
In the dialog box that appears, click Browse. Navigate to the xtutorial_dwfw4
folder, 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 table
inserted in it.
Fireworks and Dreamweaver Tutorial
15
Edit the Fireworks table in Dreamweaver
Next you’ll use Dreamweaver to add some new copyright text to the bottom of the
table you just inserted.
1
In Dreamweaver, select the white horizontal slice at the bottom of the
Fireworks 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, do
the 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 one
containing 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 table
layout ensures that Fireworks will recognize Dreamweaver edits made to
the table.
16
Launch and edit a Fireworks table
Next you’ll 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 only
individual images on a page but also images contained as slices in a Fireworks
table. When you launch and edit a table slice, Fireworks looks for and opens the
source PNG file for the entire table image.
1
In Dreamweaver, click inside the Fireworks table that you just placed in the
Travel Detail page.
2
In the status bar at the bottom of the document window, click the second
TABLE tag to select the Fireworks table.
Be sure to click the second TABLE tag; clicking the first TABLE tag selects the
larger 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 the
selection is a Fireworks table. The inspector also identifies a Fireworks PNG file
within the local Dreamweaver site as the source for the table.
You should always include your source Fireworks PNG files in your
Dreamweaver site so that Fireworks can locate them when launching
and 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 Fireworks
editing window.
5
In Fireworks, if needed, click the Show Slices icon at the bottom of the Tools
panel to display the slice boundaries in the image.
6
Select the bottom slice in the image, and notice that it still contains the HTML
code for the text edits you made in Dreamweaver.
Fireworks and Dreamweaver Tutorial
17
Add links to the table
Dreamweaver and Fireworks recognize and preserve a variety of edits made to
graphics files in either program, including hotspots, links, and ALT tags. In this
section, you’ll 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 Rocky
Mountains 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 to
another page containing more information on fly fishing. To simplify matters
for this tutorial, you’ll just link the graphic to a Web page of your choice.
3
In 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 slice
edits you made.
18
6
In Dreamweaver, select each More slice in turn, and notice that the Property
inspector displays the link destinations you specified in Fireworks. Notice also
that the Copyright 2000 table slice has survived the round-trip between
Dreamweaver and Fireworks.
7
Choose File > Save.
Preview your finished page in a browser
Now that you’ve finished editing your Web page, you’re ready to preview the final
results in a browser.
1
In Dreamweaver, press F12 to open the Travel Detail page in a
browser window.
2
When you are finished previewing the page and testing its links, close the
browser window.
3
In Dreamweaver, close the Travel Detail window.
Now that you’ve finished the cross-product tutorial, you’re ready to explore
Dreamweaver and Fireworks on your own. You can use what you’ve learned to
start work on your own projects, or you can explore more learning tools, available
from the Help menu in both Dreamweaver and Fireworks.
Fireworks and Dreamweaver Tutorial
19