Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Introduction to Adobe GoLive CS2

Last updated Oct 17, 2003.

You may or may not know about Adobe GoLive as certain Web design applications have overshadowed it. However, fans of Adobe Photoshop and other Adobe products may dive into it when buying the Creative Suite 2 (CS2). GoLive is Adobe's application for designing and publishing Web sites and mobile content.

History

GoLive arrived on the scene in 1996 when Gonet Communications of Menlo Park, California and Hamburg, Germany introduced GoLive Pro 1.1. In 1997, the company became GoLive and the product named changed to Cyberstudio 2.0. It earned the distinction of the Best Web Authoring Tool in 1998 at the MacWorld Expo.

In 1999, Adobe bought GoLive and CyberStudio, which was in version 3.01 at the time. The name CyberStudio went away and Adobe introduced GoLive 4.0, which extended the product to the Windows platoform for the first time, as it was previously only available to Macintosh users.

By mid-2000, Adobe integrated GoLive 5.0 with its other products allowing easy file management with its Photoshop and Illustrator files. By then, the product produced cleaner code than it had in the past. However, it still couldn't catch up with its rivals. GoLive 6.0 arrived in 2002, and CS in 2003. CS had two suites: Standard Edition with Photoshop (including ImageReady), Illustrator, and InDesign; and the Premium Edition, which included all of these plus GoLive and Acrobat Professional.

We arrive to CS2 (version 8.0 for those who are counting), which debuted in April 2005 with two editions. The Premium Edition comes with Photoshop CS2, InDesign CS2, Illustrator CS2, GoLive CS2, Version Cue, Adobe Acrobat 7.0 Professional, and the new Adobe Stock Photos service and Adobe Bridge. The Standard Edition comes with all of the same programs minus GoLive and Acrobat.

GoLive CS2, also available as a standalone program, offers these standout features:

  • New and enhanced CSS-related tools for building standards-compliant CSS pages
  • Mobile authoring tools
  • Real-time Web and mobile content rendering
  • Site management tools, including Secure FTP and WebDAV
  • Automated favicon creation

GoLive serves as a Web site creation and management tool that works with XHTML, CSS, and Javascript. While GoLive continues to battle its competitors, its strength lies in its tight integration with Adobe's powerhouse product and favorite among designers, Photoshop.

Cool New Tool: Co-Author

GoLive CS2's new Co-Author feature allows a Web designer to set up a Web site so that others—regardless of their Web design skills—can update the site without help.

How does it work? The Web designer uses GoLive to build pages with templates that can be downloaded and edited using Co-Author. After the site is designed, anyone who wants to update the site can download the free Co-Author tool from Adobe's Web site and use it to download and edit the pre-determined content sections. Adobe's Co-Author Web page has several free tutorials on how to use Co-Author.

The GoLive Interface

When you start GoLive for the first time, a Welcome window appears with the option of starting a new site or opening a document. The default layout includes the Objects toolbox on the left, the Toolbar on top, and various palettes on the right side. Figure 1 shows the Work Area, which includes the Inspector, View, Color and Swatches palettes. The middle shows the Site window, which displays the files of my personal site.

Like most applications, you can re-arrange the Work Area to your preference. The windows in GoLive can be stacked, tiled, grouped, and ungrouped. You can customize workspaces and save them.

Toolbars

The main toolbar appears immediately below the command menus (File, Edit, Type, Special, Site, etc.) and has buttons and pop-up menus. The main toolbar is not static; it changes depending on the currently selected section in the workspace. Figures 2 and 3 show the toolbar with two different menus.

The version control toolbar shown in Figure 4 helps manage files and ensures one person works on the file through the check-in and check out process. When a file is checked out, it becomes locked so no one else can use it. For a single-user site, version control allows you to revert to the site's earlier versions.

Two items on the toolbar involve Adobe Services: Bridge and Stock Photos. As shown in Figure 5, next to the Adobe Services toolbar is the documents toolbar, which allows you to select the window and preview the page in a browser. If you have several Web pages open in the workspace, click and hold on the Select Window icon of the documents toolbar until a list of open pages appears as shown in figure 6.

Palettes

Click on Windows from the main menu to view the long list of palettes available beginning with Actions and ending with View as shown in Figure 7. Palettes can be grouped, docked, or collapsed (minimized). Grouped palettes have more than one tab that appears within a palette. In Figure 8, View is not grouped, CSS, Layers, and Library are grouped and docked, and Inspector is collapsed.

To group palettes, click on a palette, hold down the mouse, and drag the palette into another palette's box. You can remove a palette from a group by similarly clicking and dragging. To collapse a palette, select its name and drag it to the right or left side of the GoLive window.

To hide all palettes, from the Window menu select Workspace > Hide All Palettes. To display a palette, click on Window and the palette's name. To hide it, repeat the action.

Editors

While editing a page, the source code toolbar appears (Figure 9) so you can change the document window to the editor you need:

Layout Editor: Drag objects and files around the editor to design the Web page. Objects and files include CSS layout objects, layer tools, images, frames, and movies. Figure 10 shows various objects that can be added to the document while in the Layout Editor.

Frame Editor: Use it to add and adjust the document's frames.

Source Code Editor: Displays the document's source code in text format. In this editor, you can check the syntax, change the theme of how the code appears, colorize or de-colorize the code, toggle word wrap, toggle the display of line numbers, and jump to code using the navigate code icon.

Outline Editor: Displays the HTML markup in a hierarchy.

Preview: Displays how the page would look on a Web site. This is not perfect depending on the code and markup used.

PDF Preview: Displays the page in Adobe Acrobat.

You can view and edit the source code while working with one of the other editors. There are two ways to do this:

  1. From the Window menu, select Source Code to show the Source Code palette. The palette appears blank when the document window is using the Source Code Editor option.
  2. From the View menu, select Show Split Source to view the source code in one half of the document window while another editor takes up the other half of the window. Or just click the Show/Hide split source icon in the lower-left side of the editor window.

Play with the workspace by moving palettes, opening files, viewing the file in different editors, and adding objects to the page while in the Layout Editor. Remember, you can always restore the default workspace by selecting Window > Workspace > Default Workspace. If you set up a workspace you like, you can save it by selecting Window > Workspace > Save Workspace. In this same Workspace menu, you can also manage your workspaces.