ptg 142 Chapter 6 If you have Adobe Fireworks installed on your computer, you can use the program to optimize an image in a Web page from within Dreamweaver. When you select an image, you can use the Optimize In Fireworks button in the Properties panel or the Fireworks command on the Image submenu on the Modify menu. Optimizing Images Using Fireworks Optimize an Image Using Fireworks Open a Web page with the image you want to optimize. Select the image you want. Click the Window menu, and then click Properties to display the Properties panel. Click the Optimize In Fireworks button in the Properties panel, or click the Modify menu, point to Image, point to Edit With, and then click Fireworks. Confirm whether to optimize as a PNG file or use the open image file. Edit the image file. Click Done. Click Update. Click the File menu, and then click Save. 9 8 7 6 5 4 3 2 1 9 3 2 4 7 6 From the Library of Wow! eBook ptg Chapter 6 Working with Web Page Images 143 Loading graphics onto a Web page has a good and a bad side. The good side is that images spice up an otherwise dull and drab Web site. The bad side is that images take up file space and increase download times. It's a catch-22 situation; your visitors expect lots of graphics and cool stuff and, at the same time, expect the page to load fast. The cur- rent rule on the Internet is called the 8-second rule (it used to be the 10-second rule). In other words if your page doesn't load within 8 sec- onds, many of your visitors will go elsewhere. One way to make a page load quicker is to specify low source images for your graphics. Low source images are copies of the original image, but severely com- pressed. For example, you have an image on your Web site of the Colorado Rocky Mountains and it's 150 k. You really want to use the image; however, you know on the average browser it takes 20 seconds to download the image. So, you open a copy of the photograph in an image-editing application like Adobe Photoshop or Fireworks, and you compress the copy to the max, and you save it. In Dreamweaver, you use the image for the low-source. When the page opens in the visitor's browser, the low source image quickly loads first, and then after the page opens, the higher-quality image loads over the other image. Using Low Source Images Use a Low Source Image Open the Web page that contains the image you want to apply the low source. Select the image. Click the Window menu, and then click Properties to display the Properties panel. Click in the Src box, and use one of the following options: ◆ Enter the name and path of the low source image. ◆ Click the Browse For File button, and locate the file in the Select Image Source dialog box. ◆ Click the Point To File button, and drag over to the Assets panel. Release the mouse when you're hovering over the low source image file name. 4 3 2 1 4 From the Library of Wow! eBook ptg 144 Chapter 6 Once an image is placed into a Web page, Dreamweaver gives you the ability to modify the document in two ways: temporary and permanent. For example, you can adjust the size of the image temporarily by adjust- ing the width and height statements in the Properties panel or by directly accessing the <img> tab. You can even select the image, and click and drag the image at a selection handle to change its relative size. Unfortunately, while the size of the file on the page might change, an image saved on the hard drive does not. This causes problems with the download of the image to the visitor's site, as well as displaying the image within the visitor's browser. The best way to modify an image is to plan out what you need ahead of time, and then place the image into the Web page. That's a nice plan; however, many times, designs change during the course of the creation process, and what worked for an image yesterday might not work today. With that in mind, Dream- weaver gives you the ability to modify the image whenever necessary. After you resize an image, you can reset the size or resample it to add and subtract pixels to match the appearance of the resized image. Modifying Images Resize an Image 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. Use any of the following resize methods: ◆ Width or Height. Drag a selection handle. ◆ Proportions. Shift-drag a corner selection handle. ◆ Specific Size. Click in the W and H boxes to change the size of the image width and height (in pixels). To re sample a resized image, click the Resample button in the Properties panel. To re turn a resize image to its original size, click the Reset Size button in the Properties panel or delete the values in the W and H boxes in the Properties panel. 5 4 3 2 1 1 2 Drag to resize 3 4 5 From the Library of Wow! eBook ptg Chapter 6 Working with Web Page Images 145 Modify an Image Using the Properties panel 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. Click in the Border box to add a border to the active image, as measured in pixels. Click in the V Space, and H Space boxes to offset your images by adding vertical or horizontal white space (in pixels). Click in the Image Name box to give the image a specific name. This is useful when calling the image using JavaScript. Click in the Alt box to give the image the alternate text used by reader applications for the visually impaired. NOTE In some browsers the Alt text is displayed in the empty box defined by the browser as the image loads. 6 5 4 3 2 1 1 2 5 4 3 6 Did You Know? You can edit image accessibility options. Edit the appropriate image attributes in Code view, edit the Alt box in the Properties panel, or right-click (Win) or control-click (Mac) the image, and then click Edit Tag. From the Library of Wow! eBook ptg 146 Chapter 6 When you place an image into a Dreamweaver document, the default placement of the image is to the left and middle of the container area, which is a blank Web page, a table cell, or layer. Not only is alignment performed on images isolated within a container; they're also aligned according to adjacent images, or text. Aligning Images Align an Image Using the Properties panel 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. Click the Align list arrow, and then select one of the following align options: ◆ Browser Default. No alignment attribute is included in the <img> tag. Most browsers use the baseline as the alignment default. ◆ Baseline. The bottom of the image is aligned with the baseline of the surrounding text. ◆ Top. The top of the image is aligned with the top of the tallest object in the current line. ◆ Middle. The middle of the image is aligned with the baseline of the current line. ◆ Bottom. The bottom of the image is aligned with the baseline of the surrounding text. ◆ Text Top. The top of the image is aligned with the tallest letter or object in the current line. ◆ Absolute Middle. The middle of the image is aligned with the middle of the tallest text or object in the current line. 3 2 1 1 2 3 From the Library of Wow! eBook ptg Chapter 6 Working with Web Page Images 147 ◆ Absolute Bottom. The bottom of the image is aligned with the descenders (as in y, g, p, and so forth) that fall below the current baseline. ◆ Left. The image is aligned to the left edge of the browser or table cell, and all text in the current line flows around the right side of the image. ◆ Right. The image is aligned to the right edge of the browser or table cell, and all text in the current line flows around the left side of the image. Image aligned to the right 3 From the Library of Wow! eBook . ptg 142 Chapter 6 If you have Adobe Fireworks installed on your computer, you can use the program to optimize an image in a Web page from within Dreamweaver. When you select an image,. select an image, you can use the Optimize In Fireworks button in the Properties panel or the Fireworks command on the Image submenu on the Modify menu. Optimizing Images Using Fireworks Optimize. catch-22 situation; your visitors expect lots of graphics and cool stuff and, at the same time, expect the page to load fast. The cur- rent rule on the Internet is called the 8-second rule (it