ADDING IMAGES


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:

  • Drag the image file from the Site window onto the Layout Editor.

  • Drag the Image object from the Basic Objects palette onto the Layout Editor, as shown in Figure 36.1, or double-click the Image object. Use the Inspector palette to link to the image file in the Source field of the Inspector palette.

    Figure 36.1. Adding images to your pages.


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:

  • Choose Top to align text vertically with the top of the image. The alignment is based on the height of the tallest character in the font. In most browsers TextTop works exactly the same way as Top, though GoLive does not preview TextTop correctly. See Figure 36.6.

    Figure 36.6. Top and TextTop alignment attributes shown in Internet Explorer.


  • Most of the newer browser versions treat Middle and AbsMiddle the same way, aligning the vertical center of the text with the vertical center of the image. Older versions of the browsers, however, aligned the baseline of the text with the middle of the image when Middle was selected. Use AbsMiddle to cover your bases. See Figure 36.7.

    Figure 36.7. Middle and AbsMiddle alignment attributes shown on images inserted within paragraphs of text and previewed in Internet Explorer.


  • Bottom and Baseline align the bottom of an image with the baseline of the text (the descenders in the text hang below the bottom of the image). AbsBottom takes the descenders into account and aligns the bottom of the image with the bottom of the descenders in the text. Keep in mind that if you use all capital letters with AbsBottom, the text appears higher than the bottom of the image to allow for descender depth. See Figure 36.8.

    Figure 36.8. Bottom and AbsBottom alignment attributes.


  • Use the Left and Right alignment options when you want text to wrap around the image, as shown in Figure 36.9. Control the amount (in pixels) of space around the image using the HSpace and VSpace fields in the More tab of the Image Inspector, as shown in Figure 36.10.

    Figure 36.9. Left and Right alignment attributes.


    Figure 36.10. Set the amount of space to offset the text runaround.


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:

1.

Import an image that you want to use on your web page.

2.

With the image selected, click the Generate button in the More tab of the Image Inspector, as shown in Figure 36.14 to automatically create a low-res black-and-white GIF of your image in the same location as the original image.

Figure 36.14. Generate a LowSrc image.


3.

Click the Auto-update check box to update the LowSrc file automatically when the original is modified.

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:

1.

Import an image that you want to use with an image map.

2.

Click the Use Map check box in the More tab of the Image Inspector, as shown in Figure 36.15.

Figure 36.15. The Image Map option in the Inspector palette.


3.

Assign a name for the image map by typing it into the Name field or use the name that GoLive suggests. From the pop-up menu to the right of the Name field choose Name if you are going to assign a JavaScript action to the hotspots, ID if you are only going to use the hotspots as hypertext links, or Name and ID if you think you'll be using boththe latter is usually the best choice.

4.

Use the tools in the main toolbar to draw shapes for the hotspots of your image. Choose from the Rectangle, Ellipse, or Polygonal Map-area tools, as shown in Figure 36.16. Click and drag with the Rectangle and Ellipse tools. Point and click with the Polygonal tool to set the anchor points of your polygon. Use the Select Map-area Tool to move and adjust the mapped areas.

Figure 36.16. Creating image maps with the Image Map tools.


5.

Click the Display URLs button in the main toolbar to display the URLs inside the mapped areas, as shown in Figure 36.17. Use the three buttons to the right of the URL button to further indicate how you want to view the mapped areas in GoLive.

Figure 36.17. URLs can be displayed in the mapped regions.


6.

Use the Inspector palette to create the links for your mapped areas. You can also assign separate Alt text for each mapped area.

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.





Special Edition Using Adobe Creative Suite 2
Special Edition Using Adobe Creative Suite 2
ISBN: 0789733676
EAN: 2147483647
Year: 2005
Pages: 426
Authors: Michael Smick

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net