One of the most important features of Web graphics is the ability to link to other pages using Image Maps.

Transcription

1 LESSON 6: IMAGE MAPS AND SLICING OBJECTIVES By the end of this lesson you will be able to: create and edit links copy graphics to URL objects make URL link choices understand Slicing export different aspects of a single graphic as different file formats CONTEXT Web pages are often composed of many different types of graphics, JPEGs, animated GIFs, simple line art, etc. Heavily graphic intensive pages can be cumbersome to produce. Often a Web designer would need to create different types of images in one program, export them, strip out unnecessary color information in another program and then reassemble the graphics in an HTML table. It was difficult to predict what the final product would look like and the various processes could be time-consuming and complicated. In Fireworks, many of the processes can be completed from within the program using the URL toolbar, which simplifies many tedious processes. This toolbar is the control center for designing the Web components of your graphics. One of the most important features of Web graphics is the ability to link to other pages using Image Maps. An image map is a graphic with URLs assigned to hotspot regions of the graphic. Clicking a hotspot in a Web browser opens the Web page to which the URL links. A well-designed image map can add significantly to a Web site s visual impact. Show/Hide URL URL Selection tool URL Rectangle tool Slice tool Figure 6-1 The URL toolbar Note: A URL, or Uniform Resource Locator, is an address of a file on the Internet. Although URLs commonly link to Web pages, they can also link to downloadable files, addresses, telnet sites, newsgroups, Internet chat rooms, or other Internet resources. 4 1

2 EXERCISES CREATING IMAGE MAPS Assigning a target URL A hotspot is an area of a graphic that is linked to a URL. When a hotspot is clicked, the Web browser jumps to the Web page specified by the linked URL. In Fireworks, you define hotspots by creating URL objects. Use the URL toolbar to create and design URL hotspots within Fireworks images. URL hotspots reside on the URL overlay, a hidden layer at the top of each Fireworks document. The Layers panel does not display the URL overlay. In this part of the exercise, you are going to create two hotspots over a graphic that was designed to serve as the index page of an architecture firm, Arcanum Architecture. The first hotspot will link to a Web page that is stored locally and the second hotspot will generate a pre-addressed message. 1. Choose File > Open. Select imagemp.png. Click Open. 2. Click the Show/Hide URLs button on the URLs toolbar. 3. Choose the Rectangle URL drawing tool on the URLs toolbar. 4. Create a hotspot region by dragging a URLs Rectangle tool around the leftmost image in the document. Notice how it changes color when selected. 5. Choose New Link from the URLs toolbar Options pop-up (Figure 6-2). 6. Enter /drawing.html, a URL to which the hotspot will link in the Link field. 7. Enter Welcome to Arcanum in the Browser status bar message field on the Link Info dialog box. 8. Click OK. 9. The target field allows you to target a specific frame on a Web page. Note: Browser status bar messages and targets are optional Click OK in the Link Info dialog box. Figure 6-2 The URLs toolbar Options pop-up Figure 6-3 The Link Info dialog box 4 2

3 Adding More Hotspots 1. Now you will add an additional hotspot on the large text Arcanum Architecture. You will be using the Polygon URL tool to draw a more concise outline. 2. Choose the Polygon URL drawing tool on the URLs toolbar. 3. Create a hotspot region by clicking at each corner of the text, Arcanum and Architecture (Figure 6-4). 4. Choose New Link from the URLs toolbar Options pop-up. 5. Enter mailto:webmaster@macromedia.com in the Link to field. You are using a Macromedia address because Arcanum Architecture is a fictional firm. 6. Enter Get in touch in the Browser status bar message field (Figure 6-5). 7. Click the Overlay Color well and select a yellow color swatch to organize hotspots by color. Click OK. 8. To hide the URL overlay, click the S h o w / H i d e U R L s button on the URLs toolbar. Figure 6-4 Create a hotspot region by clicking at each corner of the text. Figure 6-5 Enter Get in touch in the Browser status bar message field of the Link Info dialog box. When the URL layer is visible, the URL Pointer tool only selects URL objects. Most other menu items are disabled. The URL overlay can be visually confusing. Most often, you will want to hide it when you are not actually creating or editing URLs. Testing Your Hotspots Now you are going to export your graphic so that you can test your hotspots. 1. Choose File > Export. 2. Choose JPEG from the File format option menu. 3. Click the Export button. 4. Save the file as imagemp in the Lesson 6 folder. Be sure to select the Generate HTML option. 5. Close the file, minimize Fireworks and navigate to the Lesson 6 folder. 6. Double-click on the imagemp.htm file to launch your browser and open the generated Web page. 7. As you move your mouse over your hotspots, you should notice that the cursor changes to indicate a hotspot. 8. Test your hotspots by clicking on them. 4 3

