Home arrow Web Authoring arrow Page 2 - 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 - Rollovers
(Page 2 of 15 )

If you've ever visited a Web site and put your cursor over an image only to have it change color, you've likely encountered a rollover. A rollover is an image whose appearance changes as the user rolls her mouse over it. Combined with hyperlinks, rollovers give the user a clear visual clue as to which item she is about to click. Rollovers are created by using a different image for each state of the mouse. For example, you could assign a blue button image when the mouse is not on the button, and a yellow button image when the mouse is over the button.

GoLive CS includes a nifty feature called automatic rollover detection, and it is a real time-saver. Simply by naming your images in a particular way, you can enable GoLive to recognize them as rollovers and automatically write and implement the necessary JavaScript to make the rollovers function. To access settings that make this detection possible, open the Rollovers & Actions palette from the Window menu, and then choose Rollover Detection Settings from the palette's flyout menu (see Figure 9.62).

Figure 9.62 You can access the automatic Rollover Detection Settings from the Rollovers & Actions palette's flyout menu.

By default, three sets of naming conventions are already included in the list, but you can easily edit any of the defaults, or add your own set. How does it work? It's simple. If you place an image onto a page that is named house.jpg, and there is another image in your Files list called house_Over.jpg, GoLive automatically detects this pair and creates the JavaScript rollover. As you can see from the detection settings, you can have multiple states for an image, though Normal and Over are the most widely used (see Figure 9.63).

If you prefer, you can create rollovers manually in the Rollovers & Actions palette. Select an image on the page, and then choose a State in the list. Next, click the Create New Rollover Image button and link to the image you want to use for that state.

Figure 9.63 You can apply as many as six different states to a rollover automatically, simply by naming the images a certain way!

Integration Using Photoshop CS, ImageReady CS, Illustrator CS, or Acrobat PDF Files

One of the most compelling features (and definitely the coolest feature) of GoLive is its integration with the other applications in the Creative Suite. Through the use of Smart Object technology, it is possible to use your native Photoshop, ImageReady, Illustrator, and PDF documents in your Web pages. You read that correctly! GoLive accepts the native Photoshop, Illustrator, or PDF file and compresses it to an appropriate Web format. But the magic begins when the source file is edited, because those edits are automatically reflected in the Web-ready version of the image.

Take a native Photoshop ( .psd), Illustrator ( .ai), or Acrobat PDF document ( .pdf), and drag it into an open GoLive HTML page. GoLive immediately recognizes the .psd, .ai, or .pdf filename extension as a friendly file type, one to embrace and care for. GoLive's first step toward accommodating the source document is to bring up the Save for Web dialog box, which will allow you to determine an appropriate Web file format for the image, adjust compression settings, resize the image if necessary, and then save the resulting GIF, JPEG, or PNG file into your Web site (see Figure 9.64). During the Save process, GoLive helpfully assigns the Web-friendly version of the image a filename based on the source file.

Figure 9.64 The Save for Web dialog box is built right into GoLive CS, allowing you to easily prepare images for the Web.

The Save for Web dialog box offers a wide variety of views and tools:

  • Original tab—Shows the image in its original form.

  • Optimized tab—Shows the image after optimization has been applied.

  • 2-Up tab—Shows original and optimized versions next to each other. Click one to edit its settings.

  • 4-Up tab—Shows original and three variations of the optimized image. Click one to edit its settings.

  • Hand tool—Use to move the image in the window.

  • Slice Select tool—Use to select a slice when optimizing a sliced image from Photoshop, ImageReady, or Illustrator. Click the slice to edit its settings.

  • Zoom tool—Zooms in when you click on the image. Press the (Option) [Alt] key to zoom out.

  • Eyedropper tool—Click on the image with the Eyedropper to select a color.

  • Eyedropper color—Shows the currently selected color.

  • Toggle slices visibility—Makes the borders of slices visible or invisible.

  • Settings area—Choose the optimized file type, compression levels, transparency and dither types, and matte settings.

  • Preset pop-up menu—Shows a list of preconFigured compression settings. Choosing one alters settings in the Preset area.

  • Preset flyout menu—Save, edit, or delete settings from the list in the pop-up.

  • Color Table—Shows colors used when GIF or PNG-8 is selected as the file type.

  • Image Size—Adjust the image size, and then click Apply.

  • Cancel button—Closes the Save for Web window without applying the settings.

  • Save button—Closes the Save for Web window and opens the Save dialog.

When created, the Smart Object, called the target file, retains a link back to the original document, and it will be updated if the original is changed. The original document is referred to as the source file. You'll know it's a Smart Object and not a plain old GIF or JPEG because of the small icon in the lower-right corner (see Figure 9.65).

Figure 9.65 Smart Object target files are indicated
by an icon in the lower-right corner.

To reopen the source file in Photoshop or Illustrator, just double-click on the target file. Edit the source file in its originating application, save it, and then flip back to GoLive. The target image will automatically update without asking you to recompress it, resize it, rename it, or anything!

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials