- Working with Different Output Formats
- Comparing Compression
- Advanced Compression Settings
- Exporting from Fireworks
- Summary
- Workshop
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
Exporting from Fireworks
Now it's time to export your image for use on the Web. You'll have to glance over some basic Web publishing and HTML page topics while you're getting started. You will also be introduced to the Export Preview dialog, where you can fine-tune your optimization settings before exporting and finish a simple placeholder page for your Web site.
Task: Export Image as Page for Web
You have had a chance to look through the most commonly used optimization settings. Now you will take an image file and work through the process of exporting it for Web usage.
Choose Export Preview from the File menu or press Ctrl+Shift+X (Windows) or Command+Shift+X (Macintosh).
-
The Export Preview dialog will appear, as shown in Figure 3.13. On the left is where you specify format options, as well as file and animation settings, which are available as tabs in the upper left. On the right is the preview area, which gives you file size feedback, the Settings drop-down menu, and an area to preview the image output.
)
Figure 3.13 The Export Preview dialog lets you focus on the export output
settings.
-
From the Format drop-down menu on the Options tab, make sure JPEG is selected and that the Quality setting is at 70.
-
Check the box to select Progressive to create a progressive JPEG. This should also help reduce the file size, which should be less than 30KB.
-
Check the box to select Sharpen Color Edges. Zoom in on the text and graphic with the magnifying glass to see how this affects text and line art—there should be a subtle improvement.
-
In the lower right are the dialog options. Export will begin the process of exporting your graphics. OK will save the current export settings and change the Optimize panel settings to reflect your decisions. Cancel will disregard any changes and return to where you left off. Click Export to continue exporting your image.
-
The Export dialog is where you will save images for use on the Web and other applications. Navigate to the Fireworks Examples folder on your hard disk. For the file name go ahead and type index, as in Figure 3.14. This will export the image as a file named index.jpg.
)
Figure 3.14 The Export dialog allows you to save images in an optimized
format and automatically create HTML code.
-
For the Save as Type menu, choose HTML and Images. This will export code generated automatically by Fireworks along with the image.
-
The HTML drop-down menu should now be active. Make sure Export to File is selected. This will create a file named index.htm. Copy to Clipboard would copy the HTML source code to the clipboard for use in another application, such as a text editor.
NOTE
On a Web server the index.htm file is often the default file displayed when the parent directory is accessed. Your Web host or network administrator will tell you what your file needs to be called. Other common names are index.html, default.htm, and default.html.
-
Now you may go ahead and click Save or press Return to export your image and Web page.
-
Launch your favorite browser and choose Open from the File menu. Browse to the Fireworks Examples folder and select the file index.htm. The Web page will now open in your browser and display the image index.jpg, as in Figure 3.15.
)
Figure 3.15 The JPEG image index.jpg is now referenced by the
HTML file index.htm to create a Web page.
Great! You've started a Web site. You're not quite qualified to start advertising your services as a Web designer, but you should easily be able to get any image into a format ready for the Web. To actually publish your work on the Web, you'll need a World Wide Web host server, which is discussed in the "Using Dreamweaver's Web Publishing Tools" section of Hour 17, "Working with Dreamweaver MX."