4 MAKING SLICE OBJECTS A common method of creating navigation bars or navigation graphics for Web sites is to create a graphic and then cut it into pieces that are then reassembled on a Web page using an HTML table. The graphic appears seamless in the Web browser but is actually made up of multiple pieces, each a separate file. Creating a navigation graphic this way has several advantages: In HTML, creating a link from an entire image is often easier than using an image map. If a section of the graphic is updated frequently, such as today s date or a current news item, a single piece may be replaced rather than the entire graphic. Parts of a graphic may be optimized individually, creating a better appearance, especially when the graphic contains a mix of photographic images and text. The cumulative file size of all the pieces can be smaller than the single, large graphic, because each piece may be optimized individually. In Fireworks, you can use the S l i c e tool on the URLs toolbar to draw rectangular slice objects. Slice objects define parts of the image that are exported as individual files. Fireworks automatically divides an image into multiple pieces based on where slice objects have been drawn. For example, if you have a JavaScript rollover in the middle of the canvas and you want to export it as a separate image, draw a slice object over it. Then, when you export the Slices, the JavaScript rollover and all its states will be exported as separate files defined by the slice object. Fireworks creates the smallest number of Slices possible by intelligently combining sections of the image that do not contain slice objects. To create Slice Objects: 1. Choose File > Open and select obfin.png. 2. Click the Slice tool in the URLs toolbar. 3. Using the Slice tool, draw a rectangle slice object over one of the buttons that you created in Lesson Make sure that your slice object does not overlap any of the other buttons and includes space for the rollover text as well. 5. Choose R o l l o v e r from the Slice Type pop-up menu. 6. Choose C u s t o m from the Slice Export Settings pop-up menu and click the Launch Export Preview button. 7. Choose J P E G from the Export file format pop-up menu. Click ok. 8. Repeat for the other three buttons. If you need to modify the slice settings, select the slice with the URL pointer tool and select Modify > Object Properties. UP, ROLLOVER, DOWN, AND ON CLICK STATES You may notice in the Object properties dialog box when you choose Rollover, the option to indicate frame three as the down state and frame four as the on click state. The options are available if you would like your button to have a different graphic indicating the button has been pressed and a graphic indicating that the button is in the process of being pressed. As a review, remember that each button 4 4

5 state graphic resides in a single frame, the up graphic is in frame one, the rollover graphic is in frame two, the down graphic is in frame three and the on click graphic is frame four. The Down state of a JavaScript rollover depicts the rollover s state on the destination Web page. For example, the Down state is commonly used to show which button was clicked to view the current Web page. When a rollover is previewed in a browser, its Down state is not shown. To be able to preview all four states, use a slice object to define each rollover, choose File > Export Slices, and then check Create Demo Rollover HTML in the Export Slices dialog box. Fireworks exports a group of HTML files with the word demo appended to each file name. Using a browser, open the unnumbered demo file, and then click the rollovers to test all the states. Remember that you can optimize each slice object individually with different palettes, compression settings and export options. 1. Choose File > Export Slices (Figure 6-6). 2. In the Export Slices dialog box, name the file outback.htm and save it in the Lesson 6 folder (Figure 6-7). 3. Check Put Images in Subfolder and accept the suggested folder name Images to place the image files in a separate subfolder from the HTML file. 4. The HTML file that is generated creates links to the images in the subfolder. Be sure to place the images in an equivalent subfolder when putting your files on a server, or edit your HTML file to reflect the new location of the images on the server. 5. Click Save. 6. To test your sample HTML page, minimize Fireworks, open your lesson folder and double-click on the outback.htm file you have created. Figure 6-7 The Export Slices dialog box Figure 6-6 Choose Export Slices MORE EXERCISES TO SHARPEN YOUR SKILLS Using the Reptile Web graphic that you created for Lesson 2, create an image map, then do the same thing by slicing up your image. Test different export options for your photographic images so that you can choose the option that degrades your image the least. 4 5

6 NOTES: 4 6