ptg Chapter 6 Working with Web Page Images 155 Dreamweaver may give you some new and improved ways to edit an image; however, there's no substitute for the real thing. The two most powerful image-editing applications for raster-based (resolution dependent) images are Adobe Photoshop and Fireworks. You might recall an application that came bundled with Photoshop called ImageReady… well, that application is no longer part of the Adobe family, being replaced by Fireworks. While Adobe would prefer that you use one of these two applications to edit your images, they know full well that there are other fish in the sea, so they not only give you the ability to edit images in Photoshop or Fireworks, they give you the abil- ity to choose any application you want. Using an External Editor Edit an Image in an External Editor Open the Web page with the image you want to edit. Select the image you want to edit. Click the Modify menu, point to Image, point to Edit With, and then select one of the following options: ◆ Photoshop. Opens the selected image in Adobe Photoshop. ◆ Fireworks. Opens the selected image in Adobe Fireworks. ◆ Browse. Opens an Explorer (Win) or Finder (Mac) window and allows you to select the application to use. TIMESAVER Double-click the image you want to edit using the default external image editor. Make the changes to the image, based on the selected application. Click the File menu, and then click Save. Click the Close button in the editing program and return to Dreamweaver. The changes are permanently applied to the image in Dreamweaver, which cannot be undone. 6 5 4 3 2 1 1 3 2 From the Library of Wow! eBook ptg 156 Chapter 6 Setting File Types/ Editors Preferences Set File Type and Editor Preferences Click the Dreamweaver (Mac) or Edit (Win) menu, and then click Preferences. Click the File Types / Editors category. Select the file extension you want to set an external editor, or add new extensions. ◆ Add Extension. Click the Add (+) button above the Extensions list, type an extension, and then press Enter (Win) or Return (Mac). Select from the following options: ◆ Remove Editor. Select an editor, and then click the Delete (-) button above the Editors list. ◆ Add Editor. Click the Add (+) button above the Editors list, select the editor you want, and then click Open. To make the editor the primary editor for the selected files, click Make Primary. Click OK. 6 5 4 3 2 1 You can use the File Types/Editors section of the Preferences dialog box to choose the external image editor you want to use for specific file types. Setting specific external image editors for specific file types makes it quick and easy to edit images. All you need to do is double- click the image and the external image editor automatically opens. Any changes you make and save in an external image editor are displayed when you return to Dreamweaver. You can set different file types to open in different external editors, including Dreamweaver for script files. In addition, you can set Fireworks as your primary external editor for those extensions not specified. 5 4 6 3 2 From the Library of Wow! eBook ptg Chapter 6 Working with Web Page Images 157 Set Other File Type and Editor Preferences Click the Dreamweaver (Mac) or Edit (Win) menu, and then click Preferences. Click the File Types / Editors category. Click the Reload Modified Files list arrow, and then select the option you want: Always, Never, or Prompt. Click the Save On Launch list arrow, and then select the option you want: Always, Never, or Prompt. To set the primary external editor for file types not specified, click Browse next to the Fireworks box, select the Fireworks program, and then click Open. To open script related files in Code view in Dreamweaver, enter the file types (separated by a space) in the Open In Code View box. To open script related files in an external editor, click Browse next to the External Code Editor box, select the program you want, and then click Open. Click OK. 8 7 6 5 4 3 2 1 2 6 7 3 4 5 8 From the Library of Wow! eBook ptg 158 Chapter 6 Dreamweaver makes the insertion and creation of rollover images a snap. A rollover is an image that—when viewed in a browser— changes when the pointer moves across or hovers over it. You need two separate images to create the rollover: a primary (the image that displays when the page first loads) and a secondary (the image that appears when the pointer moves over the primary). Both images in a rollover should be the same size; if the images are not the same size, Dreamweaver resizes the secondary image to match the width and height properties of the primary image. In reality, rollover images are set to respond to a onMouseOver event; although you can change what event triggers the action (for example, a mouse click). Rollover images are used extensively in the creation of user-friendly navigation buttons. For example, you have a button that returns the user to the site's home page; when they roll over the image, it changes from a gray button with the word, HOME, in white, to a gray button with the word, HOME, in yellow. Creating Rollover Images Create a Rollover Image Open the Web page you want to insert a rollover image. Click to place the insertion point where you want to create a rollover image. Click the Insert menu, point to Image Objects, and then click Rollover Image. TIMESAVER Click the Image button arrow on the Common tab on the Insert bar, and then click Rollover Image. Select from the following options: ◆ Image Name. The name of the rollover image. This is the image's JavaScript call name. ◆ Original Image. The image you want to display when the page loads. Enter the path in the text box, or click Browse to select the image. 4 3 2 1 5 4 Customizing a Rollover Image The Image Name is used when creating specific JavaScript routines; for example, you could create a JavaScript routine to change the look of the button based on the time of day. If you are not planning on creat- ing a JavaScript routine, it's best to leave the name at its default value. For Your Information From the Library of Wow! eBook ptg Chapter 6 Working with Web Page Images 159 ◆ Rollover Image. The image you want to display when the pointer rolls over the original image. Enter the path or click Browse to select the image. ◆ Preload Rollover Image. Select to preload the images in the browser's cache so no delay occurs when the user rolls the pointer over the image (recommended). ◆ Alternate Text. Text to describe the image for viewers using a text-only browser, or for the visually impaired (optional). ◆ When Clicked Go to URL. The file that you want to open when a user clicks the rollover image. Enter the path or click Browse and select the file. Click OK to add the button to the active document. NOTE If you don't set a link for the image, Dreamweaver inserts a null link (#) in the HTML source code to which the rollover behavior is attached. If you remove the null link, the rollover image will not work. NOTE You cannot see the effect of a rollover image in Design view. To see the effect in a browser, click the File menu, point to Preview In Browser, and then select the browser you to use. 6 5 Rollover button Preview in browser Did You Know? You can create buttons on the Web. Check out www.cooltext.com to create buttons with your own text. The but- tons are free and you can download them in the .JPG format. From the Library of Wow! eBook ptg 160 Chapter 6 If you know you want to insert an image in a specific location, but the image is not created or ready yet, you can insert an image placeholder in its place. You can set the placeholder’s size and color, and even add a text label to it. When you insert an image placeholder, the place- holder box appears, displaying the color, size, and label you selected. After you insert an image placeholder, you can use the Properties panel to change specific image related properties, such as name, width, height, alternative text description, alignment, and color. When you’re ready to replace the image placeholder with an actual image, you can double-click the placeholder or use the Src box in the Properties panel to select the image. Inserting an Image Placeholder Insert an Image Placeholder Open the Web page you want to insert an image placeholder. Click to place the insertion point where you want to place the image. Click the Insert menu, point to Image Objects, and then click Image Placeholder. The Image Placeholder dialog box opens. Specify the image placeholder options you want: ◆ Name. Enter the text you want to appear as a label (optional). Leave blank if you don’t want a label. ◆ Width and Height. Enter the width and height (in pixels) to set the image size. ◆ Color. Click the Color box to select a color, or enter the hexadecimal value for the color. ◆ Alternate Text. Enter text to describe the image for viewers using a text-only browser or for the visually impaired who use speech synthesizers (optional). Click OK. 5 4 3 2 1 5 4 From the Library of Wow! eBook ptg Chapter 6 Working with Web Page Images 161 Set Image Placeholder Properties Open a Web page, and then select the image you want to modify. Click the Window menu, and then click Properties to display the Properties panel. Specify the image placeholder related options you want: ◆ Name. Enter the text you want to appear as a label (optional). Leave blank if you don’t want a label. ◆ W and H. Enter the width and height (in pixels) to set the image size. ◆ Src. Specify the source file for the image. Drag the Point To File button to a file in the Files panel or click the Browse For Files button to select a file. ◆ Link. Specify a hyperlink for the image placeholder. Drag the Point To File button to a file in the Files panel or click the Browse For Files button to select a file. ◆ Color. Click the Color box to select a color, or enter the hexadecimal value for the color. ◆ Alt. Enter text to describe the image for viewers using a text- only browser or for the visually impaired who use speech synthesizers (optional). ◆ Create. Click the Create button to start Fireworks to create a replacement image. The button is disabled if Fireworks is not installed on your computer. 3 2 1 1 2 Image placeholder Click to create an image in Fireworks. 3 From the Library of Wow! eBook ptg This page intentionally left blank From the Library of Wow! eBook . (resolution dependent) images are Adobe Photoshop and Fireworks. You might recall an application that came bundled with Photoshop called ImageReady… well, that application is no longer part of. new extensions. ◆ Add Extension. Click the Add (+) button above the Extensions list, type an extension, and then press Enter (Win) or Return (Mac). Select from the following options: ◆ Remove. event triggers the action (for example, a mouse click). Rollover images are used extensively in the creation of user-friendly navigation buttons. For example, you have a button that returns the