 |
Introduction to adding images
Adobe GoLive revolutionizes the way a designer can incorporate images and media from other Adobe applications to save time and effort. It's much easier to add Web-formatted images or entire layouts of a page, as in the case of a sliced Photoshop (PSD) file, to a Web page using Smart Objects.
Smart Objects provides superior integration with source files created in Photoshop, Illustrator, and LiveMotion. Smart Objects also includes a generic icon that lets you use source file created in other applications as well as a variety of file formats including PDF and EPS. The end result of using Smart Objects is more power and flexibility while working with the source files in a nondestructive manner, without ever having to leave the GoLive application.
Traditionally, when you create an image for use on the Web, you work in a program such as Adobe Photoshop or Adobe Illustrator and then save the image in a Web-safe format such as JPEG or GIF. And, it's good practice to maintain the source file in its original format and resolution, in case you need to make changes to your images in the future. (See Optimizing images for the Web.)
Smart Objects
GoLive Smart Objects eliminate the need to preoptimize your images in programs like Photoshop or Illustrator. In fact, except for the SVG and SWF formats, you don't even have to leave GoLive to optimize your images. Smart Objects give you a powerful way of keeping your Web-formatted images in sync with their original source files while still letting you manipulate the Web-formatted versions on your Web page. Smart Objects are particularly powerful when using a sliced Photoshop file to create a Web page layout. (See Working with a sliced Photoshop image.)
GoLive has a Save For Web feature that takes care of the image optimization. When you drag a source file (such as a PSD file or an AI file) directly into GoLive, GoLive automatically starts its Save For Web function so you can create a Web-formatted copy that may even include HTML as in the case of a sliced PSD or SVG file. This Web-formatted copy, called a target file, is what appears on your live Web page. (See Adding a Smart Object to the Layout Editor.)
Thanks to the GoLive Save For Web functionality, you don't have to leave GoLive to edit a Smart image, such as when resizing an image. Your image (PSD, SVG, or AI) files are optimized into a Web-safe format. For more information about the GoLive Save For Web dialog box, see About the Save For Web dialog box.
When you move or resize a Smart Object, you're really manipulating the target file; the source image does not change. This nondestructive process lets you keep your source image at full resolution and in its original format (such as PSD or AI). As a result, you can have multiple Smart images throughout your site created from the same source file even if they are different sizes or optimized in different formats. For example, you can create a small thumbnail image and then link it to the full-sized original image.
When you update the source image, GoLive automatically updates the Smart images within all Web pages open in the Layout Editor. This saves time when you use a single image in multiple formats on your site. It also reduces error. When you update the source image, you don't have to remember to regenerate the Web-formatted versions of the image; GoLive does it automatically. And, you can avoid inadvertently replacing the source file with the compressed, Web-formatted version of the image.
Note: If you want a Smart Object updated, open the page containing the Smart Object in Layout mode any time after the source image has been modified.
Another benefit of working with Smart Objects is that images looks crisp even after you resize them. GoLive simply regenerates the target file at the new size based on the Web optimization settings in Save For Web. GoLive will also automatically update the HTML code accompanying any sliced file. Again, this is nondestructive and does not alter the source file. This saves time over returning to the original application to edit your image.
SVG and SWF files can also be added to your Web page as Smart Objects. SVG and SWF are vector objects that can contain animation and interactivity. You generate them as Smart Objects by adding either dragging an Illustrator or LiveMotion file into GoLive or referencing the source file to a Smart Illustrator object or Smart LiveMotion object. GoLive automatically starts either Illustrator or LiveMotion to generate the optimized target files. Like all Smart Objects, modifying a SVG or SWF Smart Object does not alter the original source file. You can also have multiple SVG or SWF files referenced to the same source file. And, updating the source file will update all the linked SVG and SWF files on pages opened in a Layout Editor. For more information about optimization options for SVG and SWF, see Optimization options for SVG format and Optimization options for SWF format.
Sliced images for creating Web pages
Another traditional workflow for creating a Web page is to use Photoshop or Illustrator to produce an image that represents all or part of a Web page. This image file is usually sliced, creating separate regions that would be used as separate elements on a Web page.
You can bring sliced PSD or SVG image files (with all of the necessary HTML code) into GoLive. The GoLive Smart Object functionality optimizes each slice and provides the necessary HTML table code. Each image slice is automatically mapped to its own table cell. There's no need to manually create an HTML table to place individual image slices into.
Using Smart rollovers
A rollover is an image that changes when the user positions the mouse over it or clicks it (referred to as Over and Down states). A rollover can be used as a button that links to another Web page or image when the user clicks it. You can create a rollover by creating two or three separate images, then letting GoLive create the JavaScript code to display the correct image, depending on the user's action.
GoLive offers two easy methods of creating rollovers: Smart and Lean. Smart rollovers allow the nesting of actions. Though Smart rollovers generate more JavaScript code than Lean rollovers, GoLive can strip out all the JavaScript code and place it in an external JavaScript file. This ultimately can provide better performance than having the JavaScript written directly into the source code inline. (See Creating a Smart rollover object. )
Lean rollovers may be practical for those who only need to create a single Web page or for those who hand-off a page design to a Web programmer. Lean rollovers do not have all the benefits of Smart rollovers, but may result in leaner HTML code. (See Creating a Lean rollover.)
Whether you use Smart or Lean rollovers, GoLive manages the links inside the JavaScript code. GoLive can also export all JavaScript code into a separate file, which carries the same performance benefit as images that are cached in browser cache. This makes your Web sites load faster when they're downloaded and viewed in a browser. Photoshop has a preference to generate this type of code for GoLive.
If the Smart rollover has no onClick actions applied and is a link to another page, and you change the name or location of that page, GoLive will then automatically prompt you to change the rollover's link reference.
And, GoLive also has a powerful Detect Rollover Images feature that saves you time and effort in assigning the rollover images. You just specify the file name of the normal image (the one that displays when the Web page is first opened) in the Inspector, and make sure the file names of the images for the Over and Down actions are named, using the GoLive file naming convention. GoLive uses these file naming conventions to assign the other rollover images (for Over and Down actions) and to supply the JavaScript code needed to make them active. (See Creating mouse rollovers.)
Variables
Variables let you create multiple variations from one source image file. For example, you might have an image with text containing the price of an item. If you want to quickly modify the price, there's no need to create separate image files. It's easy just to modify the text variable in the image. When you add an image created in Illustrator (SVG only), LiveMotion (LIV), or Photoshop (PSD) to a Web page as a Smart Object, GoLive checks the file for variables. Depending on whether the image file is an Illustrator, LiveMotion, or Photoshop file, you can set variables that affect such elements as the text content, image visibility, or object color, style, and texture. (See Working with variables in a LiveMotion file.)
Convert Text to Banner
GoLive also has a Convert Text to Banner command that lets you take static text on a Web page and transform it into an image or SWF animation to add an attractive looking navigation element to your Web page.
You select HTML text, choose the Convert Text to Banner command, and select a PSD, SVG, or LIV source file with variables. The selected HTML text is assigned to the first text variable. You then use the Smart Object variables workflow to create the target file. (See Converting text to an image on a Web page.)
Media
GoLive supports a variety of plug-ins that let browsers play multimedia on a Web page, so you can place video and audio on your Web page. For more information about adding media to your Web page, see Adding media to a Web page.
