Excerpted from “Real World GoLive 6” (Peachpit Press).
Peachpit Press is offering this book at a discount to creativepro.com readers. Follow this link.
Picking a program in any field, whether it’s Web publishing, illustration, page layout, or even accounting is akin to joining a political party. People have strong feelings about products that often can’t be explained through an objective review of the component parts. And that’s just fine with us.
You spend a lot of time with a program mediating between your abilities and the desired outcome. It’s not bad to have a deep relationship with an application as you learn to mold it to your ends. GoLive has matured over the years through many versions into a consistent and powerful tool that should encompass virtually all of your Web page design, database integration, and site management needs.
Our Protean Friend, the Inspector
The Inspector palette is the single most used part of GoLive. It’s a protean palette, one that changes contextually based on whatever is selected (see figure 1). Inspectors have names in their lower-left corner that correspond to the currently selected object or text.
In previous versions, the Inspector was modal in part: it required you to press return for GoLive to accept values after you had typed something in. Starting with GoLive 5, the Inspector became completely interactive. Now, whenever you modify a setting, it’s immediately applied to the page. Many changes in the Inspector palette — virtually all of them, in fact — can be undone using the Undo command in the Edit menu, or via the History palette, which allows you to walk back to a specific change.
Figure 1: The Inspector palette is the single most used part of GoLive.
Two Approaches to Building Web Pages
We try not to get overly metaphysical when it comes to our work (though sometimes we’re up late pondering questions such as, “If a designer is camping in the woods, does the Web cease to exist?”), but sometimes it’s impossible to avoid. Understanding one of the main philosophies behind working in GoLive applies to the work you carry out from now on.
GoLive offers two approaches to building pages: direct application and layout grids. In direct application, you type text and insert images and other elements using the basic structure of a Web page: content is read from left to right, top to bottom. Even when you’re adding elements such as tables, you’re bound by that structure, much the way you’d perform the same tasks in a word processor.
The alternative is to use layout grids, which, in a sense, circumvents the standard Web page structure. You first add a layout grid to your page, and then build everything else onto the grid, akin to using a page-layout application such as QuarkXPress or InDesign.
Both approaches are legitimate, just as both approaches have their own advantages and disadvantages. We began designing for the Web in the days before graphical editing tools existed, so we tend to favor the direct application approach (and also because a layout grid is, at heart, just a complex table). However, we’ve run into lots of designers who find the layout grid approach more closely parallels their experience using page-layout programs.
Building a Page, Step by Step
Despite the advanced features and multitude of options available in GoLive, the program is based on a simple premise: adding items to a page and editing them.
The following steps illustrate how to create a simple page depicting a recent vacation, which contains some text, an image, and a couple of hyperlinks.
- Choose New Page from the File menu. A new Document window appears, with the Layout Editor visible.
- Give the page a name, which appears in the title bar of a Web browser window. To add the title, click the text just above the editing area next to the Page icon, which reads, “Welcome to Adobe GoLive 6”, and enter a title, such as “Moon Trip”. Hit Enter to accept the change, or click anywhere in the editing area.
- Save the page by choosing Save As from the File menu. Give the file a name that doesn’t include spaces and is all-lowercase, such as “moonwalk.html”.
- In the editing area, where your cursor is located, type some descriptive text: “I thought I’d bring a pebble home!” Hit Return or Enter to create a new paragraph (see figure 2).
Figure 2: Create text in a new paragraph.
- Now let’s add a photo. Go to the Objects palette, which displays the Basic tab by default. Locate the Image icon, and drag it to the Layout Editor (see figure 3).
Figure 3: Add an image using the Layout Editor.
- In the Inspector, which displays Image-specific options, click the Browse button next to the Source field. Use the Open dialog box that appears to locate an image, then click the Open button. The image appears on your page (see figure 4).
Figure 4: Locate the image and open it.
- Since there are probably more photos from the trip, let’s create a link to another page. Click somewhere below the image to deselect it, then hit Return or Enter to create a new paragraph. Then type, “Go to shuttle photos.”
- Highlight the words “shuttle photos” and click the New Link button on the Toolbar or in the Inspector. The text turns blue and underlined; in the Inspector, the address field now reads (EmptyReference!)”.
- Highlight “(EmptyReference!)” and type the name of the file you wish to link to, in this case “shuttle.html” (See Figure 5). If you were linking to another Web site, you would enter the full URL, such as “http://www.hugemoonexpeditions.com/shuttle.html”.
Figure 5:Enter the name of the file you wish to link to, then save.
Save the file. Your new Web page is ready to be viewed in a Web browser.
Every software application has its own hidden gotchas, and GoLive is no exceptiom. Here are some last-minute tips we’ve found useful when preparing to publish to the Web with GoLive.