Home arrow Web Authoring arrow Using Adobe GoLive CS, Part 3

Using Adobe GoLive CS, Part 3

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.)

Author Info:
By: Sams Publishing
Rating: 5 stars5 stars5 stars5 stars5 stars / 32
November 16, 2004
  1. · Using Adobe GoLive CS, Part 3
  2. · Rollovers
  3. · More on rollovers
  4. · Even More on Rollovers
  5. · Photoshop Integration
  6. · ImageReady and Illustrator Integration
  7. · InDesign Integration
  8. · Using Images from the InDesign Package
  9. · Using Cascading Style Sheets
  10. · Creating an Element Style
  11. · Creating a Class Style
  12. · External CSS
  13. · Link Warnings
  14. · Publishing the Site
  15. · Begin Creating

print this article

Using Adobe GoLive CS, Part 3
(Page 1 of 15 )

Using Adobe GoLive CSWorking 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.

blog comments powered by Disqus

- Top WordPress Plugins for Social Media
- How to Install WordPress on WAMPP
- More of the Best Wordpress Plugins for Comme...
- Top Wordpress Plugins to Fight Spam
- More of the top Drupal modules for SEO
- Top Drupal Modules for SEO
- More Top Wordpress Plugins for SEO
- Website Optimization Tips
- Backup and Restore a Drupal Website and Data...
- 5 Best Web Font Services
- Web Font Embedding Services
- Joomla Site Administration
- Create PHP Pages that Use WordPress Templates
- Top Joomla Extensions for Social Networking
- Drupal Modules for Site Navigation

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials