Designing Pages

When you make a new page, Adobe GoLive automatically puts the words Untitled Page in the Title field. Remember to change these words to something that better indicates the content of your page. Keep in mind that search engines use the title of a page to determine whether it is relevant to a search, so choose your title carefully.

Click into the Title field at the top of the page to select the default title, and then simply type in the new title (see Figure 9.23).

Figure 9.23. Search engines rely on descriptive titles. Don't forget to add one to your pages.

With your title in place, you're ready to begin building your page. You'll have your choice of several editing modes. Let's take a look at the editing modes and how they are used.

Page Editing Modes

Not everyone approaches building a web page the same way. Some people have creative minds and like to work as they would in a page-layout application. Other folks prefer to hand-code their HTML. Fortunately, GoLive has a set of tools to satisfy everyone.

When you open an HTML page in GoLive, you'll notice a set of buttons across the top. Those buttons represent the various page-editing modes (see Figure 9.24). Each mode has unique features, so you will probably find yourself using a combination of editing modes as you become more familiar with GoLive.

Figure 9.24. Click a button to enter that editing mode.

The Layout Editor

You might have heard the acronym WYSIWYG (pronounced "whizzy-wig"), which stands for "what you see is what you get." WYSIWYG web editors provide a visual process for designing pages rather than requiring the developer to write HTML syntax. The Layout editor is the visual mode that works like a page-layout program. You can drag images onto the page, type text, and use GoLive layout grids, tables, and layers to position elements just the way you like them, all without writing a line of HTML code.

The Layout Editor has two sections, the head section and the body section. When you first open a new page, the blank area that takes up most of the space is the body section. If you click the gray arrow at the upper left of the page next to the word Head, you toggle open the head portion of the page (see Figure 9.25). The difference between these two areas is that the body portion is what loads into the browser window, whereas the head portion is used to give directions to the browser. The head section is where you put metatags, such as the keywords or description metatags that search engines use to index your site, links to external CSS and JavaScript pages, and more. A whole set of objects in the Objects palette is devoted to the head portion of the page. You can drag any head object and drop it onto a page, and then configure it using the Inspector palette.

Figure 9.25. Toggle open the head section of a page by clicking the gray arrow.

At the upper right of the page are four buttons. The first, called Properties, opens the Page Properties Inspector when clicked. Use the Inspector as an alternative way of setting the page's title or to select text and background colors other than the default (see Figure 9.26).

Figure 9.26. The Page Properties Inspector.

You can also use the Page Properties Inspector to designate a background image for a page. Images used in the background of HTML pages tile when they are displayed, meaning that they repeat. Small images are usually designed to tile seamlessly, giving the appearance of one large image, similar to the way wallpaper looks. If you prefer to use a large image that you don't want to repeat, you should consider using CSS to define the background image for the page. For more about CSS, refer to the section "Using Cascading Style Sheets," later in this chapter.

At the bottom of the page are more tools. On the left is the markup tree. Click anywhere in your document; the markup tree indicates where you are in the hierarchy of the tag structure. You can select elements on your page by clicking a tag in the markup tree. If you click on and hold a tag in the markup tree, a list of elements contained within that tag will appear. You can navigate to a particular element by selecting it from the list (see Figure 9.27).

Figure 9.27. The markup tree is a very convenient way to select elements on a page.

At the lower right of the Layout editor are the zoom tools and the layout dimensions. Use the plus and minus buttons to zoom in and out of your page, or choose a percentage of zoom from the Zoom Value pop-up. The Layout Dimensions menu lets you choose the page size for your design. For example, if you needed to create a design that fits into a 720-pixel-wide page, you would select that size from the Layout Dimensions pop-up.

The Frame Editor

Frames are a method of splitting up a browser window into sections so that you can load different pages into each section. A common example of this is to have a navigation frame that does not change, containing links to other pages. When clicked, the links load the other pages into a separate frame in the browser window. Frames mode enables you to drag and drop ready-made framesets from the Frames tab of the Object palette into the Frame Editor. After you've added a frameset, use the Inspector palette to edit the properties for both the frameset and the individual frames contained within it.

When you drag a frameset object into the Frame Editor, GoLive might prompt you to change the doctype (Document Type Declaration). The doctype specifies which Document Type Definition (DTD) the browser should use when rendering the page. Specifically, it states which version of HTML the page is using, and in the case of a frameset page, a specific DTD is required. GoLive makes this easy for you by checking to see whether the correct doctype is in place and by prompting you if it is not. In most cases, you should accept GoLive's recommendation if you get a dialog box asking whether you'd like to change the doctype.

After a frameset has been placed into the Frame Editor, click in any frame and take a look at the Inspector palette. You'll notice two buttons, one for setting the frame attributes and one for setting the frameset attributes.

The Frame and the Frameset buttons in the Inspector palette offer various attributes you can edit:

• Frame This button enables you to set the width and height of a frame, give the frame a name and an ID, link the frame to the page it will load, and choose the scrolling method. You can also create a new frame by clicking the appropriate button in the Inspector to add a frame before or after the currently selected frame, or to split the selected frame into two.

• FrameSet This button enables you to set the orientation of the frames and set border attributes such as color and size.

Remember, a frameset is only part of the equation. You need to fill the individual frames with content, which means you must assign an HTML page to each frame. If a frameset has two frames, you must create two HTML pages to fill them, one for each frame. To assign a page to a frame, select the frame by clicking on it, and then use the Inspector palette to link to the page.

The Source Code Editor

Source mode is where the HTML code is actually generated. This mode is fully editable, and changes made here are reflected in the other modes. GoLive's Source Code Editor is very, very powerful, with features such as themes, code markers, and code completion (see Figure 9.28).

Figure 9.28. The Source Code Editor.

Across the top of the page in Source mode are the following tools:

• Check Syntax The lightning-bolt icon at the upper left of the page opens and runs the Syntax Checker.

• Themes The Theme pop-up menu enables you to choose a color theme in which to view your syntax. Several themes are loaded by default, but you can edit themes and create custom themes in the Source section of GoLive's preferences.

• Colorize Code To toggle the code colorization on and off, click the Colorize Code button.

