Integrating FreeHand with Other Macromedia Web Applications– Lesson 61 Integrating FreeHand with Other Macromedia Web Applications Lesson 6

2 Integrating FreeHand with Other Macromedia Web Applications – Lesson 6 Objectives Work with the basic functions of Fireworks and Dreamweaver. Edit your FreeHand layouts in Fireworks and Dreamweaver to develop a Web page. Slice an image and create a hotspot in Fireworks. Optimize files in Fireworks. Export GIFs and JPEGs directly from FreeHand. Export a file from FreeHand directly to HTML.

3 Integrating FreeHand with Other Macromedia Web Applications – Lesson 6 Use Fireworks and Dreamweaver with FreeHand Macromedia Fireworks MX 2004 is a Web graphics editor. Open your Macromedia FreeHand MX file in Fireworks without having to modify the file. Edit the file in Fireworks to optimize your images for faster downloads and export the file in HTML format. Macromedia Dreamweaver MX 2004 is a Web-page development package. Open the Fireworks HTML file in Dreamweaver and add further refinements to your Web page.

4 Integrating FreeHand with Other Macromedia Web Applications – Lesson 6 The Fireworks interface Like FreeHand, Fireworks has a document window where you edit your file. Fireworks has preview buttons or tabs that allow you to view your artwork in several different views. Fireworks has menus and toolbars similar to FreeHand. Fireworks also has a Layers panel that allows you to organize your artwork. Fireworks has a Tools panel similar to FreeHand’s.

5 Integrating FreeHand with Other Macromedia Web Applications – Lesson 6 Example of the Fireworks interface Title and menu bars Tools panel Document window Preview buttons Property inspector

6 Integrating FreeHand with Other Macromedia Web Applications – Lesson 6 Slice images for faster downloads Fireworks allows you to divide an image into multiple sections, called “slices,” which help your Web page load faster. Slicing can be accomplished in three ways: Use the Slice and Polygon Slice tools from the Tools panel. Create guides in the document window and use the Slice Along Guides command when you export the file. Create slices from objects.

7 Integrating FreeHand with Other Macromedia Web Applications – Lesson 6 Create hotspots to increase interactivity of your Web page Hotspots are areas of a Web page that are associated with an URL. Hotspots perform some action, such as jumping to a new page, when the mouse is clicked in the hotspot area. Hotspots can be created in two ways: Use the Hotspot tools in the Tools panel. Define a hotspot from a shape, similar to creating a slice.

8 Integrating FreeHand with Other Macromedia Web Applications – Lesson 6 Use Fireworks to optimize your files The process of optimizing a file ensures that the file: Is in the proper format for its intended use. Is as small as possible to decrease download time. Click the Export Preview option on the File menu to open the Export Preview dialog box. Select the file format in this dialog box, such as JPEG, GIF, or some other format. Set other options to further optimize the file. Click the Export button to select a folder for the file and choose to slice the file, if desired.

9 Integrating FreeHand with Other Macromedia Web Applications – Lesson 6 The Export Preview dialog box This dialog box allows you to set many options and preview the changes each option creates before exporting the image to a file.

10 Integrating FreeHand with Other Macromedia Web Applications – Lesson 6 Export GIF and JPEG files from FreeHand The two most commonly used image formats in use on the Web are GIF and JPEG. Both are compressed file formats that download quicker than TIF or bitmap image files. Both image types can be directly exported from FreeHand using the Export option on the File menu. Consider how the image will be used and the advantages and limitations of each image format before exporting the file.

11 Integrating FreeHand with Other Macromedia Web Applications – Lesson 6 GIF vs. JPEG comparison table FORMATGIFJPEG Color depth8-bit maximumUp to 24-bit CompressionLossless; compresses solid areas of color Lossy; compresses subtle color transitions Transparency supportYesNo AdvantagesLossless compression Transparency Ability to control quality loss in compression. Excellent compression of photographic images DisadvantagesMaximum of 256 colors Does not compress gradient colors well No transparency Loss of quality when compressed Typical usesCartoon images, logos, animated banners Scanned photographs, images with complex textures, images with complex radiant colors

12 Integrating FreeHand with Other Macromedia Web Applications – Lesson 6 Export directly to HTML from FreeHand You can easily export your FreeHand document directly into HTML code. To do so: Create dummy links for any hyperlinks or hotspots that will later be resolved in Dreamweaver. Click the File menu, then click Publish as HTML. Set the Show Output Warnings option to force FreeHand to monitor the conversion and alert you to any possible problems. Open the HTML Setup dialog box by clicking the Setup button. Set any desired options for folders or image types and click the Save as HTML button to export the file as HTML code.

13 Integrating FreeHand with Other Macromedia Web Applications – Lesson 6 Create Web pages using Dreamweaver You can import HTML files created by other applications or you can create new Web pages using Dreamweaver. Dreamweaver’s interface is similar to that of FreeHand and Fireworks. There is a document window where your page is displayed. There are menus and toolbars. There are panels around the document window that can be used to modify the appearance of the page.

14 Integrating FreeHand with Other Macromedia Web Applications – Lesson 6 The Dreamweaver interface The Dreamweaver interface is similar to other Macromedia applications. Panels used to modify the document Document window Menus and toolbars

15 Integrating FreeHand with Other Macromedia Web Applications – Lesson 6 Use Dreamweaver to add URLs to hotspots The Properties inspector shown below is used in Dreamweaver to add URLs to hotspots defined in Fireworks. Select the hotspot and then open the Property inspector. Select the folder and file to be the target of the hotspot.

16 Integrating FreeHand with Other Macromedia Web Applications – Lesson 6 Summary In this lesson, you learned to: Work with the basic functions of Fireworks and Dreamweaver. Edit your FreeHand layouts in Fireworks and Dreamweaver to develop a Web page. Slice an image and create a hotspot in Fireworks. Optimize files in Fireworks. Export GIFs and JPEGs directly from FreeHand. Export a file from FreeHand directly to HTML.