Fireworks and Dreamweaver Guide introduction

Dreamweaver Copyright information: This article is translated from Macromedia official documents Fireworks and Dreamweaver Tutorial
Original document: fw_dw_tutorial(pdf,1.37m zipped)
Required Documents: Xtutorial_dwfw4(568k zipped)
Full text translation: Spikal

Introduction to the Guide

Macromedia Dreamweaver, the visual establishment and management of Web and site tools software, Macromedia Fireworks, design and processing of online graphics, professional tools, 2 have provided a professional rich image of the site solution. In addition to their independent capabilities, Dreamweaver and fireworks also offer the possibility of using them to edit Web pages and graphics.

With the perfect combination of the above 2, you can put fireworks graphics and tables into Dreamweaver and use Dreamweaver tools to modify the HTML code. You can start fireworks directly in Dreamweaver and use fireworks tools to make deep changes to the picture without losing any changes in the Dreamweaver. When you return to Dreamweaver, the graphics on the page are automatically updated.

This wizard will show you how to prepare, place, and edit graphics in an HTML page in conjunction with Dreamweaver and fireworks. This wizard can be completed within one hours, just ask your system to install both Dreamweaver4.0 and Fireworks4.0.

you're going to learn.

When you complete the wizard, you will create a Web page with images and table elements. Along this path, you will learn the following typical workflows:

• To set an external graphics editor for Dreamweaver
• Start fireworks in the Dreamweaver. Edit pictures
• Start fireworks compress pictures in Dreamweaver
• Output Fireworks HTML form code to Dreamweaver site
• Insert Fireworks HTML form code to Dreamweaver page
• Start fireworks edit form in Dreamweaver

You should know.

Although this tutorial is written for Dreamweaver and fireworks beginners, you should still have some understanding of these 2 software. Dreamweaver and fireworks each have a guide covering the basic skills to use these 2 software.

To read the Dreamweaver guide, check the use of Dreamweaver (using Dreamweaver), and to read the Fireworks guide, check out the use Fireworks (using fireworks). You can find them in each of these 2 software help files.

Find the files you need

Please download the files needed to complete this guide.

Set up the structure of the Guide Web site

Now you will use the downloaded file to set up the site structure.

define a local Web site

The first step in setting up the guide site structure is to define a local Web site. The local site is a folder on your hard drive, and Dreamweaver will store all of the files in that folder. Each site you create in Dreamweaver needs to have a local site corresponding to it.

You need to define the Xtutorial_dwfw4 folder as your local site

1. Start Dreamweaver.
2. Select Site->new Site.
3. In the Site Definition dialog box, make sure that the local info is in the selected state in the category list.
4. Fill in the xtutorialin the Site Name field.
5. Click the folder icon to the right of the local root bar.
6. In the dialog box that appears, find the location where you placed the XTUTORIAL_DWFW4.
   
   
   
7. Select the Enable cache to create a cached folder for the Web site. Caching can record files that already exist to help Dreamweaver update links faster when you move, rename, and delete files.
8. Click OK to close the Site Definition dialog box.

The Site window displays files and folders from all local xtutorial Web sites in the list.

Open Start File

Now open the relevant Web page file.

1. In the Dreamweaver Site window, double-click the icon for the start.htm file to open it.
   
   
   In the start.htm file, a table using HTML typesetting contains several image files that are exported from fireworks.
2. Select File->save as.
3. In the dialog box that appears, save the file as my_xtutorial.htmand place it in the XTUTORIAL_DWFW4 directory.

Set fireworks as an external picture editor

Before you experience the comprehensive capabilities of fireworks and dreamweaver across products, you need to make sure that fireworks has been set as the first external editor for Dreameaver.

1. In Dreamweaver, select Edit->preference and select File Types/editors in the category list.
   This setting allows you to specify an external program for Dreamweaver when editing a particular type of file. You need to designate fireworks as an external editor for web graphics.
2. In the Extensions list, select the. gif file type.
   Dreamweaver will default to specify fireworks as an external editor for. gif files. If the default settings change, then you need to set them manually.
3. If necessary, select Fireworks4 in the Editors list and click Make Primary.
4. In the Extensions list, select the. gif file type. If necessary, select Fireworks4 in the Editors list and click Make Primary.
5. Click OK to close the Preferences dialog box.

Start Fireworks Edit a picture

With just the settings you will be able to experience the ability to cross products when using Dreamweaver editing pages. You will be able to edit the featured destination picture directly with fireworks and see that it is automatically updated in Dreamweaver.

Start fireworks in the Dreamweaver. Edit pictures

Featured destination has been designed, compressed, and exported with fireworks and is placed in the right cell on the page. If you want to know more about importing fireworks files into Dreamweaver, check out the Dreamweaver or fireworks help documentation for using Dreamweaver and fireworks (using Dreamweaver and Fireworks together).

Next, you need to start fireworks to make some changes to the featured destination title word.

1. In Dreamweaver, click to select the featured destination picture that is located to the right of the travel detail page.
2. If the property inspector is not open, select Window->properties to open it. You need to click on the small triangle in the lower right corner of the property tool bar to make the extension part visible.
   
   
   The property bar uses a small icon to indicate that the selected picture is from fireworks. The top src text box displays the exact name of the GIF picture currently on the page, and the Fireworks src text box at the bottom shows the source file (PNG). Although Dreamweaver contains only the GIF version of the featured destination picture, it is still associated with the original file in PNG format, because this image is saved in the site created by Dreamweaver. In the next step you will see how important this connection is.
3. Click the Edit button on the Properties toolbar to start the Fireworks4.0.

When fireworks starts, a special editing window appears automatically. The icon at the top of the window shows you are editing the PNG version of the featured destination picture and is starting from Dreamweaver.

Whenever you start fireworks from Dreamweaver to edit a picture, fireworks automatically looks for the PNG format source file for the current picture. If fireworks cannot find the source file (for example, the source file is stored outside of the site created by Dreamweaver), a message appears asking if you need to specify a file to open. It's a good practice to keep the source files in PNG format in a Web site created by Dreamweaver, so that fireworks can be found when you start and edit pictures.

Edit a picture in fireworks

Now you're ready to edit featured destination with fireworks tools. You will need to change the color of the caption text at the top of the picture and add a shadow effect to it.

1. In fireworks, if necessary, select Window->tools to display the sidebar.
2. In the toolbar, select Pointer Tool, and click to select the text for featured destination.
   
   
   
3. In the sidebar, click the fill color to call out the palette and change the fill color to dark blue.
   
   
   This way, the fill color of the featured destination text changes, and the next step is to add a shadow effect to the text.
4. Make sure the text for "featured destination" is still in the selected state. If necessary, select Window->effect to display the effect surface version.
5. Select Shadow and Glow->drop Shadow in the effect menu. Adjust the drop shadow parameters as desired, and then click Elsewhere to close the dialog box.
   We use the following settings:
   
   
   
6. When you are done, click the Done button at the top of the edit window to save your changes and return to the Dreamweaver.

The source files in PNG format have been updated with your modifications, and the GIF-formatted pictures are dreamweaver. The pages in Dreamweaver have also been updated with new GIF images, and the changes you make in fireworks can be reflected immediately.

Start Fireworks Compress a picture

In addition to being able to start fireworks in the Dreamweaver to edit the image, you can also use fireworks to make quick changes to the compression settings of the picture. When you need to start the fireworks compression picture in the Dreamweaver, a dialog window will appear to let you adjust the compression settings while previewing the picture side.

Set the startup and editing options for fireworks

Before you make any changes to your Web page, you need to check the startup and editing options for fireworks. These options specify what can be done when fireworks cannot find the PNG source file.

1. Switch to fireworks.
2. In fireworks, select Edit->preference and select the launch and edit label.
   The default setting is when you edit from an external program (when Editing from External application) and when you compress from an external program (when optimizing from External application) are set to be queried at startup (ask time launching).
   You don't have to worry about the settings that are edited from an external program, this setting doesn't work for you to start the fireworks edit from the Dreamweaver. However, if the settings that are compressed from the external program are changed, you need to reset it.
3. If necessary, the compression setting from the external program is set to be queried at startup.
   When the setting is queried at startup, Fireworks displays a dialog box when the PNG source file is not found. This dialog box lets you select a PNG file as the source file.
   Click OK to close the dialog box.

Start Fireworks compression picture

Now you're going to adjust the compression settings on the plane's image to the left of the page to reduce the file size.

1. Switch to Dreamweaver.
2. Select the picture of the plane to the left of the travel detail page.
3. Select Commands->optimize Image in Fireworks.
4. Click "No" in the Find source window to edit the file in the JPEG format directly in fireworks, not the source file.
   The Optimize Images dialog window starts with a preview of the picture. Note that the current size of the picture is about 40k, which is displayed above the picture preview.
   You will always compress images in JPEG format and further adjust the image quality.
5. In quality, enter 75 to reduce the size of the file.
   The new compression settings visually play a very minor role in the picture. However, the size of the file has been reduced to 10k.
   
   
   
6. Click the Update button in the lower-right corner of the Optimize Images dialog window to finish updating and return to Dreamweaver.

Insert a fireworks table

So far, you've experienced cross product interactions, from Dreamweaver to fireworks and back to Dreamweaver. Now you'll experience this cycle further, place a fireworks table in Dreamweaver, edit it in Dreamweaver and fireworks, and finally go back to Dreamweaver to see the files that have been updated.

You will start by placing a fireworks form in the Travel Detail Page Center blank area.

output a picture with a table in fireworks

First, you want to open the PNG format source file.

1. Switch to fireworks.
2. In fireworks, choose File->open.
3. In the pop-up dialog box, locate the XTUTORIAL_DWFW4 directory on your hard drive, locate the Content.png file, and open it.
   
   
   The Content.png file is a large picture, but has been cut into many small rectangles. If you want to learn more about creating a cut, see the use of hot zones and cuts in fireworks help (using Hotspots and Slices).
4. Click the Show Slice button at the bottom of the tool bar to show the edge of the cut.
   
   
   When you output this image, each cut becomes a cell of an HTML table.
5. Select File->export. In the Export dialog box, make the following modifications:
   • Modify the file saved directory to the table directory under Xtutorial_dwfw4/images.
   • 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 complete the output and save the related files.
7. In fireworks, close the Content.png file, but do not save it, and do not turn off fireworks.

Insert a fireworks table into Dreamweaver

Now that you've exported the fireworks form to the Dreamweaver Web site, you can then put it on the travel detail page.

1. Switch to Dreamweaver and confirm that the travel detail page is in the current window.
2. Click to set an insertion point in the upper-left corner of the blank cell in the middle of the table.
   
   
   You will add the fireworks table by inserting the Content.html method. When you add fireworks HTML code, all the relevant pictures will be included.
3. In Dreamweaver, click the Insert Fireworks HTML button on the object surface (insert fireworks HTML).
   
   
   
4. In the dialog box that appears, click Browse to locate the Xtutorial_dwfw4 directory on your hard drive and locate the content.htm file in the images/table directory below it.
5. Click OK to insert the fireworks form.
   
   
   
6. Select File->save Save to Travel detail page to complete the modification.