Using Adobe GoLive CS, Part 3
(Page 1 of 15 )
The second article in our series covering Adobe GoLive we'll be working with images, CSS, and JavaScript. (This chapter comes from
Teach Yourself Adobe Creative Suite, by Mordy Golding, Sams, 2004, ISBN: 067232752X.)
Working with Images
Because you've got the Adobe Creative Suite in your hot little hands, you've got the most powerful set of tools on the planet to create images of any type. A picture is worth a thousand words, but when it comes to the Web, it had better not be worth a thousand kilobytes. Not to worry, the CS tools offer various ways to prepare images for the Web, and you can find these tools in Photoshop, ImageReady, and Illustrator. So go crazy and design like a maniac; but when you are done, compress those little beauties into an appropriate Web format. (And be sure to read the upcoming section "Integration Using Photoshop CS, ImageReady CS, Illustrator CS, or Acrobat PDF Files," which will make the process quick and painless!)
The three most common image types for the Web are GIF, PNG, and JPEG. In general, you will want to use GIF or PNG for graphic images, especially those containing just a few colors, such as logos, while reserving JPEG for photographs.
Methods for Placing Images
To put an image on a page, you can simply select the image from the Files list in your site window and drag it directly onto the page. Images can be dragged onto a page or into a table cell, a layout grid, or a layer.
Another method of putting an image on a page is to use the Image object, which acts as a placeholder until you link it to the desired image. To put an image placeholder on the page, either drag and drop the Image object from the Objects palette, double-click the Image object in the Objects palette, or (control-click) [right-click] and choose Insert Object, Basic, Image. After the Image placeholder is on the page, your next step is to link it up to the image file. You can do so by using the Fetch URL tool to point and shoot at the image file in your Files list, or by clicking the Browse button at the right end of the Source field in the Image Inspector, or by choosing a filename from the Recently Used pop-up list at the far-right end of the Source field.
Let's take a look at the Image Inspector. Place an image onto a page and select it. Notice that the Inspector palette now has four buttons across the top, called Basic, More, Link, and Color Profile:
Basic —The Basic area is where you reference the source file, set its size in width and height, choose an alignment, define the Alt text, and assign a name and an ID.
More —Go to the More area to assign a low-source image, which is a low-resolution version of an image that the browser displays while a higher- resolution version is loading. You can have GoLive automatically generate the low-source version of your image by clicking the Generate button in the Inspector. In the More tab you can also choose horizontal or vertical spacing around the image (HSpace and VSpace), select a border size, designate whether the image is to be used as an image map, or define whether the image is to be used as a submit button for a form.
Link —Select the Link area to create a hyperlink on the image and to set the link's target, title, name, and ID.
Color Profile —Use the Color Profile area to select a color profile for the image.
Tip - A great way to bring images into GoLive is by using the operating system's internal clipboard. You can copy an image, including screenshots, to your internal clipboard, and then switch over to a GoLive page and paste. GoLive fires up the Save for Web window, which will allow you to compress the image to an appropriate Web format and save it into your site.
Image Maps
Image mapping, once a tedious and frustrating process done by hand, is now as easy and fun as using a drawing program. Using the drawing tools in GoLive, you can create hotspots on your image. The hotspots can be square, round, or other shapes. Each hotspot you draw can then be assigned a link. In this way, you can have one image that links to many places.
Select an image, and then click the More button in the Image Inspector. Click the check box next to the words Use Map. Doing so enables the hotspot drawing tools in the Main toolbar. Select the Rectangular, Circular, or Polygonal Map-area tool. Click and drag to draw with the Rectangular or Circular Map-area tool; click multiple times to draw a shape with the Polygonal Map-area tool (see Figure 9.61).
Figure 9.61 This image contains a rectangular,
a circular, and a polygonal hotspot.
When you are done drawing hotspots, you can click the Select Map-area tool to move them around or resize them by dragging a corner point. Select each hotspot you have drawn, and create a hyperlink for it using any of the linking techniques we learned earlier in this chapter.
 This chapter is from Teach Yourself Adobe Creative Suite, by Mordy Golding (Sams, 2004, ISBN: 067232752X). Check it out at your favorite bookstore today.
Buy this book now. |
Next: Rollovers >>
More Web Authoring Articles
More By Sams Publishing
