GoLive enables you to add images to your pages in two primary ways. You can add images that have already been optimized and formatted, like GIFs, JPEGs, PNGs, and WBMPs. You can also add images as Smart Objects, where you perform the optimization options in GoLive when you import the image. If you're using the Adobe Creative Suite of applications, Smart Objects make it easy to integrate your Photoshop, Illustrator, and InDesign work. To insert an image on your web page, use one of the following methods:
If you have the Site window visible somewhere on your screen, even if most of it is hidden by your document window, use the Fetch URL (point-and-shoot) button to link to your file. All you have to do is drag it onto any visible part of the Site window and the Site window comes to the foreground enabling you to select an image, as shown in Figure 36.2.
Figure 36.2. Point and shoot with the Fetch URL button.
Setting Image Attributes
Use the Image Inspector to set all the attributes available for images. You can scale images by dragging one of the three handles that appear on the right, bottom, and bottom-right corners. Hold down the Shift key while scaling to constrain the image proportions. You notice a scaling icon in the lower-right corner of images that have been resized, as shown in Figure 36.3. If you want to return an image to its original size, click the Set to Original Size button in the Image Inspector, as shown in Figure 36.4.
Figure 36.3. The scaling icon in the lower-right corner of the image indicates that an image has been resized.
Figure 36.4. Set a resized image back to its original dimensions.
When enlarging or reducing the size of imported images, keep in mind that the image is probably optimized to be used at its 100% size. If you scale an image by only a small amount, you shouldn't have to worry about image quality. However, if you scale an image up, it's likely that the image quality will suffer. If you find yourself scaling images down significantly, you end up with images on your website that take longer to download than they have to. In either case, you should edit the images and resize them in an image editing program like Photoshop or ImageReady.
Setting Image Alignment Options
The alignment options for images determines how the image interacts with the rest of the content surrounding it. In the Image Inspector there is an Align pop-up menu that contains all the HTML alignment attributes, as shown in Figure 36.5:
Figure 36.5. Image alignment options in the Image Inspector.
When you add space around your left-aligned and right-aligned images using the HSpace and VSpace attributes, the extra space is added to all sides of the image. The problem with this is that images that are left-aligned appear to be inset from the left side of the web page as well. You can easily solve this problem by adding a border in the same color as your background around the images before importing them. Just add a border to the top, right, and bottom sides for a left-aligned image. If you're willing to convert your images to GIF format, you can add a transparent border to the right, bottom, and top of your left-aligned images.
Adding Borders to Images and Setting Alt Text
You can add a border around your image by entering a value in the Border field of the More tab in the Image Inspector. By default, the Border value is set to zero because borders automatically appear around images that contain links, unless, of course, the border is set to zero. Type some text in the Alt Text field of the Image Inspector, as shown in Figure 36.11. The Alt (alternative) text appears in the place of the image when the web page is loading or if browsers have images turned off, and the text is read aloud by web pagereading software for the visually impaired. It's good form to include Alt text for all your images, as shown in Figure 36.12, even if the text simply says what the image is. In some Windows browsers, the Alt text is displayed like a ToolTip when the cursor hovers over an image that contains Alt text.
Figure 36.11. Include Alt Text for your images by typing it in the Image Inspector.
Figure 36.12. Alt text displays in the place of missing images.
Creating a LowSrc Image
LowSrc images are typically black-and-white images that are much smaller in file size than their color counterparts. The LowSrc attribute loads the lower resolution, black-and-white image first, so the user has something to look at white the larger color image is downloading on a slow connection, as shown in Figure 36.13. GoLive enables you to create LowSrc images on the fly and will even automatically regenerate the LowSrc image if you make changes to the original.
Figure 36.13. LowSrc images load first, followed by the full-color images.
The border color is controlled by the text color. If you want to change the color of a border around an image, select the image by clicking and dragging from the left of the image to the right of the image, in the same way you would select text. Choose a color from the Color palette.
To create a LowSrc image:
Creating an Image Map
Image maps are useful when you have an image that contains different areas that you want to link to different places. Using GoLive's image mapping tools, you can define hot zones on an image and create links for each of these zones:
You can overlap mapped areas in an image map, but only the top area of overlapping areas is active. Use the Bring Map Area to Front and Send Map Area to Back buttons in the main toolbar to adjust overlapping areas.