• Word Wrap Word Wrap wraps the code so that it is all viewable within the document window.

• Display Line Numbers To turn the line numbers on and off, click the Display Line Numbers button.

• Navigate Through Code This gives you the capability to set markers in your source code.

  Navigate Through Code comes in handy when you have specific areas of a page that you edit often. By placing a marker at that spot, you can jump directly to it. To create a marker in your code, place your cursor where you want the marker to go; then click and hold the Navigate Through Code button and select New Marker. When the dialog box appears, give your marker a name. Now when you want to jump to that marker, click and hold down the Navigate Through Code button and select the marker name from the list.

The Outline Editor

A unique and powerful way to edit your page, Outline mode enables you to work quickly by grouping tags and offering pop-up menus of the attributes available for those tags. This is especially helpful to more advanced users who are familiar with HTML (see Figure 9.29).

Figure 9.29. The Outline Editor shows your tags in pairs.

Split Source View

In the lower-left corner of the Layout, Frame, or Outline Editor is a small button with a double arrow on it, called Show/Hide Split Source (see Figure 9.30). Clicking this button toggles the split source open and closed. This enables you to have two modes open at the same timefor example, you can have the Layout Editor on the top and the Source Code Editor on the bottom. Option+click (Alt+click) on the Split Source button to switch between orientations. One click moves the source code to the right, the next click puts it at the top, and one more click puts it on the left. When you toggle the split source off, it remains in the last orientation you used.

Figure 9.30. Work in Layout mode and see the source code at the same time by using Split Source.

Preview Mode

The Preview tab lets you see what your page will look like in a real browser. On the Mac, the Preview mode is rendered via the embedded Opera browser, whereas on Windows, it is via Internet Explorer. Although having built-in previews is extremely helpful, as a web designer, you still need to preview and test your work in multiple browsers to be certain that your pages look and function in the manner you intended. Because the way a page behaves can vary greatly among browser types and versions, the only way to be certain your site will work as intended is to test across multiple browsers.

PDF Preview

PDF Preview is an easy way to preview how the page will look as a PDF and to export to PDF. While in the PDF Preview mode, use the Creation, Page, and Description sections of the Inspector palette to set attributes, such as the version of PDF you'd like to use, whether to embed fonts and multimedia, the page margins and orientation, and the addition of metadata. When you've made your selections, use the buttons on the Main toolbar to export to PDF or to print.

Using Live Rendering or Preview in Browser

Besides the Preview tab found in the document window, there are two ways to preview your pages. You can use the new Live Rendering window or use an actual browser. The Live Rendering window is really an embedded browser. With this window open, you can work in the Layout, Frames, Source, or Outline editing modes and see how your pages render as you make your edits.

To open the Live Rendering window, choose File, Preview In, Live Rendering. The Live Rendering window previews the frontmost page you have opened. If you switch to another page, that page loads into the Live Rendering window.

To keep a particular page loaded in the Live Rendering window, you can choose Bound from the Live Rendering flyout menu (see Figure 9.31).

Figure 9.31. Use the Live Rendering window to preview pages and test links.

You can also bind the Live Rendering window to a specific file by using the Fetch URL button at the upper left of the window. Click on the little coil button and drag to a file in your Files tab. The selected file loads into the Live Rendering window and stays loaded, no matter which file you are working on. Choosing Load from the Live Rendering window's flyout menu brings up a Choose window that enables you to navigate through your hard drive to load a particular file into the Live Rendering window. Reload refreshes the current window so that any changes made are updated. Finally, you can have more than one Live Rendering window opened at once.

Did you Know?

If you have a live connection to the Internet, you can type a URL into the Live Rendering window's location bar, and the page from the Internet will load.

Besides the Live Rendering window, there is another very easy way to preview pages in any browser that you currently have installed. Follow these steps to select the browsers for previewing:

1.	Open the preferences panel by selecting GoLive, Preferences (Edit, Preferences).
2.	Select Browsers on the left site of the Preferences window.
3.	Click Find All at the lower left of the window, or click Add to navigate to a specific browser; select the browser and then click Open to add it to the list.

When you select Find All, GoLive searches your hard drive, locates any installed browsers, and lists them in the right pane (see Figure 9.32).

Figure 9.32. Browser Preferences with Firefox chosen as the default.

These browsers will be available to you from the Show in Browser button in the Main toolbar. To the left of each browser in the list is a check box. Select the browser you would like to have as your default for previewing your work by clicking the check box next to it. If you check off more than one browser in your list, when you click the Preview in Browser button on the toolbar, the page you are previewing will open simultaneously in all the checked browsers.

When you have designated the browser(s) you would like to use for previewing, open a document and take a look at the Document toolbar. There is an icon on the right that looks like a browser icon. To the right of it is a small black triangle. That little arrow displays a pop-up menu when you hold down your mouse on it. To preview a page, click the Show in Browser button on the toolbar or select the browser of your choice from the pop-up menu.

Using Basic Objects

The Basic set of the Objects palette has objects that are frequently used during the building of pages. This section discusses the most used objects of the Basic set (see Figure 9.33).

Figure 9.33. The Basic set of the Objects palette.

By the Way

To identify an object in the Objects palette, hold your cursor over the icon for a few seconds, which causes a ToolTip to appear with the name of the object. For more information on that object, go to GoLive's Help menu and choose Help, GoLive Help; then run a search on the object's name.

Using the Layout Grid

What the heck is a layout grid? In essence, GoLive's layout grids are nothing more than elaborate tables. Grids are an excellent tool for novice designers to use, offering a flexibility and precision that is difficult to achieve using regular tables.

A GoLive layout grid resembles a piece of graph paper (see Figure 9.34). It is divided into vertical and horizontal gridlines, which aid you in placing objects on your page with pixel precision. By default, the dimensions of a new grid are 200 x 200 pixels. To put a layout grid on a page, either drag and drop from the Objects palette, double-click the Layout Grid icon, or Ctrl+click (right-click) and choose Insert Object, Basic, Layout Grid.

Figure 9.34. A standard layout grid.

