Macromedia fireworks MX bible phần 8 pps

675 Chapter 20 ✦ Mastering Image Maps and Slices and ends with <! STOP COPYING THE HTML HERE > 4. Choose Edit ➪ Copy. 5. Open the document in which the sliced image is to be inserted. 6. While still in HTML View, choose Edit ➪ Paste to insert the code into the document. Exporting single slices Sometimes I find myself wanting to quickly export a small area of the Fireworks canvas as a single image file. Rather than copying a section of the overall image and placing it into a new document and then exporting that, a quick way to define the area for an exported image file is to place a slice object on top of it, and then export that single slice. You can even separately optimize that single slice before export. To export a single slice, follow these steps: 1. Select the slice that you want to export. 2. Choose Window ➪ Optimize to view the Optimize panel if it is not already visible. 3. Specify export settings in the Optimize panel. These settings affect only the selected slice. 4. Choose File ➪ Export. The Export dialog box appears. 5. Navigate to a folder to export your slice into, and specify a filename. 6. Choose Images Only from the Save as type (Save As) option list. 7. Choose Export Slices from the Slices option list. 8. Check the Selected Slices Only checkbox. 9. Click Save when you’re done. Your selected slice is exported as an individual image file. You can skip the Export preview dialog box completely if you right click (Ctrl+click on a Mac) and choose Export Selected Slice from the contextual menu. Tip 263662-1 ch20.F 8/2/02 2:57 PM Page 675 676 Part V ✦ Entering the Web Fireworks Technique: Exporting Dreamweaver Library Items Library items are a powerful Dreamweaver feature that enable a section of a Web page to be updated once, after which Dreamweaver automatically updates all pages on which the section appears. Originally intended to replace page elements that are often repeated, such as a copyright line or logo, Dreamweaver Library items also enable you to regard a section of code as a single, easy-to-manage unit. If, as a designer, you’re familiar with Encapsulated PostScript, think of Dreamweaver Libraries as Encapsulated HTML. For a Library item to be recognized as such, it must be stored in a special folder for each local site. When you choose the Dreamweaver Library (.lbi) option from the Save as type (Save As) option list in the Export dialog box, Fireworks prompts you to locate your site’s Library folder. If you’ve never created a Library item for the current site before, you need to make a new folder. You must place the folder in the local site root and name it, appropriately enough, Library. For example, if your local site root is located in a folder called Web Pages, you must create the Library folder at Web Pages/Library. Most Web sites use a lowercase-only naming convention. You can name your Library folder “library” if that suits you, and Dreamweaver will use it without complaint. The Dreamweaver Library (.lbi) export option exports your image map or slices within the same table as the Dreamweaver HTML style template, but it also marks the table as a Dreamweaver Library item that can be inserted over and over again. You can export using the Dreamweaver Library (.lbi) option at any time, no matter what your HTML style setting in the HTML Setup dialog box. To export HTML and images from Fireworks as a Dreamweaver Library item, follow these steps: 1. Choose File ➪ Export. Fireworks displays the Export dialog box. 2. Navigate to your Dreamweaver site root folder, and then into the site’s Library subfolder. If your site does not yet have a Library folder, create one and then navigate into it. 3. Specify a filename for your library item, if necessary. 4. Select Dreamweaver Library (.lbi) from the Save as type (Save As) option list. If you have not previously navigated to a Library folder, Fireworks warns you at this point that a Library folder is required. Then, Fireworks asks you to choose one. Navigating to the Library folder before selecting the Dreamweaver Library (.lbi) option avoids this warning — as you did in Step 2, earlier— enabling you to choose Note Tip 263662-1 ch20.F 8/2/02 2:57 PM Page 676 677 Chapter 20 ✦ Mastering Image Maps and Slices the Library folder in a larger dialog box, and having Fireworks return to that folder the next time you export from the same document. 5. Check the Put Images in Subfolder checkbox, and click Browse to choose your site’s images folder. 6. Click Save when you’re done. Now that you’ve exported your Library item from Fireworks, follow these steps to incorporate the Library item into your work in Dreamweaver: 1. In Dreamweaver, choose Window ➪ Assets, or use the keyboard shortcut, F11, to display the Assets panel. The current site’s Assets panel appears. Mac OS 9 users: If you have mapped the keyboard’s function keys in the Keyboard Control Panel to start programs or perform other tasks, function key shortcuts in Fireworks are superceded by those mappings. Use the menu commands instead, or disable the mappings in the Keyboard Control Panel. 2. Select the Library category of the Assets panel, as shown in Figure 20-19. Figure 20-19: After you export an image map from Fireworks as a Dreamweaver Library item, it is available from the Library category of Dreamweaver’s Assets panel. Caution 263662-1 ch20.F 8/2/02 2:57 PM Page 677 678 Part V ✦ Entering the Web 3. Place your cursor in the document window where you want the image map to appear. 4. In the Assets panel, select your exported image map from the list window. The preview pane of the Assets panel displays the selected Library item. 5. Click the Insert button or, alternatively, drag the item from either the preview pane or the list window and drop it in the document window. The image map and all the necessary code are inserted into the Dreamweaver page. If you ever need to edit the image map, select it and then click Open from Dreamweaver’s Property inspector. A document window appears with the Library item in it. From there, you can choose the image and select either Edit from the Property inspector, or Optimize Image in Fireworks from the Commands menu. After you edit the image, closing the Library document window prompts Dreamweaver to ask whether you would like to update the Library. Click Yes to update the Library items; click No to postpone the update. Fireworks Technique: Animating a Slice Fireworks can build terrific animations — and with just a little technique, you can integrate any animation into a larger image through slices. Animations can be fairly heavy in terms of file size. If only a small section of an overall image is moving — such as a radar screen on a control panel — converting the entire image to an ani- mation is prohibitive, due to the file size that would result. However, with slices, you can animate just the area that you need to animate, and keep the rest of the image static, thus dropping the size of the file dramatically. To include an animation in Fireworks, follow these steps: 1. Build your animation in Fireworks as you would normally. Explore Fireworks’ animation features in Part VI. 2. If the animation is not already part of a larger image, go to Frame 1 in the Frame panel, choose Modify ➪ Canvas ➪ Canvas Size, and enlarge the canvas as desired. Cross- Reference 263662-1 ch20.F 8/2/02 2:57 PM Page 678 679 Chapter 20 ✦ Mastering Image Maps and Slices 3. Complete the graphics surrounding the animation. 4. Make a slice object from the animation either by choosing the animation and selecting Edit ➪ Insert ➪ Slice, or by using the Slice tool to draw a rectangle around the entire animation. 5. If it’s not already visible, display the Property inspector. 6. In the Property inspector, set the link and any other desired options. 7. If it’s not already visible, display the Optimize panel. 8. From the Export File Format option list, choose Animated GIF. 9. Specify other image optimization options as necessary. Chapter 15 details Fireworks’ image optimization options. 10. Repeat Steps 4–9 for the static slices in your document, but choose formats other than animated GIF in the Optimize panel. Alternatively, deselect all slices and set an overall document export format in the Optimize panel. This format is used for any slices that are not explicitly set to another format. 11. When your document is ready for export, choose File ➪ Export. The Export dialog box opens. 12. Set your path and filename in the upper portion of the dialog box. 13. Choose HTML and Images from the Save as type (Save As) option list. 14. Choose whether to export an HTML file, or copy the code to the clipboard from the HTML option list. 15. Select Export Slices from the Slices option list. 16. To modify HTML Setup options, click the Options button to display the HTML Setup dialog box. 17. Click Save when you’re ready to complete the export. Your animation is exported as part of the overall image, as shown in the example in Figure 20-20. Cross- Reference 263662-1 ch20.F 8/2/02 2:57 PM Page 679 680 Part V ✦ Entering the Web Figure 20-20: In this image, the radar screen is animated, and the rest of the graphic is static. Summary Fireworks Web objects — hotspots and slices — provide a gateway from graphic imagery to the Internet. By integrating Web objects with other graphic elements, the Web designer can seamlessly migrate from one medium to another, all the while maintaining editability. When working with Web objects, keep these points in mind: ✦ Fireworks supports two types of Web objects: hotspots and slices. A hotspot marks part of a larger graphic through code, whereas slices actually divide the larger image into smaller files. ✦ Hotspots come in three basic shapes: rectangle, circle, and polygon. Fireworks has a different tool for each type of hotspot. The term hotspot denotes an area of the overall image, called an image map. ✦ You can easily convert any Fireworks object into a hotspot by selecting the image and choosing Edit ➪ Insert ➪ Hotspot. ✦ When exporting image maps, be sure to work with both parts of the code: the <img> tag containing the link to the source image, and the <map> tag that con- tains the hotspot data. 263662-1 ch20.F 8/2/02 2:57 PM Page 680 681 Chapter 20 ✦ Mastering Image Maps and Slices ✦ Fireworks makes slices in three ways: with the Rectangle or Polygon Slice tool, with the Edit ➪ Insert ➪ Slice command, and with the standard guides. ✦ Enabling the View ➪ Slice Guides option enables you to reduce the number of slices to a minimum. ✦ Holding Shift while dragging a slice causes Fireworks to pick up any slice guides you cross, easily cleaning up files with too many slices. ✦ You can export individual slices as different image types, even as animated GIFs, enabling you to mix animated and static slices. In the next chapter, you learn how to assign Behaviors for interactive effects. ✦✦✦ 263662-1 ch20.F 8/2/02 2:57 PM Page 681 263662-1 ch20.F 8/2/02 2:57 PM Page 682 Activating Fireworks with Behaviors F rom a user’s perspective, the Web includes two types of images: graphics that you look at and graphics that you interact with. You can create the “look, but don’t touch” vari- ety of graphics with most any graphics program — Fireworks is among the few graphics programs that can output interac- tive graphics. Although the result may be a complex combination of images and code, Fireworks uses Behaviors to simplify the process. With Fireworks Behaviors, you can create everything from simple rollovers — exchanging one image for another — to more complicated interactions, in which selecting a hotspot in one area may trigger a rollover in another, while simultane- ously displaying a message in the status bar. And you can do it all in Fireworks without writing a line of code. This chapter covers all the intricacies of using Behaviors and demonstrates some techniques that combine several Behaviors. You may never use each and every one of the Fireworks Behaviors, but after you start to use them, your Web pages will never be the same. Understanding Behaviors Before Fireworks, making your Web pages responsive to Web page visitors required in-depth programming skills or a Web- authoring program (such as Macromedia’s Dreamweaver) that automated the process for you. The basic Web page, scripted in HTML, is fairly static; only forms enable any degree of user interaction. To activate your page, you have to use a more 21 21 CHAPTER ✦✦✦✦ In This Chapter Using Behaviors Creating rollover buttons Exporting rollovers for the Web Working with the Button Editor Making disjointed rollovers Creating external rollovers Using pop-up menus Incorporating rollovers in slices ✦✦✦✦ 273662-1 ch21.F 8/2/02 2:57 PM Page 683 684 Part V ✦ Entering the Web advanced language. Because of its integration into both major browsers, JavaScript is the language of choice for this task for most Web programmers. Although JavaScript is not as difficult to use as, say, C++, the majority of Web designers don’t have the time or the inclination to master it. Because Fireworks permits Behaviors to be inte- grated into graphics, Web designers don’t have to master a programming language. A Behavior consists of two parts: an event and an action. An event is a trigger that starts an action — the way pushing Play on a VCR starts a videotape. Events on the Web are either user driven, such as moving a pointer over an image; or automatic, such as when a page finishes loading. Generally speaking, actions range from dis- playing a message to launching a whole new browser window. Behaviors are said to be “attached” to a specific element on the Web page, such as a text or image link; Behaviors in Fireworks are always attached to slices or hotspots. Several other products in the Macromedia family, including Dreamweaver and Director, use Behaviors in much the same way as Fireworks. In one sense, you can think of Behaviors as Encapsulated JavaScript. As a designer, you need only make a few key decisions, such as which two images to swap, and Fireworks handles the rest. Then, the code is written for you, in the HTML style of your choice. With Fireworks, you can output code that’s tweaked for various Web- authoring programs, including Dreamweaver. Before you can export your images and associated Behavior code, however, you must assign the Behavior through the Behaviors panel. Using the Behaviors Panel The Behaviors panel is used to add and remove Behaviors. Although each Behavior has its own dialog box for selecting options and entering parameters, the Behaviors panel lists basic information for every Behavior assigned. You can assign multiple Behaviors — either the same Behavior or different ones — to any slice or hotspot; the number of Behaviors that you can attach to a single Web object has no practical limit. Fireworks includes five main groups of Behaviors: ✦ Simple Rollover: Automatically swaps the image on Frame 1 with the image from Frame 2 when the user’s mouse cursor rolls over the image. ✦ Swap Image (Swap Image Restore): Displays one image in place of another. The swapped image can be located on a different frame, in a different slice, or both. An external image can also be exchanged for the current or any other slice in the document. The Swap Image Restore Behavior is automatically applied to restore the swap to its original state. ✦ Set Nav Bar Image (Nav Bar Over, Nav Bar Down, Nav Bar Restore): This group of Behaviors specifies in which state of a navigation bar the selected slice should be. 273662-1 ch21.F 8/2/02 2:57 PM Page 684 [...]... click the Behaviors panel’s tab to bring it forward 685 273662-1 ch21.F 686 8/ 2/02 2:57 PM Page 686 Part V ✦ Entering the Web Note If you have anything other than a Web object selected, Fireworks alerts you to this fact and gives you the option to create a Web object from the selected object If nothing is selected when you try to add a Behavior, Fireworks asks you to choose a hotspot or slice first... After the rollover effect is applied, the effect is as if the code was the following code: 687 273662-1 ch21.F 688 8/ 2/02 2:57 PM Page 688 Part V ✦ Entering the Web As this code shows, the height, width, and alt text for the image don’t change, nor does the link that the hyperlink is pointing to (in this example,... Explorer 4, and above New Feature XHTML support is new to Fireworks MX Macromedia has continually improved the HTML editor compatibility of Fireworks exported JavaScript In the first version of Fireworks, only one type of rollover code was generated; it worked in browsers, sure, but you had to edit it by hand if you opened it in a visual editor As Fireworks matured, the capability to pick the style of... 273662-1 ch21.F 8/ 2/02 2:57 PM Page 689 Chapter 21 ✦ Activating Fireworks with Behaviors Creating rollover images The first step in building a rollover is to create the separate rollover images that reside on the separate frames of a Fireworks document I use either of two basic techniques to create images, depending upon whether the rollovers are to be independently used, each in their own unique Fireworks. .. editing the code in GoLive easier 273662-1 ch21.F 8/ 2/02 2:57 PM Page 693 Chapter 21 ✦ Activating Fireworks with Behaviors You can also tell Fireworks to export XHTML, if that’s what you’ll be using in your site The XHTML styles included with Fireworks are: ✦ Dreamweaver XHTML: Code styled for Dreamweaver Dreamweaver-style rollover code generated by Fireworks appears as native Dreamweaver Behaviors... are easy to create in Fireworks, and easy for the Web user to navigate when viewed in the browser New Feature Pop-up menus in Fireworks MX are almost an entirely new creation They’re feature-packed, and positioning problems are a thing of the past The Content tab of the Pop-up Menu Editor To add pop-up menus to your Fireworks document, follow these steps: 707 273662-1 ch21.F 8/ 2/02 2:57 PM Page 709... inserted into your Dreamweaver page 697 273662-1 ch21.F 6 98 8/2/02 2:57 PM Page 6 98 Part V ✦ Entering the Web Looking at Nav Bar Behavior A Nav Bar is a way to turn a series of rollover buttons into a set of radio buttons Each button is linked to the others, so that clicking one button and setting it to a Down state sets the other buttons to an Up state Fireworks creates Nav Bars by using JavaScript cookies... PM Page 700 Part V ✦ Entering the Web To create a rollover button with the Button Editor, follow these steps: 1 Choose Insert ➪ New Button Fireworks displays the Button Editor (see Figure 21 -8) Figure 21 -8: The Button Editor can display four button states — four Fireworks frames — plus a slice object on its five tabbed canvases 2 Create the Up state of your button in the initial Up tab of the Button... would any Library item 695 273662-1 ch21.F 696 8/ 2/02 2:57 PM Page 696 Part V ✦ Entering the Web For Dreamweaver, FrontPage, Generic, and GoLive styles of code, follow these steps to insert Fireworks code into your Web page: 1 Open the Fireworks- generated source HTML file in a text or HTML editor Tip If you are using Dreamweaver, I recommend that you use the Fireworks HTML object, located on the Common... because the cursor of the user’s mouse is over the image In Fireworks, the easiest and most typical method of creating the different states for a rollover is with frames A basic rollover uses just two states (and, thus, two Fireworks frames): Up and Over Rollovers, though, can have up to four states, in which case they would be built across four Fireworks frames Table 21-1 details the rollover states and . assign Behaviors for interactive effects. ✦✦✦ 263662-1 ch20.F 8/ 2/02 2:57 PM Page 681 263662-1 ch20.F 8/ 2/02 2:57 PM Page 682 Activating Fireworks with Behaviors F rom a user’s perspective, the. when the user’s mouse cursor hovers over it. Caution 273662-1 ch21.F 8/ 2/02 2:57 PM Page 688 689 Chapter 21 ✦ Activating Fireworks with Behaviors Creating rollover images The first step in building. above. XHTML support is new to Fireworks MX. Macromedia has continually improved the HTML editor compatibility of Fireworks exported JavaScript. In the first version of Fireworks, only one type of