Adobe Fireworks CS3 Tutorials
Hotspots/Slices/Behaviors / Creating Image Maps
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Fireworks CS3 / Hotspots/Slices/Behaviors / Creating Image Maps)
After you've inserted several hot spots on top of a desired graphic, as I've done here on this Brazil On-line graphic that goes on my home page, notice I have a series of circular hot spots, notice also, that each of them is linked to an HTML file by typing in the URL here in the link text field in the Properties Inspector. Now, once you add all your hot spots you'll need to export the graphic as an image map so it will function in a Web browser. Exporting an image map generates the graphics and the HTML containing map information for hot spots and the corresponding URL links that I've added down here in the link field. I should point out that Fireworks produces only client-side image maps when exporting. As an alternative to exporting, you can also copy your image map to the clipboard and then paste it into your favorite HTML editor, like Dreamweaver, or Front Page. To export an image map or copy to the clipboard, first you'll want to optimize the graphic to prepare it for export so it will look as good as possible, but also be small and compact. I'll be covering this optimization process in much more detail later. Once your images are optimized, choose from the Main menu, File, Export. That'll bring up the all-important export dialog. Now if you're exporting your file as an image as opposed to copying it to the clipboard, it's very important that you navigate to the folder where you want to place the HTML file and then also, give a good name to the file. I don't like to use capitals in my names, because I forget them, so I'm going to change that to b-o-l in lower case. Browse to the location of your file structure, or folder, for your Web site. You can also save the graphics in an appropriate folder from the site here. Notice that what I like to do is I like to create an Images folder and save all my images in there. Let's go ahead and do that here on my Pages folder. Let's call this "images" with a lower-case I. Let me go back up, and this first file name here is where the HTML file will go, so it's very important that you put this in the right location so that the links to all those other HTML pages will work. Let's call this "map dot HTM." Here in the export category is where you choose whether you want to export HTML and Images, or Images Only, or Dreamweaver Library, or CSS Layers, or Director, or Layers to Files. In this case, you'll want to choose HTML and Images, because remember the image map information will be contained in the HTML file. The graphic information will be contained in the Images. Here in the HTML category is where you'd choose whether you want to export an HTML file or copy to the clipboard. The Copy to Clipboard option copies all the required HTML including a table, if the document is sliced, to the clipboard so that you can later paste it into Dreamweaver, or another HTML editor. The other option, Export to HTML File, generates the required HTML file and corresponding graphics files, which you can later import into Dreamweaver, or another HTML editor as well. You can also open the file in Dreamweaver and edit it or add to it from there. In the Slices option, you'll probably want to export all your slices. The other options are None, and then Fireworks warns you, slice objects will be ignored. To get sliced output and behaviors, choose Export, Slices. And that's almost always what I choose here, but you can also slice along guides. Next you have your option for including areas without slices, in this case I have some areas that are not sliced up that I definitely want to include in my file all the areas outside of these light green rectangles. I can also choose to put images in a subfolder. I almost always do this. That's why I created this images subfolder there. Notice that it, by default, places it in an images subfolder. If you don't choose this option, Fireworks will generate quite a number of graphics files and then it really gets in the way of the single map HTML file that I've created up here, and it makes it harder to work with your HTML files. So I like to be more neat and tidy and put all my images in a subfolder called images. Also you want to probably choose the Current Page Only, if you're working with multiple pages. Now, once you've decided on all your options, I usually require my students to double-check several things. One, again, the location of where this file is going, and two, the file name and file type. So once you double-check that everything is okay, click Save to close the Export dialog box. What will happen is that Fireworks will then go ahead and export the HTML file, generate that code, and also slice up your graphic into multiple images and place those in your images subfolder if you've chosen that option. Now, when you're exporting files, Fireworks can use HTML comments to clearly label the beginning and end of code for image maps and other Web features created in Fireworks. By default, HTML comments are not included in the code. To include them, you'll want to select the Include HTML Comments, on the General tab of the HTML setup dialog box. You'll find that in the Export dialog box, right here. Adjacent to HTML there's an Options button. Click on that. Notice that you have a variety of tabs there. In the General tab, make sure you put a checkmark next to Include HTML Comments, but also choose to have lower case file names, which is a very good idea. Use CSS for pop-up menus, which I'll cover later, and Write CSS to an external file, if you choose. So there you have a pretty straightforward procedure for using hot spots to create image maps in Fireworks. Let me now move on to the next movie and demonstrate how to create rollovers with hot spots.
Tutorial Information
| Course: | Adobe Fireworks CS3 |
| Author: | James Gonzalez |
| SKU: | 33836 |
| ISBN: | 1-934743-42-9 |
| Release Date: | 2008-01-25 |
| Duration: | 8.5 hrs / 93 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