You can resize the grid by dragging its lower-right corner or by typing the dimensions in pixels into the Width and Height fields of the Inspector palette. A default grid has gridlines every 16 pixels both horizontally and vertically. To alter the gridlines, type a number into the Horizontal and Vertical fields in the Inspector palette.

If you'd like an object placed on the grid to snap into position, leave Snap turned on in the Inspector palette. You can turn the visibility of the gridlines on or off by checking Visible in the Inspector palette, but they work the same whether or not they are visible.

Did you Know?

GoLive has a very cool feature called Smart Guides. Borrowed from Illustrator, where they first made an appearance, Smart Guides enable you to drag objects around on the grid. Whenever an object lines up with the edge of another object, a guide appears, enabling you to precisely align the two. Smart Guides also appear when you're working with layers so that layers can easily be aligned to one another.

You can set the background color of a layout grid by clicking the rectangular color well in the Inspector palette and then clicking a color in the Swatches or Color palettes. Alternatively, you might want to have an image in the background of a grid. You can accomplish that task by enabling the checkmark next to Image in the Inspector and then using the Fetch URL tool to point and shoot to an image in your site window. The image will be placed into the background of the grid. If the grid is smaller than the image, only the portion of the image covered by the grid will be shown. To fit the grid to the image size, click the Use Image Size button. If the image is smaller than the grid, it will tile. Again, you can click the Use Image Size button to fit the grid to the size of the background image.

A layout grid can be placed directly onto a page, inside a table, on top of another grid, or inside a layer, and nearly everything that can be placed onto a page can also be placed onto a layout grid. For instance, you can drag and drop images onto a grid and then align them using the Align palette (Window, Align). You can put a layout text box, found in the Basics set of the Objects palette, onto a grid and then put text into it.

Using the arrow keys on your keyboard, you can move objects on the grid. Select an object and press an arrow key, and the object moves to the next gridline. To move the object 1 pixel at a time, hold down the Option (Ctrl) key and then use the arrow keys. This little trick comes in handy if you want to snuggle sliced graphics against one another.

Did you Know?

A neat trick is to target the grid. Click on the grid at any point where two gridlines intersect, and then look closely. You'll see that the corner you clicked has a little blinking marker on it. Now if you double-click an object in the Objects palette, the object will land exactly at the point you targeted.

With an object on a layout grid active (selected), the Main toolbar offers a special set of controls for positioning objects on the grid (see Figure 9.35).

Figure 9.35. With a layout grid selected, the Main toolbar displays these settings.

Here's a rundown on what each tool does:

• Horizontal and Vertical Position These boxes enable you to type in numerically the position of the object on the grid relative to the left and top margins of the page.

• X and Y Size You can designate the size of an object by typing the desired dimensions into the X and Y boxes.

• Horizontal Alignment This aligns an object relative to the grid itself. You can align an object to the left, center, or right of the grid.

• Vertical Alignment Similar to Horizontal Alignment, except that this aligns an object to the top, middle, or bottom of the grid.

• Group and Ungroup With several objects selected, clicking the Group button locks them in place relative to one another.

  Grouping is useful, for example, when you want to move a whole set of buttons to another place on the grid without affecting the spacing between them. Ungrouping returns grouped items to individual objects once again.

If you'd like to convert a layout grid into a regular table, you can do so by choosing Layout Grid to Table, from the Special menu.

Using Tables

By default, GoLive creates a table that is 180 pixels in width, consisting of three rows and three columns. It has a border of 1 pixel, cell padding of 0 pixels, and cell spacing of 2 pixels (see Figure 9.36). Let's learn what all that means and how you can alter those settings to create the kind of table you want.

Figure 9.36. A default three-row-by-three-column table and the Table Inspector.

To put a table on a page, you can drag and drop from the Objects palette, double-click the Table icon in the Objects palette, or Ctrl+click (right-click) and choose Insert Object, Basic, Table. Click once on the left or top border of the table to select it.

Did you Know?

If you hold down the Command (Ctrl) key while you click the Table object in the Objects palette, you can drag out a table to the specific number of rows and columns you need. Let go of the modifier key when you've got the table the way you want it, and then continue to drag the table and drop it on your page.

With the table selected, the context-sensitive Inspector becomes the Table Inspector. There are four tabs in the Table Inspector: Table, Row, Cell, and Text. All four tabs are visible and selectable when you're working on a table, but only the attributes that can be applied to the portion you are working on are available for use. Those that are unavailable are grayed out. GoLive helps you work efficiently by switching to the correct tab based on your selection. For example, if you select a cell within the table, the Inspector reacts by bringing the Cell tab to the front (see Figure 9.37).

Figure 9.37. The Table Inspector with a cell selected.

Let's take a look at the Table tab of the Inspector, where you can set the dimensions of your table:

• Rows and Columns Type a number into the Rows and Columns fields to indicate the number of rows and columns you want.

• Width Set the width of your entire table in pixels, by percentage, or to Auto. Choosing Pixels sets your table at a fixed width. Percentage allows your table to expand or contract according to the width of the page. For example, if you set the percentage at 50, the table will always be half of the width of the browser window, no matter how large or small that might be. Auto means that the table will expand to accommodate whatever elements you put into it.

• Height As with the width, you can set the height of your table in pixels, by percentage, or to Auto.

• Border This attribute draws a border around the table that, by default, has a 3D appearance. Set the size of the border in pixels by typing a number into the Border field.

• Cell Pad Cell padding is the space between an element in a cell and the edge of the cell. For instance, if you place a graphic inside a cell and set the cell padding at 5 pixels, GoLive will add a 5-pixel space between the edge of the graphic and the edge of the cell.

• Cell Space Cell spacing is the amount of space between adjacent cells.

• Color You can set the background color of your table by clicking inside the color well (the rectangle next to Color) and then clicking a color in the Swatches or Color palettes.

• Align This pop-up menu gives you the option of aligning your table to the right, left, or center of other objects or text on the page.

• Caption Check the box next to the word Caption and choose Above Table or Below Table from the pop-up menu to create a space above or below the table in which you can type a caption.

• Import Use the Import button if you want to bring tab-, comma-, space-, or semicolon-delimited data into a table document. To do so, place a Table object onto your page. With the table selected, click the Browse button in the Inspector and navigate through your hard drive to the file containing the data you want to import. Choose the delimiter type from the pop-up menu in the dialog box and click Open.

• Export Use the Export button if you want to export data from a table as a delimited text file.

• Convert Use the Convert button to change your table to a layout grid.

There is a difference between selecting a cell and selecting the contents of a cell; they are two entirely different animals. If you see a blinking cursor inside the cell, it is in Text Edit mode, meaning that you can type or drag items into the cell. To apply attributes to a cell, though, you need to select the cell itself. You will know that a cell has been selected when there is a black line around the inside of it with a small black square in the upper-left corner. To select a cell, click once on the bottom or right border of the cell. If you are in Text Edit mode within a cell, you can press Ctrl+Return (Ctrl+Enter) to select the cell. To return to Text Edit mode, press Enter.

Selecting Table Rows and Columns

To select an entire row, place your cursor over the left border of the row until you see a right-facing arrow, and then click. Use the same technique to select a column, but place the cursor over the top border of the column. You can also drag across an entire range of cells to select them, or use Shift+click to select cells in different areas of the table.

Adding Table Rows and Columns

Flexibility is the name of the game in GoLive. So there are several ways to add rows and columns to your table:

• Select a cell, and then click the Add Row or Add Column buttons in the Cell tab of the Table Inspector.

• Change the number in the Rows or Columns fields in the Table tab of the Inspector.

• To add a column before another column, select a cell in the column to the right of the spot where you want to add the column and press the + key on your numeric keypad.

• To add rows at the bottom of the table, select a bottom cell, hold down the Command key (Ctrl+Shift keys) and drag the bottom border of the table.

• To add columns to the right side of a table, select a right cell, hold down Command (Ctrl+Shift), and drag the right border of the table.

Deleting Table Rows and Columns

What if you decide to remove a row or column? You can do so in the following ways:

• Select a cell and then click the Delete Row or Delete Column buttons in the Cell tab of the Table Inspector.

• Change the number in the Rows or Columns fields in the Table tab of the Inspector.

• To delete a column or row, select the column or row and press the Delete key on your keyboard.

Spanning Table Cells

You might find that you want to create a layout that requires a long open column at the left of the table and small multicell columns on the right. One way to approach this is to span cells. You can do so in either of two ways:

• Select a cell and then type a number into either the Span Row or the Span Column fields found in the Cell tab of the Table Inspector.

• Select a cell, and then press Shift+right arrow to span across rows, or press Shift+down arrow to span across columns. Use Shift+up arrow or Shift+left arrow to decrease the span.

By the Way

Be aware that when you're spanning cells, content in the selected cell remains intact, but content in the cells added to the right or bottom is lost.

You might find it more convenient to use the Table palette to navigate through and make selections in tables. Open the Table palette from the Window menu and notice that all the selection techniques mentioned for tables work just as nicely, if not more easily, in the Table palette. Additionally, if you have nested tables, you can move up one level by clicking the Select Parent table button, or down one level by clicking into a cell that contains the nested table. The Table palette also gives you access to sorting tools and table styles (see Figure 9.38).

Figure 9.38. The Table palette's Table Style mode.

Using Layers

Layers, formerly referred to as floating boxes in GoLive 5 and 6, are rendered via the use of DHTML, or Dynamic Hypertext Markup Language. Layers can be positioned anywhere on your page and can contain any other element, such as text or images. You can stack layers on top of one another, make a layer visible or invisible, and animate a layer.

When working with layers, you'll use both the Inspector palette and the Layers palette. The Inspector palette is where you'll set the attributes for a layer, and the Layers palette is where you'll see a list of the layers on your page. You can also use the DHTML Timeline Editor to animate layers, but let's not get ahead of ourselves! Begin by opening the Layers palette from the Window menu.

To put a layer on a page, do one of the following:

• Drag and drop from the Objects palette onto the page.

• Double-click the Layer icon in the Objects palette.

• Ctrl+click (right-click) and choose Insert Object, Basic, Layer.

• Click the New Layer button in the Layers palette.

To select a layer, place your cursor over one of its edges until you see the sideways hand icon, and then click. Notice that when a layer is selected, the Inspector palette shows three buttons across the top. By default, the Layer area is selected. It offers the following options:

• Name It's important to name each layer. By default, GoLive names your layers incrementallylayer1, layer2, and so on. However, giving a layer a name that describes its contents is a better choice.

• Top, Right, Bottom, Left These options are for positioning. By default, layers are positioned from the upper-left corner of the page.

• Width, Height These attributes designate the size of the layer.

• Z-index Z-index is the stacking order of layers. A higher number is higher in the stacking order. The stacking order is important if you intend to overlap layers in a particular way or for animating layers.

• Visible This turns off the visibility of a layer in the browser. It differs from the visibility choice in the Layers palette, which merely hides or shows a layer while you are working, but which has no bearing on whether a layer appears in the browser.

Did you Know?

When assigning a Z-index to your layers, you might want to use increments of 10. That way, if you need to insert a new layer between two existing layers, you can do so without having to reorder all the layers.

Click the Background button, and you'll see options for giving your layer a background color or image. To give the layer a color, click the color well and then click a color in the Swatches palette. To use a background image, click the check box next to Image and use the Fetch URL tool to point and shoot to an image in your web site. Buttons to open both the CSS Editor and the Layers palette are conveniently located in both the Layer and Background portions of the Layer Inspector.

The Timeline button offers options for animating layers. To do a simple animation, select a layer and then click the Record button. Move the selected layer around the page. Notice that a line with tiny squares on it is drawn on the page. That line is the path of the animation, and the squares are keyframes in the animation. Switch over to the Preview tab of the document to see the animation play. (Remember, the layer needs to have something in it, or you won't see a thing!) To do more complex animations, click the Open Timeline Editor button to access the Timeline Editor (see Figure 9.39).

Figure 9.39. When you animate a layer, a path including keyframes is drawn. Edit the keyframes in the DHTML Timeline Editor.

To move a layer, simply select it and drag it into position on your page. You'll notice that if you have more than one layer on a page, as one layer lines up with the edge of another, a Smart Guide appears, enabling you to perfectly align the two layers.

When you have multiple layers on a page, it's helpful to use the Layers palette to select them. You can also use the Layers palette to create a new layer, delete a layer, lock a layer to keep it from accidentally being moved, or hide a layer so that it's out of the way while you are working on parts of your page (see Figure 9.40). Remember, turning off a layer in the Layers palette turns it off only in the Layout Editor. That layer, if set to Visible in the Inspector palette, will still show in the browser. The following options will help you create, delete, reorder, and manage layers:

• To add a new layer, click the Create New Layer button at the bottom of the Layers palette.

• To delete a layer, select one or more layers in the list, and then click the Trash button at the bottom of the Layers palette.

• To rename a layer, select it in the list and then click a second time to go into edit mode. Type the new name over the old name.

• To turn off a layer, click the eye icon next to its name.

• To lock a layer, click the lock icon next to its name.

• To edit a layer's Z-index, select it in the list and then click its Z-index number to go into edit mode. Type the new Z-index over the old one.

• To reorder layers in the Layers palette, choose Hierarchic from the Layers palette flyout menu, and then drag layer names up or down in the list.

Figure 9.40. The Layers palette.

A couple additional options in the Layers palette flyout menu are of interest. One of them enables you to convert your layers to a layout grid. This comes in handy if you need to create a version of your page viewable by older browsers that do not support layers. Note that this option should not be used if layers are overlapping.

The other option, Layer Grid Settings, when turned on, gives you an underlying grid to which you can align layers. This feature was implemented in GoLive 6, but with Smart Guides now in GoLive, there is little need to turn on the Layer Grid Settings.

Converting Photoshop Layers to GoLive Layers

A very nice but often unmentioned integration feature between GoLive and Photoshop or ImageReady is GoLive's capability to import a layered Photoshop-format file. From the File menu, choose Import, Photoshop Layers. An Open dialog appears, enabling you to navigate to the file you want to import. After it's selected, GoLive asks for a save location; because GoLive will be creating web versions of the layers, they'll need to be saved. Choose your site's root folder (or a folder inside it) as the Save location. Next, GoLive opens its Save for Web window and begins importing the layers one at a time.

As each layer loads into the Save for Web window, you can choose the file format that is best suited to the content of the layer. You can also select the amount of compression on JPEG files, the number of colors on GIFs, and the size you want the layer to be. If there is a layer in the Photoshop file you do not want to import, click Cancel when that layer loads into the Save for Web window, and GoLive will proceed to load the next layer until it has imported all the layers.

Each layer from the source Photoshop file is automatically placed into a GoLive layer. You can select a GoLive layer from the Layers palette and move, adjust the visibility of, or animate the layer as you would any other GoLive layer.

Using the Color Palette

The GoLive Color palette is used to create color swatches that can then be added to your Swatches palette for use at any time during your design process. To open the Color palette, choose Window, Color from the menu bar.

There are five buttons across the top of the Color palette, each representing a color model. You can mix colors in any of the color models by using the sliders or typing in values. Notice that when colored text or a color object is selected on your page, the Color palette displays the color of that text or object.

A very powerful tool in the Color palette is the Eyedropper. Click the Eyedropper and click anywhere on your screen to pick up a color. This really comes in handy if you have a color in an image that you'd like to apply to text. Simply sample the color with the Eyedropper and then apply it to the text.

From the Color palette flyout menu, you can enable the Recent Colors list (see Figure 9.41). This displays the recently used colors along the bottom of the Color palette.

Figure 9.41. The Color palette.

Using the Swatches Palette

The Color palette's alter ego is the Swatches palette. After you have mixed a color in the Color palette, you can switch to the Swatches palette to add that color as a swatch that you can access at any time. To open the Swatches palette, choose Window, Swatches from the menu bar. Add a color by clicking the Create New Swatch button at the lower right of the Color palette. Delete a swatch by selecting it and clicking the Delete Swatch button.

GoLive offers several swatch sets to choose from, and they are accessible via the Swatches flyout menu. One specific library, called VisiBone2, is useful because it displays Web-safe colors in a very orderly way (see Figure 9.42). The flyout menu also enables you to choose between a thumbnail view and a list view, and offers a neat feature called Search Fields. By enabling the search fields, you can search for a color by value (hex number) or name. Enter the number or name into the appropriate field and press Enter. The corresponding color is selected in the Swatches palette.

Figure 9.42. The Visibone2 swatch colors.

Working with Text

As with most tasks in GoLive, placing text onto a page can be accomplished several ways. You can open your text document in the application in which it was created and then copy and paste to bring it into GoLive. You can also open a text document right in GoLive. From there you can also copy and paste, or simply drag the text directly to your page.

The simplest, most direct way of getting text onto your page is to put the cursor on the page and begin typing. But to have more control over the placement of text on your pages, you can elect to use a layout grid, table, or layer, as described earlier. Text boxes are placed on top of layout grids and can be moved around the page for a more precise layout.

When you are working with text, you can use the tools in the Main toolbar to align or color text, change the base size or header type, add a bulleted or numbered list, add a bold or italic style, or even apply a CSS style if any styles have been defined.

To apply any of the options from the toolbar, select the text and then click the appropriate button. To apply color to text, select the text and then click a color in the Swatches or Color palette. Alternatively, you could select the text and click the lower-right corner of the color well in the toolbar. This opens a temporary swatches palette from which you can choose a color.

Those who prefer to use Cascading Style Sheets rather than font tags will want to use the handy-dandy Apply CSS Style button in the toolbar. To apply a style to text, select the text, click the Apply CSS Style button on the toolbar, and then put a check mark next to the style you want to apply. More information on creating and using Cascading Style Sheets can be found later in this chapter, in the section "Using Cascading Style Sheets."

Creating Hyperlinks

The Web is all about hyperlinks. When clicked, a link takes you from one page to the next or from one part of a page to another. Hyperlinks can be attached to text or images and are very easy to create in GoLive.

To create a text link, select the text and then do one of the following:

• Use the Fetch URL tool in the Inspector palette to point and shoot to a page in your Files list (see Figure 9.43).

  Figure 9.43. The world-famous Fetch URL tool has also been called the point and shoot tool, or the pickwhip, and is known for the way it squiggles back if let go without hitting its mark.

  
  
  

• Type the URL into the Link field of the Inspector.

• Click the Browse button at the right end of the Link field (see Figure 9.44), and browse to the file to which you want to link.

  Figure 9.44. The Browse button looks like a folder.

  

  
  

• Click the arrow at the right end of the Link field and choose a filename from the list.

• Press the Command (Alt) key and drag from the selected text to the file to which you are linking.

Creating a hyperlink on an image follows nearly the same process. The difference is that when you have your image on the page and selected, you must first click the Link button in the Image Inspector and then proceed to create the link.

After a link is created, you'll notice additional options in the Inspector palette. Target refers to the window in which you want the link to open. If you are using frames and want the link to open a page in a different frame, you must specify a target. You can choose a frame name from the list (the frameset must be open for the frame names to appear) or choose from one of the default options:

_top opens the link in the full browser window, replacing the current frameset entirely.

_parent opens the link in the parent of the current page. For example, a link in a frameset that has a target of parent opens the link in the frameset page.

_self opens the link in the window or frame containing the link.

_blank opens the link in a new window.

You can type a description into the Title field, if you'd like. Internet Explorer will pop up the title when a visitor hovers the mouse over the link. Those concerned with meeting accessibility standards will want to give their links a name and an ID. Choose Name & ID from the pop-up list, and type a name into the Name/ID field.

Using the Find Window

Unless you are the only person in the universe who never makes a mistake, at some point you will need to find or change text in your documents. GoLive has a very powerful Find feature that lets you search one document, several documents, or a whole site. Open the Find window by choosing Edit, Find, Find Text from the menu bar. Notice that the Find window has a pop-up menu at the bottom where you can specify what GoLive should look through (see Figure 9.45).

Figure 9.45. Specifying that GoLive should search across the entire site.

Additionally, you can click on the triangle to the left of the word Options to choose from the following additional settings:

• Match Case Matches uppercase or lowercase letters exactly as you have specified. For example, if you search for Web, then web with a lowercase w would be ignored.

• Entire Word Finds only a word that is not a part of another word. For example, a search for other will not also return another.

• Regular Expression Enables you to run a search using regular expressions, which are special combinations of symbols and/or syntax used to match various patterns of text.

• From Top Starts the search from the beginning of the page.

• Wrap Around Begins the search at the cursor insertion point, goes to the end, then goes back to the top, and returns to the cursor insertion point again.

• In Selection Searches only within the current selection.

If you simply want to find text on a page, type the word or phrase you are looking for into the Find field and click Find. If a match is found, it is highlighted on the page. Click Find Next to move to the next match.

Typing a word or phrase into the Replace field and clicking Replace replaces the found text with the new text. You can choose to replace one instance at a time or all instances in one pass.

Using Find in Multiple Documents works regardless of whether the pages are opened or closed. You can choose from three options when running the search: Text in Layout Mode, Text in Source Mode, or Code Elements. All the options available in the single document search are also available in a multiple-document search. To add files to the list of documents to be searched, select Files from the Search In pop-up menu, and then click the Add Files button and select the files, or simply drag files into the Search In field.

Using the Check Spelling Feature

Last but not least, you'll want to run a spell-check on your pages to tidy them up. You can check a single page or your entire site. To open the Check Spelling window, choose Check Spelling from the Edit menu.

If a page is opened, the spell-check will be run on that page, and if your cursor is in the middle of the page, the spell-checker runs from that position. To run the spell-check from the top of the page, click the From Top check box. You can also select a portion of the text to spell-check that piece only.

If you need to perform the check on multiple files or on a whole site, enable the Check in Files check box near the bottom of the Check Spelling window, and click the gray arrow to open the bottom portion of the dialog box. You can then choose your site's name from the pop-up list (see Figure 9.46) or drag files from the Files list of your site window directly into the Files field in the Check Spelling window.

Figure 9.46. Check the spelling in your entire site by selecting the appropriate option from the Files From pop-up menu.

Choose the language you prefer from the pop-up menu, and choose whatever options are appropriate for your check. Click Start to begin the spell-check. As the spell-check proceeds, you'll choose from the following options:

• Delete removes the word.

• Change replaces the suspect word with the first one in the Suggestions field. You can also choose a word from the suggestion list or correct the suspect word by editing it yourself.

• Ignore skips over the suspect word, with no correction.

• Ignore All skips all occurrences of that word, with no correction.

• Learn adds the word to your personal dictionary so that it won't be flagged as an error anymore.

• Next File takes you to the next document in your site if you are spell-checking the whole site.

Working 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 worrythe suite 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, ImageReady, Illustrator, 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 Ctrl+click (right-click) and choose Insert Object, Basic, Image. When 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 three buttons across the top, called Basic, More, and Link:

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

Did you Know?

A great way to bring images into GoLive is to use 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 enables 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.

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 you learned earlier in this chapter.

Rollovers

If you've ever visited a website 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 the mouse over it. Combined with hyperlinks, rollovers give users a clear visual clue to which item they are 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 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 palette from the Window menu, and then choose Rollover Detection Settings from the palette's flyout menu (see Figure 9.47).

Figure 9.47. You can access the automatic Rollover Detection Settings from the Rollovers 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, although Normal and Over are the most widely used (see Figure 9.48).

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

If you prefer, you can create rollovers manually in the Rollovers 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.

Integration Using Photoshop, ImageReady, Illustrator, 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 enables 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 website. During the Save process, GoLive helpfully assigns the Web-friendly version of the image a filename based on the source file.

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

Figure 9.49. 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 automatically updates without asking you to recompress it, resize it, rename it, or anything.

Select the target version of the file on your page and look at the Inspector palette (see Figure 9.50). There are a few more options than those that were available when you placed a normal GIF or JPEG file. The first field indicates the location of the source file, and the second shows the path to the target file. Next are two important buttons called Settings and Variables. The Settings button opens the Save for Web dialog box so that you can edit your compression settings. The Variables button opens the Variable Settings dialog box, where you can assign a value to a variable, which is discussed in greater detail in the next section. Below those two buttons are some very nifty tools called Matte, Crop, and Scale, whose usage is also discussed in the next section.

Figure 9.50. The Smart Object Inspector.

In the next section, we take a look at what special integration features might exist among the various apps.

Did you Know?

In the Extras Tab of the site window is a folder called SmartObjects. This is a convenient place to house your native Photoshop, Illustrator, and PDF files; how ever, it's not mandatory that they be placed there. You can add a Smart Object to your web page from anywhere. As long as the original document does not move to a different location, GoLive keeps the connection between the Web version of the image and its original.

There are several ways to place a Smart Object onto a GoLive page:

• Drag and drop the source file from your drive onto the GoLive page.

• Drag and drop the source file from the SmartObjects folder onto the GoLive page.

• Drag and drop a Smart Object placeholder from the Smart set of the Objects palette onto the page, and then use the Inspector palette to link to the source file.

• Place your mouse pointer on the page where you want the Smart Object placeholder to go, and then double-click the Smart Object placeholder in the Smart set of the Objects palette. Use the Inspector palette to link to the source file.

Did you Know?

Note that there are several Smart Object types in the Smart set of the Objects palette: Smart Photoshop, Smart Illustrator, Smart PDF, and one named Smart Generic. In my experience, any one of them will do. I've used the Smart Photoshop object to load an Illustrator document, and the Smart Illustrator object to load a PDF. You get the idea. Mainly I prefer to drag a Photoshop, Illustrator, or PDF file right onto the GoLive page and forgo placing the Smart Object placeholder altogether.

In one instance, it is necessary to first place the Smart Object placeholder on the page and then link to the source file: when you want to use a file type besides the native Adobe file formats. The supported file types are BMP, PCX, Pixar, Amiga IFF, TIFF, TARGA, PDF, EPS, JPEG, JPEG 2000, PNG, and PICT (Mac OS only).

To resize a target file, simply select one of its corner handles and drag. To size proportionately, hold down the Shift key as you drag. When you release the mouse, GoLive rerenders the target file for you.

Photoshop transparency is recognized by GoLive as well, so if you create a Photoshop file with a transparent background and save it as a GIF with transparency, the transparent areas will be retained. If the matte color, which is the color on which the image was created, of the Photoshop image does not match the color of your GoLive page, you can rematte the target file using the tools in the Inspector palette. This feature comes in handy, for example, when an image using transparency was matted on a white background, but the GoLive page color is blue. In such an instance, the image would have a white halo around its edges. Rematting the image on a blue background allows it to seamlessly blend in with the GoLive page.

To change the matte color of the target image, select the image on the page; click the Matte color well in the Inspector; either click a color in the Color or Swatches palette, or use the Eyedropper tool in the Color palette to pick up the background color on the page; and then click Apply in the Inspector palette. GoLive rerenders the target file with the new Matte color. Alternatively, you could click the Settings button in the Inspector palette and use the Matte color options in the Save for Web dialog box.

See Figure 9.51 for examples of how a source Photoshop file with a transparent background layer will appear as a target file.

Figure 9.51. Smart Objects with various transparency and matte settings.

Finally, you can crop a Smart Object using the new Crop tool in the Inspector palette. Select the target file on your page, and then click the Crop tool. Drag over the image to select the portion you want to keep; the part that will be cropped becomes dimmed. If your selection is not quite right, you can move it around or drag a corner point to resize it. To accept the crop, either double-click inside the crop marks or click the Crop Image button in the toolbar.

Additional crop options in the toolbar enable you to crop the transparent pixels at the top, bottom, right, or left sides of the image. Also in the Main toolbar when the Crop tool is active is a pop-up menu called Scaling, which offers the following options:

• Keep Scaling Crops the image to the size of the crop marks.

• Keep Object Size Crops the image, but fills the space used by the original image. This works when you're cropping an image larger or smaller than the original.

• Scale to Source File Crops the image to the size of the original file.

If, after all that cropping, you'd like to return the target image to its first incarnation, select it on the page, click the Crop tool in the Inspector palette, and then click the Use Original Image button in the Main toolbar.

Photoshop Integration

If you are a Photoshop aficionado, you'll already be familiar with Photoshop layers. If you're new to Photoshop, take a look at Chapter 5, "Using Adobe Photoshop CS2," to understand this wonderful feature. When you're using a Smart Photoshop object in GoLive, the layers feature works in a special way. Any Photoshop file that includes a top layer containing text can be used as a variable in GoLive. In case you are not familiar with the term variable, it simply means "something that varies." In the case of a Photoshop text layer, it's the text that can vary. To illustrate this point, let's do a very quick exercise.

In Photoshop, create a new document. Select the Text tool and click on the page, and then type the words Placeholder Text. Format the text any way you'd like using your favorite font, color, and effect. Then save the file as a native Photoshop document.

Next, open a GoLive page, and drag and drop the new Photoshop document onto the page. A dialog box called Variable Settings appears. Click the check box next to Topmost Text layer to enable it. An input field opens. In the input field, type Adobe GoLive CS2, and then click OK (see Figure 9.52).

Figure 9.52. The Variable Settings dialog box.

The Save for Web dialog box opens, and you'll see the image you just created in Photoshop, except that the text you entered into the Variable Settings dialog box will have replaced the placeholder text in the source file. Choose the file format GIF and click the Save button to save the GIF file.

Now select your newly made GIF on the page, and in the Inspector palette, click the Variables button to reopen the Variable Settings window. This time, type Very, very cool! and then click OK. GoLive rerenders the target object using the settings you specified originally.

By now you are probably getting the idea, but just in case you've missed the point, let me be specific. You can use one source file to create multiple variations of the target file for use on different pages. If you update the original source artwork, the target files can be updated as well. The update happens automatically when you open a page using a target file, or you can force the update by selecting the source file in the SmartObjects folder and then choosing Site, Update Files Dependent On, Selection.

Did you Know?

After having initially created a target file, you can place it on as many pages as you would like. However, if you want to be able to resize the image differently on various pages, you need to create a unique target file with its own name for each instance in which it is used. You can manage this task by copying and pasting the target file to another page, and then, in the Inspector palette, clicking the folder icon at the right end of the target input field. You'll be able to reoptimize and/or resize the image, rename it, and save the new version of the target file into your site.

Illustrator Integration

Besides having the capability to place native Illustrator files into GoLive as Smart Objects, you can place SVG files that were created in Illustrator directly into GoLive layouts. Illustrator CS2 has the capability to save files in the SVG-t (which means SVG Tiny) format, which is used specifically for wireless devices, such as cellphones.

To place such a file into GoLive, drag an SVG object from the Basic panel in the Objects palette into your layout. Then point and shoot from the Inspector to your SVG file. At first, the image appears as normal in your layout. Double-click on the SVG file, though, and GoLive opens the SVG in an editor window where you can preview the artwork, see the structure of the SVG (from Illustrator layers), and even view the source code (see Figure 9.53)

Figure 9.53. Editing the source code of an SVG-t file that was created in Illustrator.

PDF Integration

In addition to GoLive's capability to generate PDF files from HTML pages, GoLive tracks links in PDFs and enables you to create or edit links in PDFs. Double-click a PDF file in your Files list to preview the PDF, and then click the Link Editing button at the top of the window to enter the editing mode. Choose the New Link tool from the toolbar to draw links onto the PDF, or the Edit Links tool to edit existing links, and then set the link's attributes in the Inspector palette.

Additionally, you can use a PDF as a Smart Object. This is especially useful if you'd like to create a thumbnail image of a PDF to use as a link to the full version. Drag and drop a PDF onto your GoLive page. The PDF Options dialog box appears, where you can select which page of the PDF you'd like to use for your target file (see Figure 9.54). Select the page and the orientation in the dialog box, and then click OK. When the Save for Web window opens, proceed as described in the "Photoshop Integration" section earlier in this chapter.

Figure 9.54. The PDF Options window.

InDesign Integration

InDesign has an innovative feature that allows for the intelligent repurposing of elements from print to Web. Rather than try to convert print documents to Web-ready documents from InDesign directly, it was far better and efficient to have a professional web product do thatGoLive. From InDesign's File menu, choose Package for GoLive, which creates a package (a folder, really) containing all the elements from the print project. When opened in GoLive, those elements appear as draggable objects that can be placed into your HTML pages. Let's take a look at how to view, access, and use those elements.

The Extras tab of the site window contains a folder called InDesign Packages. Adobe recommends that you save your InDesign package into that folder using InDesign's Package for GoLive command. To open the package, double-click on the package icon.

By the Way

Although there is an indicator to the left of the package icon that makes it appear as though you can toggle open its contents, you can't. If you want to see the contents of the package, you need to Ctrl+click (right-click) and select Open, Reveal in Finder (Open, Reveal in Explorer).

If you have created a package for GoLive but it isn't in the correct place, you can import it into GoLive by choosing File, Import, From InDesign. When the Select InDesign Package Folder dialog box appears, navigate to the folder containing the package, select it, and then click Choose. GoLive asks whether you want to add the package to your site (provided that you have a site opened at that time, which you should). Unless you have some compelling reason not to do so, go ahead and let GoLive import the package into the site by clicking Yes.

The package opens into a little window containing two buttons at the top called Page Items and Assets. The Page Items button reveals an exact replica of the InDesign document, which is accomplished via the magic of PDF technology. The Assets button displays an orderly view of the assets contained within the package, separated into four folders: Stories, Images, Movies, and Sounds. If the InDesign file did not contain any movies or sounds, those folders will be empty. Likewise, if the file contained no stories or images, those folders will also be empty, although it's hard to imagine an InDesign document that doesn't contain at least one of these things.

Click the Page Items view and click through the pages using the navigation buttons at the bottom of the package window. If you'd like, you can zoom up or down to see more or less of the preview. If you run your mouse over the page, various elements will be highlighted. The highlight indicates that your mouse is hovering above an asset that can be reused on your website. To use an asset, drag and drop it from the package window onto your GoLive page.

Using Images from the InDesign Package

To use items from the package on your GoLive page, just drag and drop. Images from the package are treated as Smart Objects, meaning that when they are dropped onto the page in GoLive, the Save for Web dialog box is invoked. You can proceed to use the compression settings of your choice and save the target image into your site, as described earlier in this chapter.

Using Stories from the InDesign Package

Stories from the package are treated as components (you can find more information on components earlier in this chapter, in the section "The Extras Tab"), meaning that they retain a link back to the original InDesign document. If the data in a story changes in InDesign, you can update the component in GoLive. To do so, repackage the InDesign file and, when asked whether you want to update the package, choose Yes. Back in GoLive, click once on the component to select it, and then in the Inspector palette, choose InCopy from the Generator pop-up. This causes the story to update.

If you don't need the story to remain connected to the InDesign document and would rather edit the text in GoLive, you have two choices. Either place the story and then release it from its component, or before placing the story, change its settings. To release a story from its component, Ctrl+click (right-click) on the text and choose Components, Detach Selected Component. To change the settings before placing the story, select the story in the package window and then click the Settings button in the Main toolbar. From the Content Usage pop-up, choose Direct.

If you have trouble selecting an asset because it is obscured by another asset, you can Ctrl+click (right-click) and choose Select, and then select the asset name from the list. The selected asset becomes highlighted so that you can easily drag and drop it onto a page.

Another method for selecting and using assets is to switch to the Assets view and drag and drop an item from its folder to your page. If you are not certain which asset is which, double-click a name in the Assets list; the asset will show in the Inspector palette. You could also drag the asset from the Inspector palette to your page.

And if those choices aren't enough, yet another way (options are a good thing, right?) of placing image assets is to first place a Smart Object placeholder on your page and then, using the Inspector palette's Fetch URL tool, point and shoot at the asset of your choice in the Page Items view of the package window.

Generating CSS Automatically from the Package

An amazing feature is the capability of GoLive to automatically translate the character and paragraph styles from the InDesign document into Cascading Style Sheets. The best method for doing this is to use the package window's flyout menu and choose CSS Styles, Save to Site. This opens the Save dialog box and enables you to name and save the file as an external style sheet in your site. You can then open the CSS file and edit it as you see fit.