Adobe GoLive CS User Guide Go Live Instruction Manual En

User Manual: adobe Adobe GoLive - CS - Instruction Manual Free User Guide for Adobe GoLive Software, Manual

Open the PDF directly: View PDF .
Page Count: 498

Download
Open PDF In Browser	View PDF

Adobe GoLive CS Help

Using Help | Contents | Index

Using Help

Back

Using Help
About Help
Adobe Systems Incorporated provides complete documentation in an Adobe PDF-based
help system. This help system includes information on all tools, commands, and features
of an application. It is designed for easy on-screen navigation and can also be printed and
used as a desktop reference. Additionally, it supports third-party screen-reader applications that run in a Windows environment.

Navigating in Help
Help opens in an Adobe Acrobat window with the Bookmarks pane open. (If the
Bookmarks pane is not open, click the Bookmarks tab at the left edge of the window.)
At the top and bottom of each page is a navigation bar containing links to this page (Using
Help), the table of contents (Contents), and the index (Index).
To move through pages sequentially, you can click the Next Page and the Previous
Page arrows; click the navigation arrows at the bottom of the page; or click Back to
return to the last page you viewed.
You can navigate Help topics by using bookmarks, the table of contents, the index, or the
Search (Acrobat 6) or Find (Acrobat 5) command.
To find a topic using bookmarks:
1 In the Bookmarks pane, click the plus sign (+) (Windows) or the right-facing arrow
(Mac OS) next to a bookmark topic to view its subtopics.
2 Click the bookmark to go to that topic.
To find a topic using the table of contents:
1 Click Contents in the navigation bar.
2 On the Contents page, click a topic to go to that topic.
3 To view a list of subtopics, click the plus sign (+) (Windows) or the right-facing arrow
(Mac OS) next to the topic name in the Bookmarks pane.
To find a topic using the index:
1 Do one of the following:
•

Click Index in the navigation bar, and then click a letter at the top of the page.

•

Ιn the Bookmarks pane, expand the Index bookmark to view the letter subtopics;
then click a letter.

2 Locate the entry you want to view, and click the page number to go to that topic.
3 To view other entries for the same topic, click Back to return to the same place in the
index, and then click another page number.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Using Help

Back

To find a topic using the Search command (Acrobat 6):
1 Choose Edit > Search.
2 Type a word or phrase in the text box and click Search. Acrobat searches the document
and displays every occurrence of the word or phrase in the Results area of the Search PDF
pane.
To find a topic using the Find command (Acrobat 5):
1 Choose Edit > Find.
2 Type a word or phrase in the text box and click Find. Acrobat searches the document,
starting from the current page, and displays the first occurrence.
3 To find the next occurrence, choose Edit > Find Again.

Printing Help
Although Help is optimized for on-screen viewing, you can print selected pages or the
entire file.
To print Help:
Choose File > Print, or click the Print icon in the Acrobat toolbar.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Contents

Back

Contents
Learning about Adobe GoLive CS 4
What’s New in GoLive CS 8
Tutorials 11
Looking at the Work Area 28
Setting up Sites and Pages 46
Creating Site Diagrams 72
Managing and Viewing Web Sites 91
Laying Out Pages 134
Working with Tables 165
Formatting Text 185
Using Cascading Style Sheets 212
Adding Images and Multimedia 235
Adding Content from Adobe Applications 261
Creating Forms 294
Working with Site Assets 304
Transferring Files and Publishing Web Sites 323
Creating and Maintaining Co-Author Sections 339
Working with PDF Documents 346
Authoring Wireless Web Sites 354
Working with Source Code 375
Using Actions 414
Using Web Settings 448
GoLive Extensibility 462
Keyboard Shortcuts 463
Legal Notices 470

Using Help | Contents | Index

Adobe GoLive CS Help

Learning about Adobe GoLive CS

Using Help | Contents | Index

Back

Learning about Adobe GoLive CS
Getting help
There are a number of ways to get the help you need in GoLive CS. The following three
tables can help you find specific resources related to GoLive features, training resources,
and support.
Finding Help for GoLive features
If you . . .

Try this . . .

Want information about
installing GoLive

• Insert the Adobe GoLive CD into your CD drive, and follow the

on-screen installation instructions (you cannot run the GoLive
application from the CD).
• See the HowToInstall file on the Adobe GoLive CD.

Are new to GoLive and want • Browse through the information in “Working with Adobe GoLive”
an overview of tools and
on page 6 for information on specific tasks.
features
• Choose Help > GoLive Help. Then select “Looking at the Work Area”
from the links on the Contents tab.
• Move the pointer over a tool or button to display the tool or button

name.
• Try the beginning tutorials in GoLive Help.

Are upgrading from a
previous version of GoLive

Go to the “What’s New in GoLive CS” chapter to get an overview of
new features, or see the NewFeatures.pdf file in the GoLive application folder for more detailed information.

Are looking for detailed
information about a feature

In GoLive Help, use the index, or search for the feature.

Want information about
See the Adobe GoLive CS Multimedia Authoring Guide (English only)
authoring QuickTime or SMIL in the GoLive section of Adobe Studio at www.studio.adobe.com.
files.
Want a complete list of
keyboard shortcuts

Look at the “Keyboard Shortcuts” on page 463.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Learning about Adobe GoLive CS

Using Help | Contents | Index

Back

Finding GoLive training resources
If you . . .

Try this . . .

Want to obtain in-depth
GoLive training

• See the tutorials on the Adobe Studio Web site

at www.studio.adobe.com.
• Browse the Adobe Press materials at www.adobepress.com

(English only), and the available training resources at
www.adobe.com/support/training.
• For step-by-step lessons, consider the Adobe Classroom in a

Book series.
• For in-depth reference information, consider the RealWorld series.

Are looking for background
information on Web design

See the Adobe Press section of the Adobe Web site at
www.adobe.com/misc/books.html.

Want information about
using third-party products
provided with GoLive

Look in the Partners folder on the Adobe GoLive CD.

Want information about
extending the functionality
of GoLive

Look at “GoLive Extensibility” on page 462.

Want to access the DevelSee the Adobe Solutions Network (ASN) section of the Adobe Web
oper Knowledgebase or soft- site at http://partners.adobe.com/asn/golive/ (English only).
ware developer kits (SDKs)
Want information about
becoming an Adobe Certified Expert

Visit the Partnering with Adobe Web site at www.partners.adobe.com. Certification is available for several different geographical regions.

Want training from an Adobe See the Training page of the Adobe Web site
Certified Training Provider
at www.adobe.com/misc/training.html

Finding support for GoLive
If you . . .

Try this . . .

Want customer or
technical support

• Refer to the technical support card provided with your software.
• Register GoLive and receive technical support for up to 90 days

from the date of your first call (terms may vary depending on country of residence).
• See the Adobe GoLive support page

at www.adobe.com/support/products/golive.
• Read the ReadMe file installed with GoLive for information that

became available after this guide went to press.
Want answers to common
troubleshooting questions

Search the Adobe Support Knowledgebase and GoLive Top Issues
at www.adobe.com/support/products/golive.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Learning about Adobe GoLive CS

Using Help | Contents | Index

Back

Finding support for GoLive
If you . . .

Try this . . .

Want to register your copy of • When you first start GoLive, you’re prompted to register online. Fill
GoLive
out the form, and then submit it directly or fax a printed copy.
• Fill out and return the registration card included with your soft-

ware package.
• Access the online registration form at any time by choosing

Help > Registration.
Want access to a multitude of Visit the GoLive pages on Adobe Studio at www.studio.adobe.com.
GoLive specific information,
such as downloads, updates,
patches, plug-ins, and links
to user forums

Working with Adobe GoLive
You can work with GoLive in many different ways. In the related topics, you’ll find directions to specific information to help you accomplish some common GoLive tasks.

If you want consistent design throughout a site
•

Apply page templates to present a uniform look and feel.
(“Using page templates” on page 305.)

•

Create components to automatically update navigation bars and other design
elements that appear on multiple pages. (See “Using components” on page 311.)

•

Use Cascading Style Sheets (CSS) to apply identical text styles throughout a site.
(See “About cascading style sheets” on page 212.)

•

Create co-author sections, which let editors and writers update content by using a
simple form-like interface. (See “Creating co-author sections” on page 339.)

If you want to increase productivity
•

Add pre-built snippets of commonly used HTML and JavaScript code.
(See “Using snippets” on page 313.)

•

Group files in collections to speed up common file management tasks.
(See “Using collections” on page 319.)

•

Use enhanced source code features to automatically compare, find, and complete code.
(See “Using the GoLive source code editors” on page 375.)

•

Update links site-wide with the In & Out Links palette.
(See “Using the In & Out Links palette to view links” on page 124.)

If you want to work with other Adobe tools
•

Use Smart Objects to import and optimize native Adobe Photoshop ®, Adobe Illustrator®, and Adobe Acrobat® files. (See “Working with Smart Objects” on page 262.)

•

Import and edit Adobe ImageReady® rollovers. (See “Importing rollovers from
ImageReady” on page 244.)

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Learning about Adobe GoLive CS

Using Help | Contents | Index

Back

•

Fully integrate Adobe PDF documents into Web sites.
(See “About working with PDF documents” on page 346.)

•

Import GoLive packages from Adobe InDesign® to quickly match related print and Web
designs. (See “Adding InDesign content” on page 286.)

•

Manage projects with Adobe Version Cue TM to provide workgroups with powerful
version-control features. (See “Working with Adobe Version Cue managed projects” on
page 45.)

If you want to import content from non-Adobe applications
•

Add GIF, JPEG, PNG, and WBMP images to Web pages. (See “Adding pre-optimized
images” on page 235.)

•

Open exported HTML files by using the File > Open command.

•

Create a new site from a folder of HTML files by using the Site Wizard's Import from
Folder feature. (See “Creating a single user site” on page 47.)

•

Import tab-delimited text from a spreadsheet or database into a GoLive table.
(See “Adding text to tables” on page 182.)

Using Help | Contents | Index

Back

Adobe GoLive CS Help

What’s New in GoLive CS

Using Help | Contents | Index

Back

What’s New in GoLive CS
Work with industry-leading Adobe technology
GoLive CS offers unparalleled integration with Adobe products like Adobe Acrobat, Adobe
Photoshop, Adobe InDesign, and Adobe Version Cue.
Adobe PDF Adobe Portable Document Format (PDF) is a worldwide standard for secure
and reliable transmission of electronic documents over the Web. GoLive CS offers more
comprehensive PDF support than any other Web-publishing application. You can preview
Web pages in PDF and export them with all formatting, links, and graphics intact. You can
also open existing PDF documents to create and edit PDF links and bookmarks. (See
“About working with PDF documents” on page 346.)
Smart Objects With Smart Objects, you can work with native Photoshop, Illustrator, and
Acrobat files directly in GoLive. When you modify a Smart Object, GoLive automatically
reoptimizes it for the Web, helping you work more efficiently. New Smart Object features
include cropping, site-wide updating of Smart Objects edited outside of GoLive, and full
support for ImageReady-generated JavaScript code. (See “Working with Smart Objects”
on page 262.)
Adobe InDesign You can quickly match related print and Web designs by using
InDesign’s Package for GoLive feature. These packages let you easily transfer text, graphics,
and multimedia assets from InDesign to GoLive. If a print design changes in the future,
simply re-create the package in InDesign to update related assets throughout a GoLive
site. (See “Adding InDesign content” on page 286.)
Adobe Version Cue Use Adobe Version Cue features in Adobe GoLive CS to increase your
productivity when you work alone or collaborate with others. You can integrate GoLive
design management into your existing workflows within and across the Adobe Creative
Suite applications. The Version Cue features in GoLive CS are compatible only with the
Adobe Version Cue Workspace, available only as part of the Adobe Creative Suite. (See
“Working with Adobe Version Cue managed projects” on page 45.)
Adobe color engine GoLive CS shares the color engine used by Photoshop, Illustrator,
InDesign, and Acrobat. This shared color engine lets you use one set of controls to achieve
consistent color across Adobe applications and a variety of output devices. (See
“Managing color in images” on page 248.)

Enhance your productivity
With a familiar Adobe interface and many other productivity enhancements, GoLive CS
streamlines common Web workflows.
Adobe interface GoLive CS includes a familiar interface from Adobe products like
Photoshop and Illustrator. You can zoom in to refine page layouts with pixel-level
precision, use a vertical Objects palette, and collapse palettes to free up screen space for
large, detailed Web designs.
Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

What’s New in GoLive CS

Back

Streamlined color workflow With the Color and Swatches palettes, you can apply color
with a single click, store commonly used colors, and search for colors by name or
hexadecimal value. (See “Using color” on page 67.)
Pre-built design elements To help you quickly complete common Web design tasks,
GoLive CS includes a large number of professionally-made design elements in a new
Library palette. Choose from pre-built Web pages, Section 508-compliant designs, CSS
styles, and JavaScript snippets for cookies, event handlers, and more.
Co-author sections In GoLive sites, Web professionals can now create special co-author
sections, which let editors and writers update content by using a simple form-like
interface. These template-driven sections ensure a consistent look and feel throughout a
site, while letting co-authors with little knowledge of Web design create sophisticated
Web content. (See “Creating co-author sections” on page 339.)
Queries Expanded search functionality lets you build and save complex queries. You can
search for items ranging from HTML elements to site assets and errors. To perform
complex searches, define nested queries; for simple searches, use predefined queries. (See
“Generating queries” on page 129.)
Collections To speed up common file management tasks, you can create site-specific
collections, which let you quickly select groups of related files. You can attach queries to
collections, ensuring that they include all files that meet specific search criteria. (See
“Using collections” on page 319.)

Use powerful tools that support industry standards
GoLive CS ensures that your sites meet the latest Web standards.
Enhanced CSS workflow In the new CSS editor, you can visually preview styles as you
change style properties, drag and re-sort style elements, and view related CSS code. You
can also quickly apply styles in the Layout Editor by using new CSS commands in the Type
menu. (See “About the GoLive CSS workflow” on page 213.)
JavaScript rollovers The new Rollovers & Actions palette lets you create sophisticated
rollovers with ease. You can combine self and remote rollovers and specify trigger objects
ranging from images to text and table cells. GoLive CS also fully supports ImageReady
JavaScript code. (See “Creating rollovers” on page 240.)
Revised source code editor GoLive CS includes a completely revised source code editor,
which lets you easily select entire HTML elements, complete code automatically, and
optimize hand-coded HTML. Customizable syntax coloring helps you easily identify
different code types. And new code compare and query features ensure consistent HTML
throughout a site. (See “Using the GoLive source code editors” on page 375.)
Publish servers With publish servers, you can maintain a site in one, central location, but
publish to multiple servers using different transfer protocols such as WebDAV or FTP. The
streamlined publish server interface lets you quickly configure and access servers, so you
can focus more energy on Web design. (See “About GoLive publish server clients” on
page 325.)

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

What’s New in GoLive CS

Back

Updated QuickTime and SMIL features Among Web design applications, only GoLive
CS provides a full authoring environment for QuickTime movies. You can create interactive
content with wired actions and integrate movies with XML databases. If you own
QuickTime Pro, you can also produce 3GPP-compatible files for wireless devices. GoLive CS
provides similarly extensive support for SMIL, letting you design RealOnePlayer and MMS
documents with an intuitive, visual interface. For more information, see the Adobe GoLive
CS Multimedia Authoring Guide, available on the Adobe Web site.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

Tutorials
About these tutorials
The following tutorials provide a quick tour of the basic Adobe GoLive CS features. Before
you get started, be sure you are familiar with the basic concepts of GoLive. (See “GoLive
basics” on page 28.)
As you work through these tutorials, you may have new ideas and questions. To assist you
with learning GoLive, Adobe provides a variety of resources. For more information, see
“Getting help” on page 4.
For more advanced GoLive tutorials, visit the Adobe Web site at www.adobe.com/
products/tips/golive.html.

Create and structure a site
Adobe GoLive CS makes it easy to create complex, multipage Web sites using the site
wizard and the site diagram feature. The site wizard walks you through the process of
setting up a new Web site, and the site diagram feature lets you quickly prototype the site,
and then convert the prototype to actual pages.
In the steps that follow, you’ll use the site wizard, diagramming tools, and the site window
to create a new Web site with multiple pages and folders.

1. Create a new blank site.
Start GoLive and click the New Site button to open the Site Wizard. Select the Single User
option, and click Next. In the next screen, select Blank Site, and then click Next. Enter a
name for your site in the Site Name text box, click Next, and then specify a location on your
hard drive to store the site files and folders. Click Finish to create the new site. That’s all
there is to creating a new site.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

GoLive creates a project folder on your hard drive. This folder contains the site’s project
file, a web-content folder, which contains an index.html file, a web-data folder, and a websettings folder, which GoLive uses to manage the site and its assets.

2. Create a diagram and add a page.
With the site window active, choose Diagram > New Diagram to create a new diagram.
Drag a Page icon from the Diagram set of the Objects palette to the design view to add a
new page named untitled.html. Click the page’s name, and then enter a new name, such as
Products.html.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

3. Add new child pages.
With the page in the design view selected, choose Diagram > New Pages. In the New
Pages dialog box, enter the number of new child pages to create a base filename for the
new pages. For example, enter 4 to create four pages, and then enter Models in the
Filenames text box to add pages named Models.html, Models1.html, Models2.html, and
Models3.html. Click Create.

4. Anchor the diagram to a page in the site.
Drag the index.html page from the Files tab of the site window to the design view.
Index.html becomes an anchor page in the diagram and is indicated by an anchor symbol.
Anchoring the diagram specifies the diagram’s location in the site’s hierarchy.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

5. Submit the diagram to the site.
Choose Diagram > Staging > Submit All. GoLive converts the diagram’s pages to HTML
pages in the site. In the Files tab of the site window, you can see the new pages in the site.

6. Structure the site.
Organize your pages and images in separate folders so that you can keep track of files and
update them easily. With the Files tab of the site window active, click the Create New
Folder button in the toolbar. Rename the new untitled folder Pages. You’ll place all your
HTML pages in this folder. Click in an empty area of the Files tab and click the Create New
Folder button. Rename the new folder Images. You’ll place all your images in this folder.
Select Products.html and its child pages (models.html, models1.html, etc.), and drag them
into the Pages folder (Shift-click to select multiple files).
If your site is very complex, you may want to create subfolders within these folders to
easily organize your files. Whenever you move, rename, or add pages, or create a new
folder in the Files tab, GoLive automatically makes the change in the site’s web-content
folder.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

Design and lay out a Web page
Adobe GoLive makes it easy to design and lay out visually compelling Web pages. You can
create simple or complex professional-quality Web pages without writing any code.
Once you’ve designed your page, you can save it as a page template. New pages created
from a page template remain linked to the template—when you change the template,
GoLive automatically updates the pages without affecting any content that has been
added to them.

1. Set page dimensions and add a layout grid.
Open a site, and choose File > New Page. (For information about creating a site, see
“Creating a site” on page 46.) Choose 720 from the menu at the bottom right of the
document window to display the current page at 720 pixels wide, the standard width for
17-inch monitors. Drag the Layout Grid icon from the Basic set of the Objects palette to
the page. Type 720 in the Width text box in the Layout Grid Inspector to match the layout
grid to the width of the page.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

Setting a default page size helps prevent you from adding objects, such as large graphic
banners, that are too wide to display on a standard page. Layout grids let you create tablebased designs without having to deal with rows, cells, and columns. Layout grids automatically lengthen to accommodate the objects you place on them.

2. Add a background color to the page.
Click the Show Page Properties icon in the upper right corner of the document window. In
the Page tab of the Page Inspector, select Background Color and click the lower right
corner of the color field. Choose a background color for your page from the list of
swatches that appear.
You can apply a color or an image to the background of your page to visually enhance it.
Although colors that you choose for page backgrounds override the default colors used
by most Web browsers, viewers can change browser preferences to override your page
background colors. You can also select an image for the page background, but keep in
mind that Web browsers treat the image as a tile and repeat it to cover the entire page.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

3. Add a text box and format the text.
Drag the Layout Text Box icon from the Basic set of the Objects palette to the layout
grid. Move the pointer over the edge of the text box until it changes into a double arrow,
and then drag until the box is the size you want. Click inside the layout text box to create
an insertion point and type some placeholder text. On the toolbar, click the Align Center
button, and then choose Header2 from the Set Paragraph Format menu.
In GoLive, you can format text in a variety of ways: use paragraph styles, such as Header 1
and Header 2, to format paragraphs; use physical styles, such as Bold and Italic, to
emphasize text; and use structural styles, such as Emphasis and Strong, to both emphasize
and classify text. (For more information about formatting text, see “About formatting
HTML text” on page 185.) You can also apply fonts, type sizes, and color to text using CSS
(cascading style sheets), which contain a set of stylistic rules that describe how HTML
documents should appear to viewers. If you need to update a CSS style, you simply edit
the style rule and all content that hosts the style will automatically reflect the new
properties. For more information about CSS, see “About cascading style sheets” on
page 212.

4. Add a pre-optimized image.
Drag an Image icon from the Basic set of the Objects palette to the layout grid. Select
the image object in the document window, and drag the pick whip in the Basic tab of
the Image Inspector to a GIF or JPEG file in the site window. You’ve successfully made the
connection when the line from the pick whip connects with and highlights the filename in
the site window. Don’t worry if you don’t have a GIF or JPEG file in your site: you can link an
image file to the image object in the document window at any time.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

The standard image formats for the Web are GIF and JPEG. GIF images are typically used
for line art, and JPEGs are typically used for photographs and other images with more than
256 colors. For information about choosing an image format, see “Choosing a format for
optimized images” on page 237,

5. Save the file as a page template.
Choose Save As > Save As Template from the document window menu in the upper right
corner of the document window. Type a name for the template in the Save As dialog box,
and click Save.
Page templates are predesigned page layouts that you can use as the basis for new pages.
When you update a template, you automatically update all pages based on that template.
For more information about templates, see “Using page templates” on page 305.

Create and manage links
In this tutorial you’ll create navigational links from which viewers can jump to other pages
in your site (internal links) or to other sites on the Web (external links).
Adobe GoLive’s powerful site management features make it easy to maintain links
between pages, and because GoLive collects and updates URLs in the External tab of the
site window, you can quickly create links across the Web.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

1. Create an internal link.
Open a GoLive site, and then open the page that you want to serve as the source of the
link. Select a short block of text and click the Create Link button
in the toolbar. In the
Text Inspector, drag the pick whip to the destination page in the site window.
You can also create internal links by using the Inspector’s Browse button to locate a
page, or by typing the relative path to the page in the Inspector’s URL text box. It’s best,
however, to use the pick whip when creating links to avoid mistakenly linking to pages
outside of the site’s web-content folder.

2. Test the link.
Click the Preview in Browser button
in the toolbar to preview the page containing the
link in your Web browser. Click the link and make sure that the destination page appears in
the browser window.
3. Update the internal link.
With the Files tab of the site window active, click the Create New Folder button in the
toolbar. Drag the link’s destination page into the new folder. GoLive displays the Move
Files dialog box, which lists the page that serves as the source of the link, and prompts you
to update the file. Click OK.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

GoLive updates links in your site when you move or rename files in the site window. To
avoid broken links in your site, perform all such site management tasks in the GoLive site
window, not directly in your site’s web-content folder in Windows Explorer or the Mac OS
Finder.

4. Add a URL to the External tab of the site window.
Drag the URL icon from the Site set of the Objects palette to the External tab of the site
window. Rename the untitled URL Adobe URL. Type http://www.adobe.com in the URL
text box of the Reference Inspector.
The External tab of the site window contains URLs and e-mail addresses. Storing a URL in
the External tab is useful when you want to use the URL on more than one page in your
site. If you later need to update a URL in the External tab, GoLive automatically updates it
wherever it appears in the site.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

5. Create an external link.
Open the page that you want to serve as the source of the link. Select a short block of text,
and click the Create Link button in the toolbar. In the Text Inspector, drag from the pick
whip to the Adobe URL in the External tab of the site window.

6. Test the link.
Click the Preview in Browser button in the toolbar to preview the page containing the link
in your Web browser. Click the link and make sure that the Adobe Web site appears in the
browser window.
7. Update the external link.
Select the Adobe URL in the External tab of the site window. Type http://
www.adobe.com/products/golive/ main.html in the URL text box of the Reference
Inspector, and then press Enter (Windows) or Return (Mac OS). GoLive displays the Change
Reference dialog box, which lists the page that serves as the source of the link, and
prompts you to update the file. Click OK to update the reference.
GoLive provides other tools for updating internal and external links. For example, to edit
links sitewide, use the In & Out Links palette or the Change References dialog box (see
“Editing links and URLs sitewide” on page 124).

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

Create a print-friendly PDF version of a Web page
With GoLive’s PDF features, you can quickly view, edit, and export PDF files. This powerful
functionality lets you easily create interactive PDF forms, archive Web pages, and more.
In this tutorial, you’ll create a print-friendly version of a Web page, while retaining features
such as links and tables.

1. Preview as PDF.
In GoLive, open the Web page that you want to export to PDF, and then click the PDF
Preview tab in the document window. If you need to optimize the appearance of items
such as type or tables, click the Layout tab, make the necessary changes, and then return
to the PDF preview to see the results.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

2. Format the pages.
In the PDF Creation Inspector, click the Page tab, and set the paper size, margins, and
orientation. Then select Shrink Content to Paper Width, and click re-create PDF to see the
results.
Shrink Content to Paper Width reduces Web content so it fits on the selected paper size.

3. Optimize for printing.
To ensure that the exported PDF file works well when printed, click the Creation tab and
select Embed Fonts and Hide Backgrounds. Click re-create PDF again to see the results.
Embed Fonts includes fonts in the exported file, ensuring that text always looks as
expected. Hide Backgrounds replaces Web page backgrounds with a white background,
which adds clarity to black-and-white prints. The PDF Creation Inspector contains many
additional options, which you can use to embed multimedia files, optimize file size, and
more. For more information, see “PDF creation options” on page 351.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

4. Smooth text, line art, and images.
To smooth jagged edges in text, line art, and images, select the appropriate Smooth
options in the View palette.
Smoothing affects only on-screen appearance in Acrobat applications and is especially
effective for large type.

5. Export the PDF file.
Click the Export button in the toolbar, and save the PDF file in your site folder.
If you plan to incorporate PDF files into a site, always save them in the site folder. In that
location, you can manage PDF links with the same site management tools used for HTML
links. For more information, see “Editing links and URLs sitewide” on page 124.

6. Link to the PDF file from the Web page.
Click the Layout tab to edit the Web page, and add the text Print-friendly version in an
appropriate location. Select the text, and link it to the PDF file by using the Text Inspector.
Then save the Web page.
You’ve successfully incorporated a print-friendly PDF into your site. In the future, you can
link from a Web page to specific PDF bookmarks or pages (see “Linking files” on page 61).
You can also link from PDF files to destinations in your site and elsewhere on the Web (see
“Editing PDF link regions” on page 351).

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

Publish a site
Before visitors can view your Web site, you need to transfer it to a publish server (a server
that hosts your site files, such as an FTP server). This tutorial demonstrates how to use
GoLive to transfer your site files to a publish server for the first time. Before you start this
tutorial, contact your Internet service provider (ISP) to determine the settings you’ll need
to access the publish server, including the publish server address, the server’s protocol,
the location of your directory on the publish server, and your user name and password.
GoLive makes it easy to transfer your site to a publish server with the Publish Server tab in
the site window. Once you’ve transferred a site, updating it is easy using modified-item
uploads and synchronized uploads. GoLive takes the guesswork out of determining which
files need updating by comparing the modification dates of local files with those on the
server.

1. Configure a publish server.
Open a site and choose Edit > Server (Windows) or GoLive > Server (Mac OS). Click New in
the Edit Publish Server dialog box and type an easily recognizable nickname for your
server in the Nickname text box (this prevents confusion if you add more than one server
to the list). Choose a protocol from the Protocol menu and fill in the Server, Directory,
Username, and Password text boxes based on the publish server information you
obtained from your ISP; then click OK. Click the Site Settings button on the toolbar, and
choose Publish Server. Click Add and select the server you just configured. Click OK, and
then click OK again to add the server to the site settings.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

Once you’ve configured a publish server in GoLive, you can use it for any site. If you
change information about the publish server in the Edit Publish Server dialog box, GoLive
updates all sites that use that server.

2. Connect to the publish server.
Click the Connect to Publish Server button
Server tab in the site window to the front.

in the toolbar. GoLive brings the Publish

3. Upload a new file.
In the Files tab of the site window, select the file you want to upload and choose Site >
Publish Server > Upload Selection (don’t select the home page of the site—you’ll delete
this file later in the tutorial). GoLive uploads the file and displays it in the Publish
Server tab.
You can use the Publish Server command to upload selected files, all files in your site, or
only new files and files that have been modified locally since the last upload.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Tutorials

Back

4. Upload a modified file.
In the Files tab of the site window, select and open the file you uploaded in step 3. Make a
change to the file, and then save and close it. Click the Upload Modified Files button on
the toolbar (if the button tool tip reads Upload All or Upload Selection, click the triangle at
the lower right of the button and choose Upload Modified Command from the Change
Button To menu). In the Upload dialog box, note that the file you’ve just modified is
marked with a green arrow, meaning GoLive will upload it to the publish server. Click OK
to perform the modified-item upload.
When GoLive uploads files, it saves the modification time for the local site files and the files
on the server. When you perform a modified-item upload, GoLive compares the modification times and transfers only new files and files that have been modified locally since the
last upload.

5. Synchronize all files in the site.
In the Files tab of the site window, select the file you uploaded in step 3, and then click the
Delete Selected Item button in the toolbar. Click Yes to confirm the deletion. Click the
Synchronize with Publish Server button
on the toolbar. The Synchronize dialog box
appears and displays files on the local site and on the publish server. The file you deleted
locally is marked with a Delete icon . Click OK to delete the file from the publish server
and synchronize the site.
Synchronizing a site ensures that the local site and the site on the server match. When you
synchronize a site, you can upload files to the publish server, download them from the
server to the local site, skip files completely, or delete them. You can exclude files from
upload by setting their publish state to Never in the File Inspector (see “Assigning publish
states to files and folders” on page 133).

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Looking at the Work Area

Using Help | Contents | Index

Back

Looking at the Work Area
GoLive basics
The GoLive work area includes the site window (one for every site project), document
windows for each open Web page, and a variety of editors, toolbars, and palettes for
working with everything in your site. Windows can be stacked or tiled on your screen, and
palettes can be grouped, ungrouped, rearranged on the screen, and saved as custom
workspaces.
Dragging and dropping You can drag files around in the site window just like you drag
files on your desktop—but by dragging in the site window, GoLive continually tracks the
files and updates file references in the site accordingly. You can drag files from the site
window into an open Web page to add images, Smart Objects, site assets, or hypertext
links to the page. You can drag text and objects from one page to another, and from one
site to another.

A
B

C
D

GoLive work area
A. Toolbar B. Objects palette C. Document window D. Inspector E. Library palette F. Site window

Using the Objects palette, you can drag objects representing HTML elements to an open
page. You can drag text and objects from the page into the Snippets tab of the Library
palette for storage with the site or application.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Looking at the Work Area

Using Help | Contents | Index

Back

Using the point-and-shoot feature, you can create resource links (between object placeholders on the page and their source files) or navigational links (between the page and
other pages or URLs) by dragging from the page or the Inspector to destinations in the site
window or another open page. (See “Creating resource and navigational links” on
page 61.)
If a window is hidden behind other windows, you can drag to the Select Window
button
on the toolbar to bring the window to the front. When you drag a file or object
to a tab on a window, GoLive brings the tab to the front of the window.
Starting the application When the GoLive application starts, an Intro screen appears by
default that contains options to create a new page or a new site, open a file, or close the
Intro screen. You can deselect the option to show the screen at startup and later reselect
the option in the Preferences dialog box. (See “Setting preferences for opening pages” on
page 42.)

Working with windows, palettes, and menus
When you first start GoLive, several palettes are displayed by default in groups. You can
move palettes between groups or to their own windows, collapse them into tabs on the
side of the screen, arrange them so that multiple palettes share a single title bar, and resize
them to make better use of your work area. You can save the way palettes are displayed as
custom workspaces.
Tabs in the site window and graphical site views behave the same way as palettes; that is,
you can rearrange and organize them into new groups.
The site window (with both panes open), the Objects palette, the toolbar, and the
Inspector should always be open for building, revising, and uploading a site.

Displaying the site and document windows
You can display multiple site and document windows at a time—GoLive keeps track of the
pages with their corresponding sites—so you can easily copy things from page to page
and
site to site.
To display the document window:
Open an XHTML or HTML page, or create a new page.
To display the site window:
Open the site project file (.site).
To collapse the site window to a single pane:
Click the double-arrow button at the bottom of the window. (To expand the site
window to two panes, click the button again.)
To display the head section pane in the document window:
With the Layout tab selected, click the Toggle Head Section icon
of the document window (next to the Header label).

Using Help | Contents | Index

in the upper left corner

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Looking at the Work Area

Back

To display the source code pane in the Layout Editor:
With the Layout tab selected in the document window, click the Show/Hide Split Source
icon in the lower left corner of the window.
Note: You can also display the source code pane in the Frame Editor and Outline Editor.
To display the source code pane on the sides, top, or bottom of the Layout Editor:
Alt-click (Windows) or Option-click (Mac OS) the Show/Hide Split Source icon—each time
you click, the pane moves to a new vertical or horizontal position in the window.
To display an editor or preview:
Click a tab at the top of the document window:
•

Click the Layout Editor tab to add content to a document.

•

Click the Frame Editor tab to create a frameset and lay out frames that display individual
Web pages.

•

Click the Source Code Editor tab to work directly with your document’s source code.

•

Click the Outline Editor tab to view source code in a hierarchical, structured view.

•

Click the Preview tab to preview your document and test links in GoLive.

•

Click the PDF Preview tab to export a Web page to PDF.

Displaying toolbars and rulers
The main toolbar appears below the command menus at the top of your screen. It
contains buttons and pop-up menus that change depending on what you have selected
in the work area. In addition to the main toolbar, the Source Code toolbar is available
when you work with source code in the document window.
Note: The Version Cue toolbar to the right of the main toolbar has buttons that are
available when you use Adobe Version Cue with GoLive. For more information, see
“Working with Adobe Version Cue managed projects” on page 45.
You can display horizontal and vertical rulers in the Layout Editor to help you place and
resize objects on a page with precision. When you place an object, white areas on the
rulers indicate the current position and size of the selected object. When you move the
pointer in the document window, lines in the rulers move along to indicate the current
position of the pointer.
To show or hide the layout rulers:
Choose View > Show Rulers or View > Hide Rulers.
To show or hide the main toolbar:
Choose Window > Main Toolbar. (A check mark next to Main Toolbar in the Window menu
indicates that it is showing.)
To move the main toolbar:
Drag the lower left corner. In Windows, drag the toolbar by its title bar once it’s moved
from its default position below the command menus at the top of your screen.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Looking at the Work Area

Back

To show or hide the Source Code toolbar:
Right-click (Windows) or Control-click (Mac OS) the source code in the document window
and choose View > Toolbar from the context menu.

Using context menus
GoLive contains a number of context-sensitive menus that display commands relating to
the active window or selection. You can use these context menus as a quick way to choose
commonly used commands.
To use a context menu:
1 Position the pointer over the active window or selection.
2 Do one of the following:
•

In Windows, click with the right mouse button.

•

In Mac OS, hold down the Control key and click.

Context menu for selected file

Displaying palettes
GoLive palettes are listed in the Window menu. A check mark next to the palette’s name
indicates that the palette is showing at the front of its group.
To show a palette and any palettes in its group:
Choose the palette’s name from the Window menu. (To hide the palette and its group,
choose the name again from the Window menu.)
To bring a palette to the front of its group:
Do one of the following:
•

Click the palette’s name in the group.

•

Choose the palette’s name from the Window menu.

To hide all palettes:
Choose Window > Workspace > Hide Palettes.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Looking at the Work Area

Using Help | Contents | Index

Back

To return palettes to their default sizes and positions:
Choose Window > Workspace > Default Workspace.
Note: The Default Workspace command restores only the default palettes (the Inspector
and the Objects, Color, Swatches, CSS, Layers, Table, Library, and View palettes). GoLive
will close any other open palettes.
To display the Objects palette horizontally:
In the Objects palette, click the Toggle Orientation button
return the palette to vertical orientation.

. Click the button again to

Note: When the Objects palette is displayed vertically, its palette menu is in the lower right
corner, next to the Toggle Orientation button.

Rearranging palettes or tabs
All palettes can be moved from one group to another, rearranged within their group, or
separated into windows of their own. In addition, you can move and separate the tabs in
the site window, navigation view, and links view.
You can dock palettes so that multiple palettes share a single title bar. You can collapse
and expand docked palettes.

GoLive palettes
A. Grouped palettes B. Docked palettes C. Collapsed palettes

To move a palette or tab between groups:
Do one of the following:
•

Drag the palette’s name in a group to another group.

•

Drag the tab’s name from one pane to another in the site window or from the site
window to a graphical site view window (navigation or links view).

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Looking at the Work Area

Using Help | Contents | Index

•

Back

Drag the Navigation tab or the Links tab to a pane in the site window.

Note: You can move the Objects palette into another group only when it is displayed
horizontally.
To move a group of palettes or tabs:
Drag the title bar of the group window.
To dock palettes:
Drag the palette’s tab to the bottom of another palette until the bottom of the target
palette is highlighted.
Note: You can dock the Objects palette only when it is displayed horizontally.
To move a docked group of palettes:
Drag the group’s title bar.
To move a palette or tab so that it appears in its own window:
Drag the palette’s name or tab’s name away from the group or site window.
To bring a tab to the front of its group in the site window:
Do one of the following:
•

Click the tab.

•

Choose the tab from the site window’s menu.

•

Drag an appropriate item to the tab, pause while the body of the tab comes to the front,
and then continue dragging into the body itself. (For example, drag formatted text to
the Fonts tab, pause, and continue dragging into the body of the tab.)

Pausing with the pointer on the Font Sets tab brings the body of the tab to the front.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Looking at the Work Area

Using Help | Contents | Index

Back

To rearrange palettes and tabs within a group:
Drag the palette or tab name to a new position. (For example, drag a palette to the right of
another palette in its group, or drag a tab in the site window to the left of another tab in its
group.)

Collapsing palettes into side tabs
You can collapse palettes into tabs on the side of the screen to optimize desktop space,
and then quickly slide them open by clicking the tabs. Clicking the tab again collapses the
palette.
Note: You can collapse the Objects palette into a side tab only when it is displayed
horizontally.
To collapse a palette into side tabs:
Select the palette’s name and drag it to the left or right side of your computer screen.
Note: In Mac OS, you cannot drag the palette to the side of the screen that contains
the Dock.
To slide open or close the collapsed palette:
Click the side tab.
To separate the collapsed palette from the screen edge:
Drag the tab out to the center of your screen or into a palette group.
To collapse multiple palettes into a side tab:
Collapse a palette, and then drag another palette’s tab over the tab of the collapsed
palette on the edge of the screen.
To adjust the size of a collapsed palette:
Drag the bottom of the palette up or down.

Using palette and window menus
GoLive palettes and windows include a menu in the upper right corner that displays
options specific to the palette or window. For example, the Color palette menu contains
options that correspond to the color set buttons across the top of the palette. (See “Using
the Color palette” on page 67.)
To use a palette or window menu:
Click the triangle in the upper right corner of the palette or window, and choose an
option from the menu that appears.

Arranging windows and editors
You can arrange document windows, site windows, graphical site view windows, and
editors horizontally, vertically, or in cascading order. GoLive fits the windows and editors
side by side on the screen (starting new rows or columns as necessary) or stacks them on
top of each other with just their edges showing.
To tile or stack all open windows or editors on the screen:
Choose Tile Horizontally, Tile Vertically, or Cascade from the Window > Cascade and
Tile menu.
Using Help | Contents | Index

Back

Adobe GoLive CS Help

Looking at the Work Area

Using Help | Contents | Index

Back

Switching between windows or editors
GoLive provides several methods to switch between multiple document windows, site
windows, site design windows, and editors open on your desktop.
To switch to an open window or editor:
Do one of the following:
•

Click the desired window or editor to select it.

•

Choose the desired window or editor from the bottom of the Window menu.

•

Click the Select Window button
on the toolbar to toggle between the foremost
window or editor and the site window.

•

Choose the desired window or editor from the Select Window button’s pop-up menu
on the toolbar.

B
C

Different states of the Select Window button
A. Click to return to document window.
B. Click to return to site window.
C. Press and hold to display a list of open windows or editors.
•

When you’re creating a reference link, drag the pick whip to the Select Window
button on the toolbar to open the pop-up menu and bring a window to the front, and
then continue to drag to the destination in the window. (See “Specifying the destination URL for a link” on page 62.)

If a window or editor is off-screen and not visible (for example, if you changed your
monitor’s resolution or dragged the window or editor off the screen edge), choose
Window > Cascade to return the window or editor to view.

Saving custom workspaces
You can save the current sizes and positions of palettes on the screen as custom
workspaces. This is useful for working on different types of pages, such as regular Web
pages or pages with Cascading Style Sheets, which require different palettes to be visible.
The names of workspaces appear in a Workspace submenu of the Window menu. You can
edit the list of names by adding, renaming, or deleting a workspace.
To save a custom workspace:
1 Open, close, resize, and arrange the palettes as desired on the screen.
2 Choose Window > Workspace > Save Workspace.
3 Do one of the following:
•

Type a name for a new workspace in the text box.

•

Choose the name of an existing workspace to replace from the pop-up menu.

4 Click OK.
Using Help | Contents | Index

Back

Adobe GoLive CS Help

Looking at the Work Area

Using Help | Contents | Index

Back

To use your custom workspace:
Choose it from the Window > Workspace submenu.
To edit the list of custom workspaces:
1 Choose Window > Workspace > Manage Workspaces.
2 Select a name in the list of workspaces and do any of the following:
•

Click the New Workspace button

to add a new workspace.

•

Type a new name in the text box and press Enter or Return.

•

Click the Remove Selected Workspaces button

to remove the selected name.

3 Click OK.

Reverting and restoring changes to pages
When designing your Web page, you can use the History palette or menu commands to
revert to a previous state of a page or site. The History palette records the changes that
you make to a page in the Layout Editor or Source Code Editor and changes you make to
files in the site window. Each time that you make a change, the new state of the page or
site is added to the History palette. You can revert to a previous state of the page or site by
selecting any state in the History palette. Once you’ve reverted to a previous state, you can
restore changes that you made to that state by choosing a newer state in the History
palette.

Using the History palette
You can set the maximum number of states that the History palette displays for a page or
site (20 states by default). When you switch between open documents or site windows,
the contents of the History palette adjust accordingly. However, the content is cleared and
you lose the information when you click a different tab in the document window.
To use the History palette:
1 Choose Window > History.
The History palette lists the previous states of the document, with the oldest state at the
top of the list and the newest state at the bottom.
2 In the History palette, click the state of the document to which you want to revert.
3 To restore the changes that you made to that document state, choose a newer state in
the History palette. (The newer states of the document are dimmed.)
In Mac OS, press Shift+Command+Z to restore the changes that you made to a
document state incrementally.
To set the maximum number of states listed in the History palette:
In the History palette, choose History Options from the palette menu, enter a number
between 1 and 1600 in the Maximum History States text box, and click OK.
To clear the History palette of all states:
In the History palette, choose Clear History from the palette menu.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Looking at the Work Area

Using Help | Contents | Index

Back

Using the Undo, Redo, and Revert to Saved commands
As an alternative to using the History palette, you can undo or redo a change that you’ve
made to a page using the Undo and Redo commands. Some palette menus contain the
Undo and Redo commands, such as the HTML Styles palette menu. You can also undo all
changes by reverting to the state of your page when you last saved it.
To use the Undo, Redo, and Revert to Saved commands:
1 To undo an action, do one of the following:
•

Choose Edit > Undo. The menu command describes the last action you performed. Each
time you choose the command from the menu and undo the action, the description
changes to match what has now become the last action you performed. When no
actions remain, the menu command is dimmed.

•

Choose Undo from the palette menu.

2 To redo the action, do one of the following:
•

Choose Edit > Redo. The menu command describes the last action that you can redo.
Each time you choose the command from the menu and redo the action, the
description changes to match what has now become the last action you can redo.
When all of the actions are redone, the menu command is dimmed.

•

Choose Redo from the palette menu.

3 To revert to the way the page was when you last saved it, choose File > Revert to Saved.

Previewing files
You can preview your Web pages and test your links directly in GoLive. You can also
preview QuickTime movies, animated GIFs, or any other plug-in media items that GoLive
supports. Using the Live Rendering window, you can preview changes you make in the
Layout Editor on the fly. Layout preview approximates what your page looks like when it’s
finally published on the Web.
You can also preview PDF files you create or open in GoLive. (See “Exporting Web
pages to PDF” on page 349.)
In addition to previewing your page in GoLive, you should always preview it using a
variety of browsers, browser versions, and platforms. You’ll need to use browsers to
determine potential browser differences and to preview JavaScript, DHTML, or other items
for which GoLive doesn’t provide native support. If desired, you can start a browser such as
Safari, Opera, Netscape Navigator, or Microsoft Internet Explorer, from within GoLive by
first adding it to the Preview in Browser menu in the toolbar.
You can also view a browser simulation of your page in the Layout Editor by choosing
the profile of a specific Web browser in the View palette. (See “Setting view options for
page layout” on page 55.)
To preview your page in Layout Preview:
1 Make sure that Preview Mode is activated in the Modules Preferences: Choose Edit >
Preferences (Windows) or GoLive > Preferences (Mac OS), select Modules in the left pane
of the Preferences dialog box, select Preview Module in the right pane, and click OK.)
2 Click the Preview tab in the document window.
Using Help | Contents | Index

Back

Adobe GoLive CS Help

Looking at the Work Area

Using Help | Contents | Index

Back

3 To check your page layout, scroll the document window. To test your links, click all of
the hot spots on your page. GoLive opens each referenced page in either the Preview
pane or in its own window.
Note: To use Layout Preview in Adobe GoLive for Windows, you need Microsoft Internet
Explorer installed on your computer.
To preview your page in Live Rendering:
1 Do one of the following:
•

Open the page you want to preview and choose File > Preview In > Live Rendering.

•

Choose File > Preview In > Live Rendering, and use the pick whip
button to open a page.

•

Choose File > Preview In > Live Rendering, choose Load from the Live Rendering
window menu, and then select a page in the Choose File to Render dialog box.

or click the Browse

Changes you make in the Layout Editor are reflected in the Live Rendering window after
you click in the Live Rendering window. If you have multiple document windows open,
the Live Rendering window previews the currently selected document.
To set Live Rendering window options:
Choose one of the following from the Live Rendering window menu:
•

Choose Load to open a file from the Choose File to Render dialog box.

•

Choose Reload to reflect changes you’ve made in the Layout Editor (use this option if
you’ve deselected Auto Update).

•

Choose Auto Update to ensure that the Live Rendering window displays changes you
make in the Layout Editor when you click in the Live Rendering window (this option is
selected by default). If Auto Update isn’t selected, you’ll need to choose Reload after
you make a change in the Layout Editor.

•

Choose Bound to bind the Live Rendering window to a specific document: select the
open document you want to preview, and then choose Bound from the Live Rendering
window menu.

To set up preferences for previewing in browsers:
1 Make sure that each browser is installed on your hard disk and that all plug-ins you
need for previewing are placed in the browser’s Plug-ins folder (or any other location your
browser uses for multimedia extensions).
2 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), and click the
Browsers icon in the left pane of the Preferences dialog box.
3 Do one of the following:
•

To add all browsers on your hard disk to the browser list, click Find All.

•

To add a single browser, click Add. Then select the browser, and click Open (Windows),
or click Add and then click Done (Mac OS).

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Looking at the Work Area

Back

4 Select one or more browsers in the scrolling window that you want to be started when
you click the Preview in Browser button
on the toolbar or choose File > Preview In >
Default Browser.
Note: Most browsers only allow you to open one version at a time. For example, you can
open Netscape Navigator and Microsoft Internet Explorer at the same time, but not
Netscape Navigator 4.0 and 7.0.
When two or more types of browsers are selected in the Browsers preferences, such as
Navigator and Internet Explorer, a generic browser icon appears on the toolbar. When
only a single type of browser is selected, such as Navigator 4.0, the program icon of that
browser appears on the toolbar.
5 To delete a browser from the scrolling window, select it and click Remove.
6 Click OK.
To preview your page in a browser:
Do one of the following:
•

To preview the page in the browser or browsers that you have selected in the Browsers
preferences, click the Preview in Browser button
on the toolbar, or choose File >
Preview In > Default Browser.

•

To preview the page in a single browser that you’ve set up in the Browsers preferences,
choose the browser from the Preview in Browser menu on the toolbar. Or, choose a
browser from the File > Preview In submenu.

Preview in Browser button and pop-up menu

Getting information about documents
The Document Statistics dialog box displays information about Web pages, while the File
Info command provides metadata about a file—when, how, and by whom it was created.
The File Info command works only on non-HTML files, such as files in PDF and JPEG
formats.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Looking at the Work Area

Back

Using the Document Statistics dialog box
You can use the Document Statistics dialog box to view general information about your
Web page, including its byte size, word count, character count, and the approximate time
it takes to download. Note that the byte sizes listed don’t include media, such as
QuickTime or sound (because they may be set to start playing before they are fully
downloaded). In addition, the download times listed are only rough estimates based on a
well-defined set of circumstances. External conditions, such as heavy traffic on the
network and Web server overload, may substantially change the real time it takes to
download the page.
You can create a query for more detailed information, such as the download time for
everything that makes up the page (images, QuickTime movies, and so on.). (See
“Generating queries” on page 129.)
To view information for the current page:
Choose Special > Document Statistics. When you have finished viewing the document
information, click OK.

Adding metadata to documents
File information—also called metadata—is increasingly important in all types of
publishing. Metadata preserves information about the contents, copyright status, origin,
and history of documents, and can be used to search for files.
You can add file information to any site file, except HTML files. The information you add is
embedded in the file using XMP (eXtensible Metadata Platform). XMP facilitates the
exchange of metadata between Adobe applications and across publishing workflows. For
example, you can save metadata from one file as a template, and then import the
metadata into other files.
Companies can use the XMP Software Development Kit to customize the creation,
processing, and interchange of metadata. For example, the XMP SDK can be used to
add fields to the File Info dialog box. More information on XMP and the XMP SDK is
available on the Adobe Solutions Network.
To add metadata to a document:
1 Choose File > File Info.
2 Select a category from the list on the left side of the dialog box, enter the desired information, and click OK.
•

Description to specify information about the document, such as title, author,
description, and keywords that can be used to search for the document. To specify
copyright information, select Copyrighted from the Copyright Status menu. Then enter
the copyright notice string and the URL of the person or company who owns the
copyright.

•

Origin to provide information on the history of the artwork. To enter the current date in
a short text format, click Today. For Credit, enter the information needed in the credit
line for a copyrighted image. Transmission Reference provides the Associated Press
with information on the original transmission location of the artwork. For Urgency,
specify the editorial urgency of the file—not its handling priority.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Looking at the Work Area

Using Help | Contents | Index

•

Advanced to view the XMP data for the file in a structured format.

•

Raw Data to view the raw XMP data for the file.

Back

To save metadata as a template:
1 Click the triangle icon at the top of the File Info dialog box, and choose Save
Metadata Template.
2 Enter a template name, and click Save.
To save metadata to an XMP file:
1 In the Advanced section of the File Info dialog box, click Save.
2 Type a filename, choose a location for the file, and click Save.
To import metadata into a document:
Do one of the following:
•

Click the triangle icon at the top of the File Info dialog box, and choose a template name
from the top section of the pop-up menu. The metadata from the template will replace
the current metadata. To append the current metadata instead, hold down Ctrl
(Windows) or Command (Mac OS) when you choose the template name.

Note: You must save a metadata template before you can import metadata
from a template.
•

In the Advanced section of the File Info dialog box, click Replace to replace the current
information with information stored in an XMP file. Locate the XMP file containing the
metadata you want to import, and click Open.

•

In the Advanced section of the File Info dialog box, click Append to add information
stored in an XMP file to the current file information. For each File Info field, if the field
does not contain information then it will be updated with contents from the file.
Keywords will always be appended with the information from the file.

To delete a metadata template:
1 Click the triangle icon at the top of the File Info dialog box, and choose Delete
Metadata Template.
2 Select the name of the template you want to delete, and click Delete.
To show the location of metadata templates:
Click the triangle icon at the top of the File Info dialog box, and choose Show Templates.

Magnifying and reducing a document
You can magnify the contents of the document window to precisely place and align page
elements. Likewise, you can reduce magnification to view the overall layout of a page.
To magnify or reduce a document:
Do one of the following:
•

Click the Zoom In button or the Zoom Out button at the bottom of the document
window, or choose View > Zoom In or View > Zoom Out.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Looking at the Work Area

Using Help | Contents | Index

Back

•

Choose a magnification value from the Zoom Values menu at the bottom of the
document window, or choose a value from the View > Zoom To menu.

•

Choose Edit from the Zoom Values menu at the bottom of the document window, enter
a zoom value percentage in the Zoom To dialog box, and then click OK.

Referencing files
GoLive provides several methods for referencing, or specifying, files in the Inspector, the
CSS Editor, and various palettes. You can use any of these methods to reference items such
as link destinations, external style sheets, or source files for image placeholders.
To reference a file:
In the Inspector, CSS Editor, or palette, do one of the following:
•

Enter the path to the file in the text box.

•

Drag the pick whip

•

Click the Browse button

•

Choose a recently referenced file, an HTML file, an image, a URL, or an anchor from the
pop-up menu to the right of the Browse button.

to a file in a site.
, and then locate and select the file.

Setting preferences
Numerous program settings are stored in the GoLive preference file, located in the Application Data/Adobe/Adobe GoLive folder (Windows) and the Mac OS X/Users/[username]/
Library/Preferences folder (Mac OS). You can change most of the program settings using
the Preferences dialog box, giving you control over the way GoLive looks and behaves. For
example, you can set display options, options for importing images, options for activating
modules, options for selecting default Web browsers that you start from GoLive, and
spelling checker options.
Some application preferences that you set in the Preferences dialog box also appear in the
Site Settings dialog box (such as URL Handling options) and can be overridden by settings
you make for a specific site. (See “Specifying preferences and settings for Web sites” on
page 91.)
To set options in the Preferences dialog box:
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 Select an icon or name in the left pane of the Preferences dialog box. If needed, click the
triangle or + symbol next to the icon to display a list of names below the icon.
3 Select options in the right pane of the Preferences dialog box. To find an explanation of
a particular preferences option or set of options, refer to the index.
4 Click OK. The new settings take affect the next time you start GoLive.

Setting preferences for opening pages
You can set General preferences for automatically opening a new page when the GoLive
application starts, and you can set which tab in the document window (such as the Source
tab) is selected when the page opens.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Looking at the Work Area

Using Help | Contents | Index

Back

You can also set a preference to base new pages on an existing page or template. This is
useful when you’re setting up pages for your site. For example, you can set up a page with
the page title, margins, and background that you want for all the pages, and set a
preference to use this page whenever GoLive creates a new page. (See “Setting up pages”
on page 53.) To store the page with your site, save it as stationery. (See “Using stationery”
on page 312.)
To set General preferences for opening pages when GoLive starts or creates a
new page:
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 Select General in the left pane of the Preferences dialog box.
3 In the right pane of the Preferences dialog box, choose one of the following options
from the At Launch menu to customize the behavior of GoLive when it starts:
•

Create New Page to create and open a new untitled document.

•

Show Welcome Screen to prompt you to create a new page or site, or to open an
existing file.

•

Do Nothing to start GoLive without creating a new document or displaying the
Intro screen.

4 To specify the document window tab in which a page opens, choose it from the Default
Mode pop-up menu.
5 To use an existing file as the basis for new pages that you create in GoLive, select New
Page Template, click the Select button, and select the file. If you also choose Create New
Page from the At Launch menu, GoLive creates a new document based on this file when
you start the application.
6 To add the meta information “” to
each file that you create or save, select Write “Generator Adobe GoLive.”
7 Click OK.

Setting user interface preferences
You can set preferences to customize the color of highlighted items, such as text that has
been formatted with a CSS style, and the size and thickness of selection borders and
handles. You can also enable GoLive to start other applications for editing the source files
of media embedded on a page. General User Interface preferences are applied to every
page that you open until you change them.
To set General preferences for the GoLive user interface:
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 Click the symbol next to General to expand the list, and select User Interface.
3 Select Launch Other Applications to Edit Media Files to enable GoLive to start a specific
editing application when you double-click an image or object on your page that’s linked
to an image or media source file, or when you open a source file in the Files tab of the
site window.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Looking at the Work Area

Using Help | Contents | Index

Back

For example, GoLive maps the filename extension .psd to the Adobe Photoshop application and starts Photoshop when you double-click an image file with that extension. The
file mappings to the editing applications are listed in the Web Settings dialog box. (See
“Using the File Mappings tab” on page 460.)
4 To modify the appearance of resize handles on selection lines, do one of the following:
•

Select 3D to add a beveled edge or 2D to add a flat edge to the selection handles.

•

To change the color of the handles, click the lower right corner of the color field and
select a color from the swatches that appear, and then click OK.

•

To change the size of the handles, choose Large, Medium, or Small from the
pop-up menu.

5 Click OK.

Setting preferences for program modules
The Modules Preferences dialog box lets you disable or enable selected modules and
extend scripts on an as-needed basis— improving the GoLive application’s launch time,
responsiveness, and overall memory requirements. By disabling unused modules, you can
reduce the program’s memory requirements to the minimum recommended 24 MB.
To activate or deactivate program modules:
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 Click the Modules icon in the left pane of the Preferences dialog box.
3 To read a description of a module, select it in the right pane and click the triangle next
to Show Item Information.
4 Click the check boxes to select or deselect modules to activate or deactivate them.
Program modules that are currently installed are checked by default.
5 Click OK.
6 Restart GoLive.

Customizing keyboard shortcuts
You can customize the GoLive set of keyboard shortcuts or a set called My Settings that is
based on the GoLive set. You can also create additional sets of keyboard shortcuts by
copying an existing set and modifying the new set.
For example, you can modify a set to include keyboard shortcuts for the Window >
Workspace > Default Workspace menu command and your other custom workspaces, and
then use the shortcuts to switch between workspaces. (See “Saving custom workspaces”
on page 35.)
Note: My Settings is an editable version of the GoLive set and can be deleted. The GoLive
set cannot be deleted.
To customize a set of keyboard shortcuts:
1 Choose Edit > Keyboard Shortcuts.
2 Do one of the following:
•

To modify an existing set of keyboard shortcuts, choose it from the Selected Set menu.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

•

Looking at the Work Area

Back

To create a new set of keyboard shortcuts, click New Set. In the New Set dialog box,
enter a name for the new set, choose an existing set that you want to use as the basis
for your new set, and click OK.

3 To change a keyboard shortcut in an editable set, select the name of a menu command
and enter a new keyboard shortcut in the Press New Shortcut text box. (If the keyboard
shortcut that you entered is currently assigned to another command, the name of the
command appears below.) Then click Assign or Replace to assign the keyboard shortcut to
the selected command.
4 Click OK.

Working with Adobe Version Cue managed projects
Adobe Version CueTM is an innovative set of features designed to increase your productivity
when you work alone or collaborate with others. Version Cue integrates design
management into your existing workflows within and across the Adobe Creative Suite
applications, including Adobe GoLive CS, Adobe Illustrator CS, Adobe InDesign CS, and
Adobe Photoshop CS.
Note: The Version Cue features are compatible only with the Adobe Version Cue
Workspace, which is available only as part of the Adobe Creative Suite.
Version Cue streamlines the following tasks while you work in the Creative Suite:
•

Creating file versions

•

Maintaining file security

•

Organizing files into private or shared projects

•

Browsing with file thumbnails, and searching file information and version comments

•

Reviewing file information, comments, and file statuses in private and shared projects
while you browse

In addition, you can use the Version Cue Workspace Administration for more
advanced tasks:
•

Duplicate, export, backup and restore projects

•

View information about projects in the workspace

•

Import files to the workspace using FTP or WebDAV

•

Delete file versions and remove file locks

•

Create project users and define their project privileges

•

Restrict access to a specific project

To view the complete Version Cue documentation, see Adobe Version Cue Help. You can
also view the Adobe Version Cue documentation as a PDF or print it by opening the
VersionCueHelp.pdf file located on the Adobe Creative Suite CD and the Adobe GoLive CD.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Setting up Sites and Pages

Using Help | Contents | Index

Back

Setting up Sites and Pages
Creating a site
You use the GoLive site wizard to create blank sites, sites based on templates, and sites
based on imported files from other folders or Web sites. To work with sites that were
created in older versions of GoLive (4.0 or earlier) or other Web authoring applications, you
can import them into a new GoLive CS site.
You can use the site wizard to create a single user site (a site on your local computer) or a
Version Cue project site (a workgroup site managed by the Adobe Version Cue Workspace).
For information about Version Cue projects, see “Working with Adobe Version Cue
managed projects” on page 45.

About GoLive sites
When you use the site wizard to create a single user Web site, GoLive creates a site project
file (with the .site filename extension) to manage and control the site contents. GoLive also
creates three folders to hold the Web pages, media files, and other resource files needed
for building and maintaining the site. When you create a blank site, GoLive creates a blank
index.html page and a project folder that contains everything, including the three site
folders and the site project file.
If you name the new site Mysite, the site project file is named Mysite.site. The project folder
is named Mysite and contains the site project file and three folders:
•

The web-content folder contains Web pages, image files, external cascading style sheets,
and other source files on the server.

•

The web-data folder contains reusable GoLive site assets, such as components and page
template files.

•

The web-settings folder stores settings you make in the site window and the Site
Settings dialog box. (See “Specifying preferences and settings for Web sites” on
page 91.)

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Setting up Sites and Pages

Back

The site project file and contents of the web-data and web-settings folders are not
uploaded when you upload the site to the Web server.

A
B
C
D

GoLive site named “Mysite”
A. Project folder B. Site project file C. Web-content folder
D. Web-data folder E. Web-settings folder

Whether you create the site in Windows or Mac OS, the site project file you create can be
opened and used on both platforms.

Creating a single user site
To create a site on your local computer using the site wizard, you create a single user site.
Based on the name you specify for the new site, GoLive creates the site project file, a site
project folder, and folders for the site’s web-content, web-data, and web-settings files.
To create a single user site:
1 Choose File > New Site to open the site wizard.
2 Select Single User and click Next.
3 Do one of the following:
•

Select Blank Site to create a project folder, a site project file, a web-content folder
containing a blank home page named index.html, a web-data folder containing empty
subfolders for resource files, and a web-settings folder.

•

Select Import from Folder to create a new site based on a folder of existing files on your
computer. GoLive uses the folder of existing files as the basis for the new site’s webcontent folder, and adds new folders for the site’s web-data and web-settings files. You
are given the opportunity to specify a location for the site project file, name it (which
should always have the .site filename extension), and create a folder to put it in.

Note: Because GoLive uses the folder of existing files as the basis for the new site, you may
want to make a copy to import rather than use the original folder and its contents.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Setting up Sites and Pages

Back

•

Select Import from Server to create a new site based on a copy of a site downloaded
from an FTP or HTTP server. (See “Importing sites from remote servers” on page 48.)

•

Select Copy from Template to create a new site based on a site template that you
created. (See “Using site templates” on page 321.)

4 Click Next and follow the instructions in the site wizard.

Using sites from previous versions of GoLive
If you used Adobe GoLive 5.0 or 6.0 to create a site, you can open and save the site as a
GoLive CS site. If you used Adobe GoLive 4.0 to create a site, you can import it, and then
save it as a new GoLive CS site.
To open a GoLive 5.0 or 6.0 site:
Open the site in GoLive CS. GoLive automatically updates it to a GoLive CS site, creating a
CS site project file, and backs up the site file.
Note: If you want to archive the entire previous site, not just its site project file, copy it,
archive the copy, and then open the site project file of the original.
To open a GoLive 4.0 site:
1 Choose File > New Site to open the site wizard.
2 Select Single User and click Next.
3 Select Import from Folder.
4 Click Next and follow the instructions in the site wizard.

Importing sites from remote servers
Using the site wizard, you can create GoLive sites based on other sites imported from FTP
or HTTP servers. To import sites from a remote server, you must create a single user site
and download the files to your local hard disk. Once you’ve imported a remote site, you
can create a site locator file that contains the login and character encoding information
necessary to create the site.

Accessing login information
To create sites based on files imported from an FTP server, you need valid account information to log on to the server—this includes the name of the server, and your FTP user
name and password. The site wizard gives you the opportunity to change the port
number and to use passive mode if the site is protected by a firewall. To create sites by
importing sites from HTTP servers, you only need access set up to the Internet and a
valid home page URL. See your Internet service provider or system administrator for
login information.

Using advanced URL handling options
If you know the type of character encoding that a site uses for its URLs, you can specify it in
the site wizard before the site is imported. Unicode’s UTF16 and UTF8 encodings cover all
major languages and platforms. % HH Escaping uses hexadecimal encoding notations for
character escaping in URLs (for example, %20 is used to escape spaces, which are not
allowed in URLs). You can also check for case sensitivity in URLs.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Setting up Sites and Pages

Back

These advanced URL handling options remain in effect for the new site. After you create
the site, you can change the URL character encoding (but not the URL case sensitive
checking) for the new site in the Site Settings dialog box. To comply with W3C standards,
you should select both URL encoding options. (See “Specifying preferences and settings
for Web sites” on page 91.)

Importing a site from an HTTP server
Using the site wizard, you can import an entire Web site into GoLive including every linked
page that branches out to multiple HTTP servers and every source file (such as images)
referenced by the pages. Because large sites can take a long time to download, you can
restrict the number of page levels in the page-link hierarchy to import.
In addition to the number of page levels, you can select Only Get Pages Under Same Path
to download only the pages that are located in the same folder (or a subfolder) that
contains the home page URL, and Stay on Same Server to download only those pages that
are on the same server as the home page URL. However, whether you select Stay on Same
Server or not, GoLive downloads from other servers any source files referenced by the
pages it downloads.
GoLive imports only the pages on the levels you specify and the source files for images
and other objects on those pages. GoLive converts any remaining page links that go to
other levels into external URLs and lists them in the External tab of the site window. After
you create the site, you can individually download the pages from these external URLs by
choosing Download from a URL’s context menu.

Downloading pages from external links
You can download a page and its source files from an external link. GoLive downloads the
page and the referenced source files (such as images) to the Files tab in the site window.
For information on other ways to download files from a server, see “Downloading a Web
page” on page 333.
To download a page from an external link:
Right-click (Windows) or Control-click (Mac OS) the external link in the External tab in the
site window or in the In & Out Links palette and choose Download from the context menu.

Importing a site from a site locator file
A site locator file describes the location of a site on a remote server and enables you to
quickly import remote sites. It contains all the login and character encoding information
necessary to create the site.
To export a site locator file:
1 Open the site you want to copy.
2 Choose File > Export > Site Locator.
3 Choose a name and location for the site locator file in the Save Site Locator File dialog
box, and then click Save.
To create a site by importing a site locator file:
1 Connect to the Internet.
2 Choose File > Import > New Site from Site Locator.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Setting up Sites and Pages

Back

3 Select the site locator file in the Load Site Locator File dialog box, and then click Open.
4 Specify a destination folder for the site files in the Browse for Folder dialog box, and
then click OK.
5 Select files to be downloaded from the server in the Download dialog box, and click OK.

Adding files to a site
You can add Web pages, image files, and other media or resource files to your site and
GoLive keeps track of them in the site window. By dragging existing files from the desktop
(such as Windows Explorer or the Mac OS Finder) into the site window, you can add copies
of the files to the site without moving the original files. Using the site window to add files
to your site is important so GoLive can maintain all the links to pages, resource files, and
site assets.

Creating a new page as part of a site
You can choose File > New Page to create a new Web page that is not related to your site
until you save it in your site. When the site window is open, you can use a variety of
methods to create a new page that is automatically a part of your site.
When you create a new page, GoLive creates an untitled.html file and displays it in the
Layout Editor of the document window.
You can set a GoLive preference to automatically create a new page when the application is started and display it in the editor or preview mode of your choice. (See
“Setting preferences for opening pages” on page 42.)
To create a new page as part of a site:
Do one of the following:
•

Select the Files tab or Extras tab in the site window and if desired, select a folder listed in
the tab. Then choose Site > New > Page. The new page is added to the bottom of the
list in the tab or in the folder you selected. You can also select a page in the Files tab in
the site window and choose Edit > Duplicate to create a copy of the existing page.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

•

Setting up Sites and Pages

Back

With the site window open, choose File > New Page, and then choose File > Save As. In
the Save As dialog box, name the page, choose Root from the Site Folder menu, and
click Save. The new page is added to the contents of the site’s root folder, which appears
in the Files tab of the site window.

Saving a page in the site’s root folder

Note: The site window must be open, but not necessarily selected, before the Site Folder
menu will appear in the Save As dialog box.
•

Drag a generic page icon from the Site set in the Objects palette into the Files tab or
Extras tab of the site window or next to another page in navigation view.

Creating special documents
Using GoLive, you can create documents in a variety of special formats, including XHTML,
QuickTime, Real, and SMIL. You can create a new HTML document based on a page
template or stationery that you’ve set up for the site, or create a text document, cascading
style sheet, or JavaScript file. For information about creating QuickTime, Real, and SMIL
documents, see the Adobe GoLive CS Multimedia Authoring Guide on the Adobe Web site.
Note: When you create a special HTML document, XHTML document, MMS document,
WML Deck, or SMIL document, GoLive automatically adds a doctype declaration to the
source code with a reference to the appropriate Document Type Definition (DTD). (See
“Setting the doctype of a document” on page 383.)
To create a document in a special format:
Choose a format from the File > New Special menu. A special document window or dialog
box opens depending on the format you choose. Consult the index for more information
about special document formats.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Setting up Sites and Pages

Using Help | Contents | Index

Back

Adding existing files
To add files from other locations to your site, you can manually move the files into the site
folder on the desktop and update the site window, or you can import or drag the files into
the Files tab in the site window to have GoLive make a copy of them in the site folder and
leave the original files untouched.
Note: When you create a new page, GoLive automatically adds a meta element that
defines the character encoding for text to the head section of the page. If a page does not
contain the element, GoLive displays a dialog box when you open the page so that you
can temporarily use a default encoding or set the character encoding for the page.
To add an existing file to a site:
Do one of the following:
•

Drag the file from your desktop into the Files tab in the site window.

•

Move the file into the site’s root folder on your desktop. Then select the site window and
click the Refresh View button in the toolbar.

•

Select the Files tab in the site window. Then choose File > Import > Files to Site. In the
dialog box, locate and select the desired file, click Add, and click Done. If prompted,
click OK to copy the file and update the site.

For information on importing files as a new GoLive site, see “Creating a site” on page 46.

Unlocking locally locked files
You can use GoLive to unlock files that were locked in the Mac OS Finder or given a Read
Only attribute in the Windows Properties dialog box. If you import a site with locally
locked files, you’ll need to unlock them before you can edit them. If the files are hidden in
Windows Explorer, you need to show them before you can edit them.
Local file locking applies only to the platform where it is applied. For example, if you create
a site in Mac OS and lock its HTML files, the files will not be locked when you upload the
site to a UNIX or Windows server.
Local file locking does not apply to files on a WebDAV server.
To unlock a locked or read-only file:
1 Select the file in the site window.
Note: You can unlock a file with this method only if it shows a padlock in the Locked
column of the Files tab. The padlock indicates that it has been locked in Mac OS or made
read-only in Windows.
2 Click the Show Information in Explorer (Windows) or Show Information in Finder
(Mac OS) button on the toolbar.
3 Do one of the following:
•

In Windows, deselect Read-only and click OK.

•

In Mac OS, deselect Lock and close the Get Info window.

4 Click the Refresh View button

Using Help | Contents | Index

on the toolbar.

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Setting up Sites and Pages

Back

Setting up pages
Before or after you lay out text and objects on your Web pages, you can set up titles,
margins, and backgrounds for pages, and a window size that you want your page layouts
to fit within. You can add hidden instructions for Web browsers about each document by
dragging elements and scripts into the head sections (for example, keywords that are
used by search engines to find your page).
As you work in the document window, you can set options in the View palette to show or
hide certain screen elements that are hidden on pages in the browser, such as line break
symbols and comments. You can also use the View palette to set up a profile for
previewing a browser simulation of the page layout on a different platform.
Once your page is set up, you can use it as the starting point for other new pages by saving
it as stationery or a page template. (See “About site assets” on page 304.)

Changing the page title
When you create a new blank page (a new HTML or XHTML document), it is automatically
given a title—“Untitled Page.” Web browsers display page titles in their title bar and use
the titles to label a viewer’s bookmarks or favorites. Web browsers and Internet search
engines use these titles, along with keywords, to identify content in your pages. (For information on adding keywords to a page, see “About head section elements” on page 56.)
You can set a preference to display a reminder for changing the page title whenever you
save a page.
When you’re looking at your pages in navigation view or links view, you can select an
option in the Display tab in the View palette to view them either by page title or by
filename. (See “Changing the display of the view” on page 117.)
To change the page title:
Do one of the following:
•

Select the default page title Untitled Page in the Title section of the document window,
and type your new title.

•

Click the Show Page Properties icon in the upper right corner of the document window
and enter the new title in the Page tab of the Page Inspector.

•

Select the page in the Files tab of the site window, navigation view, or links view, and
enter the new title in the Page tab of the File Inspector.

You can create a custom page title on a blank page and set a preference to use that
page for creating new pages. (See “Setting preferences for opening pages” on
page 42.)
To add a reminder to change the title for new pages:
Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), select Modules on
the left side of the Preferences dialog box, scroll down to Extend Scripts on the right side,
select SetTitle, and click OK. Then restart the GoLive application. When you save a page,
GoLive automatically displays the Set Title dialog box if the page title is blank or contains
the words “Welcome to Adobe GoLive,”“Welcome to GoLive CyberStudio,” or “untitled.”

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Setting up Sites and Pages

Using Help | Contents | Index

Back

Choosing a document window size
You can choose a size for the document window to use as a guide when you’re designing
your page layout. You can choose a size for the document window in the Layout Editor or
the View as PDF Editor. For example, although many monitors have a visible display area
greater than 640 pixels, you may want to set the size of your page layout to 580 pixels or
less to accommodate viewers with 14-inch monitors, or viewers that don’t like the browser
to fill the entire screen.
The document window size is only a tool for designing the page layout—the size you
choose does not affect the size of the browser window that displays the page.
To choose a size for document windows:
Do one of the following:
•

For the open document window, choose a size from the pop-up menu in the lower right
corner of the document window.

•

To set a default size for all document windows, first set the open document window to
the size you want all document windows to be by default, and then choose Settings
from the pop-up menu in the lower right corner of the document window. Select
Markup Document Windows, and click OK.

•

To add a size to the pop-up menu in the lower right corner of the document window,
choose Options from the pop-up menu and click the Create New Window Configuration button. Enter a width, height, and annotation in the text boxes in the Window
Size Configuration dialog box, and then click OK. To remove a size from the pop-up
menu, select it in the Window Size Configuration dialog box, click the Remove Selected
Window Configurations button, and then click OK.

Specifying page margins
You can control how the contents of a Web page are offset in browser windows by specifying page margins. Using the Page Inspector, you can specify the margin width (the space
between the page’s content and the left edge of the Web browser window) and the
margin height (the space between the page’s content and the top edge of the browser
window).
You can also remove the automatic margin offset that pages have in browser windows by
specifying zero for margins.
To specify page margins:
1 Choose Special > Page Properties to open the Page Inspector.
2 In the Page Inspector, click the Page tab and enter values in pixels in the Margin Width
and Margin Height text boxes.
To set the page margin offset to zero:
Right-click (Windows) or Control-click (Mac OS) in the page and choose Document > Set
Page Margins To Zero from the context menu. (See “Using context menus” on page 31.)

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Setting up Sites and Pages

Back

Setting view options for page layout
Using the View palette, you can set options that control the display of images, colors,
fonts, and certain screen elements on your page (such as table borders, layer markers, line
break symbols, and the lines in layout grids). You can choose a profile for a specific Web
browser (for example, choose Opera 7 Mac if you plan to display your pages in Opera for
Mac OS), and GoLive makes the appropriate adjustments to the page layout as it would
appear in that browser. You can also select style sheets to apply to the page. The options
that you select are only applied to the open page.
To set view options for the page in the View palette:
1 Select the Layout tab in the document window.
2 In the View palette, do any of the following:
•

Choose an option from the Basic Profile menu to view a simulated preview of your page
in a Web browser for Windows or Mac OS. Profiles you’ve used recently appear beneath
the GoLive profiles at the top of the menu.

•

Choose options from the User Profiles menu to set a default screen size or to show or
hide color, fonts and text, or images. Choose a user style sheet to apply it to the page, or
choose a target media option to display the page as it would appear in that media.

•

Choose a style sheet from the Alternate CSS menu to apply it to the page.

•

Select Negative Margins to preview how elements with negative margin values
grow in to adjacent elements.

•

Select Hidden Elements to display or hide elements that are set by the CSS
display property.

•

Choose Show All Items, Default Set, or a custom set from the Visibility menu to display
all or some items that don’t show in the browser window. The option or set that you
choose determines which items are displayed or hidden in GoLive when you choose
View > Hide Invisible Items or View > Show Invisible Items. (See “Creating custom sets
of visible screen elements” on page 59.)

•

Choose Visited Links, Active, Hover, or Focus to preview the colors that have been
chosen for each link state. (See “Setting the default color for text or links in a page” on
page 70 and “Creating HTML element styles” on page 220.)

Opening site pages in a particular view
You can use a variety of methods to open pages from your site and specify whether they
display in the Layout Editor or a different tab in the document window.
You can set an application preference to automatically open all pages in another tab.
(See “Setting preferences for opening pages” on page 42.)
To open a page from the site in the Layout Editor:
Do one of the following:
•

Double-click the page in the site window, navigation view, or links view.

•

Select the page in the site window and choose Site > Explorer > Launch File (Windows)
or Site > Finder > Launch File (Mac OS).

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Setting up Sites and Pages

Using Help | Contents | Index

Back

To open a page in the document window with a particular tab showing:
1 Select the file in the site window, navigation view, or links view.
2 Right-click (Windows) or Control-click (Mac OS) the file to display its context menu.
3 Choose an item from the Open in Mode submenu. The submenu lists all the tabs in the
document window.

Adding elements or scripts to the head section
An HTML page consists of two major sections: a head and a body. The Layout Editor in
GoLive mirrors this structure by providing a head section pane as part of the document
window. You can use the head section pane to store page information that’s used by Web
browsers, including the page title and keywords. The head section of each page already
contains a Title element for the page title that appears at the top of the document
window.
You use the Head set of icons in the Objects palette to add empty tags to the head section
of your Web page, and then you use the Inspector to specify the attributes for the element
or script.
To add an element to the head section of a page:
1 Drag the desired icon from the Head set in the Objects palette to the body of the
page. GoLive automatically moves it to the head section pane and opens the pane. (You
can also click the Toggle Head Section icon in the upper left corner of the document
window to open the head section pane.)
A

You can reposition head elements in the pane by
dragging them.
A. Closed head section pane B. Opened head section pane

You can bypass using the Objects palette to add head elements to the head section by
Right-clicking (Windows) or Control-clicking (Mac OS) in the head section pane and
choosing the object from the Insert Object > Head context menu.
2 In the Inspector, choose various options and specify attributes for the selected element
or script.

About head section elements
The options and attributes in the Inspector vary depending on the type of element that is
selected in the head section pane.
You can add any of the following elements to a page:

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Setting up Sites and Pages

Back

The Keywords element You use the Keywords meta element to specify keywords for
your Web page. Internet search engines use the information in the Keywords element
when constructing their indexes. The Keywords Inspector lets you add, update, delete, and
rearrange selected keywords in a list for the element. You can also add a keyword to the
first Keywords element in the head section by selecting text in the page and choosing
Special > Add to Keywords. If no Keywords element exists in the head section, GoLive adds
it automatically. The new keyword appears in the list in the Keywords Inspector.
Internet search engines rely both on keywords and page titles to find your pages. (See
“Changing the page title” on page 53.)
Comments (head section) You use the Comment icon to add hidden comments to your
Web page, such as publishing information for future reference. To view the comments, you
need to use GoLive or another source code viewer.
Note: You can also add comments to the body of the page and refer to them as you build
the page in the Layout Editor. (See “Adding comments” on page 161.)
The Meta element You use the generic meta element to include information about the
Web page, such as a description of the page content. For each new page, GoLive automatically includes the following information using meta elements: file format (for example,
text/HTML), character set used (for example, ISO-8859-1), and file creator (for example,
Adobe GoLive). The Meta Inspector lets you choose an HTTP-Equivalent option to simulate
header information that accompanies the page when it’s sent by an HTTP server to a
browser or the Name option to define a non-HTTP meta element.
Note: To prevent GoLive from writing the file creator meta element, choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), select General, deselect Write
“Generator Adobe GoLive,” and click OK. To change the character set for a new page, select
the Encode tag in the head section of the page and select another character set in the
Encoding Inspector. To change the character set for all new pages, choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), select Encodings, choose a new set,
and click OK. To change the encoding for selected files in a site, select files in the Files tab of
the site window, choose Edit > Document Content > Change Encoding, select a new
encoding, and click OK.
The Script element You use the Script element to add JavaScript to the head section of
your Web page. A script in the head section is executed while the visible body section of
the page is still being loaded. You use the Head Script Inspector to enter a name for the
script, choose the language or JavaScript dialect for a browser, specify the script file, and
open the JavaScript Editor to edit the script file. (See “Using JavaScript” on page 406.)
The Refresh element You use the Refresh meta element to instruct Web browsers to
refresh the contents of your Web page or replace your page with another page after a
specified interval. You may want to use this element if your page contains live material or if
it’s part of a sequential series of pages you are presenting to viewers. The Refresh
Inspector lets you enter a Delay value in seconds to specify an interval before the page is
refreshed or replaced with another page. You choose either the Target This Document
option to refresh the current page or the Target URL option to replace the page with
another page.
You can easily create a slide show by adding a Refresh element to each page that’s part of
the slide show. For example, you can add a Refresh element to the first page of the slide
show that replaces the first page with the second page, and so on.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Setting up Sites and Pages

Back

elements You use the Element icon to add elements to the head
section of your Web page. These are useful for adding code that has unusual syntax or that
GoLive can’t read, and for adding new unknown elements and ensuring compatibility with
future versions of HTML and the Web browsers that support these versions. You use the
Element Inspector to edit the start and end tags, add the names and values of new
attributes, and delete attributes from the list.
Text character encoding You use the Encode icon to add a meta element that defines
the character encoding for text in a document. By default, all new pages created in GoLive
use the meta encoding element in the head section with the ISO-8859-1 character set
attribute. You can change the character encoding by selecting the Encode object in the
head section and selecting an encoding option in the Encoding Inspector. You can also
change the character set for a document by choosing a different set from the File >
Document Encoding submenu, or change the character set for selected files in a site by
choosing Edit > Document Content > Change Encoding and selecting a new encoding in
the Change Encoding dialog box. (See “Working with nonroman character sets” on
page 209.)
The Link element You use the Link element to define relationships between your current
Web page and other pages in your Web site, or on the Internet. (If you manage the pages
in your site using the GoLive site window, you don’t need to use the Link element.) You can
use the information in the Link element to keep track of links between pages in a large
site.The Link Inspector lets you specify the title, link name, and anchor name for the referenced page, the relationship and reverse relationship between the current page and the
source or destination URL, a list of HTTP methods supported by the referenced page, and a
Uniform Resource Number (URN) for the page.
Note: Most Web browsers don’t use or support URNs or the Methods attribute.
The IsIndex element You use the IsIndex element both to inform Web browsers that your
Web page can be examined using a keyword search and to instruct the browsers to
display a search text box for keywords when displaying your page. The Prompt text box in
the IsIndex Inspector lets you enter the string that you want browsers to display with the
search dialog box.
Note: The IsIndex element is obsolete.
The Base element You use the Base element to specify the original location of your Web
page, also known as the base URL. The base URL is used by Web browsers to locate relative
links on your page. In the event that your page is moved away from its original location,
the browsers can correctly locate the page’s relative links using the base URL.

Adding browser-switch scripts
You can add a browser-switch script to the head section of your Web page that detects the
Web browser loading the page and automatically redirects viewers to an alternate page
based on their browser. For example, you can use this feature to have version 3.0 browsers
switch to another page if the current page contains features (such as actions, animations,
and cascading style sheets) that can only be interpreted by version 4.0 browsers and later.
Note: The browser-switch script is ignored by version 2.0 browsers and Microsoft Internet
Explorer 3.01 for Mac OS.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Setting up Sites and Pages

Using Help | Contents | Index

Back

Since an older browser can’t read the browser-switch script, you should make sure that the
page you’re placing the script on is built for the oldest of browsers and assumes no
redirect is possible. You can also use the browser-switch script to separate Netscape from
Internet Explorer browsers based on browser-specific markup support.
To add a browser-switch script:
1 Drag the Browser Switch icon from the Smart set in the Objects palette to the body
of the page. GoLive automatically moves it to the head section and opens the head
section pane.
2 In the Browser Switch Inspector, select the browsers that support the features on
your page:
•

Select Auto to have GoLive determine browser compatibility. For example, if your page
contains features that can only be interpreted by version 4.0 browsers and later, GoLive
configures the script to reroute requests from version 3.0 browsers.

•

If the same browsers are supported in Windows and Mac OS, deselect Auto, choose All
from the Supported Platform menu, and select the supported browsers.

•

If different browsers are supported in Windows and Mac OS, choose Windows from the
Supported Platform menu and select the supported browsers for Windows. Then
choose Mac OS from the Supported Platform menu, and select the supported browsers
for Mac OS.

Note: In the Browser Switch Inspector, you can select the infinity symbol for Netscape or
Explorer to indicate that the supported browser versions are those later than version 6.0.
3 Specify the URL to an alternate page in the Alternate Link text box. (See “Specifying the
destination URL for a link” on page 62.)
When you have finished, try viewing your page with an incompatible browser and check
whether the request is correctly rerouted.

Adding or changing a doctype declaration
You can use the document window menu to add or change a doctype declaration in your
Web page that references a W3C Document Type Definition (DTD) for a specific type of
HTML or XHTML, such as cHTML (i-mode) for wireless devices. (GoLive automatically adds
the doctype for the HTML 4.01 Transitional DTD to new HTML pages.) You can also
configure the icon sets in the Objects palette to match the doctype. (See “Setting the
doctype of a document” on page 383.)

Creating custom sets of visible screen elements
The Visibility menu in the View palette contains a default set of items that are normally
hidden on your screen, such as line break symbols. You can modify this set to show some
of the items and hide others, and you can create additional sets based on the default set.
To create custom sets of visible items for the Visibility menu:
1 Do one of the following:
•

Choose Edit Set from the Visibility menu in the View palette.

•

Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), expand the list
of General preferences in the left pane, and select Invisible Elements in the list.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Setting up Sites and Pages

Using Help | Contents | Index

Back

2 Select a set in the middle pane and then select check boxes in the right pane next
to items that you want hidden in the set. The default set can be edited, but not deleted
or renamed.
3 To add a set to the list, click the Create New Set button
middle pane.

at the bottom of the

4 To rename a set, select it and then type a new name in the text box.
5 To delete a set, select it and click the Remove Selected Sets button .
6 Click OK.

Saving pages
You can save your Web pages directly to the site’s root folder that stores the pages and
media for your Web site. You can also save your pages as components, stationery, or page
templates for the site. For information on stationery, components, and templates,
see“About site assets” on page 304.
You can set a preference to display or hide the Set Title dialog box, which lets you change
the page titles when you save your pages. (See “Changing the page title” on page 53.)
To save a page as part of the site:
1 Open the site project file.
2 Do one of the following:
•

Select the document window, and choose File > Save or choose File > Save As.

•

In the document window, choose Save As from the window menu, and then choose
Save As Stationery, Save As Component, or Save As Template.

3 In the Save As dialog box, name the file, using the appropriate file-naming conventions.
(For example, it’s a good idea to use all lowercase letters and no spaces.) Make sure that
you include the appropriate suffix (.htm or .html) for the name to ensure that GoLive and
Web browsers recognize the format of the file. (See “Providing names and paths for files”
on page 101.)
4 Choose a site folder (Root, Stationery, Components, or Templates) from the Site Folder
menu in the Save As dialog box. (This step is not necessary if you chose an option from the
Save As submenu of the document window menu.)

Saving a page in the root folder of a site.

5 Click Save.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Setting up Sites and Pages

Back

6 If the Set Title dialog box appears, enter a name for the page title in the text box or
select Set Title To Document Name to automatically enter the filename as the title. To
prevent the Set Title dialog box from appearing again, select Don’t Remind Me Again.
Then click Set.

Linking files
After you create your site and add all your resources to the site window, you can start
linking images or objects on the page to their source files, create a navigational system
between the pages in your site, and add navigational links to other sites or external URLs.
You can use GoLive’s Edit PDF Anchor feature to create links to bookmarks in PDF files.
GoLive automatically updates the site with each new link you create and continually
verifies the integrity of links as you build your site. If you move or rename a file in the site
window, GoLive updates the links to the new paths.
You can view a graphical representation of all the links in your site and the navigational
hierarchy between pages. (See “About graphical site views” on page 104.)
If a link is broken because the destination file was moved or renamed outside of the site
window, GoLive displays the orphaned or missing file in the Errors tab of the site window.
(See “Fixing site errors” on page 126.)
For information on creating links that originate from parts of an image, see “Creating
image maps” on page 245.

Creating resource and navigational links
When you add images and other types of media to a page, you create resource links from
the placeholders on the page to the source files. You can also create navigational links
from images or text on a page that users click to go to other pages in the site, other
anchored locations on the same page, or external URLs or e-mail addresses.
You can set up text or images as empty reference links and specify the destination files for
them later or attach actions to them. (See “Specifying the destination URL for a link” on
page 62 and “Setting up actions” on page 414.)
To create a resource link:
Do one of the following:
•

Drag the source file (such as a GIF image, a SWF file, or a Photoshop PSD file) from the
Files tab of the site window to the page. GoLive automatically creates a resource link
between the image on the page and the source file.

•

Select the placeholder object (such as an image or a Smart Object) on the page, and
specify the source file in the URL text box in the Inspector. (See “Specifying the destination URL for a link” on page 62.)

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Setting up Sites and Pages

Using Help | Contents | Index

Back

To create a navigational link:
1 Select text, or an image or object on the page.
2 In the Inspector, do one of the following:
•

For selected text, specify the destination file for the navigational link in the URL text
box. If you type a URL or e-mail address in the text box, include “http://” or “mailto:” at
the beginning, respectively.

•

For selected images or objects, click the Link tab (if applicable), and then click the
Create Link button
and specify the destination file for the link in the URL text box.

You can also drag the destination file for a navigational link from the Files tab of the
site window onto the selection in the page. (If you drag the file to a page without
a selection in it, GoLive creates a hypertext link and uses the name of the file for the
text label.)
3 If you want the link destination to appear in a frame or a new Web browser window,
choose an option from the Target menu in the Inspector. (See “Setting up target frames”
on page 159.)
4 Enter a descriptive title for the link in the Inspector. This title appears in some browsers
when you hold the pointer over the link.
5 In the Inspector, choose an option from the Name/ID menu (choose Name & ID for
maximum browser compatibility), and then type a unique link name in the Name/ID text
box.
To create an empty reference link:
Select the text or object in the page, and click the Create Link button
on the toolbar.
GoLive displays a bug icon in the site window next to pages that contain empty
reference links.
You can specify the destination file for multiple links at once by using the In & Out
Links palette. (See “Editing links and URLs sitewide” on page 124.)
To remove a link:
Select the text or object in the page, and click the Remove Link button

on the toolbar.

Specifying the destination URL for a link
You use the Inspector to specify the destination file or URL for resource and navigational
links. You can type the path to the link’s destination file directly in the Inspector’s URL text
box or use any of a variety of methods to specify it, including dragging files, using the pick
whip, browsing, and reusing recently linked files. No matter which method you use, the
path to the destination file appears in the Inspector.
Note: The pick whip is also conveniently located in other windows and palettes (such as
the In & Out Links palette) when you need to link something to a file in the site. (See
“Editing links and URLs sitewide” on page 124.)

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Setting up Sites and Pages

Using Help | Contents | Index

Back

The Inspector palette menu and context menus for selected text and objects contain lists
of recently linked files you can use to specify the destination for a link. The lists are
organized by categories, including HTML, Images, Misc. URLs, Anchors, and the last five
files that have already been used as the destination for links. The Misc. URLs category
includes links made to PDF files, favorite URLs, or e-mail addresses collected in the External
tab of the site window.
To specify the link’s URL by dragging the destination file:
Do one of the following:
•

For resource links, drag an image file or other media file from the Files tab in the site
window to the page. The URL to the source file appears in the Inspector.

•

For navigational links, drag an HTML file from the Files tab in the site window to a
selected link or text on the page. The destination URL of the page appears in the
Inspector. (If you drag the HTML file to the page without a selection in it, GoLive creates
a hypertext link and uses the filename for the text label.)
You can also drag external URLs, e-mail addresses, and snippets from the site window
or Library palette to the page. (See “About site assets” on page 304.)

To specify the links’s destination using the pick whip:
1 Select the text, object, placeholder icon, or existing link on the page.
2 Do one of the following to specify the destination file:
•

Drag a line from pick whip to the destination in the site window, which can be a file or
an anchor listed under the file in the Files tab, or a URL or an e-mail address in the
External tab. You can also drag to the Show Page Properties icon or an anchor in an
open page. (See “Using anchors for links” on page 66 and see “Using site URLs and email addresses” on page 317.)

•

Alt-drag (Windows) or Command-drag (Mac OS) a line from a selection in the page to
the destination file in the site window or to a destination on the page or another open
page (creating an anchor).

If the line recoils, you have released the mouse button too soon or the link can’t
be created.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Setting up Sites and Pages

Using Help | Contents | Index

Back

As you drag, you can hold the pointer over the Select Window button on the toolbar to
bring a window to the front or hold the pointer over a page in Files tab in the site window
to display a list of anchors under the page.

Drag the pick whip in the Inspector to a file in the site window.

To specify the link’s destination by browsing:
1 Select the text, object, placeholder icon, or existing link on the page.
2 In the Inspector, click the Browse button .
3 In the Open dialog box, select the destination file, and click Open.
If the destination file is not located in the site window, you can use the Browse button
to locate it, and link it to the selected text or object. Then you can drag the orphan file
from the Errors tab in the site window to the Files tab and click OK to copy the file and
update the site. Or, you can use the Clean Up Site command to move a copy of the file into
the site. (See “Cleaning up a site” on page 100.)
To specify the link destination using a recently linked file, e-mail address, or URL:
1 Select the text, object, placeholder icon, or existing link in the page.
2 In the Inspector, choose a recently linked file, HTML file, image, miscellaneous URL, or
anchor from the URL menu.

Editing URLs in links
You can use the Edit URL dialog box to edit the path to a link’s destination, make the path
relative or absolute, and add query parameters to the URL for Common Gateway Interface
(CGI) requests and other types of server requests.
Query parameters are used to query servers for information such as data from databases
or loading server scripts, such as Perl Script, to process forms (see “About forms” on
page 294).
When you add query parameters to the URL, GoLive inserts a question mark (?) for the
query, equal signs (=) between each parameter name and value, and ampersands (&)
between each parameter. GoLive displays the complete URL including the CGI or other
server request at the bottom of the Edit URL dialog box.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Setting up Sites and Pages

Using Help | Contents | Index

Back

By default, GoLive uses relative URLs for the destinations of links. You can use the Edit URL
dialog box to change an individual URL to an absolute path. You can also make URLs
absolute for a specific site, or set a preference to make all URLs absolute for all sites. (See
“Setting up absolute link paths” on page 104.)
To edit a URL:
1 In the Inspector, choose Edit from the URL menu.
2 In the Edit URL dialog box, do any of the following:
•

Modify or type a new URL in the Path text box.

•

Click Browse to locate and select a new destination page.

•

Click Make Absolute or Make Relative to use an absolute or relative path for the URL.

•

Type parameter names and values in the text boxes and click Add Parameter to add
them to the list of Query Parameters.

•

To remove a parameter from the list, select it and click Delete Parameter.

•

To change the name or value of a parameter, select the parameter in the list, edit the
name or value in the text boxes below the list, and click Update.

The complete URL, including the parameters, appears in the Result box at the bottom of
the Edit URL dialog box.
3 Click OK.

Creating anchor links to PDF bookmarks
A PDF bookmark links to a specific location in a PDF file. You can use GoLive’s Edit PDF
Anchor feature to link from an HTML page to a PDF bookmark.
Note: Anchor links to PDF bookmarks don’t work with Acrobat 6.0 in Mac OS X.
To create an anchor link to a PDF bookmark:
1 Create a link to the PDF file (see “Creating resource and navigational links” on page 61
and “Specifying the destination URL for a link” on page 62).
2 In the Inspector, click Edit PDF Anchor.
3 In the PDF Anchor Editing dialog box, do one of the following:
•

Select a bookmark in the Settings pane to open the PDF file to that bookmark.

•

Select Use Page Number and enter a page number in the Use Page Number text box to
open the PDF file to a specific page.

4 Select Use Page Mode and choose bookmarks, thumbs, or none to open the PDF file
with the bookmarks pane, the thumbnail pane, or no pane visible, respectively.
5 Click OK.
Note: You can’t preview links to PDF bookmarks in GoLive for Windows. To preview the
link, upload your site to a Web server.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Setting up Sites and Pages

Using Help | Contents | Index

Back

Using anchors for links
An anchor is a specified location on a Web page that serves as the destination of a link.
Here are some guidelines to follow when creating anchors:
•

You shouldn’t place anchors directly on a layout grid. Instead, place anchors in the flow
of HTML text, a layout text box, or a table cell. When you add an anchor to a layout text
box or table cell, make sure that the box or cell has other contents. Otherwise, the
anchor will not be recognized by Netscape Navigator. To work around this problem, you
can add a nonbreaking space to the empty box or cell. To add a nonbreaking space,
click inside the box or cell, and press Shift+spacebar (Windows) or Option+spacebar
(Mac OS).

•

You should place anchors near the left margin of the page, so that the anchors work
more consistently across browsers.

•

You won’t be able to preview certain link and anchor combinations in Layout Preview.

•

You should test links to anchors extensively in browsers before publishing your Web
site. Anchors don’t always work the same way in all browsers.

To create an anchor:
Do one of the following:
•

Drag the Anchor icon from the Basic set of icons in the Objects palette to the destination on the page where you want the anchor.

•

Select a link on the page, drag the pick whip in the Inspector to a location on the
page or another open page where you want to place the anchor, and release the mouse
button.

Note: You must save the destination page before you can create an anchor using the
pick whip.
To give an anchor a unique name:
1 Select the anchor marker

in the page.

2 In the Anchor Inspector, choose an option from the Name/ID menu (choose Name & ID
for maximum browser compatibility), and then type a unique anchor name in the Name/
ID text box.
You can see a list of all the anchors on a page by clicking the triangle next to the page
in the Files tab in the site window.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Setting up Sites and Pages

Back

Using color
Use the Color and Swatches palettes to apply color to page backgrounds, text, and objects
on a page. Use the Color palette to mix and edit colors. Use the Swatches palette to select
colors by color swatch, name, or hexadecimal value.
Use the Eyedropper tool in the Swatches or Colors palette to extract colors from an image
or screen element.
For information on applying color to text, see “Applying fonts, type sizes, and color to text”
on page 194.
Note: When you use the Color or Swatches palette to apply color to text or objects, GoLive
inserts the color attribute inside the font element. Because the font element is deprecated
and can cause problems with Web browsers, you may want to apply color to text and
objects using CSS styles instead of the Color or Swatches palette. (See “Applying styles” on
page 233.)

Using the Color palette
The Color palette contains color models based on CMYK, RGB, HSV, HSB (for video
hardware), and Grayscale. The Color palette displays the color of the current selection in
the preview pane, as well as recently used colors in the Recent Colors List. The Hex value
text box displays the hexadecimal value of colors you’ve chosen.
Use the Color palette to edit and mix colors. When you’re done, add them to the
Swatches palette.
To display the Color palette:
Choose Window > Color.
Note: You can also open the Color palette by clicking a color field (for example, in the
Inspector or toolbar).

Clicking a color field automatically opens the Color palette.
A. A color field B. The preview pane C. Recently used colors

To change the color model:
Choose a color model from the Color palette menu, or click a color model button, located
at the top of the Color palette. (Choose Only Web Colors to display only web-safe colors.)

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Setting up Sites and Pages

Back

To display color values in percentages:
Choose Percent Values from the Color palette menu. Choose Percent Values again to
display colors in the 256 numerical scale.
To show or hide the color model buttons:
Choose Show Buttons from the palette menu.
To show or hide the Recent Color list:
Choose Show Recent Colors from the palette menu.
To manually add a color to the Recent Color list:
1 Do one of the following:
•

Select a colored element on a page, such as colored text.

•

Select a color from the Color or Swatches palette.

2 Click the Add Color to Recent Colors List button .

Using the Swatches palette
The Swatches palette contains predefined sets of colors, site colors (colors you’ve used in a
site), and recent colors (colors you’ve used recently or added to the Recent Colors list in
the Color palette). You can add or remove custom swatches. The Show Search Fields
option lets you search for colors by name or hexadecimal value.
If you click the lower right corner of a color field, GoLive displays the current swatch set
chosen in the Swatches palette, as well as any custom colors you’ve added to the Swatches
palette.
To display the Swatches palette:
Choose Window > Swatches.
A

The Swatches palette
A. Search fields B. Current swatch set

To change the swatch set:
Choose a swatch set from the Swatches palette menu.
To change how swatches appear:
Choose a display option from the Swatches palette menu:
•

Small List to display the hexadecimal value and thumbnail of each swatch.

Note: If Web Named Colors is selected from the Swatches palette menu, GoLive also
displays the name of the swatch.
•

Small Thumbnail to display a thumbnail of each swatch.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Setting up Sites and Pages

Using Help | Contents | Index

Back

To search for a color in the Swatches palette:
1 Choose Show Search Fields from the Swatches palette menu.
2 Do one of the following, and then press Enter (Windows) or Return (Mac OS):
•

Type a hexadecimal value in the Value text box.

•

Type a color name in the Name text box.

Note: If the color you’re searching for doesn’t exist in the current swatches, GoLive displays
the nearest color.
To show named colors in the Swatches palette:
Choose Web Named Colors from the Swatches palette menu.
To view recently used colors:
Choose Recent Colors from the Swatches palette menu.
To view a list of site colors:
Choose Site Colors from the Swatches palette menu.
To add a custom swatch to the Swatches palette:
1 Choose a color from the Color palette.
2 Click the Create New Swatch button

in the Swatches palette.

To remove a custom swatch from the Swatches palette:
Select the swatch and click the Delete Swatch button .

Applying color to objects
Use the Colors or Swatches palette to apply color to page backgrounds, text, and objects
on a page. For information on applying color to text or page backgrounds, see “Applying
fonts, type sizes, and color to text” on page 194 and “Applying images or color to the page
background” on page 70.
To apply color to an object:
1 Select the object you want to color (for example, a table cell).
2 In the Inspector, click the lower right corner of the color field and choose a color from
the swatches that appear, or click the color field and do one of the following:
•

Select a color from the Color palette. To use only Web safe colors, choose Only Web
Colors from the Color palette menu, and then select a color. The sliders snap to Websafe colors when you drag them.

Note: Web-safe colors are the 216 colors that are used by browsers, regardless of platform.
Browsers change all colors in the image to these colors when displaying the image on an
8-bit screen. By working with Web-safe colors, you can ensure that the colors in your Web
pages will not dither on a system using a 256 color display.
•

Choose a color from the Swatches palette. An alert cube next to the color rectangle
indicates a Web-safe color.

Note: Alert cubes appear only if you’re viewing Swatches using the Small List display
option.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Setting up Sites and Pages

Using Help | Contents | Index

Back

To remove color from a selection:
1 Select the colored object.
2 Deselect Color in the Inspector.
To extract a color using the eyedropper:
Do one of the following:
•

Open the Color palette and click the Eyedropper tool , then drag the eyedropper to
the color that you want to extract.

•

In the Swatches palette, move the pointer over a swatch until it changes to an
eyedropper , and then click and drag the eyedropper to the color that you want
to extract.

Note: Notice that the color changes in the Color palette as you drag.

Applying images or color to the page background
You can apply an image or color to the background of your page to visually enhance the
page. When selecting an image for the background, keep in mind that GoLive and Web
browsers treat the image as a tile that is repeated to cover the page. Although colors that
you choose for page backgrounds override the default colors used by most Web browsers,
other browser preference colors can override your page background colors.
To apply an image or color to the page background:
1 Click the Show Page Properties icon
document window.

in the upper right corner of the

2 In the Page Inspector, click the Page tab.
3 Under Background, do one of the following:
•

Select Image and specify the image file. (See “Referencing files” on page 42.)

•

Select Color and click inside the color field. Then select a color from the Color palette or
the Swatches palette. The color you select is automatically applied to the page and to
the color field in the Page Inspector.

•

Select Color and click the lower right corner of the color field. Then select a color from
the swatches that appear. The color you select is automatically applied to the page and
to the color field in the Page Inspector.

Setting the default color for text or links in a page
You use the Page Inspector to set default colors for text that you type on a page and three
stages of links: normal (the normal appearance of a link in the Web browser), active (when
the mouse button is held down on a link in the browser), and visited (after a link has been
clicked in the browser).
To set default colors for text or links on the page:
1 Click the Show Page Properties icon
document window.

in the upper right corner of the

2 In the Page Inspector, click the Page tab and do one of the following:

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Setting up Sites and Pages

Back

•

To color all text on the page, select Text, click the color field, and select a color from the
Color or Swatches palette. Or, click the lower right corner of the color field and choose a
color from the swatches that appear.

•

To color the various stages of hypertext links on the page, select Link, Active Link, or
Visited Link. Then click the color field for each type of link and select a color from the
Color or Swatches palette. Or, click the lower right corner of the color field and choose a
color from the swatches that appear.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Creating Site Diagrams

Using Help | Contents | Index

Back

Creating Site Diagrams
About diagrams
The diagram features of Adobe GoLive are powerful presentation and Web site creation
tools. A diagram shows the hierarchy of HTML pages within a site and the links between
pages, assets, and other files. It may also contain annotations, level indicators, custom
objects, and boxes that hold text or images.
A diagram lets you lay out the structure of a site before you create real pages, and helps
you manage the site creation process. You can use multiple prototype diagrams as you
build and revise a site, creating and testing designs as you need them. You can present
diagrams in print or online in Adobe PDF or SVG format. When you are ready to work with
live pages, you submit a diagram, converting its pages to actual pages in the site.
A
B

Diagram
A. Anchored section page B. Parent-child link
C. Annotation D. Page E. Hyperlink F. Level object
G. Group H. Box

Setting up a diagram When you create a diagram, a diagram window opens, displaying
an empty design view. You use the View palette to set page, grid, and canvas options for
the design view, and to specify the appearance and labels of objects in the diagram. (See
“Creating diagrams” on page 73.)

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Creating Site Diagrams

Using Help | Contents | Index

Back

Creating the structure of the diagram You add objects to the design view by dragging
them from the Diagram set of the Objects palette, or by using buttons or menu
commands. You can add objects that represent pages or sections (subtrees of pages), and
link them in a hierarchy to other pages or sections. You can also add and link custom
objects that represent assets, programs, and other features used in the site.
By dragging objects in the design view, you can change their location on the canvas, their
place in the site hierarchy, or both. You can group objects to manipulate them together,
and use pick whip to add diagram links. You should anchor the diagram to an existing
page in the site so that its pages will be visible in a navigation view after you submit the
diagram. (See “Developing diagrams” on page 74.)
Preparing the diagram for presentation To make objects appear on each page of a
multipage diagram, you drag them to the Master tab of the diagram window. Items on this
tab (the master view) are not part of the site design and can’t be submitted.
In the design view, you can add annotation objects to provide text commentary, or add
level objects to display brackets indicating levels of the site. You can also add box objects
that contain text or graphics. When you have finished adding objects, you can use the
Align palette to align and distribute them. You can adjust the curvature of link lines by
dragging or by using the Link Inspector. To present the diagram to reviewers, you can print
it to paper or export it to Adobe PDF or SVG format. (See “Preparing diagrams for presentation” on page 84.)
Submitting the diagram You can submit an entire diagram or selected items.
Submitting converts pages in the diagram to real pages in the site, and creates scratch files
for custom objects. To reverse a submission, you recall the diagram or items. You can
submit and recall diagrams and items as often as necessary as you develop a site. (See
“Submitting diagrams” on page 88.)

Creating diagrams
When you create a diagram, a new diagram window opens to the Design tab. This tab, also
called the design view, is the canvas on which you add objects representing pages and
other items in the site you are designing. The View palette and the Inspector provide
controls for changing the look of the diagram and the appearance and behavior of objects
within it.
When a site window is open, you can create one or more diagrams for the site.
To create a new diagram:
1 Open a new or existing site.
2 Choose Diagram > New Diagram. The diagram window opens to the design view.
3 If you want to rename the diagram, click the Diagrams tab of the site window, select the
diagram name, and enter a new name.
To open an existing diagram:
Do one of the following:
•

With the site window open, choose Diagram > Diagrams > diagram name.

•

In the Diagrams tab of the site window, double-click the diagram.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Creating Site Diagrams

Using Help | Contents | Index

Back

Developing diagrams
You develop a diagram by adding to the design view objects that represent pages,
sections (hierarchies of pages), and other items that can be added or linked to the site.
After adding objects, you can create new links or redefine links, group and rearrange the
objects, and anchor the diagram to an existing page in the site. You can change how
design views display using the View palette and the Layout tab of the Inspector
(see“Changing the display of design views” on page 82 and “Changing the layout of
objects in a hierarchy” on page 83).
If you expect the diagram to occupy several pages, and you want certain text or graphics
to appear on each page, you may want to set up these items in the master view before you
develop the diagram in the design view. (See “Adding master items” on page 84.)

Adding pages
You can add a single page to a diagram as a separate object, or add the page in any family
relationship—parent, child, previous sibling, or next sibling—to another page or to a
section. (See “Adding and defining sections” on page 75.) You can also add sets of child
pages to a page or section. While adding the new child pages, you can make the child
pages and their parent a section (or a subsection, if the parent page is within a section).
You can add content to pages while you are working on a diagram, or add the content
after you have submitted the pages, and they exist as live pages in the site.
Adding pages to a diagram affects its appearance and navigational logic, sometimes
changing the position of other pages and the direction of lines that connect those
pages. Before arranging a diagram for a presentation, add all pages and other objects, and
establish their hierarchical positions.
To add a page outside a hierarchy:
Drag the Page icon from the Diagram set of the Objects palette to an empty area of the
design view. After creating the page, you can define it in the Page Inspector. You can also
add other pages to the new page, creating family links, or create new hyperlinks.
To add a single page to another page or section:
Do one of the following:
•

Select the page or section to which you want to add the page, and choose Next Page,
Child Page, Previous Page, or Parent Page from the toolbar or the Diagram > New
menu.

•

Drag the Page icon from the Diagram set of the Objects palette to the page or section.
As you drag, a black bar appears next to the existing page or section, indicating a family
relationship to the new page. Drag the Page icon above the page or section to add a
parent, to either side of it to add a sibling, or below it to add a child.

To add a set of child pages to another page or section:
1 Select the page or section to which you want to add the child pages.
2 Choose Diagram > New Pages.
3 Specify the number of pages to create, their filenames, the stationary or template (if
any) to use in creating the pages, and the types of links to generate. (See “Adding empty
pages and pending links to a hierarchy” on page 119.)
Using Help | Contents | Index

Back

Adobe GoLive CS Help

Creating Site Diagrams

Using Help | Contents | Index

Back

4 If you want the selected page and the child pages you are creating to be a new section
or subsection, select Make Parent a Section. (See “Adding and defining sections” on
page 75.)
5 Click Create. The child pages are created. If you selected Make Parent a Section, the
parent page becomes a section page for the new section or subsection.
To define a page in the Page Inspector:
In the Page tab of the Page Inspector, do any of the following:
•

Enter a design name for the page in the Name text box. This name appears in the design
view as the label for the page only if Design Name is selected in the Display tab of the
View palette. Otherwise the label is its filename or page title. (See “Changing the
display of design views” on page 82.)

•

Change the default page title.

•

Specify a template, stationery, or sample file for the page.

To add content to a page in a diagram:
In the design view, double-click the page. The page opens in a document window. You can
edit the page using the same techniques used to edit pages added directly to a site.

Adding and defining sections
A section is a hierarchy of diagram pages, usually a subtree, that is part of a larger
hierarchy. The section and its children are descendents of some other object. You treat a
section as a unit to simplify file management. The pages in a section have the same base
filename, and you can put them in the same folder and create them using the same
template or stationery. Sections can contain other sections (subsections) as well as pages.
The parent page for a section or subsection is called its section page. The filename for a
newly created section page is index.html, unless you have changed the home page
filename in the site preferences. Section pages are displayed with boldface labels and the
Section icon (if diagram objects appear as icons).
To add and define a section:
1 Drag the Section icon from the Diagram set of the Object palette to the design view.
This creates a section page.
2 If necessary, do one or both of the following in the Page tab of the Section Inspector:
•

•

Change the default page title.

Note: For a section page, don’t use the Target Dir option on the Page tab. You set the folder
for the page and its children in the Section tab. Also, you probably don’t need to change
the default filename for the section page. Even if the home page for the site has the same
filename, the two files have different paths because the section has its own folder.
3 In the Section tab of the Section Inspector, do any of the following:
•

Enter a base filename for the child pages you will place in the section and their descendents. The page filenames will be provided automatically. For example, if you enter the

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Creating Site Diagrams

Using Help | Contents | Index

Back

base filename Hiking, the page filenames will be Hiking.html, Hiking1.html, Hiking
2.html, and so on.
•

Specify a target folder for the section page, the child pages in the section, and their
descendents. When you submit the diagram, the pages will be placed in this folder. The
target folder should be a subfolder of the root folder, either an existing subfolder or a
new one that will be created when you submit the diagram. For example, you might
specify the folder Recreation/Hiking for the pages in the hiking section of a recreation
site. If you don’t specify a target folder, the folder used is either the root folder or the
folder for generated items specified in Site preferences.

•

Specify a template or stationery for the pages.

4 If you want to add child pages to the section page at this time, do both of the following:
•

Choose the types of parent and sibling links to generate between the section page and
its children. (See “Adding empty pages and pending links to a hierarchy” on page 119.)

•

In the Count text box, enter the number of child pages to add to the section page.

5 Click Create New Pages.

Adding and editing pending links
You can add pending links between pages, sections, and custom objects, and change links
from one type to another. Tour links connect a series of objects, not necessarily adjacent
siblings in a sequence. In the site settings, you can change the colors of links and add new
link types.
To add a pending link of the type Hyperlink from one object to another:
1 In the design view, select the source object. The pick whip

appears.

2 Drag from the pick whip to the target object. A new link appears with the link type
Hyperlink.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Creating Site Diagrams

Using Help | Contents | Index

Back

To add pending links between already linked objects:
1 In the design view, do one of the following:
•

Select two objects linked to each other.

•

Select two or more objects linked in sequence, starting with the first object in the
sequence.
To select any object or link after the first object or link selected, Ctrl-click (Windows) or
Shift-click (Mac OS). Repeat to deselect the object or link.

2 Right-click (Windows) or Control-click (Mac OS) and choose a link type from the Add
Design Line submenu. Ordinarily, you add a type that complements the current link type.
For example, you would add a Child link (parent-to-child) to a Parent link (child-to-parent).
To change a link type:
1 In the design view, select a link. A small rectangle
and target objects are highlighted.

appears on the link, and the source

2 If necessary, select other links. If multiple links are selected, their source and target
objects are not highlighted.
3 Choose a new link type in the Link Inspector. Normally you would choose only
Hyperlink, Tour, or a user-defined link type because the family link types (Parent, Child,
Next, and Previous) are more easily changed by dragging one of the linked objects onto
the other one. (See “Moving and copying objects” on page 79.)
Important: If you create a new family link between two objects by dragging one of them
onto the other, the link is always valid. However, if you use the Link Inspector to create it,
you may create an invalid family hierarchy—for example, a child with two parents.
To edit link types:
1 With a site view open, choose Site > Settings > Diagram Link Types.
2 Select Site Specific Settings.
3 Do one or both of the following:
•

To change the color of a link type, select the type, click the lower right corner of the
color field, and then specify a new color from the swatches that appear.

•

To add a link type, click the New button , type a name, and then click the lower right
corner of the color field to specify a color from the swatches that appear.

Edits to link types apply to all diagrams associated with the current site.

Adding custom objects
You can create custom objects that represent items that you might add or link to a site,
and add these objects to the Diagram set of the Objects palette. The Diagrams set of the
Objects palette contains a number of predefined custom objects representing items such
as forms, elements, databases, applets, and scripts. You can edit or delete these objects
as needed.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Creating Site Diagrams

Back

Custom objects are images in GIF format, located in the Modules/Diagram Objects folder
in the GoLive application folder. When you add a custom object to a diagram, you can
specify whether to create a file for the object when it is submitted, and the type of file to
be created. You must create the file from a template, stationery, or sample file. For
example, you can add a movie to a site by creating a custom object that uses the movie file
as a sample file. When the diagram is submitted, a new movie file is created from the
sample file. All non-HTML files created from custom objects become scratch items.
To create a new custom object and add it to the Diagram set of the Objects palette:
1 Save an image using the following filename convention: myfilename-myextension.gif,
where myfilename is the name that appears in the Objects palette tool tip and
myextension is the default extension that is used in the filenames of the created objects. (If
you do not include a default extension and the preceding hyphen, .html is used.)
2 Place the image file in this folder:
Adobe GoLive /Modules/Diagram Objects.
3 Restart GoLive. To be available from the Objects palette, the custom object must be in
the Diagram Objects folder when GoLive starts.
To specify a sample file for a custom object:
1 Create a default sample file in the Adobe GoLive /Settings7/DocumentStore/examples
folder. The default sample file is used to create a file when you submit the object, unless
you specify another file in the Object Inspector.
2 Open the defaults.agldex file in the DocumentStore folder and copy an existing
specification in this file. Example specifications have this format:

where ident is the filename you specified for the custom object (without the hyphen and
extension), mime is the appropriate mime type, ext is the extension you specified for the
object, group is the appropriate group in the defaults.agldex file (markup , css , media , or
misc ), display name is the filename you specified (to be used in the user interface if the
next three items are set to yes ), context is no unless you want the file to be listed in the
site context menu, menu is no unless you want the file to be listed in the File > New Special
menu, sort specifies the sort order for the display name in menus, and file url is the
name of your sample file (dialog is not used at this time).
3 Edit the copy of the specification and place it in the appropriate group in the
defaults.agldex file.
4 Restart GoLive. To be available as a sample file, the file must be in the examples folder
and defined in the defaults.agldex file when GoLive starts.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Creating Site Diagrams

Using Help | Contents | Index

Back

To add a custom object to a diagram:
1 Drag the object from the Diagram set of the Objects palette to the design view. You can
add a custom object to an empty area of the design view, or drag it over an existing page,
section, or other custom object to add it as a parent, sibling, or child of the existing object.
2 In the Object tab of the Object Inspector, do any of the following:
•

Enter a design name for the object in the Name text box. This name appears in the
design view as the label for the object only if Design Name is selected in the Display tab
of the View palette. Otherwise the label is its filename or page title.

•

Select Create From to specify that a file will be created when the object is submitted,
and then select Stationery, Template, or Sample. You must specify a stationery,
template, or sample file in order to create a file for the custom object. To use a
stationary or template file, choose the file from a menu. To use a sample file other than
the default file in the DocumentStore folder, drag from the pick whip to the sample file.
The sample file must be located on your computer.

•

Specify a filename and target folder for the file to be created when the object
is submitted.

To edit a custom object:
Do any of the following:
•

Change settings for the object in the Object tab of the Object Inspector.

•

Change the sample file in the Adobe GoLive /Settings7/DocumentStore/examples
folder.

•

Edit the specification for the object in the Adobe GoLive/Settings7/DocumentStore/
defaults.agldex file.

•

Delete the object by removing its GIF file from the Adobe GoLive/Modules/Diagram
Objects folder.

Moving and copying objects
You can treat any item in a diagram simply as an object in a drawing program, and drag it
as you would in such a program. You can also drag a page, section, or custom object onto
another page, section, or custom object to create a new family link in the logical hierarchy.
You can select a number of objects and drag them all at once. However, a better method is
to group the objects and then drag the group. (See “Grouping objects” on page 80.)
You can also copy objects in a diagram, and duplicate them along with their links.
To move an object without changing its position in the logical hierarchy:
In the design view, drag the object to a new location. If Collision Avoidance is selected, and
you drag the object near or partially over another object, the other object will move (to
avoid a collision) when the drag is completed.
Note: If you drag an object over another object and a line appears to the top, bottom, left,
or right of the other object, you have dragged too far into the center of the other object.
Decrease the overlap until the line disappears.
Any link lines connected to an object move when you drag the object. However, the
object’s descendents do not move with it as they would if you were moving the object to a
new hierarchical position.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Creating Site Diagrams

Using Help | Contents | Index

Back

To move a page, section, or custom object into a new position in the logical
hierarchy:
1 In the design view, drag the object onto the page, section, or custom object you want it
linked to. Depending on the position of the object you are dragging, a line appears above
or below the target object or to its left or right.
2 Drop the object above, below, to the left, or to the right of the target object, depending
on the family relationship you want the two objects to have. (See “Rearranging the parts
of a hierarchy” on page 121.)
To move a copy of an object to a new location:
In the design view, Ctrl-drag (Windows) or Option-drag (Mac OS) the object to another
location. A copy of the object is created at that location. If the original object is annotated
or linked, the annotations or link lines are not copied.
To duplicate objects:
1 In the design view, select the objects you want to duplicate.
2 Choose Edit > Duplicate. The objects and their connectors and links are copied. If you
only select one object, it is duplicated along with its links.

Grouping objects
A group is a rectangle that encloses a number of objects in a diagram and lets you treat the
objects as a unit. You can move, copy, or delete the objects in a group by moving, copying,
or deleting the group. You can also close a group to temporarily unclutter the diagram.
The objects in a group must be located within the group rectangle, but they don’t have to
be in any logical relation to one another.
To group selected objects:
1 In the design view, select the objects.
2 Choose Edit > Group, or click the Layout Group button

in the Transform palette.

A group rectangle encloses the selected objects. If Collision Avoidance is selected, any
unselected objects that would be enclosed by the rectangle move out of the way
automatically.
To create an empty group in a particular location:
1 Drag the Group icon from the Diagram set of the Objects palette to the design view.
If Collision Avoidance is selected, any objects at or near the icon’s position move out of the
way automatically.
2 Do one or both of the following as needed:
•

Resize the group by dragging one of its corner handles.

•

Reposition the group by dragging its title bar or border.

To set group options:
1 Select the group by clicking its title bar or border.
2 In the Group Inspector, do any of the following:
•

Enter a name. It appears in the title bar if the title bar is displayed. You can also enter the
name directly in the title bar.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Creating Site Diagrams

Using Help | Contents | Index

Back

•

Click an Align button to left-align, center-align, or right-align the group name.

•

Select or deselect Display Title Bar.

•

Select or deselect Auto Resize. With Auto Resize selected, the group rectangle is only as
large as it needs to be to hold its contents, growing or shrinking as needed.

To add objects to a group:
Drag the objects into the group rectangle. If the rectangle is too small to hold the objects
and you have selected Auto Resize in the Group Inspector, the rectangle enlarges
automatically.
To ungroup grouped objects:
1 Select the group.
2 Choose Edit > Ungroup, or click the Layout Ungroup button
palette.

in the Transform

To work with a group:
Do any of the following:
•

To collapse or expand a group, click the Collapse/Expand button
title bar.

in the group’s

•

To move a group and its contents, drag its title bar or border.

•

To delete a group and its contents, select it and press the Delete key.

Anchoring a diagram
When you submit a diagram, its pages become live pages in the site. To see these pages in
the site’s navigation view after you submit the diagram, you have to anchor its new pages
to an existing page in the site.
To anchor a diagram to an existing page in a site:
1 Display the page that will anchor the diagram in a navigation view, in a links view, or in
the Files tab of the site window. A navigation view gives you the best picture of how the
diagram will be anchored.
2 Open the diagram window for the diagram and display a design view.
3 Make sure that both windows are accessible, moving one or both if necessary.
4 Drag the page that will anchor the diagram from its window to the design view. The
page appears in the design view with the Anchor icon . It is also listed in the Anchor
Pages group in the Staging tab of the diagram window.
If you drag the anchor page onto a page in the diagram, establishing a family link,
make the anchor page a sibling of the page it is linked to. Parent-child links can
produce unexpected results.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Creating Site Diagrams

Back

Changing the display of design views
The View palette works with design views in the same way it works with navigation and
links views. The Design tab of the palette has controls for viewing collections, for orientation, and for the display of peripheral panes. The Display tab has controls for how
objects appear in the diagram. The Grid tab has controls for the grid, collision avoidance,
and the canvas.
Note: Collections are custom sets of page files, which can be visually identified by
spotlighting. (See “Creating and using collections in navigation or links view” on page 114
and “Using collections” on page 319.)
To specify how objects appear in a diagram:
In the Display tab of the View palette, do any of the following:
•

Specify whether to display master items, which appear on each canvas page, and
whether to display breaks between pages.

•

Specify whether to display staging icons next to pages. The Anchor Page icon
identifies the page used to anchor a diagram to a site. The Generic Page icon
indicates that a file for the page has been created but not edited or submitted. The Real
Page icon indicates that the page file has been created and edited, but not
submitted. The Live Page icon indicates that the page has been submitted, and that
the page file has moved to its target folder in the site.

•

Specify whether to show pages, sections, and custom objects as icons, thumbnails,
frames, ovals, or icon frames. Ovals are oval if the frame size is set to Wide. Otherwise,
they are circles.

•

Specify how to label pages in the diagram. You can use as labels the page titles entered
in the Page Title text box of the Page Inspector, the filenames of the pages, or design
names entered in the Name text box in the Page Inspector.

•

Select Multi Line Text to allow long labels to wrap to multiple lines, or Overhang Text to
allow the labels to grow horizontally. If you select neither option, long labels are
truncated.

•

Choose a frame size to set the amount of space around objects displayed as icons, or to
set the size of objects displayed as thumbnails, frames, ovals, or icon frames. If you are
using icon frames, the best choice for frame size is Wide.

•

Click the Item Color box to select a custom color from the Color palette.

Note: You can also specify the background color of the design view of the Diagram
window. (See “Customizing view colors” on page 118.)
To set options for the grid or for collision avoidance:
1 In the Grid tab of the View palette, do any of the following:
•

Select Visible to display horizontal or vertical grid lines, or both. You can also show or
hide the grid by choosing View > Show Grid or View > Hide Grid.

•

Select Snap to snap objects in the diagram to the horizontal or vertical grid lines, or to
both.

•

Select Collision Avoidance to have other objects move out of the way when you move
or insert an object in a diagram.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Creating Site Diagrams

Using Help | Contents | Index

Back

2 If you selected the grid or collision avoidance, enter values in the Horizontal and
Vertical text boxes to specify the spacing between grid lines or the avoidance area.
If you are using both the grid and collision avoidance, make the collision avoidance
values multiples of the grid values.
To set canvas options:
In the Grid tab of the View palette, do any of the following:
•

Select Canvas Is Single Page to prevent the design view canvas from expanding beyond
one page. This option deselects the other options.

•

Select the Auto options to allow the canvas to expand as necessary to contain objects
added to the diagram. The canvas expands or shrinks in increments of pages.

•

Enter values for Page Rows and Columns to constrain the canvas to the specified
number of rows and columns in the grid.

To expand a view of a diagram:
1 Choose Panorama Pane from the diagram window menu, or select Panorama in the
Design tab of the View palette. The panorama pane opens, showing the current design
view and any parts of the diagram that extend beyond it. (See “Using the peripheral panes
of the site views” on page 109.)
2 Move the view box in the panorama pane to view different parts of the diagram.
You can also expand a view by zooming out.

Changing the layout of objects in a hierarchy
The Layout tab of the Inspector is available when you add and select objects that can be
linked to other objects in a hierarchy—pages, sections, or custom objects. You can specify
how links appear, the alignment of parents and children, the effects of page breaks and
the grid, and the arrowhead style for links.
To specify the layout of objects in a hierarchy:
1 In the design view, select a page, section, or custom object.
2 In the Layout tab of the Inspector, do any of the following:
•

Choose a Draw Links As option to specify the display of links. By default, connectors
appear as single green lines with arrowheads, lines appear as two green lines with
arrowheads, and outlines appear as single straight lines with no arrowheads.You can
change the arrowhead style for connectors and outlines.

•

With a parent object selected, click a button that specifies the alignment of all child
objects with their parents.

•

With a parent object selected, select Stagger to alternate offsets for each child (when
links are drawn as connectors), or to display outlines on the right in a vertical layout
(when links are drawn as outlines).

•

With a parent object selected, select Auto Position to space child objects, as they are
added or removed, by using the spacing used for the parent object.

Note: When links are drawn as outlines, all child objects are automatically positioned.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Creating Site Diagrams

Using Help | Contents | Index

Back

•

With a parent object selected, select Align Children to align the first child with the
parent, or Center Children to center all children relative to the parent.

•

Select Honor Page Breaks to prevent objects from straddling a page break.

•

Select Honor Grid to use settings in Grid tab of the View palette when distributing
parent, child, and sibling objects.

•

Enter values for the horizontal or vertical spacing between parent, child, and sibling
objects, or for both horizontal and vertical spacing. Zero specifies the default spacing.

Choose an arrowhead style for connectors and outlines.

Preparing diagrams for presentation
After creating a diagram that represents a site, you can add boxes, annotations, and level
objects to provide more information to reviewers or clients. Boxes are rectangular
containers for text and graphics. Annotations are text comments that can be displayed
along with an icon. Level objects are brackets, with optional labels, that can be used to
indicate levels in a site. If you want objects created for presentation purposes to appear on
each page of a diagram, you can add them as master items on the Master tab of the
diagram window.
You can enhance the appearance of a diagram by aligning and distributing objects and
adjusting the curvature of link lines. To publish the diagram, you print it to paper or export
it to Adobe PDF or SVG format for an online presentation.

Adding master items
The Master tab of the diagram window provides a master view with the same grid and
canvas settings as the design view. Objects added to the master view (master items)
appear on each page of a diagram, but can’t be submitted. You might use master items, for
example, to display a logo and title on each page of a diagram.
The master view shows only master items, but the design view shows both master items
and objects added to the design view. You can add master items at any time, but it may be
most convenient to set them up before beginning work in the design view. That way, you
can see the master items while you lay out the diagram in the design view.
To add master items to a diagram:
Display the Master tab of the diagram window, and drag objects from the Diagram set of
the Objects palette to the master view.

Adding boxes
Boxes are graphical containers that can hold objects, including text, graphics, and other
boxes. All contents within a box are clipped to the box boundaries, and move with the
box. You can format text within a box, and use it to present captions, titles, and other information.
When you drag an image to the design view, a box is automatically created to contain
the image. You can display the image at its actual size by selecting Size to Image in the
Box Inspector.
To add a box to a diagram:
1 Drag the Box icon

from the Diagram set of the Objects palette to the design view.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Creating Site Diagrams

Using Help | Contents | Index

Back

2 In the Box tab of the Box Inspector, do any of the following:
•

Enter text in the Text box. In the design view, you can also enter text directly in the box
by clicking in the box and typing the text.

•

Select Single Line to constrain the text to a single line.

•

Select Resize with Text to resize the box to fit
the text.

•

Click an Align button to align the text.

•

Enter width and height values for the margins within the box.

•

Select font options for text: Bold, Italic, or both.

•

Specify the location of any image you want to appear in the box, and select Size to
Image to size the box to fit the image.

3 In the Graphics tab of the Box Inspector, do any of the following:
•

Specify the color and line width of the border of the design box.

•

Specify the fill color of the design box.

•

Specify the color and font size of the text.

4 Specify how to apply the settings:
•

Click Default Settings to use the current settings for all subsequent boxes.

•

Click Apply to All to apply the current settings to all existing boxes.

Adding, viewing, and editing annotations
You use annotations to comment on a diagram or on items in a diagram, or to provide
captions. Annotations consist of text with an optional subject line. Each annotation
appears as an annotation icon in the diagram, and you can display the subject or text
along with the icon. You can place an annotation on an object or link line, or anywhere in
the design view. Annotations added to objects stay with the objects when they are
moved. Annotations added to link lines stay with the lines when they are moved or
deflected.
The Annotations tab in the diagram window shows the subject lines and text of all annotations to a diagram. You can edit annotations in the Annotations tab or in the Design tab.
To add an annotation to a diagram:
1 Drag the Annotation icon from the Diagram set of the Object palette to an object in
the design view or a blank area of the canvas.
2 Enter the subject and text by doing one of the following:
•

In the design view, double-click the annotation, select the subject or text, and enter a
new subject or text.

•

In the Annotation Inspector, enter the subject and annotation text.

3 In the Annotation tab of the Annotation Inspector, do any of the following:
•

To display the subject line in the diagram, select Display Subject.

•

To specify the alignment of the subject line, click an Align button.

•

To display the text in the diagram, select Display Text. (If you select both Display Subject
and Display Text, the text appears under the subject.)

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Creating Site Diagrams

Using Help | Contents | Index

•

Back

Choose a position option to specify whether the subject and text appear to the right or
left of the icon, or centered above or below the icon.

4 In the Graphics tab of the Annotation Inspector, do any of the following:
•

Specify the color and line width of the annotation’s border.

•

Specify the fill and header color of the annotation.

•

Specify the color and font size of the text.

5 Specify how to apply the settings:
•

Click Default Settings to use the current settings for all subsequent annotations.

•

Click Apply to All to apply the current settings to all existing annotations.

To view the subject and text of an annotation:
Do one of the following:
•

Double-click the annotation to open it.

•

Click the Annotations tab of the diagram window and view it there.

•

Select the annotation and view it in the Annotation Inspector.

To edit the subject or text of an annotation:
1 In the Design or Annotations tab of the diagram window, select the annotation.
2 Do one of the following:
•

In the Annotation Inspector, enter a new subject or text.

•

In the Design tab, display the subject or text if necessary and then select and edit the
subject or text.

•

In the Annotations tab, select and edit the subject.

To delete an annotation:
In the Design or Annotations tab of the diagram window, select the annotation and
press Delete.

Adding level objects
Level objects are brackets, with optional text labels, that you can use to indicate the
hierarchy of objects in a diagram. You can place a bracket anywhere in the design view,
and resize the bracket to include all the objects at a particular level.
To add a level object to a diagram:
1 Drag the Level icon

from the Diagram set of the Objects palette to the design view.

2 Position the bracket by dragging it.
3 Resize the bracket by dragging any of its handles.
4 In the Level tab of the Level Inspector, do any of the following:
•

Label the level by entering text in the Text box. You can also label the level in the design
view by clicking to the left of the bracket and entering text in the text box that opens.

•

Click a vertical alignment button to position your label.

•

Click a text alignment button to justify the text within the brackets.

•

Select Single Line to constrain the label to remain on one line.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Creating Site Diagrams

Using Help | Contents | Index

Back

•

Select Center Bracket to center the bracket within its handles.

•

Enter width and height values for the label margins.

•

Select font options for the label text: Bold, Italic, or both.

5 In the Graphics tab of the Level Inspector, do any of the following:
•

Specify the color and line width of the bracket.

•

Specify the color and font size of the text.

6 Specify how to apply the settings:
•

Click Default Settings to use the current settings for all subsequent level objects.

•

Click Apply to All to apply the current settings to all existing level objects.

Aligning and distributing objects in a diagram
You can use the Align palette to control the spatial relationship of objects in a diagram.
Note: When you align an object with its parent, the parent is a geometrical dominant, not
a logical parent within a hierarchy of family relationships. The geometrical parent is the
entire canvas page, or it is the group if the objects you are aligning are in a group.
To align an object with its geometrical parent:
1 Select the object.
2 In the Align palette, click one of the Align to Parent buttons.
To align objects with each other:
1 Select two or more objects.
2 In the Align palette, click one of the Align Objects buttons.
To distribute objects or spacing:
1 Select three or more objects.
2 In the Align palette, do one of the following:
•

Click one of the Distribute Objects buttons.

•

Click one of the Distribute Spacing buttons.

•

In the Distribute Objects or Distribute Spacing section of the palette, select Use Spacing
and enter a numeric value for the spacing offset.

Changing the deflection (curve) of link lines
You can make link lines straight or deflect them from a straight line (curve them) to any
degree and in either direction. You can do this by dragging the lines or specifying a
deflection percentage.
To change the deflection of a link line:
1 Select the line.
2 Do one of the following:
•

Drag the line’s selection rectangle
or decrease.

•

In the Link Inspector, choose a percentage from the Deflection menu. Positive
percentages increase the deflection to the right, negative percentages to the left.

Using Help | Contents | Index

in the direction you want its deflection to increase

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Creating Site Diagrams

Back

(Right and left are from the perspective of the source page—the page that the link
arrow points away from.) A deflection of zero produces a straight line.
Note: When two pages are linked by two lines, giving the lines a zero deflection merges the
lines. This effect is likely to obscure the design.

Printing and exporting diagrams
You can print a diagram for a paper presentation, or export the diagram to Adobe PDF or
SVG format for an online presentation. The exported diagram can contain live links and
annotations.
To print a diagram:
1 Open the design view for the diagram, and choose File > Print.
2 Select print options and click OK.
To export a diagram:
1 Choose File > Export > Diagram, or choose Export Diagram from the diagram
window menu.
2 Choose SVG or PDF.
3 Select Preserve Background Color to give the exported image the background color of
the design view. Otherwise, the image is exported with a white background.
4 Select Make Diagram Objects into Links and specify the root URL if you want the links to
open the files.
5 Select an annotation option:
•

Static exports annotations in their current states—with their contents displayed or
closed to icons.

•

Live lets you open annotations by clicking them.

Submitting diagrams
When you submit a diagram, GoLive converts its pages and sections to real, editable HTML
pages. The pages move to the Files tab, indicating that they exist as files within the site.
Files for custom objects are created if possible. When you recall a submitted diagram, you
reverse these changes. You can submit and recall a diagram repeatedly while you develop
a site. You can also submit and recall selected objects within the diagram.
Before submitting a diagram, you should check its staging and correct any errors that are
detected.

Checking the staging of diagrams
When you check the staging of a diagram, you determine whether all its pages are
connected by links to an anchor page and whether there will be folder or filename
problems when the diagram is submitted. You can then make corrections as needed.
Note: Diagrams with staging errors cannot be submitted, and a few error conditions can
be detected only when you attempt a submission. If you check a diagram, detect no errors,
but are unable to submit the diagram, check it again.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Creating Site Diagrams

Back

To check the staging of a diagram:
1 In the diagram window, click the Staging tab. If you haven’t submitted the diagram, its
pages are listed as Design Pages, and custom objects are listed as Design Objects. If you
have submitted the diagram, the pages are listed as Live Pages.
2 Click the Check Staging button on the toolbar, or choose Diagram > Staging > Check
Staging. A check mark in the Check column opposite a page or object means that no
errors were detected. Other icons in the column indicate problems or potential problems.
To correct staging errors:
If an error icon or warning icon appears opposite a page or object in the Check column,
use the following information to correct the problem:
•

The File In Use icon indicates that a page is open in a document window. Close all
pages in a diagram before submitting or recalling the diagram.

•

The Target Folder icon indicates that the target folder for a page could not be created
when you tried to submit the diagram. Change the Folder setting in the Section
Inspector for the page’s section, or change the Target Dir setting in the Page Inspector if
the page doesn’t belong to a section. For custom objects, change the Target Dir setting
in the Object tab of the Object Inspector.

•

The Section Name icon indicates that a section page could not be named index.html
(or another name assigned to the home page in Site preferences) because a file with
that name already exists in the target folder. Rename the page or specify another folder
for the page by changing the Folder setting in the Section Inspector.

•

The Stage in Scratch icon indicates that a page is not linked directly or indirectly to an
anchor page. Unless you want the page to be treated as a scratch page when the
diagram is submitted, drag an anchor page from the navigation view to a page in the
design view or link the page to an anchored page in the diagram to create a family link.
(See “Anchoring a diagram” on page 81.)

Note: All custom objects are treated as scratch items. A custom object must have a sample
file, stationery, or template specified in the Object Inspector before the object can become
a file in the site.
•

The File Rename icon indicates that the page will be renamed automatically when
the diagram is submitted. Normally this is an acceptable result.

Submitting all diagram items
You can submit a diagram for the first or only time, submit a diagram you have recalled, or
submit a nonrecalled diagram to update a previous submission.When you submit a
diagram, the following changes take place:
•

In the Staging tab of the diagram window, the pages move from the Design Pages
group to the Live Pages group. (They also appear with the Live Page Staging icon in
the Design tab.) Custom objects move from the Design Objects group to the Live
Objects group.

•

In the site window, the pages appear in the Files tab. The pages move from the diagram
staging folder in the site data folder to the target folder in the root folder.

•

In the navigation view, pages that are directly or indirectly linked to an anchor page
appear in the central pane in the same hierarchy that they form in the design view.
Unanchored pages and custom objects appear in the scratch pane.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Creating Site Diagrams

Using Help | Contents | Index

•

Back

Pending links between pages are updated. The Pending Links palette can be used to
resolve any problems with the links.

To submit all diagram items:
1 Open the diagram in a design view.
2 Click the Submit All button
on the toolbar, choose Diagram > Staging > Submit All,
or choose Submit All from the diagram window menu.

Recalling and updating all diagram items
Recalling a diagram reverses the changes that occurred when the diagram was submitted.
Recalls are often an expected part of the design process. For example, you might submit a
diagram in progress to examine it in a live context, and then recall it for further design
work. Or you might submit one of two alternative diagrams and recall it so that you can
submit the other and then choose between them.
In fact, you don’t need to recall a diagram to work on it further. You can submit an unfinished diagram, leave it live, and continue to work on it in the design view. Submitting the
diagram again updates the site.
Updates involving substantial design changes can produce unexpected results. If this
happens, try recalling the updated diagram, checking and fixing it, and resubmitting
the diagram.
To recall all diagram items:
1 Open the diagram in a design view.
2 Click the Recall All button
on the toolbar, choose Diagram > Staging > Recall All, or
choose Recall All from the diagram window menu.

Submitting and recalling selected items
You can perform selective submissions and recalls of items in a diagram. For example, you
might submit selected items if you are abandoning a diagram as a whole but want to
salvage parts of it. Or you might submit a complete diagram, discover that part of it needs
further design work, and recall only that part for retooling.
To submit selected items:
1 In the Design or Staging tab of the diagram window, select the items.
2 Do one of the following:
•

Choose Submit Items from the Diagram > Staging menu or the diagram window menu.

•

Choose Submit Items to Scratch from the Diagram > Staging menu or the diagram
window menu.

To recall selected items:
1 In the Design or Staging tab of the diagram window, select the items.
2 Choose Recall Items from the Diagram > Staging menu or the diagram window menu.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

Managing and Viewing Web Sites
Managing a site
A Web site is built from a collection of linked files. These files can contain objects such as
HTML, images and media, and scripts. Maintaining properly linked files and organizing the
files into a logical hierarchy are important for managing a site. GoLive offers several tools
for managing and viewing sites.
Site window For viewing and manipulating files and folders within your site, GoLive has a
site window that gives you access to all of the site files and assets. (See“Working with the
site window” on page 92 and see “About site assets” on page 304.) It’s good practice to
maintain all your source files, data, HTML files, scripts, and media in the site window. The
site window not only helps you avoid breaking links and creating orphan files, it also gives
you easy access for fixing site file errors.
Graphical views GoLive also has graphical site views that let you look at the hierarchy of
your site with different representations. (See “About graphical site views” on page 104.)
Graphical site views are useful for examining the navigation of your site, reviewing files, or
establishing or correcting links.
In & Out Links palette The In & Out Links palette is a powerful link management tool
that you can use to change links and file references. For example, if you use an application
other than GoLive to change the name of an image file, you can use the In & Out Links
palette to change all references in your site to the new filename. (See “Editing links and
URLs sitewide” on page 124.)
For information about creating a site, see “Creating a site” on page 46.

Specifying preferences and settings for Web sites
When you manage a Web site, it’s important to specify several application-wide Site
preferences and site-specific settings that affect the site.
The Site preferences establish the way you manage all sites and include settings for
general file and folder management, Filename Constraints, Status, Clean Up Site, Upload/
Export, Diagram Colors, and Diagram Link Types. Two other categories of application-wide
preferences that also affect the management of all sites are the Script Library preferences
and Internet preferences. The Script Library preferences include settings for how GoLive
handles JavaScripts, and the Internet preferences include settings for connectivity and
network status.
In addition to the Site preferences, you can also specify site-specific settings for Publish
Servers, URL Handling, URL Mappings, Diagram Colors, Script Library, and others. The sitespecific settings override the Site preferences.
To set preferences that affect all sites:
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
Using Help | Contents | Index

Back

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

2 In the left pane of the Preferences dialog box, do one of the following:
•

Click or expand the Site preferences icon

•

Click the Script Library preferences icon .

•

Click the Internet preferences icon

and then select a Site category.

3 In the right pane, set the preferences you want to apply to all sites.
4 Click OK.
To specify site-specific settings:
1 Open a site.
2 Click the Site Settings button

on the toolbar or choose Site > Settings.

3 In the Site Settings dialog box, click a category in the left pane and then select options
in the right pane.
4 If the Site Specific Settings option is available for a category, select it to have the sitespecific settings override the Site preferences.
5 Click OK.

Working with the site window
The site window is your indispensable tool for building and managing a Web site, and
should contain all of the linked files used in the site.

Files tab and Extras tab in the site window
A. Current status of files B. Show/Hide right pane button.

To open a site project file (.site) in the site window:
Do one of the following:
•

Choose File > Open, browse to the site project file (.site), select it, and then click Open.

•

Double-click the site project file on your system desktop.

Note: Opening a site project file automatically creates a backup of the file. GoLive deletes
the backup when you save and close the site project file. You can turn this feature off for all
sites in Site preferences.
If you need to reopen a site that was open during a computer crash, open the regular
site file, not the backup site file. If it is necessary to use the backup, GoLive will
inform you.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

To show or hide the right pane of the site window:
Click the Toggle Split View icon

in the scroll bar at the bottom of the window.

To display the contents of a tab in the site window:
Do one of the following:
•

Click the tab to bring it to the front.

•

Choose the tab from the site window menu.

To restore the original configuration of the site window:
Choose Default Configuration from the site window menu for either pane of the window.
To customize the display of the site window tabs:
Do any of the following:
•

To change the sort order of the column the tab is currently being sorted by, click the
column’s head. In Mac OS, you can also click the Sort Order icon above the scroll bar.

•

To sort the tab by another column, click the column head.

•

To show and hide columns, choose the column names from the Show Columns menu in
the View palette.

•

To resize a column in a tab, drag the right border of the column head to the left or right.

•

To change the position of a column in the tab, drag (Windows) or Command-drag (Mac
OS) the column head to the left or right. (You can’t change the position of the left-most
column in any tab.)

•

To go up one level in the folder or group whose contents are listed in the tab, click the
Upwards button (Windows) or (Mac OS) at the top of the tab.

Note: Once you’ve reached the topmost level of the folder hierarchy reflected in the site
window, GoLive opens the Local File Browser to let you navigate through the file system.
•

To show or hide the anchors in a page, click the icon to the left of the page to expand or
collapse the page.

•

To change the view of items in a tab, choose an option from the Site > View menu.

For more information about arranging site window tabs, see “Rearranging palettes or
tabs” on page 32.

About the site window
GoLive organizes a site into nine tabs to handle different aspects of site management:
Files Contains HTML, XHTML, XML, media, and other files, as well as folders that you can
use to organize the files.
External Displays external URLs and e-mail addresses referenced by the site files.
Diagrams Contains diagrams with a graphical view of possible site implementations.
(See “About diagrams” on page 72.)
Colors Contains a collection of colors used in your site.
Font Sets Contains a collection of font sets used in your site. The font sets are lists of alternative fonts that you use to override the browser’s default display font settings.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Managing and Viewing Web Sites

Back

You can also show and hide the right pane of the site window that contains these
additional tabs:
Extras Contains all of the files and folders in the site’s web-content folder and web-data
folder. The web-data folder contains four types of reusable objects: components,
stationery pages, snippets, and page templates. The Extras tab also contains diagrams,
Smart Objects, InDesign packages, queries, and files moved to the Site Trash. (See “About
site assets” on page 304.)
Note: You can choose to not show the web-content folder in the Extras tab by doing the
following: choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS) and
select Site in the left pane; then deselect Show Web-content Folder in Extras Tab.
Errors Contains missing files, orphan files, Smart Object warnings, and files that have a
name that doesn’t meet your filename constraints. An orphan file is referenced in a link
but GoLive can’t find the file, or the file is outside the web-content folder. If you manage
files in the site window, you can avoid creating orphan files. Click a file in the Errors tab to
open the Error Inspector. For information on finding and fixing links to missing files, see
“Checking the site for missing or orphan files” on page 127.
Publish Server Displays the site on a remote server while GoLive is connected to a
publish server (an FTP, WebDAV, or local file server).
Collections Displays custom sets of one or more files that you select manually or define
as a result of a query, syntax check, or find operation.
The status column in the site window contains icons that show you each file’s status. The
checkmark icon indicates that the file is error-free—that all files referenced in it have
been found. For information on the meaning of the other status icons, see “Fixing site
errors” on page 126.
You can also display a third view of the site window that contains two graphical views:
Navigation and Links view (see “About graphical site views” on page 104).

About site files and folders
In GoLive, a site is a collection of files that are used as resources for developing and
maintaining a Web site on a Web server. Viewers of the Web site only see files that you
upload to the Web server. (See “Uploading a site” on page 328.) These files include the
home page (usually named index.html), pages linked directly or indirectly to the home
page, and media files referenced by any of these pages.
Viewers don’t see the rest of the files that are usually placed in the web-data and websettings folders, and normally the contents of these folders are not uploaded to the server.
The files comprising a GoLive site include the site project file and the contents of three
folders: the web-content folder, the site web-data folder, and the site web-settings folder.
•

Files and file information that are managed by the site project file are displayed in the
various tabs of the site window.

•

The contents of the site web-content folder are listed in the Files and Extras tabs of the
site window.

•

The contents of the site web-data folder are listed in the Extras tab of the site window.

•

The site web-settings folder contains XML files of site-specific settings, and settings for
the Colors tab, External tab, and Font Sets tab.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

Inspecting file properties
The File Inspector for any selected file has a File tab with basic file information, a Name tab
with information on whether the filename matches or violates a filename constraint (see
“Naming files and folders” on page 102), and a Content tab with a thumbnail of the file. For
HTML and XHTML files, the File Inspector includes an additional Page tab with the page
title and encoding information. (See “Changing the page title” on page 53.) The Folder
Inspector includes basic folder information and a Name tab with filename status.
You can also use the File Inspector and Folder Inspector to rename files and folders, or
change their publish state and their status label. (See “Providing file status information” on
page 133.)
To inspect a file or folder:
1 Display the Inspector.
2 Select the file or folder in the site window.
3 If you selected a file, click the File, Name, Page, or Content tab in the File Inspector as
necessary. If you selected a folder, click the Folder or Name tab in the Folder Inspector as
necessary.
To show file information in Explorer (Windows) or Finder (Mac OS):
Click the Show Information in Explorer button
Finder button (Mac OS) on the toolbar.

(Windows) or the Show Information in

Working with files and folders
In the site window, arrange files in folders to keep them in order. For example, create
separate folders for storing pages, images, and animations in the Files tab in the site
window.
Important: When using GoLive, you can reference files in any folder on your system.
However, if you use a system tool such as Explorer (Windows) or Finder (Mac OS) to move,
rename, or delete site files, GoLive doesn’t update link and reference information. This is
why it’s highly recommended that you work in the site window when moving, renaming,
or deleting files. If you do move, rename, or delete files with a system tool, be sure to
refresh the view of files in the site window. (See “Refreshing the site window” on page 98.)
Similarly, use the site window to arrange non-file items in groups. (GoLive treats and
displays a group in the site window as a type of folder, but all groups are stored within the
Settings folder rather than within other regular folders on your hard disk.) Items in the
Files and Extras tabs are stored in regular folders. All non-file items in the External,
Colors, and Font Sets tabs are stored in groups. Items in the Collections tab are stored in
collections.
To create a folder (group, regular folder, or collection):
1 Click the tab where you want to create the folder.
2 If you want the folder you are creating to be subordinate to an existing folder in the tab,
select the existing folder.
3 Do one of the following:
•

Click the Create New Folder button

Using Help | Contents | Index

on the toolbar.

Back

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

•

To add a folder to the Files or Extras tab, drag the Folder icon
Objects palette to the site window.

from the Site set of the

•

To add a group to the External tab, drag the URL Group icon
or the Address Group
icon from the Site set of the Objects palette to the site window.

•

To add a group to the Colors tab, drag the Color Group icon
Objects palette to the site window.

•

To add a group to the Font Sets tab, drag the Font Set Group icon
the Objects palette to the site window.

from the Site set of

•

To add a collection to the Collections tab, drag the Collection icon
the Objects palette to the site window.

from the Site set of

from the Site set of the

GoLive assigns a generic name of “untitled folder” for a new folder in the File tab; “untitled
collection” for a new collection in the Collections tab; and “untitled group” for a new group
in the Colors, External, or Font Sets tabs.
4 Enter a new name for the folder or group.
5 Move items into the folder as necessary.
You can also import files and other items into a site. (See “Adding existing files” on
page 52.)
To move a file or object to a folder (group or regular folder):
1 Do one of the following:
•

Drag the file or object from a folder in the Explorer (Windows) or Finder (Mac OS) into a
folder or tab in the site window.

•

Drag an object into a group.

Dragging a file from a desktop folder to a folder in the
site window

If you want the target folder to open so that you can see its contents, position the
pointer over its icon before releasing the mouse button. If you want to target a folder
one level up from the folder displayed in the tab you are dragging into, drag the file or
object to the Upwards button (Windows) or (Mac OS) at the top of the tab.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

2 If you are moving a file containing links or file references, click OK in the Move Files
dialog box to update them.
Important: If you exclude any file from updating, broken links and invalid file references
might result.
To open the desktop folder containing a file or folder in the site window:
1 Select the file or folder in the site window. You can select only regular folders and files,
not groups or objects in groups.
2 Click the Reveal in Explorer (Windows) or Reveal in Finder (Mac OS) button
the toolbar.

Tracking work on site files
The Workflow palette lets you keep track of what state your site files are in, and is useful
whether you’re working alone or in a workgroup. When you select a file in the site window,
the Workflow palette lets you indicate who is editing a file and how complete the file is.
This information is displayed in two additional columns in the Files tab of the site window
for easy reference—in the To Be Edited By column and the Completed column.
Note: You can also add metadata to a file in a site to preserve information about the
contents, copyright status, origin, and history of the file (see “Adding metadata to
documents” on page 40).
To show the state of a file or folder:
1 Choose Window > Workflow to display the Workflow palette.
Note: If Workflow does not appear in the Window menu, choose Edit > Preferences
(Windows) or GoLive > Preferences (Mac OS), and then click Modules. Make sure the
Workflow option, which is at the bottom of the list under Extend Scripts, is selected in the
right pane, and then restart GoLive.
2 Select a file or folder in the site window.
3 In the Workflow palette, enter a name in the To Be Edited By text box and then choose a
percentage from the Completed menu.

Deleting files
When you delete a file or folder from the site, you send it to a Site Trash folder or to the
system Recycle Bin or Trash. The default destination is Site Trash, but you can select the
Recycle Bin or Trash as the destination in the Site preferences. You can recover files from
the Site Trash, or you can move them to the system Recycle Bin or Trash. Deleting objects
and groups from the system Recycle Bin or Trash removes them entirely from the system.
For many purposes, updating the Files or Extras tab or removing unused objects from the
External, Colors, or Font Sets tab is preferable to deleting the file or object. (See
“Refreshing the site window” on page 98.)
To delete a file, regular folder, object, or group:
1 Select the item.
2 Click the Delete Selected Item button

on the toolbar.

3 If necessary, confirm the deletion by clicking Yes.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

To recover a file from the Site Trash:
1 If necessary, click the Toggle Split View icon
window to show the right pane.

in the scroll bar at the bottom of the site

2 Click the Extras tab.
3 Open the Site Trash folder and then select the file you want to recover.
4 Do one of the following:
•

If you haven’t performed any other actions since you deleted the file, choose
Edit > Undo Move to Trash.

•

Drag the file to its previous location (or another location) in the Files tab.

To move files to the system Recycle Bin or Trash:
In the Extras tab, do one of the following:
•

To move all files from the Site Trash to the system Recycle Bin or Trash, select the Site
Trash icon and then choose Empty Trash from the context menu.

•

To move an individual file from the Site Trash to the system Recycle Bin or Trash, select
the file and then press Delete (Windows) or Command-Delete (Mac OS).

To change the destination of file and folder deletions:
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), and then
click Site.
2 Select a trash option and then click OK.

Refreshing the site window
You can refresh the list of items in the Files, Diagrams, Collections, and Extras tabs in the
site window so that you are viewing the actual site—that is, the contents of the site’s webcontent folder (Files tab), web-data folder (Extras and Diagrams tabs), or web-settings
folder (Collections tab). You can also refresh the contents of the current directory on the
publish server if you connect to the publish server and refresh the Publish Server tab.
Refreshing the site window may result in files being added to the site window, files being
removed, or both, depending on changes you’ve made to files both in and outside GoLive.
Refresh the site window if you have been working with files outside GoLive—for example,
using the Explorer (Windows) or Finder (Mac OS) instead of GoLive to move, rename, or
delete, files in the site window.
To refresh the Files, Diagrams, Collections, or Extras tabs:
1 Do one of the following:
•

Click the tab.

•

Click the Files tab and then open the desired folder.

2 Click the Refresh View button

on the toolbar or choose Site > Refresh View.

Note: If your site contains a password-protected PDF file, GoLive will prompt you for the
password when you refresh the site.

Using Help | Contents | Index

Back

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

To refresh the Publish Server tab:
1 Connect to a publish server.
2 Open the server directory you want to refresh.
3 Click the Refresh View button

on the toolbar or choose Site > Refresh View.

Adding items in use and removing unused items from the
site window
GoLive can scan all pages in your site for non-file items that are used on a page but are not
listed on the External, Colors, or Font Sets tabs. Once found, GoLive adds these items to
the appropriate tabs in the site window. For example, GoLive adds a color to the Colors tab
if the color is being used on a page but isn’t listed in the Colors tab.
If GoLive finds new references or addresses that need to be listed in the External tab,
GoLive creates a Scanned URLs or Scanned Addresses group for them in the tab. Similarly,
Scanned Colors or Scanned Font Sets groups are created in the Colors or Font Sets tabs if
new colors or font sets are found.
You can remove references, colors, or font sets that are not being used in your site from
the External, Colors, and Font Sets tabs.
To add items in use and remove unused items from the site window:
1 Click the External, Colors, or Font Sets tab.
2 Click the Get Used/Remove Unused button

on the toolbar.

Note: By default, the Get Used/Remove Unused button adds items in use and removes
unused items. To perform a single action only, such as removing unused items, click the
triangle to the right of the Get Used/Remove Unused button and choose an option.
3 Click OK to confirm the removal of unused items, if necessary.

Updating site files that are dependent on library files
When you update site files, GoLive checks the content of the Components, Templates,
Smart Objects, and InDesignPackages folders in the site’s web-data folder for updates to
that content made outside of GoLive.
For information about components or templates, see “About site assets” on page 304. For
information about Smart Objects or InDesign packages, see “Working with Smart Objects”
on page 262 and “Adding InDesign content” on page 286.
To update site files that are dependent on library files:
1 Open a site.
2 Do one of the following:
•

To check all components, templates, Smart Objects, or InDesign packages for updates,
choose Site > Update Files Dependent On > Library or click the Update Files Dependent
on Library button on the toolbar.

•

To check specific components, templates, or Smart Objects for updates, select
templates, components, or Smart Objects in the Extras tab of the site window (Controlclick to select multiple files), and then choose Site > Update Files Dependent On >
Selection.

3 If necessary, select files to update in the Update Dependent Files dialog box.
Using Help | Contents | Index

Back

Adobe GoLive CS Help

Using Help | Contents | Index

Managing and Viewing Web Sites

Back

100

Cleaning up a site
The Clean Up Site command is essential for maintaining your site and preparing it for
publication (uploading to a Web server for viewing by the public). Cleaning up a site gets
rid of unused links, colors, e-mail addresses, and font sets that can clutter the working
version of your locally stored site. You can also use this command to copy any files or
objects into the web-content folder that are referenced in your site, but actually located
outside the web-content folder.
When cleaning up a site, you can choose to do any combination of the following:
•

Refresh the view of items listed in the site window.

•

Copy files that are used in your site into the web-content folder. Used means “referenced
on some page in the web-content folder.”

•

Remove unused files. Unused means “not referenced on any page in the web-content
folder.” (See “Refreshing the site window” on page 98.)

•

Add references, colors, and font sets that are used in your site but are not listed in the
External, Colors, or Font Sets tabs. (See “Adding items in use and removing unused
items from the site window” on page 99.)

•

Remove unused references, colors, and font sets.

To specify options for cleaning up a site:
1 Do one of the following:
•

To specify options for cleaning up the active site only, click the Site Settings button
on the toolbar or choose Site > Settings. Then click Clean Up Site in the left pane, and
then select Site Specific Settings.

•

To specify options for cleaning up all sites, choose Edit > Preferences (Windows) or
GoLive > Preferences (Mac OS), and then expand Site in the left pane. Then click Clean
Up Site.

2 Select options as follows:
•

To refresh the view of items listed in the site window, select Refresh View.

•

To copy files that are used in your site into the web-content folder if they are stored
outside the web-content folder, select Add Used Files. If you want to display a dialog
box that lets you select the files to be copied, select the Show List of Files to Copy
option.

•

To add non-file items that are used in your site but are not listed in the External, Colors,
or Font Sets tabs in the site window, select Add Used External References, Add Used
Colors, or Add Used Font Sets.

•

To move files not being used in your site to the Site Trash, select Remove Files Not
Linked. If you want to display a dialog box that lets you select the files to be removed,
select the Show List of Files to Remove option.

•

To remove non-file items that are not being used in your site but are listed in the
External, Colors, or Font Sets tabs in the site window, select Remove Unused External
References, Remove Unused Colors, or Remove Unused Font Sets.

Using Help | Contents | Index

Back

100

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

101

•

Select Show Options Dialog if you want to display the Clean Up Site Options dialog box
every time you choose the Site > Clean Up Site command. If you select this option,
GoLive deselects the Don’t Show Again option in the Clean Up Site Options dialog box.

•

Click Factory Settings to use the default settings for all options.

3 Click OK.
To clean up a site:
1 Choose Site > Clean Up Site.
2 If the Clean Up Site Options dialog box appears, select options as necessary and then
click OK.
3 If the Copy Files or Clean Up Site dialog box appears, select the files you want to copy
into or remove from the web-content folder, and then click OK. Click OK in the Update Files
dialog box.

Providing names and paths for files
When you build a Web site, you must name files so that you can properly reference them.
The connection between a link and its referenced file or object can be expressed as a path
describing the folder hierarchy. GoLive lets you customize the naming of files and the
creation of paths. You can choose from a variety of filename rules and also determine
whether a path is relative or absolute. (See “About absolute link paths” on page 103.)

About filenames
Files and folders need to be properly named so they can be uploaded correctly to the
server hardware you’re working with, whether it’s Windows, Mac OS, UNIX, DOS, or some
other operating system. GoLive comes with a set of filename rules that ensure crossplatform compatibility. When a filename violates one of the rules, the Errors tab of the site
window and the File Inspector indicate the problem. The File Inspector also lists the rule
itself.
You can examine, modify, delete, and add filename rules. (See “Changing filename
constraints” on page 102.)
When naming files and folders, use lowercase to avoid case-sensitivity problems and
don’t include spaces in the name. Spaces in file and folder names are automatically
converted to the URL escape code “%20” during the FTP process. As a result, some links
and file references might become invalid.

Using Help | Contents | Index

Back

101

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

102

Naming files and folders
When you create a new empty file, GoLive automatically gives it a name. If you know what
content that file will contain, you’ll probably want to rename it.
When you rename a file that is referenced by other files, you can update the other files
with the new filename at the same time. For information on updating an entire site for a
URL that other files reference, see “Editing links and URLs sitewide” on page 124.
If you use a name for a file or folder that contains illegal characters as defined by the
current filename constraint for the site (or all sites), GoLive displays warnings in the Errors
tab of the site window, the Name tab of the File or Folder Inspector, and the Status column
of the Files tab.
To rename a file:
1 Select the file in the Files tab in the site window and then enter the new name in the File
tab of the File Inspector.
2 If there are any other files that contain references to the file you renamed, the Rename
File dialog box appears. To have GoLive automatically update the references with the new
filename, leave the files selected and then click OK.
To check for filename constraint violations:
Select the file and then click the Name tab in the File Inspector to view any violations.
To rename a folder:
Select the folder in the Files tab in the site window and then enter the new name in the
Folder tab of the Folder Inspector.

Changing filename constraints
GoLive alerts you if you use a filename that doesn’t meet the designated filename
constraints. GoLive provides several constraint sets, or you can create your own sets.
GoLive’s default set is called the GoLive standard, a combination of Windows 98, NT, 2000,
XP, Mac OS, and UNIX. Other sets are GoLive strict, GoLive lower case, Windows (applies to
Windows 98, NT, 2000, XP), DOS/Windows 3.1, Mac OS, Mac OS X, and UNIX. You can also
select the File System Default set to have your operating system enforce filename
constraints instead of GoLive.
To change filename constraints:
1 Do one of the following:
•

To change filename constraints for the active site only, click the Site Settings button
on the toolbar or choose Site > Settings. Then click Filename Constraints in the left
pane, and then select Site Specific Settings.

•

To change filename constraints for all sites, choose Edit > Preferences (Windows) or
GoLive > Preferences (Mac OS), expand Site in the left pane, and then click Filename
Constraints.

2 Choose a set of constraints from the Selected Constraints menu.
3 Click OK.

Using Help | Contents | Index

Back

102

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

103

To add a set of filename constraints:
1 Do one of the following:
•

To add a set for the active site only, click the Site Settings button
on the toolbar or
choose Site > Settings. Then click Filename Constraints in the left pane, and select Site
Specific Settings.

•

To add a set for all sites, choose Edit > Preferences (Windows) or GoLive > Preferences
(Mac OS), expand Site in the left pane, and then click Filename Constraints.

2 Choose a set of filename constraints from the Selected Constraints menu that most
closely matches the set of constraints you want to use.
3 Click Duplicate. This creates a new duplicate set. You can edit and delete a duplicate set,
but you can’t delete the original.
4 Enter a name for the new set in the Selected Constraints text box.
5 Edit the set in the other text boxes as necessary.
6 Click OK.

About absolute link paths
Site pages contain paths to a variety of linked files: other pages in the site, images
displayed on the page, media items embedded in the page, and so on. GoLive automatically uses relative paths—paths that point to the location of a file in relation to the current
file—for the destinations of links. In most cases, relative paths are appropriate to use. But,
if necessary for special cases, you can selectively change the paths to make them absolute,
or set a preference to have GoLive make all new paths you create absolute by default.
When you make a path absolute, the entire path from the root folder to the linked file is
provided. Otherwise only a relative path is provided.
Example A page /root/pages/info/page.html (where root is the name of the root folder)
references the image /root/images/image.gif. The absolute path to the image file is /
images/image.gif. The relative path is ../../images/image.gif.
Absolute paths are useful in the following cases:
•

If a form references a CGI script at the root level of the site directory (or any other subdirectory), any references to that file are usually written
as absolute.

•

If a common navigation bar is used on many pages that reside in folders at various
hierarchical levels, you can use an absolute path specification throughout to reference
its image files, allowing you to copy and paste the same code snippet onto all the
pages.

However, absolute paths work only at sites where there is a Web server providing information about the location of the site’s root folder. For the same reason, using absolute
paths prevents you from previewing pages in a Web browser on your local computer—
that is, a previewing browser has no way of locating this root folder.
Note: An absolute path in GoLive is not a full path from the file system root or a fully
qualified URL.

Using Help | Contents | Index

Back

103

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

104

Setting up absolute link paths
You can specify absolute paths for all new links or for specific links. For information on
creating links, see “Linking files” on page 61.
To make the path of a link absolute:
1 Select the link.
2 Do one of the following:
•

Choose Relative from the URL menu to the right of the Browse button in the Inspector, if
it is checked. (Unchecked indicates the link is absolute.)

•

Choose Edit from the URL menu in the Inspector. In the Edit URL dialog box, click Make
Absolute, and then click OK.

You can also use the Edit URL dialog box to add query parameters to the URL. (See “Editing
URLs in links” on page 64.)
To set a preference that makes all new links absolute:
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 Expand General preferences and select URL Handling.
3 In the right pane, select Make New Links Absolute, and then click OK.
To specify a site setting that makes all new links absolute in the active site only:
1 Open a site.
2 Click the Site Settings button

on the toolbar or choose Site > Settings.

3 In the left pane, select URL Handling.
4 In the right pane, select Make New Links Absolute, and then click OK.

About graphical site views
GoLive provides site views that are graphical representations of a site’s pages and the links
that connect them. You can use the graphical site views with the site window to display
and edit the content and structure of your Web site, and examine the links and relationships between pages.
•

The navigation view shows a tree-like hierarchy of pages (beginning with the home
page) that underlies the web of links in your site. You can add pages to the structure,
move pages around, and open pages from the navigation view. (See “About navigation
view” on page 105.)

•

The links view shows a web of actual links going in and out from each page to other
pages, images, or media files in your site, and to external URLs or e-mail addresses. You
can expand or collapse the various levels of links to focus on the overall structure of
links in the site or links of a single page. (See “About links view” on page 107.)

The pages shown in each graphical site view are also listed in the Files tab of the site
window. When you select a page in a view, you can select the same page in the Files tab by
clicking the Reveal In Site button on the toolbar. By using options on the View palette,
you can expand the site views into additional panes that display a panorama of the site,
reference pages used by a selected page in the site, or scratch pages that are not linked to
any pages in the site.
Using Help | Contents | Index

Back

104

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

105

GoLive also provides other graphical tools for managing and viewing Web sites. You can
use the In & Out Links palette to see incoming and outgoing links for files, and change
links and file references throughout a site. (See “Editing links and URLs sitewide” on
page 124.) You can also use diagrams to show the hierarchy of pages and the connections
between site assets. (See “About diagrams” on page 72.)

Displaying a graphical site view
You can display a navigation view or links view of a site.

Navigation and Links views

To display a graphical site view:
1 Open the site project file for your site.
2 Choose Navigation or Links from the Site window menu.

About navigation view
With a new imported site, the navigation view shows the structure of the site as a tree-like
hierarchy descending from the home page. With a new blank site, the navigation view
shows a single home page, and you can build the structure of the site by adding empty
pages to the home page in the same sort of hierarchy. You can also use this method to add
pages and substructures to an imported site. (See “Adding empty pages and pending links
to a hierarchy” on page 119.)

Using Help | Contents | Index

Back

105

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

106

In either case, the hierarchy comprises logical pair relationships between pages in which a
page is either a child, a parent, a previous sibling, or a next sibling. A typical parent-child
relationship is between a home page and pages it links to.

Navigation view
A. Home page B. Children of home page

A typical sibling relationship is between the first (previous) and second (next) pages in a
book-like sequence of pages.
With the structure established, you can fill the empty pages with content and link them
together in a way that reflects the structure. Alternatively, you can rebuild the hierarchy
with different settings to establish a different structure before you reflect the structure
with links. (See “Solving a hierarchy” on page 124.)

Using Help | Contents | Index

Back

106

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

107

About links view
When you open a links view of a site, it shows the site’s home page file (often called
index.html). If the site contains pages linked to the home page, pages linked to these
pages, and so on, you can view them by expanding the view, first from the home page and
then from other pages that come into view. Each expansion displays files linked to the
expanded file. Expansions in one direction show incoming links—links with their source in
other files and the expanded file as their destination. Expansions in the opposite direction
show outgoing links—links to other files with their source in the expanded file. An
individual file can appear several times in the view—for example, as an incoming link to
the left of an expanded file, and as an outgoing link to its right.

Links view
A. Incoming link B. Home page
C. Outgoing link D. File not expanded

You can choose options for displaying incoming links only, outgoing links only, no links, or
only the link path you are currently exploring. (See “Varying the view of links” on
page 116.)
To change or fix links, use the links view to select files and the In & Out Links palette to
change or fix links. (See “Editing links and URLs sitewide” on page 124.)

Using Help | Contents | Index

Back

107

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

108

Modifying site views
You can move the navigation or links site views into several useful window configurations,
and vary the views within these windows in many ways that help you survey the site.

Expanding and collapsing views
When you expand or collapse a file in one of the site views, you show or hide the files
linked to it. The feature works in much the same way that expanding and collapsing
folders work in Windows Explorer or Mac OS Finder.
When you expand a file, it stays expanded until you collapse it explicitly. For example, if
you collapse a file that governs a long path of files, the entire path disappears. If you then
expand the same file, the entire path reappears, not just the files linked directly to the
expanded file.
You expand files from the home page file to view a whole site. Because most sites contain
too many files to view all at once and scrolling the view can be awkward, you sometimes
need to collapse files to view another portion of the site. However, there are a number of
more precise techniques for moving and limiting the view. (See “Magnifying and reducing
the view” on page 112 and “Centering views and displaying partial trees” on page 113.)
To expand the view of a site or a tree in the site completely:
1 In a navigation view or links view, do one of the following:
•

To expand the view of a site completely, select the home page (index.html).

•

To expand the view of a tree in the site completely (a selected page and all of its
children and grandchildren pages), select the page that is at the root or top of
the hierarchy.

2 Click the Unfold Hidden Child Items button

on the toolbar.

To expand the view of a site incrementally:
1 Do either of the following:
•

In a navigation view, click the Expand button
or pages.

next to a page to view its child page

•

In a links view, click the Expand button next to a page to view its incoming or
outgoing links. The location of the Expand button relative to the page determines
whether the links are incoming or outgoing.

2 Continue clicking Expand buttons until the view is expanded in the way that you want.
To collapse the view of a site incrementally:
1 Do either of the following:
•

In a navigation view, click the Collapse button
or pages.

•

In a links view, click the Collapse button
outgoing links.

next to a page to hide its child page

next to a page to hide its incoming or

2 Continue clicking Collapse buttons until the view is collapsed in the way that you want.

Using Help | Contents | Index

Back

108

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

109

To get advance information about an expansion (Windows only):
If you are using GoLive on Windows, pause the pointer over the Expand button before
clicking it. A tooltip provides the number of children, incoming links, or outgoing links the
expansion contains.

Changing the orientation of a view
When you first view a site, its navigation view has a wide orientation and its links view has
a tall orientation. Both navigation view and links view can appear in either wide or tall
orientation.

Wide and tall orientations of a navigation view compared
A. Wide orientation B. Tall orientation

Both views use four directions to indicate types of links. For example, in a wide navigation
view a page’s parent page is above the page.
In wide orientation, a navigation view uses the four directions as follows: Above is the
parent page, below is the child page, left is the previous page, and right is the next page.
In tall orientation, the parent page is left and the previous page above.
In tall orientation, a links view uses two directions as follows: Left is the incoming link and
right is the outgoing link. In wide orientation, the incoming link is above.
To change the orientation of a view:
Do either of the following:
•

Click the Toggle Between Horizontal/Vertical Orientation button

on the toolbar.

•

In the Navigation tab or Links tab of the View palette, select Tall or Wide.

Using the peripheral panes of the site views
The navigation or links site views usually have a single pane, but you can also display up to
three additional special-purpose panes on the periphery of the main pane of a view:

Using Help | Contents | Index

Back

109

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

110

Panorama pane This pane is a bird’s-eye view of the entire site. The view contains a red
view box that corresponds to the current view in the main pane. You can scroll the view of
the site that is shown in the main pane by moving the red view box in the panorama pane.
You can do anything with the panorama pane that you can do with the main pane—for
example, select a page or drag a page to another page in the navigation view to make it
that page’s child or parent. The panorama pane is available in the navigation view and
links view.
Scratch pane This pane shows two kinds of files that are stored in the site’s web-content
folder and listed in the Files tab of the site window: HTML pages that aren’t part of the
site’s navigation hierarchy, and media files that aren’t referenced on any HTML page listed
in the Files tab. The scratch pane is available only in the navigation view.
You can drag HTML pages from the navigation view’s scratch pane to its main pane. You
use a navigation view’s scratch pane as you would its main pane, dragging a page to a
target page in the main pane and positioning it so that it becomes the parent, child, or
sibling of the target page. Similarly, you can build up partial trees in the scratch pane and
drag them to target pages. (See “Adding empty pages and pending links to a hierarchy”
on page 119 and “Rearranging the parts of a hierarchy” on page 121.)
Reference pane This pane shows media objects embedded in one or more pages that
are selected in the main or panorama pane. By selecting different pages in the main pane,
you can easily browse the embedded objects. The reference pane doesn’t show media
files linked to the HTML page—for example, a large image file linked to a thumbnail
version of the same image embedded in a page. The reference pane is available in the
navigation view and links view.
In practice, you would probably open only one
or two panes at a time, depending on your immediate need.

The peripheral panes in a navigation view in wide orientation
A. Panorama pane B. Reference pane
C. Main pane D. Scratch pane

The navigation view shown has a wide orientation. If a navigation view’s orientation is tall,
the panorama pane is on the left, the scratch pane is on the right, and the reference pane
is at the top. (See “Changing the orientation of a view” on page 109.)
Using Help | Contents | Index

Back

110

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

111

Showing and resizing peripheral panes
You can show or hide the peripheral panes and change their size relative to the size of the
main pane. After you show and resize a peripheral pane, that pane, in its current size,
becomes part of the default view until you hide the pane.
To show or hide a peripheral pane:
1 Do one of the following:
•

To show or hide a peripheral pane in the navigation view, display the navigation view.

•

To show or hide a peripheral pane in the links view, display the links view.

2 To show or hide a peripheral pane, do one of the following:
•

Choose the peripheral pane from the Navigation or Links window menu. Panes
showing are checked on the menu. Choose a checked pane to hide the pane.

•

In the Navigation tab of the View palette, select Panorama, Scratch, or Reference to
show a pane. Deselect the Show Pane options to hide panes.

•

In the Links tab of the View palette, select Panorama, or Reference. Deselect the Show
Pane options to hide panes.

Using Help | Contents | Index

Back

111

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

112

To resize a peripheral pane:
1 Show the pane you want to resize.
2 Drag the inside border of the pane toward or away from the main pane.
You can simplify site building by using the scratch pane for building site modules
(partial trees) and the main pane for assembling them.

Scrolling the view in the main pane
You can use a miniature view of an entire site to help you scroll the view of the site shown
in the main pane and focus on a particular subtree. You can use the panorama pane or Site
Navigator palette to scroll the main pane to distant parts of the site. For small movements,
you may find the scroll bars in the main pane adequate.
Both the panorama pane and Site Navigator palette show a miniature version of the
complete site with a red view box representing the portion of the site currently shown in
the main pane, and both let you scroll the main pane’s view by dragging the box. If you
resize the main pane or change the magnification percentage to zoom in or out, the size
of the red box changes accordingly in the miniature view.
There is one key difference between the Site Navigator palette and the panorama pane.
Although the Site Navigator palette is a picture of the site, the panorama pane is an actual
view, so you can work with objects in the panorama pane even if they aren’t visible in the
main pane. For example, you can drag a page in the panorama pane that is outside the
main pane into a location in the main pane.
To scroll the view in the main pane to another part of the site:
1 Do one of the following:
•

Show the panorama pane.

•

Choose Window > Site Navigator.

2 Do one of the following:
•

In the panorama pane or Site Navigator palette, drag the red view box to another part
of the site. The view in the main pane scrolls with the box.

•

Select a file entirely outside the view box—that is, one that doesn’t also appear inside
the box. The view in the main pane scrolls to show the file.

•

Hold the spacebar and drag the view.

Magnifying and reducing the view
You can choose from a menu of magnification percentages or click to zoom in on a
particular area. In either case, you work separately on the main, scratch, or reference
panes. You can also use a slider in the Site Navigator palette for precise magnification of
the view in the main pane.
To magnify or reduce the view in the main pane with a Zoom menu:
Click the Zoom button
at the bottom left corner of the main pane, and then
choose a magnification level from the pop-up menu.

Using Help | Contents | Index

Back

112

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

113

To zoom in on a particular area:
1 Hold down Shift (Windows) or Option (Mac OS). If the pointer is in a pane you have
not already zoomed in on, it changes to the Zoom-in tool . Otherwise it changes to the
Zoom-out tool .
2 Do one of the following in the main, scratch, or reference pane:
•

Move the pointer to the area and click. The magnification changes to 200% when you
do this the first time. It changes to 100% when you do it again in the same pane.

•

Draw a rectangle defining the area and release. The area enlarges to fill the pane. You
can do this repeatedly until the magnification reaches 500%.
You can use the Site Navigator palette both for focusing the view on a particular area
and for magnifying it. This has the same effect as zooming it.

To magnify or reduce the view in the main pane with the Site Navigator palette:
1 Choose Window > Site Navigator.
2 Do one of the following:
•

Click the Zoom In button

or the Zoom Out button

•

Drag the zoom slider.

•

Enter the percentage of magnification or reduction you want in the text box at the
bottom left corner of the Site Navigator palette.

Centering views and displaying partial trees
The Move to Center command limits a links view to a page and its incoming and outgoing
links. The Display Partial Tree command limits a navigation view to a partial tree—that is,
one or more selected pages and the logical descendents (children, grandchildren, and
so on).
The most basic way to limit a view is by expanding and collapsing it. (See “Expanding and
collapsing views” on page 108.) You also can limit a view by using the View palette to vary
and filter it. (See “Varying the view of links” on page 116 and “Filtering the contents of the
view” on page 118.)
To limit the view to a page and its incoming and outgoing links:
1 Select a page in the main pane of the links view.
2 Choose Move to Center from the context menu. The view is reduced to the file you
selected and its incoming and outgoing links.
3 If you want to center the view on another file, select the file and press the Escape key, or
choose Move to Center from the context menu again.
To display only partial trees:
1 Select one or more pages in the main pane of a navigation view.
2 Choose Display Partial Tree from the context menu. The view is reduced to the page(s)
you selected and their logical descendents (subtrees).
3 To view the complete tree, press the Escape key or choose Display Partial Tree from the
context menu again.

Using Help | Contents | Index

Back

113

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

114

Creating and using collections in navigation or links view
A collection is a custom set of one or more files that you select. After creating a collection,
you can perform various file-management tasks on the files in the collection, such as
deleting or duplicating. Because you can select all of the files by selecting the collection
name, you can perform these tasks on the files quickly.
When you create a collection in navigation or links view, you identify each collection by a
unique name, and you can use different spotlight colors for each collection. To display the
files in a set, you can spotlight the collection in the navigation view. (See “Spotlighting
page groupings and collections in navigation view” on page 115.) You can start with an
empty collection and add pages to it, or start with the pages and make them a collection
all at once.
Collections you create in navigation or links view are saved in the Collections tab of the
site window.
Note: You can also create a collection by saving query, find/replace, or syntax check
results, or by dragging or copying files from the site window into the Collections tab of the
site window. (See “Using collections” on page 319.)

Using spotlights in a collection of pages
A. Spotlight B. Collection of pages

To create an empty collection in navigation or links view:
1 Choose Create Collection from the context menu in the Navigation or Links view.
2 Enter a name for the collection in the text box.
3 Make sure the Add Selection option is not selected, and then click OK.
To create a collection from a selection of pages in navigation or links view:
1 Select one or more pages in the navigation view or links view.
2 Choose Create Collection from the context menu.
3 Enter a name for the collection in the text box.
4 To add the selected pages to the collection, make sure the Add Selection option
is selected.
5 To spotlight the collection, select Spotlight Collection.
6 Click OK.

Using Help | Contents | Index

Back

114

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

115

To add pages to a collection or delete pages from a collection in navigation or links
view:
1 Select one or more pages in the navigation
view or links view.
2 Choose Toggle Collection from the context menu.
3 Do one of the following:
•

To add the page(s) to a collection, choose an unchecked collection from the Toggle
Collection submenu.

•

To delete the page(s) from a collection, choose a checked collection.

To select the pages of a collection in navigation or links view:
1 Choose Reselect Collection from the context menu.
2 Choose the collection from the Reselect Collection submenu.
To reveal a collection page in the Collections tab of the site window:
1 Select one or more pages in the navigation view or links view.
2 Choose Reveal in Collections from the context menu.
To rename or delete a collection:
1 Select the collection in the Collections tab of the site window and do one of the
following:
•

To rename the collection, select it and type a new name in the Collection Inspector.

•

To delete the collection, select it and choose Delete from the context menu.

To apply a command to a collection in navigation or links view:
1 Choose Reselect Collection from the context menu.
2 Choose the collection from the Reselect Collection submenu.
3 Apply the command to the selection.

Spotlighting page groupings and collections in navigation view
Spotlighting a navigation view is a versatile alternative to centering it. Spotlighting lets
you focus on specific pages without removing other pages from the view. You can also
spotlight collections in navigation views, where file status information is useful.
You can spotlight these types of page groupings:
•

Family spotlights a selected page, its parent page, and its children.

•

Incoming spotlights any page containing the source of a link to the selected page.

•

Outgoing spotlights any page containing the destination of a link from the
selected page.

•

Pending spotlights all pending links in the site. (See “Checking and resolving pending
links” on page 122.)

Using Help | Contents | Index

Back

115

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

•

Back

116

Collection spotlights all pages in the site in a selected collection of pages. (See
“Creating and using collections in navigation or links view” on page 114.)

Pending links appear as arrows and their default color is red.
A. Pending links B. Hierarchy structure

To spotlight pages in a navigation view:
1 Expand the navigation view as necessary to show the pages you want to spotlight.
2 Select the page or pages you want to spotlight. (This step isn’t necessary if you want to
spotlight pending links.)
3 Do one of the following:
•

Choose Spotlight Family, Spotlight Incoming, Spotlight Outgoing, or Spotlight Pending
from the navigation window menu.

•

In the Navigation tab of the View palette, select Family, Incoming, Outgoing, or Pending.

4 Do either of the following as necessary:
•

Select another file to move the spotlight.

•

Choose another spotlight command to change the type of spotlight.

To spotlight a collection in a navigation view:
1 Expand the navigation view as necessary to show the pages you want to spotlight.
2 In the Navigation tab of the View palette, choose a collection from the Collection menu.
Choosing a collection automatically selects the Collection button to the left of the menu.

Varying the view of links
You can simplify a links view by showing only incoming links or only outgoing links. You
can also focus the view on a single path that you are exploring by expanding links.
Expanding links automatically collapses other link paths.
To vary the view of link types and link paths:
1 Display a links view.
2 In the Links tab of the View palette, select (to show), or deselect (to hide) Incoming
Links and Outgoing Links.
3 Select Multiple Link Paths or Single Link Path.

Using Help | Contents | Index

Back

116

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

117

Changing the display of the view
You can change display settings for the navigation or links view; for example, to show
items as thumbnails. If the view shows the scratch or reference panes as well as the main
pane, changes to the display settings apply only to the active pane. Changes you make for
the main pane also apply to the panorama pane.
With site views, you can change from the default graphical view to outline view. Outline
view is a hierarchical display of folders, subfolders, and files like the one in the Files tab in
the site window. Outlines show more detailed and compact representations of the files in
the main pane.
To change the display for a site view:
1 Display the navigation view or links view.
2 Click the pane you want to change (main, scratch, or reference).
3 Click the Display tab in the View palette.
4 Do any of the following:
•

To show the site view graphically or in outline, select Graphical or Outline. If you select
outline, you can show and hide columns in the outline by selecting the columns from
the Show Columns menu. If you select Outline for the main pane, the panorama pane
closes.

•

To specify how you want to show items in the view, select Icons, Thumbnails, Frames, or
Ovals. Ovals are oval-shaped only if the Frame Size is set to Wide. Otherwise they are
circles.

•

To specify how you want to show item labels, select File Name or Page Titles.

•

To change the distance between items in a pane, enter a width and height for Cell Size.

•

To change the size of each item in a pane, select a frame size.

•

To change the color of items in a pane, click the Item color field and select a color from
the Color palette. Or, click the lower right corner of the Item color field and choose a
color from the list of swatches that appear. The color you choose is used for the frames
of items, and a lighter tint of it is used for the fill. The color doesn’t apply if you show
items as icons.

Viewing and updating thumbnails
When you edit and save an HTML or XHTML file, its thumbnail is stored in the site project
file. You can view the thumbnail in the Content tab of the File Inspector. You can also
display pages and files as thumbnails in a navigation view or links view.
Alternatively, you can generate thumbnails for all the pages in a site at once. Updating
content thumbnails in this way is useful when you import a developed site and want
thumbnails for all its pages available in the navigation view of the site before you edit any
one of them.
To update thumbnails in a view:
1 Display a view with pages you want to show as thumbnails, either a navigation view or
links view.
2 Make sure that items in the view are set to be shown as thumbnails. If necessary, click
the Display tab in the View palette, and then select Thumbnails under Show Items As.

Using Help | Contents | Index

Back

117

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

118

3 Do any of the following:
•

Expand the pages in the view that you want updated.

•

Collapse the pages that you don’t want updated.

4 Choose Diagram > Update Thumbnails. The duration of the update process depends on
the number of pages to update.
To update a thumbnail in the File Inspector:
1 Select the file in the site window that you want to update.
2 In the Content tab of the File Inspector, click the Update Thumbnail icon .

Filtering the contents of the view
Filtering a view is eliminating certain types of objects, such as media files or cyclic links.
You can filter a navigation view and a links view. If the view shows peripheral panes as well
as the main pane, the filter applies only to the active pane.
Filtering is particularly useful in the main pane of a links view as a way of simplifying the
view of complex sites.
To filter a view:
1 Display the navigation view or links view.
2 Click the pane you want to change (main, scratch, or reference).
3 Click the Filter tab in the View palette.
4 Select any combination of items you want to show. (Unselected items are hidden.)
5 Select (to show), or deselect (to hide) any combination of items in the view.

Customizing view colors
When you change settings in the View palette for a site’s navigation and links views, the
changes persist the next time you display the same site. For example, when you close and
reopen the site, GoLive uses the View palette settings for the panes shown in the site’s
navigation view. You can use this feature to customize your site views for each site.
You can also use the Site Settings dialog box to set the colors of individual parts of the
site views, such as the background colors of the individual panes or the colors of items
and links.
To change color settings of site views:
1 Do one of the following:
•

To change colors for all new sites, choose Edit > Preferences (Windows) or GoLive >
Preferences (Mac OS), expand Site in the left pane, and then click Diagram Colors in the
left pane.

•

To change colors for the active site only, click the Site Settings button on the toolbar,
or choose Site > Settings. In the Site Settings dialog box, click Diagram Colors in the left
pane, and then select Site Specific Settings to override the settings in the Preferences
dialog box.

Note: If you want the colors in the Preferences dialog box to apply to an existing site, open
the site and make sure Site Specific Settings is deselected in the Site Settings dialog box.

Using Help | Contents | Index

Back

118

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

119

2 Click the lower right corner of the color field for any item you want to change, and
choose a color from the list of swatches that appear.
3 Click OK.

Refining your site map using graphical views
If you start with a blank site, it’s a good idea to begin building the site in a navigation view.
You begin by building its structure, arranging empty pages in a hierarchy of unresolved
pending links starting with links from and to the home page. At a later stage of sitebuilding when the pages have content, you can resolve these pending links by creating
links that reflect them.
This structural approach is also useful for adding new groups of pages to developed sites.
You simply anchor the structure of empty pages to an “away” page—a page at the site
other than the home page.

Adding empty pages and pending links to a hierarchy
The generic pages you add to a navigation view are blank HTML pages. Such pages have
the filename untitled or untitledn. For information on renaming them, see “Naming files
and folders” on page 102.
Note: Generic pages are blank but contain the basic HTML tags required to form an HTML
page.
Pages added are either pages with unresolved pending links or scratch pages. A scratch
page has no pending links of any kind. You would add scratch pages to a navigation
hierarchy simply to make it easier to link them to the hierarchy as a later step. (See
“Rearranging the parts of a hierarchy” on page 121.)
To add a single empty page with pending links:
1 Open a navigation view of the site.
2 Select a page in the view.
3 Do one of the following:
•

Click the Create Parent Item button on the toolbar or choose Diagram > New > Parent
Page to insert a page between the selected page and its former parent page. The new
page is the child of the former parent page and the parent of the selected page. The
three pages are connected by “to child and back” links—that is, pending links from
parent pages to child pages, and from child pages to parent pages.

•

Click the Create Child Item button on the toolbar or choose Diagram > New > Child
Page to insert a child page with “to child and back” links from the selected page.

Using Help | Contents | Index

Back

119

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

120

•

Click the Create Next Sibling Item button on the toolbar or choose Diagram > New >
Next Page to insert a next sibling page with “to adjacent siblings” links from the
selected page—that is, a pending link from the selected page to the new sibling page,
and a pending link from the new sibling page to the selected page.

•

Click the Create Previous Sibling Item button on the toolbar or choose Diagram >
New > Previous Page to insert a previous sibling page with “to adjacent siblings” links
from the selected page—that is, a pending link from the selected page to the new
sibling page, and a pending link from the new sibling page to the selected page.

Note: If the page you selected is the home page, the only choice available is the Create
Child Item button or Diagram > New > Child Page.
To add a group of child pages with pending links:
1 Open a navigation view of the site.
2 Select a page in the view.
3 Choose Diagram > New Pages.
4 In the text box, enter the number of pages to create.
5 Do any or none of the following:
•

To name the pages something other than untitledn, enter a filename in the Filenames
text box.

•

To save the pages in a folder other than the same folder as the selected page, enter the
folder name in the Folder text box, or click the folder icon and browse for the folder.

•

To use a stationery page, select Stationery and choose the stationery page from the
menu. (See “Using stationery” on page 312.)

•

To use a template page, select Template and choose the template page from the menu.
(See “Using page templates” on page 305.)

6 Choose from the Parent menu to create pending links as follows:
•

Choose To Each Child to create pending links from the parent page to each child page
being created.

•

Choose To Child and Back to create bidirectional pending links between the parent
page and each child page being created.

•

Choose To First Child Only to create a pending link from the parent page only to the first
child page being created.

•

Choose None to create no pending links to the child pages being created.

7 Choose from the Sibling menu to create pending links as follows:
•

Choose To Next Sibling to create previous-to-next pending links between any child
pages you are creating. (A previous-to-next link is also created between the first sibling
you create and the last of any of its siblings already created.)

•

Choose To Adjacent Siblings to create bidirectional pending links between any child
pages you are creating. (A bidirectional link is also created between the first sibling you
create and the last of any of its siblings already created.)

Using Help | Contents | Index

Back

120

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

121

•

Choose To All Siblings to create bidirectional pending links between all child pages you
are creating.

•

Choose None to create no sibling pending links in either direction from any child pages
you are creating.

8 Click Create. GoLive creates new pages and new unresolved pending links. You resolve
a pending link between two pages by adding a link from the source page to the destination page that reflects it. (See “Checking and resolving pending links” on page 122.)
To add an empty scratch page:
Select a folder in the Files tab and choose Site > New > Page. GoLive displays scratch
pages in the scratch pane of the site’s navigation view. (See “Using the peripheral panes of
the site views” on page 109.)
To add a pending link from one page to another:
1 In the navigation view, place the mouse pointer over the page you want to be the
source page.
2 Hold down Control-Shift (Windows) or Command (Mac OS). The pointer shows the
pick whip .
3 Drag to the destination page. A new pending link is created.
The source and destination page can be any two pages. They do not need to have a
family relationship.
To remove a page from a navigation view:
1 Select the page. If the page you select has descendants, they will be moved to the
scratch pane after you remove the selected page. (See “Using the peripheral panes of the
site views” on page 109.)
2 Do one of the following:
•

To move the page to the scratch pane without deleting it, choose Diagram > Move to
Scratch.

•

To delete the page, click the Delete Selected Item button
> Delete, or press the Delete key.

on the toolbar, choose Edit

Rearranging the parts of a hierarchy
It’s easy to move a page from one position in the navigation view to another. You drag the
page to another page—its target page—and position it so that it becomes the parent,
child, or sibling of the target page. If the page you’re moving has children or descendants,
they move with it automatically. And the page’s own family position—its pending links to
a parent and siblings—is updated. You can make major revisions to the structure of a site
by moving a few pages.
You can also drag pages in the scratch pane to positions in the hierarchy or drag pages out
of the hierarchy to the scratch pane.

Using Help | Contents | Index

Back

121

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

122

To move a page and its descendents to another position in the site:
In the navigation view, drag the page to its target page as follows:
•

In wide orientation, drag to the top of the target page to make the page you’re
dragging its parent, to the bottom to make the page its child, to the left to make it the
previous sibling, and to the right to make it the next sibling. A line at the top, bottom,
left, or right of the target page appears to show you where to drop the page.

•

In tall orientation, drag to the left of the target page to make the page you’re dragging
its parent, to the right to make the page its child, to the bottom to make it the next
sibling, and to the top to make it the previous sibling. A line at the left, right, bottom, or
top of the target page appears to shows you where to drop the page.

Moving a page in a navigation view
A. Moving the page to a new parent B. The page’s resulting position next to new siblings

To move a scratch page into position in the hierarchy:
1 Open the scratch pane in the navigation view. (See “Using the peripheral panes of the
site views” on page 109.)
2 Drag a page from the scratch pane into the appropriate position within the main pane.

Checking and resolving pending links
If you laid out your site in a navigation view before you added content to individual pages
and linked the pages, some of the pending links between pages you established may still
be unresolved.
Pending links are reminders that pairs of pages, usually pages linked logically, should be
actually linked. Like actual links, pending links are directional. For example, a pending
parent-child link can be either parent-to-child or parent-to-and-from child. If an actual link
has been created between pages to complete a pending link between them, the pending
link is resolved. Unresolved pending links have no actual link equivalent. In navigation
views, any pages that are the destinations of unresolved pending links for a page selected
in the main pane appear in the Pending Links palette.
You should check for unresolved links and resolve them as necessary.

Using Help | Contents | Index

Back

122

Adobe GoLive CS Help

Using Help | Contents | Index

Managing and Viewing Web Sites

Back

123

To check for unresolved pending links:
1 Open a navigation view of the site.
2 Choose Window > Pending Links.
3 Do one of the following:
•

To check a file for pending links, select the file in the navigation view. If the file contains
any pending links, an arrow pointing towards each destination file displays in the
Pending column in the Pending Links palette.

Pending link arrows point toward destination files.
•

To display the pending links for all files, choose Spotlight Pending from the navigation
view menu to spotlight unresolved pending links with arrows. The arrows point away
from the source files that have pending links; that is, the files that don’t have an actual
link. If there are two arrows on a line between two files, both files have a pending link.

To resolve an unresolved pending link:
1 Choose Window > Pending Links.
2 Select the page in the site window or the navigation view that is the source of the
unresolved pending link. The Pending Links palette lists the destination page or pages
that the source page has unresolved pending links to. A pending link is indicated by an
arrow in the Pending column pointing towards the
destination file.
3 Open the source page in the Layout Editor.
4 Do one of the following:
•

Drag a destination page from the Pending Links palette to the source page in the
Layout Editor. GoLive creates a link at the insertion point to the destination page.

•

Create a link in the source page to a destination page listed in the Pending Links
palette. (See “Linking files” on page 61.)

After you create the link, GoLive removes the arrow in the Pending Links palette that
points towards the destination file.

Using Help | Contents | Index

Back

123

Adobe GoLive CS Help

Using Help | Contents | Index

Managing and Viewing Web Sites

Back

124

Solving a hierarchy
When you import a site, GoLive automatically analyzes the links in pages and examines
the structure of folders to create a hierarchical structure for the site. This process is called
solving a hierarchy. The initial structure is based on both the pattern of links present on
site pages and the hierarchy of the web-content folder’s subfolders. The structure also
contains pending links as well as actual links; that is, it contains a record of every parentchild or sibling-sibling relationship possible given the actual hierarchy.
You should solve a hierarchy if you have made changes in your site outside GoLive, or if
you want to base the site’s navigational structure on different principles. For example, if
the hierarchy of the web-content folder’s subfolders has nothing to do with the site’s
navigational logic, you might want to base the structure entirely on links.
To solve the hierarchy of a site:
1 Open a navigation view of the site.
2 Choose Diagram > Solve Hierarchy.
3 Select options as necessary:
•

Links extrapolates the hierarchy from the pattern of links in the site’s pages.

•

Folder Hierarchy bases the hierarchy on the hierarchy of the web-content folder’s
subfolders.
Use Folder Hierarchy if you designed the actual folder hierarchy to reflect the
hierarchy of the site’s pages.

4 Click OK.

Editing links and URLs sitewide
A site can contain many links to a Web page and many URLs that reference media files,
external URLs, or e-mail addresses. If you need to change the destination file referenced in
all of these links or URLs, you can change them all at once without opening the pages they
appear on. For example, you might need to change all URLs to a repeated background
image.
Sitewide link editing can’t be undone, so use the feature carefully. For example, don’t
replace a referenced image without making sure that the new image has exactly the same
size and width-to-height proportions as the one you want to replace.

Using the In & Out Links palette to view links
The In & Out Links palette is a powerful link management tool that graphically shows you
the links or file references to or from a selected file or item in the site window. It is
especially useful for troubleshooting link errors listed in the Errors tab of the site window,
and showing all of the pages linked to a missing file. You can also create a site map by
printing the contents of the In & Out Links palette.
You can use the In & Out Links palette with any file or non-file item in the web-content
folder—that is, with any file or item listed in the Files, External, Colors, Font Sets, Extras,
Collections, or Errors tabs in the site window. For example, you can use the In & Out Links
palette to show the files that use a color listed in the Colors tab, or use a font set listed in
the Font Sets tab. You can also use the In & Out Links palette with a file in the navigation
and links views, or with a diagram in the Design tab in the diagram window.
Using Help | Contents | Index

Back

124

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

125

You can use the Renditions tab of the In & Out Links palette to view implied (not actual)
links between files. For example, the Renditions tab displays the implied link between a
Smart Object source file and its target file, or between a file and its duplicate (created by
choosing Edit > Duplicate).
To use the In & Out Links palette to view links and file references:
1 Click the Open In & Out Links Palette button

on the toolbar and click the Links tab.

2 Do one of the following:
•

Select the file or non-file item in the site window.

•

Select the file in the navigation or links views, or a diagram in the Design tab in the
diagram window.

•

Open the file in a document window.

Incoming links to the file appear on the left side of the In & Out Links palette, and
outgoing links or file references from the file appear on the right. For non-file items, the
files that reference or use the selected item appear on the left.
To limit the types of links appearing in the In & Out Links palette:
1 Choose Palette Options from the In & Out Links palette menu.
2 Select the items you want to show. (Unselected items are hidden.)
3 Click OK.
To view implied links in the In & Out Links palette:
1 Click the Open In & Out Links Palette button
Renditions tab.

on the toolbar and click the

2 Do one of the following:
•

Select the file or non-file item in the site window.

•

Select the file in the navigation or links views, or a diagram in the Design tab in the
diagram window.

•

Open the file in a document window.

The In & Out Links palette displays implied links to or from the file.

Changing the destination item of links and URLs sitewide
Use the In & Out Links palette or the Change References dialog box to change the destination item of links and URLs sitewide.
To change all links or URLs to a destination item:
1 Display the tab (Files, External, or Extras) in the site window where the destination item
you want to replace is listed—for example, a repeated background image.
2 Select the item.
3 Do one of the following:
•

If the new destination item you want to use as a replacement is visible in the site
window, click the Open In & Out Links Palette button on the toolbar.

•

If the new destination item you want to use as a replacement is not visible in the site
window, choose Site > Change References.

Using Help | Contents | Index

Back

125

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

126

4 Do one of the following:
•

If the replacement item is visible in the site window, drag from the pick whip in the
Links tab of the In & Out Links palette for the old item to the replacement item in the
site window.

Change all references to oldlogo.jpg by dragging from the pick whip for the incoming link to
newlogo.jpg in the site window.
•

If the replacement item is not visible on the site window, enter the URL for the
replacement item in the lower text box (or browse to the item) in the Change References dialog box. Then click OK.

5 In the Change Reference dialog box, select the files that contain the links or URLs you
want to change (all files are selected by default), and then click OK.

Fixing site errors
If you consistently use GoLive to manage your site, site errors will rarely occur. GoLive
keeps your site intact by tracking when you move, rename, or delete files in the site
window and immediately prompts you to update all links and file references. Most site
errors are a result of using the Explorer (Windows) or Finder (Mac OS) instead of GoLive
to move, rename, or delete files. After you refresh the site window, GoLive lists these files
as missing or orphan files, and all links to the files become site errors. GoLive uses the
Errors and External tabs in the site window and the In & Out Links palette to list and track
link errors.
If a file in the site’s web-content folder contains an error or possible error, the Status
column of the Files tab in the site window shows one of the error icons rather than the
checkmark icon . The error icon also appears next to the file in navigation views and links
views. The possible error icons are as follows:
•

The Bug icon

indicates broken links in a Web page file.

•

The Alert icon

•

The Empty Page icon

•

The Stop icon

•

A question mark

indicates a Smart Object warning or other warning.
indicates an empty page.

indicates a missing file.
indicates a file that GoLive cannot open.

Using Help | Contents | Index

Back

126

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

127

An error icon in the Status column for a folder indicates one or more files with that error in
the folder.
Important: Before checking the site for errors, be sure to refresh the site window to display
the latest status information. (See “Refreshing the site window” on page 98.)
To fix a broken link on a page listed with a Bug icon:
1 Make sure the Inspector is displayed.
2 Double-click the page with the broken link in the Files tab of the site window.
3 To show link warnings in the page, do one of the following:
•

Click the Link Warnings button

•

Choose View > Link Warnings.

on the toolbar or in the Highlight palette.

4 If necessary, do either of the following to get information that may help you find the
broken link:
•

Locate missing objects on the page (objects with a red border)—for example, an image
placeholder where an image should be.

•

Look for link warnings—that is, objects or text with a red border.

5 Select the object or text on the page that contains the broken link.
6 Inspect the link in the URL text box in the Inspector, and then reestablish the link. (See
“Linking files” on page 61.)

Checking the site for missing or orphan files
A file referenced on a page can be missing or orphaned. The Missing File icon indicates
that GoLive can’t find a file, possibly because you used the Explorer (Windows) or Finder
(Mac OS) instead of GoLive to move, rename, or delete it. The Orphan File icon
(Windows) or (Mac OS) indicates that GoLive can find a file locally, but it is stored
outside the web-content folder.
The Errors tab in the site window lists missing and orphan files that are referenced in files
that will be uploaded to a server. For example, an image file stored outside the webcontent folder is listed in the Errors tab as an orphan file if it is referenced in a page listed in
the Files tab in the site window. The same image file is not listed in the Errors tab if it is
referenced in a template because templates are not uploaded to the server. All files in the
Extras tab (such as templates and stationery) are not uploaded to the server.

Using Help | Contents | Index

Back

127

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

128

To find and relink a missing file:
1 Refresh the site window to display the latest status information.
2 Select the file in the Missing Files list in the Errors tab in the site window.
3 Do any of the following to get information that may help you find and relink the file:
•

To check if the file has a new name, look for the file in the Files tab and, if necessary,
change the link to refer to the new name.

•

To use the In & Out Links palette to show the pages that are linked to the file, click the
Open In & Out Links Palette button on the toolbar. Then use the pick whip in the
Links tab of the In & Out Links palette to fix the link. (See “Editing links and URLs
sitewide” on page 124.)

•

To use the Inspector to check and fix the URL of the file, open the Inspector and choose
Edit from the menu to the right of the URL text box. In the Edit URL dialog box, edit the
URL in the Path text box, and then click OK. Select the files you want to update with the
new URL, and then click OK.

•

To find the file, use the Find Site Assets window. (See “Finding files” on page 128.)

•

To restore a file that has been deleted, drag the file from the Site Trash in the Extras tab
in the site window to its original location in the Files tab in the site window.

When you clean up a site, you can specify that GoLive copy all orphan files to the webcontent folder and delete the entry for the file from the Orphan list in the Errors tab.
(See “Cleaning up a site” on page 100.)

Checking external URLs and e-mail addresses in the site
An external URL references a page outside your file system—that is, a page with an
address that begins with http://, ftp://, and so on, and must include a colon. For example,
http://www.adobe.com. When specifying an e-mail address, be sure to include an @ in the
address.
You can check the validity of external URLs listed in the External tab in the site window. For
information on adding external URLs and e-mail addresses to a site, see “Using site URLs
and e-mail addresses” on page 317.
To check the validity of external URLs in a site:
1 Be sure you have online access to the Internet.
2 Open the site.
3 Click the External tab.
4 Choose Site > Get References Used to update the site.
5 Choose Site > Check External Links. The Status column in the External tab shows the
Bug icon for any invalid external links.

Finding files
You can find individual files or objects (such as colors and e-mail addresses) throughout
your site. This is particularly useful if you have a huge site with dozens or even hundreds of
pages. Instead of scrolling through long file lists in the site window, you can enter a full or
partial filename or URL.

Using Help | Contents | Index

Back

128

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

129

To find files within a site:
1 Open a site project file, or bring an open site window to the front.
2 Click the tab that lists the type of item you want to find. That is, if you want to find a
color, click the Colors tab.
3 Click the Find Site Assets button

in the toolbar.

4 In the Find Site Assets dialog box, choose search options from the pop-up menus next
to Find Item Whose.
Note: Choose Hex value to search for a color by its hexadecimal value.
5 In the text box, enter the full or partial name, URL, or hexadecimal value of the file or
object you are searching for.
6 Choose an option from the Search In menu. For example, choose Colors to search for a
color by name or hexadecimal value.
7 Click Find All. GoLive displays the first item found in the active tab in the site window.
(Click Instant Find to have GoLive start a search automatically.)
8 To reveal a file in the site, select it in the Matches section of the Find Site Assets dialog
box and click Reveal in Site.
To quickly search again for an item you previously entered in the text box, select the
item from the pop-up menu next to the text box.

Generating queries
The Queries window lets you search for files using a wide range of criteria. You can search
in open sites and collections, in a user-defined list of files, or in a result list; and you can
view the results in the Query Results window. You can define nested queries to perform
complex searches, or use GoLive’s predefined queries for simple searches. Use the Query
Editor to edit predefined queries or create new queries. Save queries to use with application-wide searches, or save site-specific queries in the Queries folder of the Extras tab.
You can also save query results as collections in the Collections tab.

Defining queries
Define a query or edit existing queries in the Query Editor. Once you’ve defined the query,
you can test it before actually running it on a site or group of files.

Using Help | Contents | Index

Back

129

Adobe GoLive CS Help

Using Help | Contents | Index

Managing and Viewing Web Sites

Back

130

Queries you create and save are listed in the Filename section of the Queries window, and
are stored in the Queries folder in the Extras tab of the site window.

Structuring a query in the Query Editor.

To define a query:
1 Choose Edit > Run Query.
Note: To create an application-wide query, don’t open a site before opening the Query
Editor.
2 Click the New Query button.
3 If desired, type a description of the query in the Description field in the Query Editor.
4 Choose an option from the Find What menu (see “Query options” on page 131), and
then set options in the Settings pane.
5 To add more criteria to the query, click the arrow to the right of the Find What menu
and choose an add, or, or not item:
•

Choose And to specify that all criteria must be satisfied. For example, if you select this
option and define a query to show files that were created over two weeks ago and
contain external links, the query shows only those files created over two weeks ago that
contain external links.

•

Choose Or to specify that any, but not all, of the criteria must be satisfied. For example, if
you select this option and define a query to show files that were created over two
weeks ago or contain external links, the query shows the files created over two weeks
ago with or without external links, and the files that contain external links regardless of
when they were created.

•

Choose Not to specify that the first set of criteria must be satisfied but the second set of
criteria must not be satisfied. For example, if you select this option and define a query
to show files that were created over two weeks ago and do not contain external links,
the query shows only those files created over two weeks ago that do not contain
external links.

6 Continue to define query criteria using the Find What menus and add, or, or not items.
You can drag and drop query criteria above, beneath, or next to other query criteria (as
you drag, black bars appear next to the existing criteria, indicating the location of the new
criteria).
7 Delete criteria by choosing Delete from the menu to the right of the Find What menu.

Using Help | Contents | Index

Back

130

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

131

8 To test the query, click Test Query.
9 Close the Query Editor to save the query. Enter a name for the query in the Save Query
File dialog box (the .aglq extension is provided automatically), and then click Save.
To edit an existing query:
1 Choose Edit > Run Query.
2 Select the query you want to edit and click Edit Query.
3 Make changes to the query as detailed in “Defining queries” on page 129.
4 Close the Query Editor and click Yes when prompted to save changes.

Query options
When defining a query, you can choose from any of the following options in the Find What
menu:
Accessibility Shows pages that conform to a number of guidelines for making Web
content accessible to people with disabilities and persons using alternative browsing
technologies. Although these guidelines don’t offer a complete solution, they can help
determine whether your Web site is accessible.
Errors Shows pages with missing image attributes, problem titles, and HTML error and
warning flags.
File Info Shows files by type, byte size, download time, modification date, creation date,
mime type, and publish state. For HTML files, the Download Takes option in the Download
Time tab considers everything that makes up the page (such as images or QuickTime
movies) when computing download time.
Name Shows pages or URLs that are, begin with, end with, or contain a text string you
specify, or that match a regular expression you specify.
Textual Content Shows pages that match text in Layout Mode or encoded or unencoded
text in Source Mode.
Links Shows pages with external links, links to files with a certain extension, and links of
one or more protocols (for example, ftp: or mailto:). Links also show you pages that are a
certain number of clicks away from a given page.
Code Element Shows pages with HTML elements and attributes (or a combination of
these) you specify.
Site Objects Shows pages in a site that use certain components, addresses, fonts, font
sets, site colors, and labels. The items that appear in the Site Objects settings are the same
items that appear in the site window. If you added or removed items from pages, update
the items in the site window and in the Site Objects settings by cleaning up the site. See
“Cleaning up a site” on page 100.
Version Cue Shows files that are checked out of a Version Cue project site by you or by
another user. For more information about Version Cue projects, see “Working with Adobe
Version Cue managed projects” on page 45.

Using Help | Contents | Index

Back

131

Adobe GoLive CS Help

Managing and Viewing Web Sites

Using Help | Contents | Index

Back

132

Running queries
Once you’ve defined a query, you can view the results in the Results window, and then run
another query on the result set generated from the first query. You can also save query
results as a collection and store it in the Collections tab of the site window (see “Using
collections” on page 319).
To run a query:
1 Choose Edit > Run Query.
2 Do one of the following:
•

Define a new site query. (See “Defining queries” on page 129.)

•

Select an existing query.

3 Choose one of the following options from the Search In list at the bottom of the Queries
window:
•

Sites and Collections list all currently open sites. You can remove site folders or collections from the scope of the query by deselecting them.

•

Files let you specify files on which to run the query. You can drag files into the file list
from the site window, or click the Add Files button to add files to the list.

•

Result list lets you run the query on a previous set of query results (you can only use this
option after having run a query).

4 Click Start.
GoLive displays the query results in the Results window. The query tree pane of the Results
window displays the query, and the text area at the bottom of the Results window shows
files that satisfied the query criteria.
Note: Move the pointer over a query criteria in the query tree pane to see a list of files that
met that criteria.
5 Do one of the following:
•

To save the query results as a collection with the currently open site, click Save
Collection. Enter a name for the collection in the Create a New Collection dialog box,
and then click OK.

•

To search within the query results, click Use Result. GoLive opens the Query window
with the original query results in the Search In section. You can now run another query
on the result set.

Using Help | Contents | Index

Back

132

Adobe GoLive CS Help

Using Help | Contents | Index

Managing and Viewing Web Sites

Back

133

Providing file status information
As you build and update a Web site, it might be useful to provide status information so you
or a person reviewing the site can determine the state of a particular file or folder. You can
provide status information about an individual file or folder by assigning it a publish state
or a status label in the File Inspector. The publish state lets you specify whether you want
to publish a file or folder on a Web server or not. A status label can provide one of several
descriptions for a file, such as “Essential.”
You can also provide status information about a group of files by creating a collection
with a significant name such as “Reviewed.” (See “Using collections” on page 319.)

Assigning publish states to files and folders
You can assign three different publish states to files or folders in a site—“publish never,”
“publish always,” and “publish if referenced.” You can then use the Honor Publish State
option in the Site Upload/Export preferences or site-specific settings to use the publish
state to determine which files or folders in a site to upload to a Web server. (See “Setting
upload options” on page 331.)
To assign a publish state to a file or folder:
1 Do one of the following:
•

Select the file or folder in either the Files or Extras tab in the site window.

•

Select the file in the navigation or links view.

2 In the File tab of the Inspector, choose a publish state for the file or folder from the
Publish menu.

Assigning status labels
GoLive comes with the default color-coded file status labels red, blue, orange, green,
yellow, purple, and gray. Color-coded files appear in navigation view and links view when
the display of the views is set to thumbnails, frames, or ovals. (See “Changing the display of
the view” on page 117.) You can assign any one status to any file, and add new labels to
assign to files.
Note: GoLive also uses the term “status” to indicate the state of links and references at a
site—for example, in the Status column of the Files tab in the site window. (See “Fixing site
errors” on page 126.)

Using Help | Contents | Index

Back

133

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

134

Laying Out Pages
About page layout
The Layout Editor in the document window provides the canvas on which you drag files or
objects (usually from the site window) onto your page. Tables, layers, and special GoLive
layout grids and text boxes provide the containers for holding and positioning text,
images, animations and movies.
Table-based designs Tables are used often for page layouts because most Web browsers
can display HTML tables. GoLive provides two ways to create table-based designs for your
page layouts, using a standard HTML table or the GoLive layout grid. GoLive layout grids
are a special type of HTML table that lets you freely position objects anywhere on the
page. (See “Using the layout grid” on page 138).
GoLive provides table-design tools for using standard HTML tables. Images, text, and
other objects can be positioned on the page by placing them in table cells, other cells can
be left blank, and table borders can be hidden. (See “About GoLive table features” on
page 165.)
Layer-based layouts Like objects on a layout grid, objects in layers (also called floating
boxes) can be freely positioned anywhere on the page. Layers also have the added
advantage of being able to overlap other layers so you can create layered effects. Using
layers together with a layout grid can let you create a table-based design with dynamic or
interactive behavior on the page, such as triggering text to disappear and then reappear
when the mouse pointer is over an image link. (See “Laying out pages with layers” on
page 144.)

Image links are attached to show or hide actions for stacked
layers. Holding the pointer over an image (A) makes text in layer appear (B).

Using Help | Contents | Index

Back

134

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

135

Photoshop and Illustrator based designs Many Web design firms and professionals
create graphically rich portions of their Web page layouts in Adobe Photoshop or Adobe
Illustrator, and then bring the designs into their Web pages. When you design a page
layout in Photoshop or Illustrator, you can slice it into a table of individual images and
GoLive will automatically put the slices into a custom HTML table in your page. When you
save the image for the Web, you can reformat the HTML and JavaScript code so that any
rollovers are fully editable in GoLive.
You can use any of these methods to add your Photoshop or Illustrator designs to your
Web pages in GoLive:
•

Generating HTML files from Photoshop or Illustrator that you can open directly in
GoLive.

•

Dragging a Photoshop or Illustrator image file from the site window into the page
automatically creates a Smart Object link between Photoshop or Illustrator and GoLive.
If the image is sliced, GoLive places the slices into a new table and saves each slice as a
separate Web image. You can continue to update the design in Photoshop or Illustrator
and GoLive automatically optimizes the sliced images for the Web. (See “Adding sliced
Photoshop images” on page 277 and “Adding sliced Illustrator SVG images” on
page 280.)

Note: GoLive only recognizes slices in an Illustrator image saved as SVG.
•

If you want to preserve multiple layers of a Photoshop design, you can import the layers
of the image as individual Web images in GoLive layers. Because the Web images are
displayed in GoLive layers, you can completely reposition them, overlap them, and
apply other actions to them such as the Show Hide action. (See “Hiding and showing
layers” on page 150 and “Adding layered Photoshop images” on page 278.)

•

You can use your Photoshop-based design as a tracing image and save individual
cutouts as Web images in GoLive layers. If you want, you can create a duplicate page
that places the tracings in a table-based design by converting the layers to a layout
grid. (See “Converting layers into layout grids” on page 149 and “Building a Web page
using tracing images” on page 246).

Frame sets Another type of page layout design can be based on frame sets. You use the
Frame Editor to create a frame set and lay out frames that display individual Web pages.
(See “Working with frames” on page 154.)
CSS-based designs You can base page layouts on cascading style sheets that give your
pages a consistent presence and enable you to update the site’s styles with a single file.
Use the CSS Editor to create style sheets and link them to pages in your site. (See “About
the GoLive CSS workflow” on page 213.)
Site assets for speeding page design Site assets, such as components and page
templates, let you update common elements across your site and share your design work
with others while restricting their access to specific areas in the layout. Stationery can be
useful for setting up starting conditions in new pages and saving them with the site. (See
“About site assets” on page 304.)

Using Help | Contents | Index

Back

135

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

136

Page layout workflow
Before you lay out the content on your pages, set up your site first—having all your media
and resource files already organized in the site makes it easy to reference them on the
page and GoLive site management tools ensure that all the reference links and Java Scriptbased actions are kept up to date as you work. Because you work with an active site
window, GoLive is able to manage and properly generate your links as necessary. (See
“Creating a site” on page 46.)
You can also set up your pages with common elements like page titles, margins, and page
backgrounds before you lay out the content. (See “Setting up pages” on page 53.)
You use the Objects palette to add objects to the page, like the layout grid, layout text
boxes for holding text on the grid, and Smart Objects for linking to image files and their
source applications. The Layout Grid Inspector lets you add a background color or image
to the grid, and change the grid line spacing and the way that objects snap to the grid
lines.
You use the site window to drag images, HTML files, and custom site assets onto the
layout. Dragging objects from the site window saves you time because it automatically
sets up the reference links between the objects and their source files.

A
B
C

D
E

Drag to add images and other files or site assets to the
page layout.
A. Component in a layout text box B. Layout grid
C. Text in a layout text box D. Image linked to its source file
E. Text in a layer

Using Help | Contents | Index

Back

136

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

137

To add content to a Web page:
1 Choose the type of container you want to hold the content, such as a layout grid, a
layer, or a table, and drag its icon from the Objects palette into the Layout Editor.
To simplify page layout, place a layout grid on the entire page.
2 Add content to the container using any of the following methods:
•

Drag placeholder icons (such as an image placeholder or a Smart Object) from the
Objects palette into the container and then link them to their reference files (such as an
image file) in the site window.

•

Drag files directly from the site window into the container. Dragging image files to the
container bypasses the step for linking the placeholder to the reference file. Dragging
Photoshop or Illustrator files bypasses the step for linking a Smart Object placeholder
to the reference file. (See “About adding content from Adobe applications” on page 261
and “Working with Smart Objects” on page 262.)

Using Help | Contents | Index

Back

137

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

138

•

Drag HTML files, URLs, or e-mail addresses from the site window to create a hypertext
link with the name of the file used as the link’s label. Selecting text in the container
before you drag the file from the site window creates a link without changing the text
label. (See “Linking files” on page 61.)

•

Drag site assets, such as a component containing a navigational bar, from the Objects
palette into the container. (See “About site assets” on page 304.)

Using the layout grid
GoLive layout grids take the pain out of creating table-based designs for your Web pages.
Instead of setting up table cells, you can add a single layout grid to the page and drag
layout text boxes and other objects anywhere on the grid. As you add content and
reposition it, GoLive adjusts the properties of the layout grid. Layout grids let you position
multiple objects on your page with 1-pixel accuracy.
You can add tables to the layout grid, for example when you want to add a chart with
multiple columns and rows to the layout. (See “Creating tables” on page 165.)
Layout grids and objects on the grid remain fixed in the browser window and don’t resize
when the window is resized. If you want your page or individual objects to automatically
resize when the browser window resizes, you can convert the layout grid to a standard
HTML table after you’ve positioned all the objects on your page and are ready to publish
the page. (See “Converting a layout grid to a table” on page 143.) Then you can make the
fixed sizes of the table cells browser-resizeable using the Table Inspector. (See “Resizing
columns, rows, and tables” on page 171.)
When you convert a layout grid to a table, GoLive strips out the GoLive code and keeps the
standard HTML table format. You can also strip out the custom source code when you
export or upload the Web page to the server. (See “Exporting a site” on page 334.)

Adding a layout grid to the page
To simplify the task of laying out, grouping, and aligning multiple objects on your page,
add a layout grid and make it the same size as the window. After you’ve added the objects
to the grid, you can optimize the grid’s size to fit around the objects using the Layout Grid
Inspector. For more advanced layouts, you can add multiple layout grids to a page, for
example, to lay out objects in a header area and a footer area. However, you should not
place a layout grid on top of another layout grid. When the layout is complete, you can
convert the grid to a standard HTML table if you want. (See “Converting a layout grid to a
table” on page 143.)
If you want the layout grid to cover the entire page without any margins in the browser
window, use the Page Inspector to set the page margins to zero—the layout grid moves to
the upper left corner of the window. (See “Specifying page margins” on page 54.)
If you know that you’ll always want the page margins to be zero, you can create a page
with just this defined and set a preference to use the page whenever GoLive creates a new
page. (See “Setting preferences for opening pages” on page 42.)
All objects placed on the layout grid are considered part of the grid object. This comes
in handy if you create a nice layout grid design and wish to reuse it. You can save the
design as a component, page template, stationery, or library object and store it for later
use. (See “About site assets” on page 304.)

Using Help | Contents | Index

Back

138

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

139

To add a layout grid:
Drag the Layout Grid icon from the Basic set in the Objects palette to the page, or
double-click the icon to place it at the insertion point.
To resize the layout grid:
Do one of the following:
•

Select the grid and drag one of the three resize handles on the right side, bottom, and
lower right corner of the grid. The new width and height appears in the Layout Grid
Inspector.

•

In the Layout Grid Inspector, enter the desired measurements for Width and Height.

•

If the layout grid has a background image, select Use Image Size in the Layout Grid
Inspector to adjust the size of the grid to the image size.

•

If you have finished laying out objects on the grid, click Optimize in the Layout Grid
Inspector to automatically reduce the size of the grid to its minimum size (to fit around
the outer borders of all the objects and no more than that). You can Shift-click the
Optimize button to reduce the width only and Alt-click (Windows) or Option-click
(Mac OS) the Optimize button to reduce the height only.
To minimize horizontal page scrolling in a Web browser, make sure that the final width
of the layout grid is no larger than 580 pixels, the width of a standard 14-inch monitor.

To customize the layout behavior of the grid:
Do any of the following in the Layout Grid Inspector:
•

To position objects freely on the grid with 1-pixel accuracy, deselect Snap for Horizontal
and Snap for Vertical, and press the arrow keys to move the objects pixel by pixel.

•

To make objects move in increments equivalent to the spacing between the grid lines,
select Snap for Horizontal and Snap for Vertical, and press the arrow keys.

•

To change the spacing between the grid lines, enter a size in pixels in the Horizontal or
Vertical text box.

•

To hide the grid lines, deselect Visible for Horizontal and Visible for Vertical.

•

To set the position of the grid in relation to the document window, choose an
alignment from the Align menu in the Layout Grid Inspector. Choose Default to align
the grid with the upper left corner of the page. Choose Left or Right to wrap other text
and objects around the grid.

Adding content to the layout grid
Using a layout grid, you can add text, images, and other objects anywhere you want on
the page. You add text to a layout grid using layout text boxes. Layout text boxes can also
contain images and other objects that you want to align within the text or wrap text
around. (See “Aligning images or objects within text” on page 190.)
You can store frequently used text and objects in the Library palette or in the site window
for a specific site. (See “Using snippets” on page 313.)
While dragging layers, layout grid text boxes, and image map areas, you can show
visual smart guides in the layout window by choosing View > Smart Guides before
you drag.

Using Help | Contents | Index

Back

139

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

140

To add text to the layout grid:
Drag a Layout Text Box icon from Basic set in the Objects palette onto the layout grid
and type or paste text into it. (See “Adding text to Web pages” on page 186.)
To add a background color or image to a layout text box:
1 Select the layout text box.
2 In the Layout Text Box Inspector, do one of the following:
•

Select Color, click the color field, and choose a color from the Color or Swatches palette.
Or, click the lower right corner of the color field in the Inspector and choose a color
from the swatches that appear (the swatches are based on the current settings in the
Swatches palette).

•

Select BgImage, and then select an image file.

To add images or other objects to the layout grid:
Do one of the following:
•

Drag image files or other media files from the site window onto the layout grid or a
layout text box on the grid. Dragging the file from the site window automatically
creates a resource link between the page and the image or media file. (See “Adding
Smart Objects to the Layout Editor” on page 263, or see “Adding multimedia to a Web
page” on page 251.)

•

Drag object placeholder icons (such as Smart Objects or components) from the Objects
palette onto the grid and link its source file in the Inspector. (See “Linking files” on
page 61.)

You can also paste copies of layout text boxes, images, and other objects into a layout
grid by clicking in an empty area of the layout grid to
place the blinking insertion point and choosing
Edit > Paste.
To add a tiled background image to a layout grid:
1 Select the layout grid.
2 In the Layout Grid Inspector, select Background Image, and then select an image file.
3 To resize the Layout Grid to the size of the image, select Use Image Size.
To add a background color to a layout grid:
Do one of the following in the Layout Grid Inspector:
•

Select Background Color, click the color field, and select a color from the Color or
Swatches palette.

•

Click the lower right corner of the color field and select a color from the swatches that
appear (the swatches are based on the current settings in the Swatches palette).

Using Help | Contents | Index

Back

140

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

141

To prevent a layout text box from automatically resizing in GoLive:
In the Layout Text Box Inspector, select Allow Content Overflow. With this option selected,
as more text is added or reformatted, the layout text box does not resize in your page
layout. This doesn’t affect how it will appear in Web browsers.
Note: In a Web browser, the layout text box automatically adjusts its size in relation to its
content, which resizes according to the platform that the browser is using—for example,
to accommodate fonts that appear smaller on Mac OS and larger on Windows. You can
assign a pixel size definition for all text using a cascading style sheet. (See “About relative,
absolute, and percentage units” on page 226.)

Grouping and ungrouping objects
Only objects placed on a layout grid can be grouped. Grouping objects is a great time
saver if you need to move multiple objects at once and don’t want their position to
change in relation to each other. (This is one of the key advantages of the layout grid
because it can’t be done using a standard HTML table.)
To group or ungroup objects:
1 Select the objects on the layout grid that you want to group or ungroup. Click to select
the first object, and then Shift-click to select each additional object. (You can’t group
layers.)
2 Click the Layout Group button
the Transform palette.

or the Layout Ungroup button

on the toolbar or in

Repositioning, aligning, or distributing objects
You can move objects to new positions in a page by dragging them. For layers or objects
on a layout grid, you can also use the toolbar, Transform palette, or Align palette to place
them in precise positions. When objects are within text or a layout text box, you use the
Inspector to align them in relation to the text.
For information on aligning objects within a line of text, see “Aligning images or objects
within text” on page 190.
To reposition an object or group of objects:
Select the objects and drag them on the layout grid, or enter precise pixel values for the
horizontal or vertical position using the toolbar or Transform palette.

Using Help | Contents | Index

Back

141

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

142

To align objects in relation to their container:
1 Select the layers, object, or group of objects that you want to align.
2 Do one of the following:
•

On the toolbar, click a horizontal or vertical alignment button.

•

In the Align palette, under Align to Parent, click a horizontal or vertical alignment
button. (The buttons in the Align palette are the same as those on the toolbar.)

Note: Because you cannot move a selected object if another object is in the way, some
alignment buttons are dimmed (inactive) depending on the objects selected.
To align objects in relation to each other:
Select the layers or objects on a layout grid, and click a button under Align Objects in the
Align palette. You can align objects along the left, center, or right vertical axis or along the
top, center, or bottom horizontal axis.

Aligning objects to their center horizontal axes

To distribute objects in relation to each other:
1 Select three or more layers or objects on a layout grid.
2 In the Align palette, do one of the following:
•

Under Distribute Objects, click one of the buttons to distribute objects relative to their
vertical axis (left, center, or right) or relative to their horizontal axis (top, center, or
bottom).

•

Under Distribute Spacing, click one of the buttons to distribute the space (rather than
the objects) equally between the vertical or horizontal axes of the objects.

Using Help | Contents | Index

Back

142

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

•

143

Before clicking one of the Distribute Objects or Distribute Spacing buttons, select Use
Spacing, and enter a value in pixels in the text box to distribute the objects or spacing
based on the value.

Distributing space between objects equally

Converting a layout grid to a table
You can convert layout grids to standard HTML tables with fixed table cell sizes and then
use the Table Inspector to make the table cells resizeable in the browser window. (See
“Resizing columns, rows, and tables” on page 171.)
When you convert a layout grid to a table, GoLive strips out all of the special code such as
cool gridx, gridy, and cntrlrow, but it leaves a “control” row of empty cells at the bottom of
the table that’s one-pixel high, a “control” column of empty cells one pixel wide at the right
ends of each row in the table, and Netscape Spacer elements inside the empty cells. You
can remove the control row and column from the converted table or you can replace the
Spacer elements within the empty cells with provided spacer.gif transparent images.
(Spacer elements or transparent GIF images are used to solve a problem displaying empty
table cells in Netscape browsers. Spacer elements are ignored by Internet Explorer
browsers.)
By removing the GoLive code, you’ll lose the ability to freely move objects around on the
page unless you convert the table back again to a
layout grid.
To convert a layout grid to a standard HTML table:
1 Select the layout grid and choose Special > Layout Grid To Table.
Note: If the Layout Grid To Table option doesn’t appear in the Special menu, you need to
enable the Layout Grid module. Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), select Modules, select Layout Grid in the Extend Scripts folder, and click
OK. Then restart GoLive.

Using Help | Contents | Index

Back

143

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

144

2 In the Convert dialog box, do one of the following:
•

Select Strip Control Row and Column to remove the empty, one-pixel control row and
column at the bottom and right side of the grid. (This option is selected by default.)

•

Deselect Strip Control Row and Column, and select Replace Spacer by Image to replace
all Netscape Spacer elements with a spacer.gif transparent image that is one pixel high.
You can also enter the name of a different image if you want, which should be located
in the GoLive application folder.

•

Deselect both options to keep the control row and column, and include the Spacer
elements.

3 Click OK.
To convert a table back into a layout grid:
Select the table and choose Special > Table > Convert to Layout Grid or click the Convert
button in the Table Inspector.

Laying out pages with layers
You can use layers to divide your page into rectangles that can be formatted and
positioned individually. Layers can contain any HTML element that a page can contain—
such as an image or simple HTML text with formatting.
GoLive layers represent DHTML layers, which make it possible to overlap, hide and show,
and animate them on your page. For example, layers are commonly used with the Show/
Hide action to make them appear and disappear at the trigger of the mouse. Layers can
contain background images or color, and they can inherit properties from the page’s
cascading style sheet (see “About cascading style sheets” on page 212). They can be
positioned precisely, because they are implemented using the DIV element. The DIV
element, formatted with a CSS ID style for the width, visibility, and absolute position of the
layer, instructs the browser to create a subdivision that is not part of the normal flow of
HTML within the page.
You can import Photoshop layers as GoLive layers. See “Adding layered Photoshop
images” on page 278.
Note: To display properly, layers require Web browser versions 4.0 or later. To see what a
layer would look like in a Web browser that does not support cascading style sheets, turn
off CSS support in the browser’s preferences.

Using Help | Contents | Index

Back

144

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

145

For table-based designs, you can convert non-overlapping layers and their contents to a
new page with the contents duplicated on a layout grid. (See “Converting layers into
layout grids” on page 149.)

B
C

Layers are used to hide text and objects and make
them reappear.
A. Markers for 3 layers B. Image link with Mouse
Enter event attached to Show/Hide action C. Pointer over
image triggers layer of text to appear below

Adding layers to the page
To add a single layer to the page, you use the Objects palette or a context menu. When you
add a layer to the page, GoLive inserts a small yellow marker, which stays at the original
point of insertion after you move the layer.
It’s important to name your layers. GoLive displays the names of layers in the Layer palette
and in lists to choose from when you’re applying actions or animating them. The names
are also used for referring to layers in Java Script. Using unique names makes layers easier
to identify than the default names layer1, layer2, layer3, and so on.
You use the Layers palette to add and manage multiple layers on the page. To display the
palette, choose Window > Layers.
To add a layer to the page:
Do one of the following:
•

Drag the Layer icon from the Basic set in the Objects palette onto the page. If it’s in the
middle of text, GoLive inserts a new paragraph to split the text and places the DIV
element between them.

•

Click in the page to place the insertion point, and then click the Create New Layer
button in the Layers palette.

•

Right-click in the page and choose Insert Object > Basic > Layer from the context menu.

Using Help | Contents | Index

Back

145

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

146

To name a layer:
1 Select the layer in the page or in the list in the Layers palette.
2 Enter a new name either in the Layers palette or in the Name text box in the Layer
Inspector. (Spaces and names that begin with a number are not allowed.)

Adding content to a layer
Layers can contain any valid HTML element, such as text and images. However, Web
browsers may have problems with layers that contain tables or layout grids. If you embed
a layer within another layer, the embedded box will inherit any CSS information from the
parent layer.
Note: Avoid using a background image alone in a layer. In Netscape browsers,
background images or color may not display unless there are other objects or text in the
box as well. To work around this problem, you can add a transparent GIF image to the
empty box. See “Adding special page elements” on page 161.
To add content to a layer:
Click in the layer and type or drag an image or other site asset from the site window or
Objects palette into the layer.
To add a background color or image to a layer:
1 Select the layer.
2 In the Layer Inspector, do one of the following:
•

Select BgImage, and then select an image file.

•

Select Color, click the color field, and select a color from the Color or Swatches palette.
Or, click the lower right corner of the color field in the Inspector and select a color from
the swatches that appear (the swatches are based on the current settings in the
Swatches palette).
You can set the contents of a layer to be invisible when the page is first loaded into the
browser. (See “Hiding and showing layers” on page 150.)

Resizing and positioning layers
You can position layers accurately using the Layer Inspector and a page grid that you
define in the Grid Settings dialog box. By assigning a z-index to each layer, you can control
the order that the boxes are stacked on top of each other (a layer with a z-index of 2
appears in front of a box with the z-index of 1, and so on).
You can also use the Transform and Align palettes to position, resize, and align multiple
layers in the same way as other objects. (See “Repositioning, aligning, or distributing
objects” on page 141.)
To select a layer:
Do one of the following:
•

Click the layer marker (the small yellow icon).

•

Move the pointer to the top border of the layer until it changes to a hand, and click.

•

Click the name of the layer in the Layers palette.

Using Help | Contents | Index

Back

146

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

147

To move or resize a layer by dragging:
Do one of the following:
•

To move the layer freely on the page, move the pointer to the top border of the layer
until it changes to a hand, and drag.

•

To resize a layer, select the layer and drag one of its handles.

You can also use the arrow keys to move or resize a layer. Press an arrow key to move
the box pixel by pixel. Hold down Shift while pressing an arrow key to resize the layer
pixel by pixel. Hold down Ctrl (Windows) or Option (Mac OS) while pressing an arrow key
to toggle between pixel or grid sized movements.
To set an exact or relative size and position for the layer:
1 Select the layer.
2 Do any of the following in the Layer Inspector:
•

Enter exact position coordinates (measured in pixels from the upper left corner of the
document window) in the Left and Top text boxes.

•

Enter an exact size in the Width and Height text boxes.

•

Choose Auto from the Width or Height menus to automatically size the layer in relation
to its contents.

•

Choose Percent from the Width or Height menus to automatically size the layer in
relation to the percentage of the window width or height.

Note: Netscape browsers resize the Percent width of a layer to the width of its contents.
To use grid lines for positioning the layer:
1 Select the layer.
2 Choose Layer Grid Settings from the Layers palette menu.
3 Define the page grid and its behavior:
•

Enter Horizontal and Vertical values to define the spacing between the grid lines.

•

Select Snap to have the layer snap to the grid lines when you move it. You can press the
arrow keys to move the layer incrementally from one grid line to the next.

•

Select Visible to display the grid when you drag the layer.

•

Select Prevent Overlapping to prevent layers from overlapping.

Using Help | Contents | Index

Back

147

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

148

To change the stacking order of multiple boxes:
Select a layer and enter a value in the Z-Index text box in the Layer Inspector. Enter the zindex of 1 for the bottom layer in the stack, 2 for the next box in the stack, and so on. (You
can also change a z-index number by selecting it in the Layers palette and typing a new
number.)
A

C
D
E

Layer symbols and stacking order values
A. Layer object icon B. Layer marker C. The first layer has a z-index of 1
D. The layer in the middle has a z-index of 2 E. The layer in the front has a z-index of 3

Managing layers
You can use the Layers palette to temporarily lock, hide or show a layer as you work.
Settings in the Layers palette do not affect the display of the layers in the browser. You can
also use the Layers palette to quickly select multiple layers for alignment and grouping.
(See “Repositioning, aligning, or distributing objects” on page 141.)
Note: Some settings in the Layers palette are only temporary and will be overridden when
you switch document views or click the Play button in the DHTML Timeline Editor for an
animated layer.
A

Temporary settings help you work with multiple layers
regardless of their status in the Layer Inspector.
A. Temporary hide/show status B. Temporary lock/unlock status
C. Name of layer D. Stacking order of z-index values E. Create new layer
F. Delete selected layer

Using Help | Contents | Index

Back

148

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

149

To temporarily lock, hide, or show a layer:
In the Layers palette, select the layer and do one of the following:
•

Click in the eye column to temporarily hide or show the content of a layer. You can
also Ctrl-click (Windows) or Command-click (Mac OS) any eye icon to hide or show all
layers at once.

•

Click in the padlock column to temporarily lock and unlock a layer, or Ctrl-click
(Windows) or Command-click (Mac OS) any padlock icon to lock or unlock all layers at
once. When locked, you cannot select or drag the layer or edit its content in the
document window.

•

Choose Lock Visibility from the Layers palette menu to preserve all temporary hide/
show and lock/unlock settings when you click the Play button in the DHTML Timeline
Editor or switch views—for example, from the Layout Editor to Layout Preview and
back.

•

Click the name of a layer to bring it to the foreground and make it temporarily visible
and editable regardless of the hide/show and lock/unlock settings.

To change the name or stacking order of a layer:
In the Layers palette, select the layer, click again to select the name or z-index number, and
type a new name or number. The name or number is automatically updated in the Layer
Inspector.
To view the hierarchy of layers nested within other layers:
In the Layers palette, choose Hierarchic from the palette menu. With this option selected,
you can drag layers in the palette to change their nesting order. (To display all the layers at
the same level in the list, choose Flat from the palette menu.)

Converting layers into layout grids
You can convert nonoverlapping layers and their contents into objects on a layout grid in
a new untitled page. This is useful if you need a table-based design for the page in
addition to your DHTML layers-based design. If the layer contains text, it converts into a
layout text box on the grid. The position, size, and background color attributes of the layer
are retained. GoLive creates a new page to contain the converted objects, keeping the
original page of layers intact.

Using Help | Contents | Index

Back

149

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

150

To convert layers into a layout grid:
In the Layers palette, choose Convert To Layout Grid from the palette menu. (The option is
dimmed if any layers are overlapping.)

The text and image appear in the same positions in the new document.

You can show or hide the vertical and horizontal grid lines in the layout grid by
selecting the layout grid and then selecting or deselecting the Visible options in the
Layout Grid Inspector.

Hiding and showing layers
Layers are useful for hiding and showing images or text when viewers click or move the
mouse pointer over links on a page. When you set up show/hide actions for multiple
layers, be sure to name the boxes first in the Layer Inspector for easy identification.
You can also hide and show layers based on a given amount of time. (See “Applying
timeline-triggered actions to layers” on page 154.)
To initially hide a layer when the page is loaded:
Select the layer and deselect Visible in the Layer Inspector. (You can use the Layers palette
to temporarily show the layer in GoLive as you work. See “Managing layers” on page 148.)
To show or hide a layer using a mouse
event trigger:
1 Select the text, object, or image that will serve as the mouse event trigger and click the
New Link button in the toolbar.
2 In the Inspector, type the number symbol (#) in the URL text box. Or, if the selection will
also serve as a navigational link, enter the link’s destination URL in the text box instead of
the number symbol. (See “Specifying the destination URL for a link” on page 62.)
3 In the Actions palette, select a mouse event (such as Mouse Enter) in the Events list and
click the New Action button . Then choose Action > Multimedia > Show Hide from the
Action menu, choose your layer from the Layer menu, and choose Show, Hide, or Toggle
from the Mode menu. (Toggle shows or hides the layer according to its current visibility
status as set in the Layer Inspector.)

Using Help | Contents | Index

Back

150

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

151

4 Save your page and preview the action in a Web browser.
Note: Actions must be previewed in a browser. (See “Previewing files” on page 37.) For
information on using other scripted actions for your layers, see “Using GoLive actions” on
page 418.

Using the DHTML Timeline Editor
You use the DHTML Timeline Editor to insert actions for layers in a timeline, or to animate
a layer.

Animating layers
You animate a layer by inserting keyframes in its time track and repositioning the layer in
the page for each keyframe. You can also set the visibility status or the stacking order of a
layer based on a selected keyframe in its time track. You can use scenes to include multiple
animations in the same Web page.
Note: An intermittent bug in Netscape 4.0 browsers may cause the content of an
animated layer to temporarily disappear, especially if the content is an image button.
A simple workaround is to insert a nonbreaking space or a single-pixel transparent GIF
image before the image button. (See “Adding spacers, nonbreaking spaces, or transparent
GIFs” on page 163.)
A

C
D
E
F

The DHTML Timeline Editor contains time tracks for two layers.
A. Beginning of the play range B. End of the play range
C. Autoplay button D. Scenes options menu E. Action Track F. Time tracks
G. Loop and Palindrome controls H. Playback buttons I. Counter for keyframe position in
seconds and frames J. Frames per second K. Keyframe

To insert a keyframe in the time track:
Open the DHTML Timeline Editor by clicking the DHTML Timeline Editor button in the
upper right corner of the document window. A time track appears in the DHTML Timeline
Editor for each layer on the page. Initially, each time track contains a single keyframe.
1 Click a keyframe to select the time track of a layer. The name of the layer appears in
the Layer Inspector.
2 Ctrl-click (Windows) or Command-click (Mac OS) at the desired position on the time
track to insert a new keyframe. You can also Alt-drag (Windows) or Option-drag (Mac OS) a
copy of an existing keyframe to the desired position on the time track to create a new
keyframe.

Using Help | Contents | Index

Back

151

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

152

The new keyframe marks the end of the play range. This is indicated by the right play
range locator , which follows as you drag the keyframe. If you insert more keyframes, the
keyframe farthest to the right always limits the play range. The distance between
keyframes determines the playback speed—the shorter the distance, the faster the
animation plays back.
To specify the position of the layer for a keyframe:
1 In the DHTML Timeline Editor, select the keyframe

in the time track for the layer.

2 In the document window, drag the layer to the position where you want it to appear for
the selected keyframe. You can also enter the desired position in the Left and Top text
boxes of the Layer Inspector.
3 Click the first keyframe
position.
4 Click the Play button

in the DHTML Timeline Editor to return the layer to its start
at the bottom of the window to preview your animation.

The layer travels across the document window and stops where you set the last keyframe.
The Time Cursor in the DHTML Timeline Editor stops at the right play range locator .
You can click the Stop button
twice to stop playing and to reset the Time Cursor to the
beginning of the play range. Use the Backward button
to return the Time Cursor by
increments to the beginning of the timeline.
To control the playback behavior:
1 Use the Loop and Palindrome buttons in the lower left corner of the DHTML Timeline
Editor to control the playback looping:
•

The Loop button
plays your animation in an endless loop. When it reaches the end
point of the animation path, the layer jumps back to the start and resumes traveling,
repeating this cycle indefinitely.

•

The Palindrome button
causes the layer to bounce back and forth between the start
and end points of the play range. (The Loop button must be active to activate the Palindrome button.)

2 To change the playback speed, select a new frames-per-second option from the FPS
menu at the bottom of the DHTML Timeline Editor.
Most browsers can handle the default 15 FPS setting, even if running on systems with
average video hardware. If you want to work with higher speeds, be sure to test your
animation with a wide selection of system configurations to make sure that playback is
smooth.
To set the visibility status of the layer for a keyframe:
1 Select the keyframe in the time track from which you want the layer to disappear or
reappear.
2 In the Layer Inspector, deselect or select the Visibility option.
3 Click the Play button

to preview your animation.

The layer appears or disappears until such time that the Time Cursor reaches another
keyframe with a different visibility status.

Using Help | Contents | Index

Back

152

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

153

To record an animation path:
1 Open the DHTML Timeline Editor, and select the starting keyframe.
2 Click the Record button

in the Layer Inspector.

3 In the document window, drag the layer along the desired path. A keyframe appears at
each major turn in the path.
4 Click each keyframe and correct the position if necessary.
To specify the shape of an animation path:
1 Select one or more keyframes in the time track.
2 Choose an option from the Animation menu in the Layer Inspector:
•

None makes the layer jump between the keyframes.

•

Linear is the default path shape and makes the layer move in a straight line.

•

Curve creates a smooth curve between keyframes.

•

Random creates a zigzag path of random lengths between keyframes.

To create multiple scenes in an animation:
1 Create an animation. GoLive names the first animation you create “Scene 1” by default.
2 In the upper left corner of the DHTML Timeline Editor, choose Rename Scene from the
pop-up menu.
3 Enter a name for the scene, and click OK.
4 Choose New Scene from the pop-up menu.
5 Enter a name for the new scene, and click OK.
6 Add keyframes and animate the layers for the new scene, and then preview the
animation for the new scene by clicking the Play button in the DHTML Timeline Editor.
To control the playback of scenes:
1 Go to the second scene, and click the Autoplay button
automatic playback.

to deselect it and disable

2 Return to the first scene, and Ctrl-click (Windows) or Command-click (Mac OS) in the
Action Track anywhere before the last keyframe position to insert an action marker,
indicated by a question mark icon . (The Action Track is the horizontal gray bar between
the timeline and the time tracks.)
3 In the Action Inspector, click Show Action Palette, click the Actions tab, and choose
Action > Multimedia > Play Scene. Choose the name of the second scene from the pop-up
menu.
The Play Scene action instructs the browser to switch to the specified scene after finishing
playback of the current scene. On the Action Track, the Play Scene Action icon replaces
the marker.
4 If the first scene is a looped animation or a palindrome, you need to insert a Stop Scene
action: Ctrl-click (Windows) or Command-click (Mac OS) in the Action Track at the very last
keyframe to insert an action marker. In the Action Inspector, click Show Action Palette,
click the Actions tab, choose Action > Multimedia > Stop Scene and choose the first scene
from the pop-up menu. The Stop Scene Action icon appears in the Action Track.

Using Help | Contents | Index

Back

153

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

154

The Stop Scene action stops the playback of a scene, even if it is an endless loop. Be sure to
insert this action after the Play Scene action in the Action Track; otherwise, the animation
stops before scenes can be switched.
5 Move the Time Cursor to the beginning of the first scene and preview the animation in
the browser.
Note: To give viewers more control over your animation, you can also attach the Play
Scene action to a rollover button or hypertext link in your page. For instructions on using
actions with rollover buttons and text, see “Using GoLive actions” on page 418.

Applying timeline-triggered actions to layers
Actions are ready-to-use scripts that you can use with the DHTML Timeline Editor, rollover
buttons, links, and form elements. You can add actions to the timeline of a layer by
inserting markers in the Action Track of the Timeline Editor, and defining the actions in the
Actions Inspector.
Actions allow you to add sound, trigger the playback of animation scenes, dynamically
change the content of images, and control other processes in the browser window. For
information on actions you can use with layers, see “Using GoLive actions” on page 418.

Working with frames
Frames divide a Web browser window into sections that contain separate pages. Using
frames, you can make your page layout more visually interesting and help viewers
navigate in your Web site. Since the content of each frame is a separate page (and separate
file) with its own URL, it can be changed and scrolled independently of the pages in other
frames. For example, you can use frames to create an onscreen navigation aid or table of
contents that remains visible in one frame while the viewer scrolls through the page in
another frame.
Inline frames enable you to insert a frame within a a non-frameset page. Most older
browsers don’t support inline frames.
Note: Frame sets don’t work well with Web search engines because they have no content.
For this reason, it’s a good idea to not use a frame set for your index page. Also, you can’t
set bookmarks in the browser for frame-based Web pages because the URLs map to the
frame set rather than the desired pages.

Using Help | Contents | Index

Back

154

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

155

Creating a page layout using frames
You need at least three HTML documents to create a two-frame page layout: one
document for the frame set, which holds the frame structure, and two documents for the
visible pages of content. The frame set is the master document that defines the size and
location of the frames and contains the URL reference links to the content pages. You
design the content pages to fit or scroll within specific frames in the frame set.

A frame set document with two frames: the left frame contains a navigation
page, and the right frame contains a page that’s linked from the navigation page.

When working with frames, keep in mind the following browser limitations:
•

Single-frame pages do not display in Netscape browsers earlier than Netscape 6.

•

Browsers tend to offset the content of a page from the edge of their main display area
and from the inner edges of frames by a few pixels. This behavior can cause sizing
problems. To help solve this problem, you can set the margins of the frame set
document to zero. (See “Specifying page margins” on page 54.)

•

Nesting frame set documents within the frames of other frame sets is possible but can
cause serious navigation problems.

To create a page layout using frames:
•

Create the pages of content that will be displayed in the frames and create a blank page
to use for the frame set.

•

Set up the frame set and name the frames. In the frame set document, you can set
frames to scroll the content of pages and to have visible borders or no borders. You can
also set frames to be a fixed size or to resize proportionally when viewers resize their
browser windows. (See “Setting up the frame set” on page 156.)

Using Help | Contents | Index

Back

155

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

156

•

Link each frame to a content page. If the frame will display multiple pages, link it to the
first page you want to appear by default. (See “Setting up each frame in the frame set”
on page 157.)

•

Open the content page that you plan to use as a navigational aid or table of contents,
and specify the destination pages and target frame for every link on the page. (See
“Setting up target frames” on page 159.)
You can double-click the Page icon in a frame to open the content page in another
window.

Setting up the frame set
The Objects palette contains a selection of frame sets that can be dragged to your
document window when you want to create a Web page with frames.
A

The left frame is fixed while the right frame resizes automatically in the browser window.
A. Frame Editor tab B. Frame set divider C. The name of the frame D. Icon representing the page
linked to this frame E. The pink-shaded areas represent frames with fixed pixel sizes.

To set up the frame set:
1 Open a new document window, and click the Frame Editor tab
the window.

at the top of

2 In the Frames set of the Objects palette, drag a Frame Set icon to the page or doubleclick it. When you hold the pointer over an icon in the palette, a description of the frame
set appears, indicating, for example, which frames are fixed sizes and which ones aren’t.
3 Make sure HTML 4 Frameset is chosen in the New Doctype menu, and then click OK in
the Change Doctype dialog box.
4 Select the frame set by clicking any of its horizontal or vertical dividers.

Using Help | Contents | Index

Back

156

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

157

5 In the Frame Set Inspector, do any of the following:
•

Select an Orientation option to arrange the frames in the frame set horizontally (all in
one column) or vertically (all in one row). You can also select the Matrix option and
enter the number of rows and columns in the Rows and Columns text boxes.

•

Select BorderSize to change the thickness of the selected divider in the document
window, and enter a value in pixels.

•

To hide a horizontal or vertical border, select BorderSize, and enter 0 in the text box, and
then select BorderFrame, and choose No from the pop-up menu. (This sets the
attributes for all browsers.)

•

To assign a color to all borders in the frame set, select BorderColor, click in the color
field, and then select a color from the Color palette. Or, click the lower right corner of
the color field and choose a color from the swatches that appear (the swatches are
based on the current settings in the Swatches palette). This color overrides the gray
border that most Web browsers display by default.

Note: To color the background of a frame, you must select a background color for the page
you want to display in that frame. (See “Applying images or color to the page background”
on page 70.)
6 Name the page title of the frame set document in the Layout Editor. (See “Changing the
page title” on page 53.)
7 Save the frame set document. Make sure to save it with an .html extension, for example,
Frameset.html.
To add another frame to the frame set:
Drag the Frame icon from the Frames set

in the Objects palette into the frame set.

To move or copy a frame or a nested frame set:
Shift-drag to move a frame or nested frame set. Ctrl-drag (Windows) or Option-drag
(Mac OS) to copy a frame or frame set.
As you drag, you’ll notice that the frame orientation limits the direction of motion. You can
drag vertical frames sideways and horizontal frames up and down, but you cannot extend
the frame set by dragging beyond its boundaries.
You can copy a frame set to other documents or save a reusable copy of the frame set
by dragging the frame set to the Snippets tab in the Library palette. (See “Using
snippets” on page 313.)

Setting up each frame in the frame set
You use the Frame Inspector to name each frame and link it to a Web page. You can use the
name of the frame as the target when you create links to it from other pages; for example,
to make a link’s destination page appear in the frame. (Names assigned to individual
frames won’t appear in the browser window.) You can also set scrolling bars for each frame
and whether the size of the frame is fixed or automatically resizes when the browser
window is resized.

Using Help | Contents | Index

Back

157

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

158

To name a frame in the frame set:
1 Click inside the frame to select it.
2 In the Frame Inspector, choose an option from the Name/ID menu (choose Name & ID
for maximum browser compatibility), and then type a unique frame name in the Name/ID
text box.
To link a frame to a page:
Drag the page from the site window into the frame. You can also select the frame and use
the Frame Inspector to specify the page in the URL text box. (See “Linking files” on
page 61.)
Note: To make the contents of the frame change when visitors click links on a page in
another frame, you make this frame the target for each link. (See “Setting up target
frames” on page 159.)
To set scrolling bars for a frame:
In the Frame Inspector, choose Yes, No, or Auto from the Scrolling pop-up menu to show
or hide scrolling bars. Auto hides the scrolling bars if they aren’t needed and shows them if
the content is too large for the frame.
To set the size of a frame:
In the Frame Inspector, do any of the following:
•

Choose Scale from the Width or Height menu if you want the frame to resize automatically when the browser window is resized.

Note: At least one frame in the frame set must be resizeable.
•

Choose Pixel from the Width or Height menu, and enter the desired size in pixels if you
don’t want the frame to be resizeable. For example, use this technique if the frame will
display a small image of known dimensions.

Note: If you specify an absolute size in pixels for one frame, you must set at least one more
frame of the same orientation to Scale, or the frame set scales all frames in that direction.
•

Choose Percent from the Width or Height menu if you want the frame to have a fixed
ratio relative to the overall height or width of the frame set. Then enter a value in the
Width or Height text box to preset a percentage. For frames with horizontal orientation,
this attribute controls the relative height. For frames with vertical orientation, it
controls the relative width.

To resize a frame by dragging:
•

Click inside the frame to select it, and drag its vertical or horizontal border to resize the
height or width.

•

In the Frame Inspector, choose Pixel or Percent from the Width or Height menu, and
drag the frame border to the desired size.

To set the size of a frame border:
Select the vertical or horizontal border. In the Frame Set Inspector, select BorderSize and
enter a value in pixels in the text box.

Using Help | Contents | Index

Back

158

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

159

Setting up target frames
When you set up navigation links to pages that are displayed in a frame set, you must
specify each target frame as well as the page’s URL.
For example, if you use a frame set to display a table of contents in one frame and the
pages linked to the table of contents in another frame, every link in the table of contents
must specify the target frame in which the linked page will appear.

Each navigation link specifies both destination page
(intro.html) and target frame (Body).

To specify the target frame for linked pages:
1 Open the content page that contains the navigation links. (You can double-click the
Page icon in the frame to open the page.) For information on creating navigation links, see
“Linking files” on page 61.
2 For each link, in the Text Inspector or the Link tab of the Image Inspector, specify the
target frame where you want the linked page to appear by choosing an option from the
Target menu:
•

A frame’s name displays the linked page in that frame. The frame names of your open
frame set appear at the top of the menu.

•

_top displays the linked page in the full Web browser window, replacing the current
frame set entirely.

•

_parent displays the linked page in the parent of the current document. If the current
page has no parent, the target _self is used. (The parent is the next highest frame set in
the hierarchy.)

•

_self displays the linked page in the window or frame that contains the link, replacing
the navigation page.

•

_blank displays the linked page in a new untitled window.

•

Default removes any previously set target for the page.

•

QuickTime PlugIn (myself ) replaces the QuickTime movie currently playing.

Using Help | Contents | Index

Back

159

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

160

•

QuickTime PlugIn (quicktimeplayer) starts a QuickTime movie in the QuickTime Player.

•

RealOne Browser (_rpbrowser) displays links in the Real Media browser pane.

•

RealOne External (_rpexternal) displays links in a new RealOne window.

You can use the ForceFrame action to prevent browsers from displaying a page
outside of the frame set you’ve created for it. You can also use actions to set multiple
target frames for a single link. For information on the ForceFrame action and
Target2Frames action, see “Using GoLive actions” on page 418.)

Previewing the frame set with its contents
You use the Preview tab to preview the entire contents of the frame set in the
document window. You cannot edit the frame set or open linked pages in Preview mode.
(To open and edit linked pages, double-click their page icons in the Frame Editor.)
If you’re using GoLive for Mac OS, you can also use the Inspector to preview the content of
individual frames in the Frame Editor. To preview a frame’s content within the frame set,
click the Preview Frame button
in the Frame Inspector. To hide the content, click the
button again. Use the Preview Set button
and the Stop Preview button
in the
Frame Set Inspector to preview the content of all the frames.
Note: GoLive for Mac OS cannot preview external URLs. You need to test external links
with a browser.

Using inline frames
Inline frames enable you to insert a frame in a non-frameset page. Web browsers typically
display the frame with horizontal and vertical scrollbars.
Note: Netscape browsers earlier than version 6 don’t support inline frames.

An inline frame embedded in a page

To insert an inline frame:
1 Open the page in which you want to insert the frame.
2 Drag the Inline Frame icon from the Frames set of the Objects palette to the page, or
double-click the icon to place it at the insertion point.
3 In the Inline Frame Inspector, browse or use the pick whip to link to the file you want
contained within the inline frame.
4 In the Inline Frame Inspector, choose an option from the Name/ID menu (choose Name
& ID for maximum browser compatibility), and then type a unique name in the Name/ID
text box.

Using Help | Contents | Index

Back

160

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

161

5 Do any of the following in the Inline Frame Inspector:
•

Choose a height and width for the inline frame in pixels or percentages.

•

Enter a margin width or margin height for the inline frame.

•

Select alignment and scrolling options.

•

Select Frameborder to display a border around the inline frame.

Adding special page elements
GoLive provides special page elements to solve specific needs in your page design.
You can also use the Browser Switch object in the Smart set of the Objects palette to
provide instructions for browsers to switch to alternative pages. (See “Adding
browser-switch scripts” on page 58.)

Adding comments
As you lay out content on your Web pages, you may want to add comments about the
design. Comments appear only in GoLive (in the Comment Inspector and the source code)
or other HTML editors and do not appear on the pages in Web browsers.
You can also add comments to the head sections of pages. (See “About head section
elements” on page 56.)
To add comments to your page:
1 Drag the Comment icon from the Basic set in the Objects palette to the desired location
in the page, or double-click the Comment icon to place it at the insertion point.
A symbol

appears in the text to indicate the location of the comment.

2 In the Comment Inspector, type your comment.

Adding date and time stamps
You can display the date and time that you saved the page; for example, to tell your
viewers when you last updated the page. GoLive reads the current date or time from your
computer’s built-in clock and writes the result in a custom tag. It then updates the information whenever you save the page.
To add a date and time stamp to your page:
1 If you want descriptive text before the date or time stamp (for example, “Last revised:”),
type the text in the page.
2 Drag the Modified Date icon from the Smart set in the Objects palette to the page, or
double-click the icon to place it at the insertion point.
3 In the Modified Date Inspector, choose a country from the Format menu and select a
date and time format in the list of options for the specific country.

Adding URL pop-up menus
If you have several hypertext links on your page, you can present them in a pop-up menu
for your viewers to choose from. To test the links in the menu, you must preview the page
in a Web browser.

Using Help | Contents | Index

Back

161

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

162

To create a URL pop-up menu for your page:
1 Drag the URL Popup icon from the Smart set in the Objects palette to your page.

You can change the Choose... label at the top of the menu
or make it blank.
A. URL pop-up menu in the page
B. URL Popup icon in the Objects palette

2 In the URL Popup Inspector, do the following:
•

In the Label text box, type a new label to appear at the top of the new pop-up menu or
leave it blank.

•

To add a URL to the new pop-up menu, click the New Item button . Type a new label
for the URL in the Label text box, and enter the destination of the link in the URL text
box. (See “Linking files” on page 61.) If you’re using a frame set, specify the target frame
for the URL in the Target text box. (See “Working with frames” on page 154.) You can
also click the Duplicate Selected Items button to create a copy of a URL already in the
pop-up menu and edit the label or URL in the Label, URL, and Target text boxes.

•

To move an item up or down in the list, select it and click the arrow buttons.

•

To remove an item from the list, select it and click the Remove Selected Items button .

For information on creating individual hypertext links, see “Linking files” on page 61.
3 Preview the URL pop-up menu and each link in a Web browser. (See “Previewing files”
on page 37.)

Adding horizontal lines
To visually separate blocks of text, you can use horizontal lines (also called rules).
Horizontal lines can be placed in layout text boxes, but should never be added directly to a
layout grid.
To add a horizontal line to a text area:
1 Drag the Line icon from the Basic set in the Objects palette into a text area, or doubleclick the Line icon to place it at the insertion point in the text. (Horizontal lines should
never be placed directly on a layout grid—but in a layout text box instead.)
2 In the Line Inspector, do any of the following:
•

Click a button for Style: the left button to apply a solid style, or the right button to apply
a three-dimensional style.

•

Choose a measurement from the Width menu. Full and Percent are measured in relation
to the container (such as a layout text box, table cell, or the document window).

•

In the Height text box, enter a new line height in pixels. You can also select the line, and
drag its handle to adjust the height.

•

Click a button to align the line in relation to the layout text box, layout grid, or
document window. (The buttons are dimmed if the line is full width.)

Using Help | Contents | Index

Back

162

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

163

Adding spacers, nonbreaking spaces, or transparent GIFs
Spacers are Netscape elements used for creating horizontal space between text and
objects. Because spacers are ignored by Internet Explorer browsers, you may want to use
transparent GIF images instead for creating space on your page. (If you’re using a layout
grid, you don’t need to use either.) Transparent GIF images download quickly, and can be
resized to fill any space. You can also create nonbreaking spaces within text to insert
space.
To use a transparent GIF image for spacing:
1 Create a small (1x1 pixels) transparent GIF image in your image editing software and
drag it into the Files tab of your site window.
2 Drag the transparent GIF image from the site window to the desired location in the text.
(See “Specifying the destination URL for a link” on page 62.)
3 In the document window, drag the image’s selection handles or use the Image
Inspector to resize the image. You can also use the Image Inspector to align the transparent image horizontally and vertically within the text. If you have trouble selecting the
image on the page, click the tag in the markup tree bar at the bottom of the
document window. (See “Repositioning, aligning, or distributing objects” on page 141.)
You can save the resized transparent GIF image for reuse on other pages by dragging
it into the Snippets tab of the Library palette. (See “Using snippets” on page 313.)
To create a nonbreaking space:
Press Shift + spacebar (Windows) or Option + spacebar (Mac OS).
To use a Netscape spacer element for spacing:
1 Drag the Horizontal Spacer icon from the Basic set in the Objects palette to the desired
location in the text.
2 In the Spacer Inspector, select a Horizontal, Vertical, or Block resizing option. (Block
allows you to resize the spacer both horizontally and vertically.)
3 Select the spacer and drag its handles to resize it, or enter values (in pixels) in the Width
and Height text box.
4 To align a block spacer in relation to the text, select it and choose an option from the
Alignment menu in the Spacer Inspector.
Note: Spacers are based on a Netscape-specific element that is recognized by Netscape
Navigator 3.0 and later. They are ignored by Microsoft Internet Explorer.

Adding scrolling marquees
Scrolling text marquees are only supported by Internet Explorer browsers. (The text does
not scroll in Netscape browsers.) To create a message that scrolls across your Web page in
both types of browsers, you may want to use a SWF animation, Java applet, or animated
GIF image instead. You can also create a similar effect using layers and the Wipe Transition
action. (See “Hiding and showing layers” on page 150, and for information on the Wipe
Transition action, see “Using GoLive actions” on page 418.)

Using Help | Contents | Index

Back

163

Adobe GoLive CS Help

Laying Out Pages

Using Help | Contents | Index

Back

164

To create a scrolling marquee:
1 Drag the Marquee icon from the Basic set in the Objects palette to the page.
If you want to control the font and style of the marquee text on a layout grid, place the
marquee in a layout text box.
2 In the Marquee Inspector, type the message for the marquee in the Text box.
3 Choose an option from the Behavior pop-up menu:
•

Scroll to cause the message to scroll
continuously.

•

Slide to move the message into the marquee box and to hold it there.

•

Alternate to move the message into the marquee box and to bounce it between the
edges.

4 Determine how long the marquee is visible:
•

Select Forever to make the message scroll continuously.

•

Enter a required number of repetitions in the Loops text box.

5 Enter the desired scrolling speed in the Amount text box (the scrolling speed is
measured in pixels between each scrolling amount in milliseconds).
6 Enter the scrolling delay between repetitions in the Delay text box.
7 Select Left or Right to determine the scrolling direction. When Left is selected, the
message appears on the right side of the window and scrolls to the left.
8 Click the More tab in the Marquee Inspector, and do any of the following:
•

Enter the dimensions (in pixels or as a percentage) for the marquee in the Width and
Height text boxes.

•

Enter a value in the HSpace or VSpace text box to set the horizontal or vertical space
around the marquee’s text.

•

Choose an alignment from the Align menu for the marquee object in relation to text or
other objects within the text line.

•

Click the color field and select a color in the Color palette for the background of the
marquee. Or, click the lower right of the color field and select a color from the swatches
that appear (the swatches are based on the current settings in the Swatches palette).

Note: The Scrolling Marquee feature is an Internet Explorer extension that does not work
in Netscape browsers.

Using Help | Contents | Index

Back

164

Adobe GoLive CS Help

Using Help | Contents | Index

Working with Tables

Back

165

Working with Tables
About GoLive table features
You can instantly generate a table in GoLive by using a table you’ve copied in a different
application, including Adobe InDesign, Adobe FrameMaker, and third-party wordprocessing or spreadsheet applications, such as Microsoft Excel or Microsoft Word. You can
also import text into a table or export text.
To build tables from scratch, drag the Table icon from the Objects palette to your page and
set the table properties in the Table inspector. The Table tab of the inspector sets
properties that affect the entire table. The Row and Cell tabs set properties for a selected
row or selected cells.
You can quickly apply a collection of table properties to a table or selection of table cells
with the predefined table styles in the Style tab of the Table palette. The Select tab of the
Table palette gives you an overview of a selected table’s dimensions and enables you to
select a group of cells or nested tables with greater ease than in the document window. In
addition, the Select tab identifies table size conflicts and enables you to fix them with one
click.
Use the Smart Photoshop object to automatically create a Smart Table that contains
optimized slices of a sliced Photoshop image. (See “Adding sliced Photoshop images”
on page 277.)

Creating tables
The heart of page design usually begins with one or more tables that define the structure
of a page. In addition to displaying information in rows and columns, you can design
tables to create visually rich page layouts. You can insert text and many kinds of objects
from the Objects palette into a table cell, including images, nested tables, Photoshop files,
and QuickTime movies. Or, add a sliced Photoshop file to a page with the Smart
Photoshop object to automatically generate a Smart Table for the optimized image slices.
(See “Adding sliced Photoshop images” on page 277.)
Positioning text and objects using tables is even easier if you use a GoLive layout grid
with layout text boxes. (See “Using the layout grid” on page 138.)
To create a new empty table:
Do one of the following:
•

To place a table at the insertion point with a specific number of rows and columns,
press Ctrl (Windows) or Command (Mac OS) as you drag the Table icon in the Basic set

Using Help | Contents | Index

Back

165

Adobe GoLive CS Help

Using Help | Contents | Index

Working with Tables

Back

166

of the Objects palette. Release the mouse button when the desired number of rows
and columns appear.

Interactive pop-up table in the Objects palette
A. Table icon B. Dragging to define columns and rows
•

Double-click the Table icon in the Basic set of the Table palette to place a table at the
insertion point, or drag the Table icon to the document window.

To create a table from an existing table or cells:
Do one of the following:
•

Select one or more cells in an existing GoLive table, and choose Edit > Copy. Then place
an insertion point and choose Edit > Paste.

•

Select one or more cells in an existing GoLive table. Move the pointer over the black
square in the upper left corner of the selection until the pointer changes to a hand;
then drag the selection to a new location.

Using Help | Contents | Index

Back

166

Adobe GoLive CS Help

Using Help | Contents | Index

Working with Tables

Back

167

To create a table from an existing table in a different application:
1 In an application other than GoLive, select and copy the table or cells you want to paste.
2 In GoLive, select an existing table cell that you want to be the upper left corner cell of
the content you copied, and then choose Edit > Paste.
The table creates additional rows and columns as needed to include all of the information
that was copied.

Original table (top) and after (bottom) pasting a table copied in a different application

To create a Smart Table from a sliced Photoshop file, drag a Smart Photoshop object
from the Smart set of the Objects palette onto your page and reference a sliced
Photoshop file. (See “Adding sliced Photoshop images” on page 277.)

Making table or cell selections
After you select a row, column, or cell in a table, you can delete the selection, copy and
paste it, or drag the selection to move it within the table or to create a new table. Selecting
cells or nested tables can become difficult as you add images and other content to a table.
GoLive provides you with a variety of ways to select cells, rows, columns, and nested tables
to suit your needs. You can make selections directly in the document window, in the
markup tree bar, or in an outline of the table in the Select tab of the Table palette. The
Select tab shows a table as a bare outline, and enables you to make cell or nested table
selections without the risk of resizing the selection or selecting content inside the cell.

Using Help | Contents | Index

Back

167

Adobe GoLive CS Help

Working with Tables

Using Help | Contents | Index

Back

168

Selected cells are outlined in bold in the document window and in the Table palette, and
highlighted in source code views. In the Layout editor or Table palette, you can drag the
black rectangle in the upper left corner of the selected cells to move the cells within the
table or to create a new table.

Selecting a table cell with the Select tab of the Table palette
A. Selected table cell B. Nested table (Cells within nested tables appear
only when the nested table is selected.)

If you place an insertion point in a table cell, select content in a cell, or select a table
cell, you can press Ctrl+Enter (Windows) or Control+Return (Mac OS) to expand the
selection outward.
To select a table or nested table:
Do one of the following:
•

Select a cell in the table and press Ctrl+Enter (Windows) or Control+Return (Mac OS). Or
place an insertion point in the table or select content within a table cell and press the
keys twice.

•

In the document window, move the pointer over the top or left edge of the table until
the pointer changes to the table selection pointer , and then click.

•

In the document window, place an insertion point in the table or select content within a
table cell. Choose Select Table from the context menu in either the document window
or the Select tab in the Table palette, or click the tag in the markup tree bar at
the bottom of the page.

•

To select a nested table, in the Select Tab of the Table palette, move the pointer over the
nested table until the pointer changes to the Nested Table pointer and click. Click the
Select Parent Table button in the Table palette to reselect the parent table and zoom
out of the nested table.

To select rows:
Do one of the following:
•

In the document window or Select tab of the Table palette, move the pointer over the
left edge of a row until it changes to the row selection pointer , and then click. Drag
up or down to add adjacent rows to your selection. Alternatively, with the row selection
pointer, Shift-click the left edge of each additional row.

Using Help | Contents | Index

Back

168

Adobe GoLive CS Help

Using Help | Contents | Index

Working with Tables

Back

169

•

Place an insertion point in the row, and click the rightmost tag in the markup tree
bar at the bottom of the page. To add rows to your selection, move the pointer over the
left edge of each additional row in the document window until it changes to the row
selection pointer, and then Shift-click.

•

Place an insertion point anywhere in the table, click the tag in the markup tree
bar at the bottom of the page, drag to display a pop-up menu, and then choose the
tag for a row. To add rows to your selection, move the pointer over the left edge of
each additional row in the document window until it changes to the row selection
pointer, then Shift-click.

Selecting a table row with the markup tree bar

To select columns:
In the document window or the Select tab of the Table palette, move the pointer over the
top edge of a column until the pointer changes to the column selection pointer , then
click. Drag left or right to add adjacent columns to your selection. Alternatively, with the
column selection pointer, Shift-click the top edge of each additional column.
To select cells:
Do one of the following:
•

In the document window, move the pointer over the cell’s bottom or right edge until
the pointer changes to an arrow (Windows) or (Mac OS), and then click. Drag from
the selected cell to add adjacent cells to your selection. Alternatively, Shift-click inside
each additional cell.

•

Place an insertion point in the cell, and either click the rightmost tag in the
markup tree bar at the bottom of the page, press Ctrl+Enter (Windows) or
Control+Return (Mac OS), or choose Special > Table > Select Cell.

•

In the Select tab of the Table palette, click to select a cell. Click-drag from the selected
cell to add adjacent cells to your selection. Alternatively, Shift-click each additional cell.

•

To select all cells, select any corner cell in the document window or the Select tab of the
Table palette, and then drag over all cells in the table. You can also select a cell, and
choose Edit > Select All.

•

To invert the selection of cells within a row or column, move the pointer over the left
edge of the row or the top edge of the column until it changes to the row or column
selection pointer , , and then Shift-click. (GoLive deselects previously active cells in
the row or column and selects previously inactive cells.)

Using Help | Contents | Index

Back

169

Adobe GoLive CS Help

Using Help | Contents | Index

Working with Tables

Back

170

Adding, deleting, and moving rows and columns
GoLive provides you with a variety of ways to change the number of rows and columns in
a table. You can drag table edges, use context menus, press a key, or simply click a button
in the Table inspector to add or remove rows and columns.
Copy and paste a selection to replace the contents of a similar block of cells in a table.
Drag a selection of cells to move the cells to a new location within the table or a different
table.
To move a column or row:
1 Select a cell or a block of adjacent cells in either the page or the Select tab of the Table
palette, and then move the pointer over the square icon in the upper left corner of the
selection until the pointer changes to a hand .
2 Drag to the desired location within the current table or to a different table. Release
when a solid black line appears in the desired location. Hold down Ctrl (Windows) or
Option (Mac OS) as you drag to move a copy of the row or column within the current table.

Moving a table column in a table in the document window.

Note: If you drag a selection of cells, you can only add the cells to a different table if the
destination table has the same number of rows as the cells that you are dragging.
Otherwise the selection becomes a nested table within a cell of the destination table.
To add rows or columns
Do one of the following:
•

Select the table or a cell in the table, and enter the desired number for Rows and
Columns in the Table tab of the Table Inspector. (Rows are added to the bottom of the
table. Columns are added to the right side of the table.)

•

Select a cell adjacent to where you want a new row or column to appear. In the Cell tab
of the Table Inspector, click the Add Row Above button , the Add Row Below
button , the Add Column To Left button , or the Add Column To Right button .

•

Place an insertion point in the last table cell, and then press Tab.

Using Help | Contents | Index

Back

170

Adobe GoLive CS Help

Working with Tables

Using Help | Contents | Index

Back

171

•

Select a cell, and choose an insert command from the Special > Table menu.

•

Press Ctrl+Shift (Windows) or Command+Shift (Mac OS), and move the pointer over the
bottom edge of the table (to add rows), or the right edge of the table (to add columns),
until the pointer changes to the add rows pointer , or the add columns pointer ,
then drag away from the table.

Dragging to add table columns

To remove rows or columns:
Select the row or column or one or more cells in the row or column and do one of the
following:
•

In the Table tab of the Table Inspector, enter the desired number for Rows and Columns
in the Table tab. (Rows are removed from the bottom of the table. Columns are
removed from the right side of the table.)

•

Click the Delete Column button
Table Inspector.

•

Choose a delete command from the Special > Table menu.

•

Choose Edit > Cut or Edit > Delete, or press Delete on the keyboard.

, or the Delete Row button

in the cell tab of the

To replace table cells:
1 Select a single cell or a block of adjacent cells, and choose Edit > Copy.
2 Select the block of cells that you want to replace, and choose Edit > Paste to replace the
contents of a similar block of cells in a table.
Note: Your target selection must match your source selection. For example, if you copy
four cells in a row, you can only use your selection to replace the contents of another four
cells in a row.

Resizing columns, rows, and tables
The Select tab of the Table palette lets you review the size and units of every row and
column within a table, as well as those of the entire table. You can then change these
values in the document window by simply dragging a cell edge while pressing a combination of keys, or editing the table properties in the Table Inspector.
The Select tab of the Table palette also lets you identify and quickly fix conflicts in your
column, row, and table sizes. These conflicts can occur when the dimensions of content
within a table exceed the table properties or when the table properties do not add up
properly. Use the Table palette to locate the problem, and then fix it in either the Table
palette or the Table Inspector.

Using Help | Contents | Index

Back

171

Adobe GoLive CS Help

Working with Tables

Using Help | Contents | Index

Back

172

To identify table, row, and column sizes in the Table palette:
1 Select a table, row, column, or cell. In the Select tab of the Table palette, selected cells
appear in bold outline, and blue lines mark the column and rows shared by the selection.
2 The width of the active table appears above the table outline between lines spanning
the table’s width. The table’s height appears to the left of the table outline between lines
spanning the table’s height. Column sizes appear above each column and row sizes
appear to the left of each row.
3 Table property sizes are shown in black, grey, or red characters to signify different value
types:
•

If the table, column, or row size is shown in grey characters, the size of the property is
set to Auto in the Table Inspector. This means the size will automatically adjust to the
minimum size needed to contain any content within the row, column, or table.

•

If the size is shown in black characters, the size is defined either with pixels (when the
value is followed by a “p”) or a percentage (when the value is followed by a percent sign
(%). A row or column size that is set to a percentage represents a percentage of the
table height or width. A table dimension that is set to a percentage represents a
percentage of the browser window.

•

If the size is shown in red characters, the actual size of the row, column, or table
dimension is larger or smaller than the displayed value, which is the size set in the Table
inspector. For example, if the table width is set to 300 pixels, but the combined width of
the table columns is less or more than 300 pixels, then the value of the table width will
be shown in red.
A

C D E

Fixing a column size conflict
A. Size conflict B. Table width in pixel units C. Column width in pixel units
D. Column size in percentage units E. Column width in automatically resized pixel units

To fix table, column, or row size conflicts:
Do one of the following:
•

To set a table property to the pixel size that it requires, in the Select tab of the Table
palette, move the pointer over the red pixel value until it changes to the fix pointer ,
then click.

Using Help | Contents | Index

Back

172

Adobe GoLive CS Help

Using Help | Contents | Index

•

Working with Tables

Back

173

To set a table property to automatically resize as needed, select the table, column, or
row that has a red pixel value and set the conflicted property to Auto or Percent in the
Table Inspector. (Fix table size conflicts with the Width or Height properties in the Table
tab of the Inspector. Fix row size conflicts with the Height property in the Cell tab of the
Inspector. Fix column size conflicts with the Width property in the Cell tab of the
Inspector.)

To resize a table:
Do one of the following:
•

In the Table tab of the Table Inspector, choose an option from the pop-up menu for
Width or Height, and enter the desired measurement value. Choose Auto to automatically adjust the width or height to the minimum size needed to contain any content
within the table. Choose Percent to set the size of the width or height as a percentage
of the browser window.

•

To resize a table dimension using fixed pixel values, press Alt (Windows) or Option (Mac
OS), and drag the right or bottom edge of the table. (If the Width or Height is already set
to pixels, then it isn’t necessary to press the Alt or Option key while dragging.)

To resize a row or column:
Do one of the following:
•

Select a cell in the row or column that you want to resize. In the Cell tab of the Table
Inspector, choose an option from the pop-up menu for Width or Height, and then enter
the desired measurement. Choose Auto to automatically adjust the width or height to
the minimum size needed to contain any content within the row or column. Choose
Percent to set the size of the row or column as a percentage of the table size.

•

To resize a row or column using fixed pixel values, press Alt (Windows) or Option
(Mac OS), and drag the right or bottom border of a cell in the row or column that you
want to resize. (If the row or column is already set to pixels, then it isn’t necessary to
press the Alt or Option key while dragging.)

Formatting tables using table styles
GoLive includes a variety of predefined table styles in the Style tab of the Table palette,
which you can use to instantly format a table or portions of a table. You can apply a table
style to your table and easily remove it if it doesn’t meet your needs. You can also create
your own table style, save it, and apply it to other tables on your Web pages so you can
create a consistent appearance for tables throughout your Web site. Save different sets of
table styles to a file that can be shared with others or import table styles for use with
specific sites.

Using Help | Contents | Index

Back

173

Adobe GoLive CS Help

Using Help | Contents | Index

Working with Tables

Back

174

About table style attributes
Tables styles can contain the following attributes:
•

In the Table tab of the Table inspector: Border, Color, Cell Pad, and Cell Space.

•

In the Row tab of the Table inspector: Vertical Alignment, Horizontal Alignment,
and Color.

•

In the Cell tab of the Table inspector: Vertical Alignment, Horizontal Alignment, Color,
Header Style, and No Text Wrap.

You create styles from existing tables. The style repeats based on the number of rows and
columns in the original table. For example, if you create a style from a two-row by twocolumn table and apply it to a six-row by six-column table, the first row style is applied to
the first, third, and fifth rows of the six by six table. Tables retain their existing property
values if a new value isn’t specified in the table style.
The Table palette displays a preview of a selected table style. Blue brackets indicate which
rows and columns contain repeating styles. For example, a blue bracket around only the
second and third rows indicates that the first row style is only applied to the first row,
while the styles of the second and third rows repeat for all other rows.

Style tab of Table palette
A. Import Table Style button B. Export Table Style button
C. Rename Table Style button D. Capture Table Style button
E. New Table Style button F. Delete Table Style button

Note: Table styles are not related to CSS styles. To apply CSS styles to a table, row, or cell,
see “Formatting tables and table content with cascading style sheets” on page 181.

Using Help | Contents | Index

Back

174

Adobe GoLive CS Help

Working with Tables

Using Help | Contents | Index

Back

175

Applying and editing table styles
You can quickly apply a table style to an entire table or selected table cells. You can edit or
remove the tables styles listed in the Table palette or add new ones to it.
To apply a table style to a table or table area:
1 Select the table or portions of a table that you want to format using a table style.
2 In the Style tab of the Table palette, choose a table style from the pop-up menu.
3 Resize the blue bracket so that it marks the desired rows or columns to contain
repeating styles. To resize a blue bracket, drag either end of it. The resizable area of the
bracket is marked by blue lines at both ends of the bracket.
Note: Depending on the table style, you may not be able to change which rows or
columns contain repeating styles. For example, if the style of all columns is the same and a
blue bracket marks the second column, you won’t be able to resize the bracket to modify
the style.
4 Click Apply or choose Apply Table Style from the Table palette menu to apply the style
to the table.
To remove a predefined style from a table or area of a table:
1 Select the table or portions of the table which you want to remove a predefined
style from.
2 In the Style tab of the Table palette, click Clear; or, from the Table palette menu, choose
Clear Table Style.
To add your own style to the Style tab of the Table palette:
1 Do one of the following:
•

To create a new table style based on a table you’ve created, select the table and click the
New Table Style button or choose New Table Style from the Table palette menu. Enter
a name in the New Table Style dialog box and click OK.

•

To create a new table style based on an existing table style, choose a table style in the
Style tab of the Table palette, and then click the New Table Style button or choose New
Table Style from the Table palette menu. Enter a name in the New Table Style dialog box
and click OK.

•

To replace a table style with the appearance of a table you’ve created, choose a table
style in the Style tab of the Table palette, and then click the Capture Table Style
button or choose Capture Table Style from the Table palette menu.

To rename a table style:
Choose the table style and then click the Rename Table Style button
Table Style from the Table palette menu.

or choose Rename

To remove a style from the Style tab of the Table palette:
1 In the Style tab of the Table palette, choose a style from the pop-up menu.
2 Click the Delete Table Style button
palette menu.

Using Help | Contents | Index

or choose Delete Table Style from the Table

Back

175

Adobe GoLive CS Help

Using Help | Contents | Index

Working with Tables

Back

176

To export or import table styles:
Do one of the following:
•

To export a set of table styles, choose Export Table Styles from the Table palette menu,
name the file with a .xml extension, and then click Save.

•

To import a set of table styles, choose Import Table Styles from the Table palette menu,
and then open a table styles file with a .xml extension in the filename.

To undo or redo a table style selection:
Choose Undo Select Table Style or Redo Select Table Style from the Table palette menu.

Formatting tables using the Table Inspector
A well-designed table lets you control the layout of content on your Web page and
present information in a visually effective way. GoLive lets you precisely format a table by
setting table, row, or cell properties in the Table Inspector. Properties in the Table tab of
the Table Inspector affect the entire table, and properties in the Row and Cell tabs only
affect the current selection.
Formatting tables to your own specifications can take some time and effort. You can
save and reuse a table on other pages by dragging it to the Snippets tab of the Library
palette. (See “Using snippets” on page 313.)

Formatting tables
The properties in the Table tab of the Table Inspector let you set a variety of properties that
affect all of the cells in the table, and let you set the alignment of the table relative to its
surroundings. You can also import text into the table, add a caption, or convert the table
into a layout grid.
Note: In addition to setting options in the Table Inspector, you can customize the
appearance of a table by applying a predefined table style to it. For more information on
applying predefined table styles, see “Formatting tables using table styles” on page 173.
To format a table:
1 In the Table tab of the Table Inspector, enter the desired Border width value.
If you set the border width to 0, the borders appear as a solid or dashed outline in the
Layout Editor but do not appear in the browser. To hide the border that outlines tables
with no border while you design in the Layout Editor, choose View > Hide Invisible Items.
2 To change the amount of vertical and horizontal space that appears between cell walls
and content within the cells, enter a number for Cell Pad value.

Using Help | Contents | Index

Back

176

Adobe GoLive CS Help

Working with Tables

Using Help | Contents | Index

Back

177

3 To change the size of cell walls, enter a number for Cell Space value.

Border, Cell Pad, and Cell Space table properties compared
A. Border of 1 pixel B. Border of 10 pixels
C. Cell pad of 5 pixels D. Cell pad of 10 pixels
E. Cell space of 5 pixels F. Cell space of 10 pixels

4 Select Color to apply a background color to the table. To set the color value, do one of
the following:
•

Right-click (Windows) or Control-click (Mac OS) the color field or click the black triangle
in the lower right corner of the color field, and then select a color from the color
swatches that appear.

•

Click the color field and then select a color from the Color palette that appears. (See
“Using color” on page 67.)

If a table cell doesn’t contain text or other content, the table background color won’t
display while viewing the page in the Layout Editor or in some browsers. To display
background color in empty cells, insert a nonbreaking space into the cell. (See “Adding
spacers, nonbreaking spaces, or transparent GIFs” on page 163.)
Using Help | Contents | Index

Back

177

Adobe GoLive CS Help

Using Help | Contents | Index

Working with Tables

Back

178

5 Choose an option from the Align menu to align the table with respect to the document
window. Choose Left or Right to have surrounding text or objects wrap to the side of the
Table. Choose Default to have surrounding text or objects wrap along the bottom edge of
the table. (You can’t use the Align menu to align a table on a layout grid.)
6 Select Caption to add a caption to the table,
and then choose a location for the caption from the menu.
7 To apply a background image to the table, select BgImage and then reference an image
in the text field.

Formatting rows
The properties you set in the Row tab of the Table Inspector affect all of the cells located in
the selected row, including any cells that span downward into other rows.
To format a row or selection of rows:
1 Select the rows or a cell within a row that you want to format.
2 In the Row tab of the Table Inspector, choose a property from the Vertical Alignment
pop-up menu to set the vertical alignment of content within the row. Default aligns the
content vertically according to the browser’s preferences.
3 Choose a property from the Horizontal Alignment pop-up menu to set the horizontal
alignment of content within the row. Default aligns the text horizontally according to the
browser’s preferences.
4 Select Color to apply a background color to the row. To set the color value, do one of
the following:
•

Right-click (Windows) or Control-click (Mac OS) the color field or click the black triangle
in the lower right corner of the color field, and then select a color from the color
swatches that appear.

•

Click the color field and then select a color from the Color palette. (See “Using color” on
page 67.)

5 Choose an option from the Height menu to change the height of the row, and then
enter the desired measurement. Choose Auto to automatically adjust the height to the
minimum size needed to contain any content within the row. Choose Percent to set the
height as a percentage of the table height.

Formatting and merging table cells
Most of the properties you set in the Cell tab of the Table inspector will only affect selected
cells, and others enable you to merge cells from different rows and columns. Buttons at
the bottom section of the Cell tab let you add or delete columns and rows.
Note: When you merge cells, the data from the first cell is kept and the data from the other
cells is deleted. If you later split a cell you’ve previously merged, the deleted data does not
reappear.

Using Help | Contents | Index

Back

178

Adobe GoLive CS Help

Working with Tables

Using Help | Contents | Index

Back

179

To merge cells:
Do one of the following:
•

Select two or more cells that are adjacent to one another and choose Special > Table >
Merge Cells.

•

Select a single cell, and choose Special > Table > Merge Cells Right or Merge
Cells Down.

•

To merge two or more cells in a column, select the topmost cell that you want to merge
and enter the number of rows to span in the Row Span text field in the Cell tab of the
Table Inspector, or press Shift+Down Arrow to extend the cell one row down at a time.

•

To merge two or more cells in a row, select the leftmost cell that you want to merge and
enter the number of columns to span in the Column Span text field in the Cell tab of the
Table inspector, or press Shift+Right Arrow key to extend the cell one column to the
right at a time.

Cell spanning three rows

To reduce or unmerge a cell:
Select a cell that is merged with other cells, and do one of the following:
•

Press Shift+Up Arrow key to shorten the cell one row up at a time.

•

Press Shift+Left Arrow key to shrink the cell one column to the left at a time.

•

Choose Special > Table > Reduce Merge Left or Reduce Merge Up.

•

To unmerge all cells in the merged cell, choose Special > Table > Split Cell.

Using Help | Contents | Index

Back

179

Adobe GoLive CS Help

Working with Tables

Using Help | Contents | Index

Back

180

To format a cell or selection of cells:
1 Select the cells you want to format.
2 In the Cell tab of the Table Inspector, choose a property from the Vertical Alignment
pop-up menu to set the alignment of content within the cells. Default aligns the text vertically according to the browser’s preferences.
3 Choose a property from the Horizontal Alignment menu to set the horizontal
alignment of content within the cells. Default aligns the text horizontally according to the
browser’s preferences.
4 Select Color to apply a background color to the selection. To set the color value, do one
of the following:
•

Click the black triangle in the lower right corner of the color field, and then select a color
from the color swatches that appear.

•

Click inside the color field and then select a color from the Color palette. (See “Using
color” on page 67.)

5 Choose an option from the pop-up menu for Width or Height to adjust the height or
width of the cell, and enter the desired measurement. Choose Auto to automatically
adjust the width or height to the minimum size needed to contain any content within the
row. Choose Percent to make either dimension a percentage of the table size.
Note: When you adjust the height or width of the cell, GoLive automatically adjusts the
width or height of the entire row or column that contains the cell.
6 Select Header Style to format the cell as a subheader, which treats content within it
using a table heading style.
7 Select No Text Wrap to suppress automatic text wrapping in the cell.
8 Select BgImage to apply a background image to the cell, and then select an image file.

Selecting and linking text
You can use the Text tab of the Table Inspector as you would use the Text Inspector—to
link selected text. You can also use it (and the other tabs in the Table Inspector) as a quick
way to toggle between the text and the cell, row, and table that contains it.

Using Help | Contents | Index

Back

180

Adobe GoLive CS Help

Working with Tables

Using Help | Contents | Index

Back

181

Formatting tables and table content with cascading
style sheets
You can use cascading style sheets (CSS) to set the properties of tables and content within
a table. CSS styles can either apply automatically to all tables in the page or to specific
tables or cells. After you create a CSS style, you can modify it, and the properties of all
tables and cells that use the CSS style will be updated. CSS can be written in one Web page
as an internal style sheet or as a separate external style sheet file that can be used by
multiple pages. (See “About cascading style sheets” on page 212.)
Note: Some properties in the CSS Editor, such as those in the Background tab, will affect
the table, whereas other properties, such as those in the Font tab, will affect content
within a table cell. For example, if a CSS style defines a Font color property, and the style is
applied to a table cell, any text within the cell will display the color property but the table
cell will not.
A

Class style applied to a table column
A. Class style properties in the CSS Inspector
B. Class style listed in CSS Editor

To create a CSS element style that is automatically applied to all tables, rows, or cells
in a page:
Do one of the following:
•

Create an HTML element style named after the tag to set the properties of all
tables in a page.

•

Create an HTML element style named after the tag to set the properties of all table
rows in a page.

•

Create an HTML element style named after the tag to set the properties of all table
cells in a page.

For more information, see “Creating HTML element styles” on page 220.

Using Help | Contents | Index

Back

181

Adobe GoLive CS Help

Using Help | Contents | Index

Working with Tables

Back

182

To create a style and apply it to selected tables, rows, or cells:
1 Create a class style. (See “Creating class styles” on page 222.)
2 Select a table, row, cell, or group of cells.
3 Do one of the following in the CSS palette:
•

Select under the column that is adjacent to the style name to apply the class to
a selected table.

•

Select the column that is adjacent to the style name to apply the class to a
selected row, column, or group of cells. (If a row or column is selected, the column
name will be followed by the number of cells in the selection).

For more information on applying class styles, see “Applying styles” on page 233.

Adding text to tables
GoLive provides a variety of ways to add text to a table. Besides typing text directly in a
table cell, you can copy and paste text from another application, drag text between cells
or other containers, and import data from a text-only file.
When you import data into a table, you need to begin by formatting data in a text-only file
in a way that GoLive accepts. For a single-celled table, you should simply format the data
in the other application as you’d like it to appear in the table. For a multiple-celled table,
you should format the data so that each line represents the contents of a row and contains
column separators (tabs, commas, spaces, or semicolons) to separate the data between
columns. Most spreadsheet and database applications can export data to a text-only file in
one of these column-separated formats.
Rather than setting up a column-separated file to import data, you can simply copy
the data from cells in another application and paste it into a GoLive table. Rows and
columns will be added to the GoLive table as needed.
To copy and paste blocks of text:
1 Do one of the following:
•

In GoLive, select the text that you want to copy, and choose Edit > Copy.

•

Copy a block of text from within another application.

2 In GoLive, place an insertion point in a table cell, and choose Edit > Paste.
To drag text:
In GoLive or a different application, select the text you want to copy and then drag it to an
empty table cell in GoLive.
To import tab-delimited text into a table:
1 Select the table on the page.
2 Do one of the following:
•

In the Table Inspector, click Import, select the text file that contains rows and columns of
text separated by tabs, and click Open.

•

Choose Special > Table > Import Tab-Delimited Text.

Using Help | Contents | Index

Back

182

Adobe GoLive CS Help

Using Help | Contents | Index

Working with Tables

Back

183

GoLive places the text into table cells according to how many tabs (for columns) and
paragraphs (for rows) there are in the text.
This feature is useful for quickly adding data to a table that you have exported from a
database or spreadsheet as a tab-delimited text file.
To export text in a table to tab-delimited text:
1 Select the table.
2 Do one of the following:
•

In the Table tab of the Table inspector, click Export. Give the file a name and click Save.

•

Choose Special > Table > Export Tab-Delimited Text.

Sorting table content
You can sort the order of rows in a table so that the contents of one or more columns
appears in numerical and alphabetical order, or you can sort the order of columns in the
table so that the contents of one or more rows appears in numerical and alphabetical
order. You can apply the sort to an entire table, specific rows, specific columns, or specific
cells. For example, if you sort the order of rows in a table and the top row contains column
headings, you can apply the sort to all rows in the table except for the top row.
GoLive performs the sort first in numerical order and second in alphabetical order. It
considers the case of characters when performing the sort. By default, GoLive performs
the sort in ascending order. If desired, you can specify for the sort to be done in
descending order.
To sort the contents of a table:
1 Select a table or group of cells you want to sort, and choose Special > Table > Sort Table.
2 In the Sort Table dialog box, choose rows or columns from the Sort pop-up menu.
Choose Rows if you want the contents of one or more columns to appear in numerical and
alphabetical order. Choose Columns if you want the contents of one or more rows to
appear in numerical and alphabetical order.
3 In the Sort By pop-up menu, do one of the following:
•

If you chose Rows in step 2, choose the primary column with contents that you want to
appear in numerical and alphabetical order.

•

If you chose Columns in step 2, choose the primary row with contents that you want to
appear in numerical and alphabetical order.

4 From the adjacent pop-up menu, select Ascending or Descending to specify the
sorting order.
5 In the first Then By pop-up menu, do one of the following:
•

If you don’t want to specify a secondary column or row to be used in the sort criteria,
choose None.

•

If you chose Rows in step 2, choose the secondary column in the table with contents
that you want to appear in numerical and alphabetical order.

•

If you chose Columns in step 2, choose the secondary row in the table with contents
that you want to appear in numerical and alphabetical order.

Using Help | Contents | Index

Back

183

Adobe GoLive CS Help

Using Help | Contents | Index

Working with Tables

Back

184

6 From the adjacent pop-up menu, select Ascending or Descending to specify the sorting
order.
7 In the second Then By pop-up menu, do one of the following:
•

If you don’t want to specify a tertiary column or row to be used in the sort criteria,
choose None.

•

If you chose Rows in step 2, choose the tertiary column in the table with contents that
you want to appear in numerical and alphabetical order.

•

If you chose Columns in step 2, choose the tertiary row in the table with contents that
you want to appear in numerical and alphabetical order.

8 From the adjacent pop-up menu, select Ascending or Descending to specify the
sorting order.
9 From the pop-up menu at the bottom of the Sort Table dialog box, choose Sort Whole
Table to sort the entire table. Choose Sort without Header to not include the first row
when the table is sorted. If only a portion of a table is selected, you can choose Sort
Selection Only to only sort the selection instead of the entire table.

Converting tables to layout grids
You can easily convert a table to a layout grid in the Layout editor. Nested tables and cells
in the parent table that contain text or an object convert to layout text boxes, which can
be easily dragged around the layout grid. Alternatively, you may choose to convert a
layout grid to a table if you wish to edit and tweak the layout grid’s various table
properties with the Table Inspector. See “Converting a layout grid to a table” on page 143.
To convert a table and any nested tables to a
layout grid:
In the Table tab of the Table Inspector, click Convert. If desired, customize the appearance
of the layout grid and layout text boxes. For information, see “Using the layout grid” on
page 138 and “Adding content to the layout grid” on page 139.

Using Help | Contents | Index

Back

184

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

185

Formatting Text
About formatting HTML text
When you add text to your Web pages, it starts out as simple HTML paragraph elements.
You can make the text more interesting and easier to read by dividing it up into sections
and using HTML headings for the structure. You can add form, color, and presentation to
the structure (and to individual words within the structure) using cascading style sheets
(CSS) or HTML text formatting attributes. You can also format text as hypertext links that
jump to anchors within the page or to other pages. (See “Linking files” on page 61.)
GoLive provides three main methods for formatting text on your Web page.
Using cascading style sheets Cascading style sheets let you define text formatting
attributes once and instruct Web browsers to reuse the definitions whenever text on a
page refers to them. (This saves your pages from having lots of source code on them and
makes them faster to download.) Style sheets give you more design control than you get
with basic HTML—letting you define color, typography, alignment, page positioning,
fonts, borders, and more. It’s easier to update your site’s appearance using style sheets—
when you change a style in a style sheet, the change is instantly updated in all pages
containing text that refers to the style. (See “About cascading style sheets” on page 212.)
Individually applying HTML text attributes You can use the Type menu and the toolbar
for applying HTML structuring and formatting attributes to text. The toolbar includes
attributes for headings; bold, italic, and teletype; alignment, text size and color; and
numbered and bulleted lists. The Type menu provides these options and more, including
options for creating and applying font sets. The context menu for selected text also
provides a quick way to apply certain formatting attributes. (See “Using context menus”
on page 31.)
Using the HTML Styles palette As you apply individual HTML formatting attributes to
text in your pages, you can save them (or capture them) as a group in the HTML Styles
palette, and then use the palette to reapply the group of attributes to other text in your
site in one step. The palette contains several predefined HTML styles to give you an idea of
the type of HTML styles you can make. To save an HTML style in the HTML Styles palette,
you can either capture attributes from formatted text or choose them from a menu when
you create a new HTML style. Unlike CSS styles, HTML styles are not linked to text, so
changing an HTML style does not affect any text that the HTML style was applied to.
You can save separate sets of HTML styles from the HTML Styles palette and import
them into the palette when you want to use them. For example, you can save a set of
HTML headings and basic text structuring attributes, use the HTML Styles palette to
quickly apply them to your text, and then use your cascading style sheets to modify and
enhance them.

Using Help | Contents | Index

Back

185

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

186

Using both CSS and HTML text attributes Pages that use cascading style sheets load in
the browser window much faster than pages that are individually formatted with HTML
text attributes—but CSS is not supported by older browsers (including Netscape
Navigator 3.x or earlier and Internet Explorer 3.x or earlier). To cover a wider range of Web
browsers, you may want to format your text first using HTML structure elements and
attributes, making it look good for older browsers that don’t support CSS, and then use
style sheets to build on the HTML structuring, making it look great for those browsers that
support CSS.
HTML text structure elements that work well with cascading style sheets include headings
(such as the element), block quotes (creating block indents), and lists (default
numbered or unnumbered lists).
However, some HTML text formatting attributes, such as the font element, are known to
cause problems with browsers trying to interpret style sheets. In those cases, it’s best to
apply those attributes using CSS styles. (See “Applying fonts, type sizes, and color to text”
on page 194.)
To avoid browser problems, you can add a browser switch script to your pages that
redirects browsers to alternative pages strictly formatted with either HTML text
formatting attributes or CSS. (See “Adding browser-switch scripts” on page 58.)

Adding text to Web pages
You can add text to your page by typing directly in the document window, copying text
from another application and pasting it into the page, or importing text from another
application into a table on the page (see “Adding text to tables” on page 182.) You can also
add text to the page using containers, such as layout text boxes on a layout grid or in
layers. Containers make it easy to rearrange the position of the text on the page by
moving or aligning the boxes. To add text to a layout grid, you must use a layout text box.
See “Adding content to the layout grid” on page 139.
By default, when you drag to select an entire paragraph of text, GoLive does not select the
enclosing element tags (for example and ). As a result, when you copy the
selected paragraph and paste it into the page, the text doesn’t become a new paragraph.
You can use the markup tree bar in the Layout Editor to quickly select the enclosing tags.
To add text directly to a page or container on the page:
1 Click inside the page, layout text box, table cell, or layer to place the insertion point.
2 Type the text, or choose Edit > Paste to paste any text that you copied.
You can also drag selected text from another page into the document window or from
your collection of site assets in the Library palette. (See “Using snippets” on page 313
and “Using components” on page 311.)
To copy text:
In the Layout Editor, select the text that you want to copy, and choose Edit > Copy. You can
also hold down Ctrl (Windows) or Option (Mac OS) and drag the selected text to create a
copy at a new location.

Using Help | Contents | Index

Back

186

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

187

To copy a paragraph of text, including the element tags ( and ):
1 Click anywhere in the paragraph that you want to copy.
2 Click the tag (,
, etc.) in the markup tree bar at the bottom of the document
window.

Click a tag in the markup tree bar to select the entire element.

3 Choose Edit > Copy.

Using Help | Contents | Index

Back

187

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

188

Formatting paragraphs
GoLive provides a variety of ways to structure paragraphs of text. You can create headings
and subheadings, align or indent paragraphs from the left and right margins, or create a
numbered or unnumbered list from multiple paragraphs. You can also control the flow of
text in paragraphs by suppressing text wrapping to keep text on the same line or adding a
line break to control how text breaks around an adjacent object. Then, once you’ve
formatted the structure of your paragraphs, you can use cascading style sheets to build on
the structured text. (See “Creating HTML element styles” on page 220.)

Using HTML paragraph formats
You can add structure to your text by using HTML paragraph formats. You can choose from
the following formats:
•

Use Heading formats to replace the tag with any of the six HTML heading tags:
,
,
,
,
, or
. Most Web browsers use a diminishing
character point size to display the sequence of headings, where
is the largest and
is the smallest size.

•

Use the Address paragraph format to apply the tag to a paragraph that
contains the author’s e-mail address.

•

Use the Preformatted paragraph format when you want to retain the integrity of
character and line spacing in a paragraph. This is useful for evenly lining up numbers in
a column or presenting source code with its proper spacing. Browsers display all text
within the and tags in a monospaced font.

•

Use the Paragraph format to apply the default paragraph format in the browser’s
preferences.

•

Use the None paragraph format when you want to remove the and tags from
a range of text.

All paragraph formats work well with cascading style sheets. (See “Creating HTML element
styles” on page 220.)
To format a heading, address, or preformatted paragraph:
1 Click anywhere in the paragraph that you want to format.
2 Choose a format from the Type > Paragraph Format menu or the Paragraph Format
pop-up menu on the toolbar.
When you’re setting up your pages to use with cascading style sheets, drag these
formatted paragraphs into the HTML Styles palette so you can quickly apply headings
or other paragraph structures to other text. (See “Saving HTML styles” on page 198.)
To reset the current paragraph to the default format selected in the browser’s
preferences:
Choose Type > Paragraph Format > Paragraph.
To remove the and tags from the current paragraph:
Choose Type > Paragraph Format > None.
Besides using the History palette or choosing Edit > Undo, you can use the HTML
Styles palette to remove a paragraph format (such as the Address element) from your
Using Help | Contents | Index

Back

188

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

189

text. By choosing Clear Paragraph Styles from the palette menu, all styles applied to a
selected paragraph are removed. (See “Applying or removing HTML styles” on page 200.)

Formatting lists
You can format paragraphs as numbered, unnumbered, or definition lists, and create
hierarchies within the lists. The list options include Arabic numerals, Roman numerals,
letters of the alphabet, and different types of bullets. For definition (or glossary) lists, you
can format paragraphs as the term or the definition of the term.
When using cascading style sheets, first format your paragraphs of text using a default
list format in the Type > List menu, and then use a style sheet to enhance the bullets or
numbers. (See “Creating HTML element styles” on page 220.)
To format paragraphs as a list:
1 Select the paragraphs that you want to format.
2 Choose a list option from the Type > List menu.
To format the hierarchy within the list:
1 Select a paragraph in the list.
2 Choose Increase List Level or Decrease List Level from the Type > List menu.
When you apply the Decrease List Level option to a paragraph that’s at the first level in the
hierarchy, GoLive resets the paragraph to a plain style.
3 Choose a list option from the Type > List menu to assign a different leading character to
the paragraph.

Aligning or block-indenting a paragraph
You can align a paragraph to the left side, center, or right side of the page or container
(such as a layout text box). You can also apply the tag to indent the
paragraph from its left and right margins without affecting its alignment. If you’re using
cascading style sheets, make sure that the type of alignment matches with the corresponding CSS style.
You can align, or wrap, text around images or other objects on the page or inside a layout
text box, table cell, or layer. (See “Repositioning, aligning, or distributing objects” on
page 141.)

Using Help | Contents | Index

Back

189

Adobe GoLive CS Help

Formatting Text

Using Help | Contents | Index

Back

190

To align or block-indent a paragraph:
1 Click anywhere in the paragraph that you want to align or indent.
2 Do one of the following:
•

Choose an alignment from the Type > Alignment menu. Choose Default Alignment to
remove any existing alignment from the paragraph.

•

Click the Align Left button
on the toolbar.

•

To incrementally increase or decrease the space between the paragraph and its right
and left margins, choose Increase Block Indent or Decrease Block Indent from the
Type > Alignment menu.

, the Align Center button

, or the Align Right button

Aligning images or objects within text
You can make paragraphs of text appear to wrap around an image or other object, or
create other effects such as a title or caption for a picture, by aligning the image or object
within the text. You can also use line break and nobreak elements to control the way that a
line of text breaks around an image or object. (See “Controlling text flow on a page” on
page 191.)
Keep in mind that the text wrap around the image or object will appear differently
depending on the platform and browser preferences. (See “Displaying font sizes across
platforms” on page 196 and “Previewing files” on page 37.) You can use the View palette to
view profiles of the layout on different platforms. (See “Setting view options for page
layout” on page 55.)
To wrap text around an image or object:
1 Place the image or object at the beginning or within a line of text.
2 Select the image or object and choose Left or Right from the Alignment pop-up menu
in the Inspector.
3 Drag the image or object up or down to the position that looks best within the
paragraph.
To change the alignment of an image or object within a line of text:
Select the object and choose one of the following options from the Alignment pop-up
menu in the Inspector:
•

Default aligns the object with the baseline of text or adjacent objects in the line or the
left side of the document window or container.

•

Top, Middle, or Bottom aligns the top, center, or bottom of the object with the top,
center, bottom, or baseline of text or adjacent objects on the line.

•

Left, or Right aligns the left or right side of the object with the left or right side of the
line, document window, or container. Any text in the line moves to the left of the object.
If there are no other objects or text in the line, the object aligns with the left or right
side of the window or container.

Using Help | Contents | Index

Back

190

Adobe GoLive CS Help

Formatting Text

Using Help | Contents | Index

Back

191

•

Text Top aligns the top of the object with the top of text (the top of the tallest character)
in the line.

•

Abs Middle, Baseline, or Abs Bottom aligns the center or bottom of the object with the
absolute middle (half way between the top and the bottom), text baseline, or absolute
bottom (including text descenders below the baseline) of text or objects in the line.

Controlling text flow on a page
You can control how text flows by inserting line break (
) or nobreak ()
elements at the end of the lines in a paragraph. For example, when you want a line to
break at a particular word, you can use the line break element to force all browsers to
break the line there regardless of the size of the browser window. When you want to keep
two words together and never break them up regardless of the size of the window, use
nobreak elements.
You can use the clear attribute together with the line break element to cause a broken line
to clear an image before it continues on in the text flow.
Also, by using line break elements, you can control the spacing between paragraphs
rather than letting Web browsers determine how much space is needed.
To insert the nobreak element:
1 Select the words in the paragraph that you want to keep on the same line.
2 Choose Type > Nobreak.
To insert the line break element:
1 Drag the Line Break icon from the Basic set in the Objects palette to the line, or doubleclick the icon to insert the line break at the insertion point.

The line breaks at the same position regardless of browser
window size.
A. Line break marker B. Line Break icon

To control how text breaks after an object in the line:
1 Select the line break marker.
2 In the Line Break Inspector, select Clear and choose an option from the pop-up menu:
•

All to move the text after the line break to the bottom of any object in the line.

•

Left to move the text after the line break to the bottom of a left-aligned object.

•

Right to move the text after the line break to the bottom of a right-aligned object.

Note: When wrapping text around an object inside a layer, the object must be left-aligned
or right-aligned for the Clear attribute to work as expected in the HTML text flow.

Using Help | Contents | Index

Back

191

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

192

Formatting text characters
You can apply HTML physical and structural attributes to inline text that does not affect
the rest of the paragraph. These attributes work well with cascading style sheets to further
enhance the formatted text. (See “Creating a style sheet” on page 214.)

Applying HTML physical attributes to inline text
Physical text attributes, such as italic for text that needs special emphasis or bold for text
that needs a strong pronouncement, let you define the appearance of selected text
without assigning a structural classification. All Web browsers interpret the italic and bold
attributes in basically the same way. (For information on using CSS styles to apply these
attributes, see “Setting Font properties” on page 226.)
Physical text attributes include the following:
•

Plain text is the basic format for standard HTML text. It can be overridden by style
sheets.

•

Italic tells browsers to use an italic or oblique typeface. If the typeface is not available,
highlighting, reverse video, or underlining may be used.

•

Bold tells browsers to use a bold typeface. If that is not available, browsers might use
something like reverse video or underlining.

•

Underline tells browsers to underline text, spaces, and punctuation. (This attribute may
be removed from the next version of HTML.)

•

Strikeout tells browsers to put a line through the middle of text. (This attribute may be
removed from the next version of HTML.)

•

Superscript is used to display text one-half of a character higher than the rest of the
text.

•

Subscript is used to display text one-half of a character lower than the rest of the text.

•

Teletype (tt) tells browsers to display text in a monospaced typeface.

•

Blink is a Netscape extension for reversing the background and foreground colors of
text to make text appear to blink on and off.

Note: Older browsers may not support these physical attributes other than the basic set:
plain, bold, and italic.
To apply an HTML physical attribute to text:
1 Do one of the following:
•

Select the text that you want to format. Then choose an option from the Type > Style
menu, click the Bold button , the Italic button , or the Teletype button on the
toolbar, or choose an option from the Style context menu.

•

Choose an option from the Type > Style menu and start typing. The style remains in
effect even after you press Enter or Return.

To remove all existing HTML physical attributes from the selected text:
Choose Type > Style > Plain Text.

Using Help | Contents | Index

Back

192

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

193

Applying HTML structural attributes to inline text
Structural text attributes (also known as HTML content-based styles) let you define
selected text in meaningful categories, such as text that needs special emphasis or a
strong pronouncement. Web browsers vary in their interpretations for structural attributes
as appropriate for their users. For example, one browser may use italics for the Emphasis
attribute, while another browser may use boldface. Another browser used by the blind or
physically impaired may use a loud voice.
Using CSS styles in your style sheets, you can build upon these structural attributes. For
example, to emphasize a word, use the Emphasis element to apply HTML structure to the
text and then use a CSS style to make the word big and bold. (See “Creating HTML element
styles” on page 220).
•

The Emphasis attribute is most commonly used to emphasize text. In most browsers,
the selected text appears italicized.

•

The Strong attribute is used for strongly emphasizing text. In most browsers, it makes
the selected text bold.

•

The Quotation (cite) attribute is used to identify the selected text as content taken from
another source. Most browsers display quotations using a smaller font size and italics.

•

The Sample attribute is used to place special emphasis on small character sequences
taken out of their normal context. Most browsers display samples using a monospaced
font.

•

The Definition (dfn) attribute is used to define special terms or phrases, and to assist in
creating a page index or glossary. Most browsers display definitions as plain text.

•

The Variable (var) attribute is used most often in conjunction with the Code attribute to
represent variable names or user-supplied values within the code. Most browsers
display variables with an italicized monospaced font.

•

The Code attribute is used for text that represents computer source code or other
machine-readable content. Most browsers display code using a monospaced, teletypestyle font such as Courier.

•

The Keyboard (kbd) attribute is used to identify the selected text as text that is typed on
the keyboard. Most browsers display keyboard entries using a monospaced font.

To apply an HTML structural attribute to text:
Do one of the following:
•

Select the text that you want to format, and choose an option from the Type > Structure
menu or the Style context menu.

•

Choose a style from the Type > Structure menu and start typing. The style remains in
effect even if you press Enter or Return.

To remove all existing HTML structural attributes from the selected text:
Choose Type > Structure > Plain Structure.

Using Help | Contents | Index

Back

193

Adobe GoLive CS Help

Formatting Text

Using Help | Contents | Index

Back

194

Applying fonts, type sizes, and color to text
You can apply fonts, type sizes, and color to selected text using CSS styles or HTML text
formatting attributes. Font sets (groups of font choices for Web browsers) that you create
appear in the CSS Editor and the Type > Font menu. When you use the Type > Font menu
or the toolbar to apply font sets, relative sizes, or color attributes to selected text, GoLive
places them inside the font element. Because the font element is known to cause
problems with browsers interpreting style sheets, you may not want to mix your methods
for applying these attributes. (For information on using CSS styles to apply these
attributes, see “Setting Font properties” on page 226.)

Creating and applying font sets
Normally, HTML text on a page appears in the Web browser using the default proportional
font that is set in the browser preferences. You can have more control of the font that the
browser uses by applying a font set to your text. When displaying text formatted with a
font set, the Web browser attempts to display the text using the first font listed in the font
set, then the second font in the set, and so on. If none of the fonts in the set are installed
on the viewer’s computer, the browser displays the text using its default font.
The Type > Font menu lists all font sets available for the open page. Font sets saved with
the GoLive application appear at the top of the menu by default. Font sets stored in the
site project file appear only when their parent windows are open.
For information on storing font sets in the site project file and making them appear in the
CSS Editor and Type > Font menu when the site window is open, see “Collecting font sets
for a site” on page 316.
To create a font set:
1 Choose Type > Font > Edit.
2 In the Font Editor, click the Default Font Sets tab.
3 Click the Create New Font Family button
that appears.

and select the new font family from the list

The new font set appears in the list.

A
B

The font set’s name is based on the first font in the set.
A. New font set B. New font

Using Help | Contents | Index

Back

194

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

195

GoLive names the font set based on the name of the first font in the set. (You can
customize the name of the font set by first adding the font set to your site and then using
the Font Set Inspector to rename it. See “Collecting font sets for a site” on page 316.)
4 To add more fonts to the new font set, click the Add Font button . Then choose
another font from the pop-up menu.
5 Use the Up button or the Down button to move fonts up or down in the font set.
(The order that the fonts appear in the list determines the order that the Web browser
attempts to use them.)
6 Click OK.
To edit a font set:
1 Choose Type > Font > Edit.
2 In the Font Editor, select the Default Font Sets tab.
3 Select the font set, or one or more fonts in the set. To select multiple fonts, Shift-click. To
select multiple noncontiguous fonts, Ctrl-click (Windows) or Shift-click (Mac OS).
4 Do any of the following:
•

To add a new font, click the Add Font button . Then type a name for the new font in
the text box or choose a font name from the pop-up menu.

Depending on what you selected, the new font is added to the bottom of the list in the
font set or above the selected font in the list. The name of the new font is based on the
name of the selected font set or font.
•

To change the name of the selected font, enter a new name in the text box or choose a
font name from the pop-up menu.

•

To create a copy of the selected font set or fonts, click the Duplicate button . The copy
appears below your selection.

•

To change the name of a font set, select the first font in the set. Then enter a new name
in the text box or choose a font name from the pop-up menu.

•

To change the order in which a font set or group of fonts is listed in the Font Editor,
select the set or fonts and click the Up button or the Down button .

•

To remove the selected font set or fonts from the list, click the Delete button .

5 Click OK.
To apply a font set to text using the Type > Font menu:
1 Select the text that you want to format.
2 Choose a font set from the Type > Font menu. Choose Default Font if you want Web
browsers to use their default fonts.
For information on adding font sets to your style sheets, see “Setting Font properties” on
page 226.

Editing the Preferred Fonts list
The Font Editor contains a Preferred Fonts tab. The Preferred Fonts tab lists the fonts that
GoLive presents as font choices to the user.

Using Help | Contents | Index

Back

195

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

196

To edit the Preferred Fonts list:
1 Choose Type > Font > Edit.
2 In the Font Editor, select the Preferred Fonts tab.
3 Select one or more fonts in the set. To select multiple fonts, Shift-click. To select multiple
noncontiguous fonts, Ctrl-click (Windows) or Shift-click (Mac OS).
4 Do any of the following:
•

To add a new font, click the Add Font button . Then type a name for the new font in
the text box or choose a font name from the pop-up menu.

•

To change the name of the selected font, enter a new name in the text box or choose a
font name from the pop-up menu.

•

To remove the selected fonts from the list, click the Delete button .

5 Click OK.

Displaying font sizes across platforms
Font sizes are relative to the font size preferences set in Web browsers. In addition, fonts in
Windows are about one step larger than in Mac OS because of a difference in pixel
resolution between platforms. To make sure that your page layout can handle a range of
font sizes across platforms, here are some guidelines to follow when designing it:
•

You can control the font size across platforms by using CSS styles. When specifying the
font size for a style in a cascading style sheet, use pixels rather than points. Point sizes
will vary on platforms due to pixel resolution, whereas pixels remain fixed. In the Font
tab of the CSS Editor, choose Pixel from the Size pop-up menu. (See “Setting Font
properties” on page 226.)

•

Before publishing your page on the Web, preview it at a variety of font sizes on a variety
of platforms and browsers. You can also use the View palette to view a simulated
preview of your page in a Web browser for Windows or Mac OS. (See “Setting view
options for page layout” on page 55.)

•

Don’t use HTML heading attributes (such as h1’s) with relative font sizes. The relative
font size can cause the heading to wrap and adversely affect your page layout.

•

Use layout text boxes to control the amount of space that appears between text and an
image. When text appears at a smaller or larger font size than what you used for the
page layout, the image moves up and down as the text resizes.

•

Keep in mind that a layout text box doesn’t decrease in size when the text appears at a
smaller font size than what you used for the page layout. As a result, extra space can
appear between the text in the box and objects below the box. However, a layout text
box does increase in size to accommodate the text when the text appears at a larger
font size than what you used for the page layout. When the box increases in size,
objects below the box are moved downward on the page. (However, by using pixels for
the font size in a CSS style, the font size will display the same on all platforms, and
therefore the size of the layout text box need not change.)

•

Keep in mind that the default font size displayed in the Layout Editor does not necessarily reflect the actual size of text in a Web browser, and neither does changing the
default font size in the Font preferences affect the actual font size of the page. (The
Font preferences are for setting the GoLive display fonts only.)

Using Help | Contents | Index

Back

196

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

197

Applying relative font sizes
Text formatted with a relative font size appears at a size related to the size set in the Web
browser’s preferences. Most viewers have their browsers configured to display text at 12
points. By applying a relative font size to text, you can make it appear the same as, smaller
than, or larger than the default size set in the browser’s preferences, or at a smaller or
larger size in relation to the default size or the base font size of the document.
Note: The relative size attributes are part of the font element, which is known to cause
problems with browsers interpreting style sheets. Apply font sizes to text using CSS styles
instead. (See “Setting Font properties” on page 226.)
To apply a relative font size to text:
1 Select the text that you want to format.
2 Choose a relative font size from the Type > Size menu or the Font Size pop-up menu on
the toolbar:
•

Choose a size between 1 and 7 to display a size relative to the browser’s preferences.
Size 3 displays text at the default font size set in the browser’s preferences, sizes 1 and 2
display text at a smaller size, and sizes 4 through 7 display text at a larger size.

•

Choose a size between +1 and +7 to display text at a size that’s larger than the default
or base font size of the document (+1 displays text one font size larger and so on).

•

Choose a size between -1 and -7 to display text at a size that’s smaller than the default
or base font size of the document (-1 displays text one font size smaller and so on).

Adding color to text
You can add color to selected text without affecting the overall text color in the page.
When you use the toolbar or the Swatches or Color palette to apply color, GoLive places
the color attribute within the font element. Because the font element is known to cause
problems with browsers interpreting style sheets, you may want to use a CSS style to add
color instead. (See “Setting Font properties” on page 226.)
You can set the default color for text and the various stages of hypertext links without
using the font element or a style sheet. (See “Setting the default color for text or links in a
page” on page 70.)
To add color to text:
1 Select the text that you want to color.
2 Do one of the following:
•

Click the lower right corner of the Set text color field on the toolbar and select a color
from the swatches that appear. (The swatches displayed reflect the current settings in
the Swatches palette.)

•

Click the Set text color field on the toolbar and use one of the color sliders to select a
color from the Color palette. (Choose Only Web Colors from the Color palette menu to
select only Web safe colors). You can also click a color in the Recently Used Colors list.

•

Choose Window > Swatches to open the Swatches palette, and then select a color.

Using Help | Contents | Index

Back

197

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

198

GoLive applies the color to the selected text. If you selected text at the end of a line, the
color remains in effect after you press Return or Enter and continue typing.
You can also color selected text by dragging a color from the Colors tab in the site
window to the selection in the page. (See “Using site colors” on page 315.)
To remove color from selected text:
Select the text and do one of the following:
•

Choose Type > Remove Color.

•

Click the lower right corner of the Set text color field on the toolbar and choose Remove
Color.

Saving HTML styles
You can use the HTML Styles palette to save formatted text as custom HTML styles and
then apply the HTML styles to other text. The HTML Styles palette also lets you create new
HTML styles based on formatting options you choose or HTML attributes and values you
type. You can save HTML styles for paragraphs or inline text, and specify whether to
supplement or replace existing formatting when you apply the HTML styles to text. You
can also share a set of HTML styles with others working on the same site project.
The HTML Styles palette is useful for quickly adding structure to your text that cascading
style sheets can then refer to. You can set up a page of text, format it with headings,
default lists, block indents, and structural attributes for inline text (such as the emphasis
element) and save them in the HTML Styles palette. You can export them from the palette
as their own set in an XML file and then import them when you want to use the set. Then
you can save the page as stationery or a page template (see “Using page templates” on
page 305 and “Using stationery” on page 312) that opens whenever you want to create a
new page (see “Setting preferences for opening pages” on page 42).

About the HTML Styles palette
GoLive provides several custom HTML styles that appear already in the HTML Styles
palette. Each HTML style in the list has a custom name and displays its formatting
attributes (such as its color, font, and size). Symbols in the left column indicate the HTML
style type—whether the HTML style will be applied to inline text or an entire paragraph
and whether the HTML style will supplement (add) or replace the text. You can use the
HTML Styles palette to export and import sets of HTML styles to and from XML files.

Using Help | Contents | Index

Back

198

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

199

To display the HTML Styles palette:
Choose Window > HTML Styles.

A
B
C

Symbols indicate whether an HTML style will add to or
replace a paragraph or an inline text attribute.
A. Replaces selected paragraph
B. Adds to selected paragraph
C. Adds to selected inline text

Creating and editing HTML styles
You can create an HTML style based on formatted text in the page, formatting options you
choose in the Basic tab of the New Style dialog box, or HTML attributes and values you
enter in the Advanced tab. You can save HTML styles as paragraph or inline text styles and
set them to either add to existing formatting or replace it.
You edit an HTML style by changing any of its options or attributes in the Edit Style dialog
box or applying captured attributes of selected text to the HTML style.
To create a new HTML style:
1 If you want to base the new HTML style on text that’s already formatted, select the
formatted text in the page.
2 In the HTML Styles palette, click the New Style button .
3 In the New Style dialog box, enter a descriptive name for the HTML style in the Name
text box.
4 To specify the text formatting attributes for the new HTML style, do one of the
following:
•

Click the Basic tab and choose formatting options such as Font, Size, or Color.

•

Click the Advanced tab and click the New Tag button to add a tag to the top of the
scrolling list. For the selected tag, enter a name, attribute, and its value in the text boxes
below the list.

If you selected formatted text in step 1, the formatting attributes appear in the New Style
dialog box. The preview pane at the bottom of the dialog box reflects the combined
attributes of
the style.
5 Click the Apply as Inline button or the Apply as Paragraph button for the HTML
style type. Inline text styles apply to selected text only and paragraph styles apply to the
entire paragraph regardless of what is selected in the paragraph.
Note: The heading, address, preformatted, and align attributes can only be saved as
paragraph styles, not as inline text styles. Clicking the Inline Text button will cause GoLive
to reset the attributes to “Paragraph.”

Using Help | Contents | Index

Back

199

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

200

6 Choose Add or Replace from the Apply Mode pop-up menu. Styles with the Add apply
mode are applied to text in addition to any existing formatting. Styles with the Replace
apply mode replace the existing text formatting.
7 Click OK.
To edit an HTML style:
1 Select the HTML style in the HTML Styles palette.
2 Do any of the following:
•

To replace it with the formatting attributes of text that’s selected on the page, click the
Capture button .

•

To change its formatting attributes, style type, or apply mode, click the Edit Style
button to open the Edit Style dialog box. The preview pane at the bottom of the
dialog box reflects your changes to the HTML style. Modify your selections as desired
and then click OK.

To remove an HTML style from the HTML Styles palette:
In the HTML Styles palette, select the HTML style that you want to remove and click the
Delete button .

Exporting or importing HTML styles
You can export the current HTML styles from the HTML Styles palette to an XML file and
save it as a separate set. When you import a set of HTML styles from an XML file into the
HTML Styles palette, all HTML styles in the palette are overwritten by the imported HTML
styles. By default, predefined HTML styles that come with GoLive are stored in an html.xml
file in the Adobe GoLive application’s Settings > Styles folder.
To export your current set of HTML styles:
1 In the HTML Styles palette, click the Export button .
2 Enter a filename, select a file location, and click Save.
To import a set of HTML styles:
1 Create a copy of your current set of HTML styles by exporting them to an XML file.
(Otherwise, they will be overwritten by the imported HTML styles.)
2 Do one of the following:
•

In the HTML Styles palette, click the Import button . Select the XML file containing the
set of HTML styles that you want to import, and click Open.

•

Drag the XML file containing the set of HTML styles that you want to import from your
desktop to the HTML Styles palette.

Applying or removing HTML styles
The symbols to the left of each HTML style listed in HTML Styles palette tell you whether
the HTML style is for inline text selections or paragraphs. Paragraph styles are applied to
the entire paragraph that contains the selected text or insertion point. The symbols also
indicate whether the HTML style will completely replace the formatting of the text or just
get added to it. You can apply more than one HTML style to selected text and you can
remove all the HTML styles at once.

Using Help | Contents | Index

Back

200

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

201

To apply an HTML style to text:
1 Select the text or click anywhere in the paragraph that you want to format.
2 In the HTML Styles palette, do one of the following:
•

Drag an HTML style from the palette to selected text on a page.

•

Double-click an HTML style to apply it to a selection.

•

Select an HTML style and click the Apply Styles button .

An HTML style can apply several HTML attributes to text
at once.

To remove all HTML styles from selected text:
In the HTML Styles palette, choose Clear Inline Styles or Clear Paragraph Styles from the
palette menu.
Note: To remove an HTML style application, you can also use the History palette or choose
Edit > Undo Apply Style. (See “Using the Undo, Redo, and Revert to Saved commands” on
page 37.)

Checking spelling
You can check the spelling of a single page or an entire site. If you are checking a site,
GoLive opens each page that contains a questionable word and closes each page when
you’re done checking it. GoLive automatically ignores the HTML when checking spelling.
When GoLive questions the spelling of a word, you can add the word to a personal
dictionary and it will be recognized as correct in the future. You can create a personal
dictionary for each language that you have installed.
To check the spelling in a page or site:
1 Select the Layout Editor tab, Source tab, or the site window.
2 Choose Edit > Check Spelling.
3 Set spelling checker options:
•

Choose a spelling checker language from the Language menu.

•

Select From Top to start checking at the top of an open page rather than at the i
nsertion point.

Using Help | Contents | Index

Back

201

Adobe GoLive CS Help

Using Help | Contents | Index

•

Formatting Text

Back

202

Expand More Options and specify conditions for the search, such as to ignore numbers.

4 To check the spelling in multiple files, select Check in Files and do one of the following:
•

Choose a site from the Files From menu.

•

Choose custom from the Files From menu and click Add Files to create a custom list.

5 Click Start.
GoLive displays a suggestion for the first questionable word in the text box.
6 To change the questionable word, do one of the following:
•

Click Change to use the first suggestion.

•

Double-click another suggestion in the Suggestions list box.

•

Edit the suggestion in the text box and then click Change.

7 To accept the questionable word, do one of the following:
•

Click Ignore to allow a single occurrence of the word.

•

Click Ignore All to allow the questionable word for the current session. GoLive ignores
all occurrences of the word in the page or site.

•

Click Learn to add the questionable word to your personal dictionary. GoLive recognizes the word as correct in the future.

8 Click Delete to delete a questionable word from the page.
9 If you are checking a site, click Next File to quit checking the current page and start
checking the next page in the site.
10 To stop checking at any time, click Stop.
To edit a personal dictionary:
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 Click Spell Checker in the left pane of the Preferences dialog box.
3 Choose a language set of spelling rules from the Personal Dictionary pop-up menu in
the right pane of the dialog box.
4 To edit a word in the list, select it and change it in the text box below the scrolling box,
and then press Enter.
5 To add a word, click the New Word button , type the word in the text box, and press
Enter.
6 To delete a word, select it in the list, and click the Delete button .
7 Click OK.

Searching for text or HTML
Using the GoLive search tools, you can find and replace text or strings of HTML in any file
throughout your Web site. You can search multiple files at a time, specify parameters for
narrowing the search, and use wildcards in a search.
You can also use GoLive search tools to search for HTML elements with special conditions
(see “Finding elements” on page 400), search for files in a site (see “Finding files” on
page 128), and create and save extensive site queries based on a search (see “Generating
queries” on page 129).
Using Help | Contents | Index

Back

202

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

203

Searching in the current document
You can use the Find & Replace feature in the Layout Editor, Outline Editor, or Source Code
Editor to search for text or strings of HTML code in the current document. Once you find
what you’re looking for, you can automatically change it to something else. You can also
search for selected text without opening the Find & Replace Content window.
To find and replace text or HTML in the current document:
1 Choose Edit > Find, and click the In Current Document tab.
2 Do one of the following:
•

Type or paste text or HTML into the Find text box.

•

Select text or HTML in the document window, and drag it into the Find text box.

•

Choose an item from a previous search from the Find & Replace palette menu.

Previously used search strings appear in the search history
pop-up menu along with defined regular expressions.

3 Select options to ignore the case, look for entire words that are not embedded within
other words, start searching from the top of the page, wrap around to the beginning of
the search, or search for text using wildcards (regular expressions).
Note: Do not use the Regular Expression option unless you understand wildcard
searching. This powerful option can cause unexpected results, especially if you plan to
search and replace multiple items. For more information, see “Using wildcards in a search”
on page 206.
4 Click the triangle to expand the Replace text box, and type in replacement text.
5 Click Find. GoLive highlights the first match, if any.
6 Do one of the following:
•

Click Find Next to find the next occurrence of the text.

•

Click Replace to replace the found text.

•

Click Replace & Next to replace the text and find the next occurrence.

•

Click Replace All to automatically replace all instances of the text in the document.

To search for another selection without opening the Find & Replace Content
window:
1 In the Layout Editor or Source Code Editor, select the desired text in your document.
Using Help | Contents | Index

Back

203

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

204

2 Choose Edit > Find Selection.
GoLive starts looking for the text from the current selection and highlights the next occurrence of the text using the current settings in the Find window.
You can also find and replace text without reopening or moving the Find window to
the foreground by choosing Edit > Replace or choosing Edit > Replace & Find Next.
These commands are only available if the item searched for was found and is still selected.

Searching in multiple files
You can search and replace text or strings of HTML in multiple files or an entire site
without needing to open the files. (To specify search conditions for HTML elements, see
“Finding elements” on page 400.)
Note: If you plan to do a global search and replace in multiple files, you should be sure to
make a backup of your files and site, especially if you are using wildcard characters.
To find and replace text or HTML in multiple files:
1 Choose Edit > Find, and click the In Multiple Files tab.
2 Choose one of the following:
•

Choose Text in Layout Mode to search for plain text in Layout Mode only.

•

Choose Text in Source Mode (encoded) to perform a text-based search in the
document’s source code.

•

Code Elements searches for HTML code. For detailed information about using this
option, see “Finding elements” on page 400.

3 Type the text or HTML code in the Find text box and the Replace text box, and then
select search options.

Using Help | Contents | Index

Back

204

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

205

4 Do one of the following to specify the search scope:
•

To select a site or a site collection, open the site and choose Sites and Collections from
the Search In menu. Select the site folders or collections you want to search.

•

To select individual file(s) from a site, open the site window, choose Files from the
Search In menu, and then drag the file(s) from the site window to the file list in the
Search In section.

•

To browse and select individual file(s), choose Files from the Search In menu and click
Add Files. In the Add Files dialog box, click Add All or select the files you want searched
and click Add, and then click Done.

•

To search within a previous result set (an open list of matches that resulted from a
previous search), choose Result List from the pop-up menu in the Search In section.

Drag files into the Find window to add them to the search.

5 Select options to ignore the case, look for entire words that are not embedded within
other words, start searching from the top of the page, wrap around to the beginning of
the search, or search for text using wildcards (regular expressions).
Note: Do not use the Regular Expression option unless you understand wildcard
searching. This powerful option can cause unexpected results, especially if you plan to
search and replace multiple items. For more information, see “Using wildcards in a search”
on page 206.
6 Click Find.
GoLive shows you the first file found containing matching text and opens the file.
7 Do one of the following:
•

Click Find Next to find or view the next match in the same or next document.

Using Help | Contents | Index

Back

205

Adobe GoLive CS Help

Using Help | Contents | Index

•

Formatting Text

Back

206

Click Find All to find or view all matches. In the Result window, all files with matches are
marked by a number appearing in the Hits column. Double-click a file with a hit count
to open the file and show the first match highlighted.

To save result sets from the Result window for use in another search:
Do one of the following:
•

If you’d like to search within the result set, click Use Result in the Results window. You
can remove files from the result set by selecting them and clicking Remove.

•

Click Save Collection in the Results window if you’d like to save the results as a
collection in the currently open site (a site must be open for the Save Collection option
to be available). You can remove files from the Results window by clicking Remove
before saving the collection. Saved collections are displayed in the Collections tab of
the Site window (see “Using collections” on page 319).

Using wildcards in a search
When you select Regular Expression in the Find & Replace Content window, you activate
wildcard searching. GoLive makes wildcard searching easier by allowing you to use
editable wildcard patterns from the Regular Expressions pop-up menu in the Find &
Replace Content window.

Wildcard patterns appear below the separator line in the search history menu.

To use wildcards in a search:
1 In the In Current Document or In Multiple Files tab of the Find & Replace Content
window, choose a wildcard pattern from the Regular Expression pop-up menu at the top
of the window or type a search string in the Find text box. (See the wildcard search options
in the following table.)
2 Select Regular Expression.
3 Click Find.

Using Help | Contents | Index

Back

206

Adobe GoLive CS Help

Formatting Text

Using Help | Contents | Index

Back

207

Use these guidelines when wildcard searching:
•

Characters that are used to specify wildcard options, such as “?”,“\”,“[”, and “]”, must be
preceded by a backslash. For example, “\?” finds any question mark.

•

The caret serves as a wildcard character only when it precedes a range of characters, as
in “[^A-Z]”.

•

The dash does not act as a wildcard character if it precedes a range of characters, as in
“[-ABC]” or “[^-ABC]”. At any other location, it acts as a wildcard character indicating a
“from…to” relationship.

The following table lists available wildcard search options:
Wildcard Option

Action

Wildcards for Single Characters
.

Finds any single character.

[]

Finds any one of the characters in square brackets.
For example: “[0123456789]” finds any digit. “[a-zA-Z]” finds any alphabetical character.
Finds any one character in a range enclosed in square brackets.
For example: “[0-9]” finds any digit.

[^]

Finds any character other than the characters following the caret symbol
(^) in the brackets.
For example: “[^ab]” finds any character, except for “a” and “b”

\d (or [0-9])

Finds any digit.

\D (or [^0-9])

Finds any character other than a digit.

\w (or [a-zA-Z])

Finds any character.

[a-zA-Z]+

Finds any word.

\W (or [^a-zA-Z])

Finds any character other than alphabetical characters.

\s (or [SPACE+\t])

Finds any white space (SPACE = space key).

Finds any character other than a white space.

Finds any line break (in HTML source code).

Finds any tab character, such as indentations in HTML source code.

\x00 - \xff

Finds any character, as identified by its ASCII value.
For example: “\X43” finds “C”

Quantifiers
?

The question mark makes the preceding character or string (enclosed in
parentheses) optional.
For example: “(Adobe )?GoLive” finds
“GoLive” and “Adobe GoLive”.

Using Help | Contents | Index

Back

207

Adobe GoLive CS Help

Formatting Text

Using Help | Contents | Index

Back

208

Wildcard Option

Action

The plus sign finds one or more occurrences of the preceding character or
search string in a row.
For example: “ba+” finds “ba”,“baa”,“baaa”, etc.

The star is equivalent to a “?” and a “+”, and can result in a “not found” message if no occurrences are found. The character preceding the “*” is
optional.
For example: “ba*” finds “b”,“ba”,“baa”, etc.

Other Search String Modifiers
|

The vertical bar serves as a separator for alternative search strings.
For example: “Adobe|GoLive|4.0” finds “Adobe”,“GoLive”, and “4.0”.

()

Parentheses enclose a search string that serves as a definition for quantifiers.
For more information, see the description of “?” above.

In source mode, the caret finds the start of a line. In the Layout Editor, it
finds the beginning of a paragraph.

In source mode, the dollar sign finds the end of a line. In the Layout Editor,
it finds the end of a paragraph.

Search String

Finds

Adobe|GoLive

"Adobe" or "GoLive"

m(i|a)ll

"mill" or "mall"

Adobe(GoLive)?

"GoLive" if the latter exists, else "Adobe"

"" and ""

Ye+s

The word "Yes", containing any number of successive "e" characters, such as "Yes", "Yees", "Yeees", etc.

Michael J[a-z]*

Any string beginning with "Michael J", followed by any number of
lowercase letters, such as "Michael Jones", "Michael Jamrosy", and
"Michael Jordan"

HTML headings H1 through H6, including “H1”,“H2”,“H3”, etc.

<[a-zA-Z][a-zA-Z0-9]*>

Any start tag that has no attributes, such as "", "", "
",
""

<[a-zA-Z][a-zA-Z0-9]*[^>]*>

Any start tag, including those with attributes, such as ""

Using Help | Contents | Index

Back

208

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

209

Using back-references in wildcard searches
Back-references let you replace a selection with part of the wildcard string you entered in
the Find text box. A back-reference consists of a backslash character followed by a
number, for example “\1”,“\2”, and so on. The number refers to a subexpression (enclosed in
parentheses) of the wildcard search pattern in the Find text box:
•

“\1” refers to the first subexpression in the wildcard search pattern. This subexpression
starts at the first opening bracket from the left and ends with the complementary
closing bracket.

•

“\2” refers to the second subexpression, which starts at the second opening bracket
from the left and ends with the complementary closing bracket.

When you click the Replace button, each selection is replaced with the part of the
matching text that has been recognized by the subexpression that the back-reference
refers to.
For example, you enter the wildcard search pattern ((Adobe)?GoLive) in the Find text box
to find any occurrence of “GoLive” or “Adobe GoLive”. The “?” character makes the “Adobe”
enclosed in the second pair of parentheses optional. If you enter the back-reference \1 CS
in the Replace text box, the found text is replaced with the contents of the first pair of
parentheses plus the letters CS. If the match is “Adobe GoLive”, the result is Adobe GoLive
CS. If the match is “GoLive”, the result is GoLive CS.

Working with nonroman character sets
Your ability to switch between roman and nonroman character sets depends on your
operating system.
In Windows versions earlier than 2000, you can’t directly create nonroman (double-byte)
Web pages using a roman (single-byte) operating system. However, you can import
double-byte HTML files created with another operating system. You can then view the
HTML source code in GoLive, although the double-byte text doesn’t display correctly in
the Layout Editor or Preview. Microsoft Internet Explorer 4.0 and later versions are able to
display double-byte scripts, so you can preview double-byte files using the Show in
Browser command in GoLive.
The Windows 2000 and XP operating systems with Microsoft Internet Explorer 6.0 or later
let you view and create double-byte content without the entire native script operating
system. You can custom install the Language Pack for the script you need. See your system
documentation for further information.
Mac OS 9.1 and later operating systems include Multilingual Internet Access as an optional
installation. This software lets GoLive display double-byte scripts, even without the native
operating system. With the appropriate Language Kit custom installed, you can create and
edit nonroman text. See your system documentation for further information.

Using Help | Contents | Index

Back

209

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

210

Using double-byte text in GoLive (Windows 2000 and
Mac OS only)
When you install the English version of GoLive, any page that you create defaults to the
Western (Latin 1) encoding in Windows and the GL-Western encoding in Mac OS. If the
text on your page will be created using any Western language (such as U.S. or British
English, German, French, Spanish, or Swedish), you don’t need to change this selection.
You can type text directly in the document window. But to create content in a language
with a different script system, you need the appropriate system resources and fonts. You
must change the Encodings preferences to activate the language script you want to use so
that it appears in the File > Document Encoding submenu. The supported document
encodings are determined by the system software. The defaults include: Western, Multilingual UTF-16 and UTF-8, and Japanese encoding.

Setting language scripts and font preferences
The Encodings and Fonts preferences settings let you select the default language script,
activate language scripts so they appear in the Document Encoding submenu, and set
default fonts for languages.
Note: Language scripts that are not activated and supported by the system software don’t
appear in the File > Document Encoding submenu.
To activate encodings for language scripts:
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), and click the
Encodings icon in the left pane of the Preferences dialog box.
2 In the right pane of the dialog box, select the desired language encoding option to
activate it.
3 To make an encoding option the default,
select the name of the option, and then select Default Encoding, or simply double-click
the option name.
The name of the default selection appears in boldface and underlined.
4 Select Use Charset Info to include the encoding and character set information in the
Content attribute of the Meta element. When this option is selected, GoLive tries to
recognize the encoding based on the characters used. Deselect this option to eliminate
language information from the HTML page head section.
5 In the Scanning Limit Characters text box, enter the number of bytes that you want
GoLive to search in order to find encoding and character set information when it opens a
file. Deselect Use Charset Info to turn off this option automatically.
To select default fonts for a language script:
1 Click the Fonts icon in the left pane of the Preferences dialog box.
2 Click the triangle to expand the language script options.
3 For each option, choose a font and size from the Font and Size pop-up menus.
4 To preview your selection, click the Font Sample triangle (Mac OS).
5 Click OK, and restart GoLive.
Note: Only installed double-byte fonts appear in the Font menu. See your operating
system documentation for information on installing fonts.

Using Help | Contents | Index

Back

210

Adobe GoLive CS Help

Using Help | Contents | Index

Formatting Text

Back

211

To create double-byte language pages:
1 If you are creating text in a non-Western language, make sure that you have installed
the appropriate double-byte script system software and fonts.
2 Open a new document window.
3 Choose File > Document Encoding, and choose the appropriate language encoding
option.
Be sure that it is equivalent to the internal operating system encoding—for example,
Japanese (Shift JIS)—to add that meta information to the head section.
4 Proceed to add text to your page in GoLive.

Importing foreign-encoded text files
Before importing foreign-language files or text files from other platforms, you need to
know the type of encoding they were written with. If the text was saved with an encoding
not recognized by your operating system, it won’t display properly. However, the HTML
code is still valid. To insert foreign script, you must display your GoLive document in the
Source Code Editor, and paste the double-byte text into it.
To import foreign-encoded text files:
1 Open a new document window.
2 Choose File > Document Encoding, and choose the language encoding of the file that
you want to import.
This inserts the encoding information in the head section of the page. (For information on
adding language encodings to the File > Document Encoding menu, see “Setting
language scripts and font preferences” on page 210.)
3 Copy the text from the file that you want to import.
4 Return to GoLive, and display your GoLive document in the Source Code Editor.
5 Paste the copied text between the and tags. Make sure that you don’t
type over any of the HTML tags.
If your text contains characters that are used in HTML syntax, such as “<”,“>”, and “&”, you
must use the proper HTML notation for special characters, such as “<”,“>”, and “&”;
otherwise, GoLive interprets them as HTML tags when it reads the text-only file.
6 Choose File > Save As to save the page with the .html extension after the filename.
The text will not display properly without the necessary operating system and fonts. To
preview the page, you must use a Web browser with the correct encoding running on the
necessary operating system.

Using Help | Contents | Index

Back

211

Adobe GoLive CS Help

Using Help | Contents | Index

Using Cascading Style Sheets

Back

212

Using Cascading Style Sheets
About cascading style sheets
Cascading style sheets (CSS) simplify the maintenance of text properties and other
attributes in a page and throughout a Web site. If a CSS style needs to be updated, you
simply edit the style rule and all content that hosts the style will automatically reflect the
new properties. With style sheets you can set text size to display more consistently across
different platforms and control the position of content on a page with pixel-level
precision. An external style sheet can be shared by an entire site, giving your pages a
consistent presence and enabling you to update the site’s styles with a single file. With
HTML element styles you can automatically set the properties of HTML tags throughout a
page or site. Class styles are more flexible because they can be applied to specific selections in a page and to different types of content, without relying upon a single tag.

Styles and external style sheets listed in the CSS Editor

One of the fundamental features of CSS is that style sheets cascade—in other words,
several external style sheets, in addition to the internal style sheet, may define the
properties of a single page and override one another according to certain rules of precedence. When several style sheets apply their formatting rules to a page, conflicts may arise.
These conflicts are resolved by assigning a level of precedence to each style rule. Internal
style sheets will override a rule in an external style sheet, and external style sheets are
assigned a level of precedence relative to other sheets. By default, the Web page’s style
sheet overrides the browser’s default values.
Some viewers can’t see CSS style properties because their browser doesn’t support CSS,
the browser’s CSS support has been turned off, or the browser is set to override page
styles with a CSS file supplied by the viewer. In addition, Web browser support for CSS
varies greatly between both browser vendors and browser versions.

Using Help | Contents | Index

Back

212

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

213

About the GoLive CSS workflow
Use the CSS Editor to create CSS styles in a style sheet and to add external style sheets. Use
the CSS palette or the inline CSS Style preview (an inline version of the CSS palette’s Style
Apply tab) to apply class styles to content in a Web page.
The typical workflow for building cascading style sheets in GoLive includes the following:
1 Use the CSS Editor to add CSS styles to a Web page, link to an external style sheet or
create a new external style sheet. You can also import CSS styles from a different Web page
or from an external style sheet.
A

Internal style sheet in the CSS Editor
A. External style sheet reference B. List of internal styles

2 Use the CSS Editor to define the properties of each CSS style. Properties that you can
define include font sets, text size, border attributes, list attributes, background attributes,
and absolute position coordinates.
A

Define style properties in the CSS Editor
A. Selected style
B. Selected style’s properties

Using Help | Contents | Index

Back

213

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

214

3 If you’re using an external style sheet, you can link to it from an individual Web page
with the CSS Editor, or link multiple Web pages to it with the CSS palette and the site
window.
4 Apply class styles to text and other items. You must manually apply class styles to
selections in your page with the CSS palette. Element styles, in contrast, are automatically
applied to HTML tags in your Web page.
5 You can continue to modify any style’s properties with the CSS Editor. All content that
uses the style will automatically reflect the changes.

Apply class styles to selections with the CSS palette.

Creating a style sheet
The first step in designing with cascading style sheets is to create the internal or external
style sheet that contains your CSS styles. The CSS Editor lets you define the styles for an
internal or external style sheet, and lets you reference external style sheets.

Creating internal and external style sheets
To create a style sheet, first determine whether the style sheet should be internal or
external. An internal style sheet is written into the head section of a Web page and is
typically used if the styles aren’t used on more than one page. An external style sheet
exists as a separate file, which is useful if you want multiple pages to share the same styles.
In addition, GoLive lets you import the styles from an external style sheet into an internal
style sheet or export an internal style sheet to an external style sheet file. You can use both
an internal style sheet and external style sheets in a single Web page.
Note: Except for their title bars, internal and external CSS Editors appear identical. An
internal CSS Editor displays the Web page’s file name in the title bar. An external CSS Editor
displays the external style sheet’s file name in the title bar.
Create different external style sheets and apply each external style sheet separately to
a page to quickly preview different sets of styles.
To create an internal style sheet:
1 Click the Open CSS Editor button

in the upper right corner of the Layout Editor.

2 Add styles to the style sheet with one or more of the following methods:

Using Help | Contents | Index

Back

214

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

215

•

To create new styles, see “Creating CSS styles in a style sheet” on page 219.

•

To reference an external style sheet file, see “Using external style sheets” on page 217.)

•

To import styles from an external style sheet, see “Importing styles from an external
style sheet” on page 220.

To create an external style sheet:
1 Do one of the following:
•

To create a new external style sheet, choose File > New Special > Cascading Style Sheet.
The external CSS Editor displays.

•

To create an external style sheet based upon the styles of a page’s internal style sheet,
open the Web page, and click the Open CSS Editor button . Choose File > Export >
Internal Style Sheet. Name the file using .css as the extension, and save the file to your
site folder.

2 Add styles to the style sheet. (See “Creating CSS styles in a style sheet” on page 219.)
Note: To reference an external style sheet in an external style sheet, use the @import
button, see “Referencing external style sheets from an external style sheet” on page 218.
3 Reference the external style sheet from one or more pages. (See “Using external style
sheets” on page 217.)
To see all the pages that use an external style sheet, open the In & Out Links palette
and then select an external style sheet in a site window.
To add comments to a style sheet:
1 In the CSS Definitions tab in the CSS Editor, click in a blank white area to display the
Create buttons on the right side of the Editor.
2 Click Create Comment in the Advanced section.
3 With the comment selected under the Name column, enter comments in the text field
on the right side of the CSS Editor.

Using the CSS Editor
The CSS Editor lets you create CSS styles, edit style properties, reference or create external
style sheets, and preview how some style properties may appear. You can also use the
Source tab in the CSS Editor to view and edit the style sheet source code.
To display the CSS Editor:
1 Do one of the following:
•

Open a Web page and click the Open CSS Editor button

in the upper right corner.

•

Open an external style sheet that is named with the .css file extension.

2 To change the display on the right side of the CSS Editor in the CSS Definitions tab, do
one of the following in the Name column:
•

To display the Create buttons, deselect all styles.

•

To display style properties, select a style.

•

To display external style sheet properties (though not the style properties within it),
select an external style sheet.

Using Help | Contents | Index

Back

215

Adobe GoLive CS Help

Using Help | Contents | Index

Using Cascading Style Sheets

Back

216

3 To display the style sheet source code, click the Source tab in the CSS Editor. To change
the CSS source code color display, edit the Themes preference for CSS Syntax. (See
“Setting Source preferences” on page 375.)
To set viewing options for the CSS Editor:
1 Open the CSS Editor.
2 To display a preview of a selected style’s effect in the lower right pane of the CSS Editor,
choose View > Preview Styles from the CSS Editor menu.
3 Choose one of the following from the CSS Editor menu’s View submenu or select the
options in the View palette:
•

Folder for Sections separates the CSS Definitions tab of the CSS Editor into an Internal
folder which lists internal styles, and an External folder which lists referenced external
style sheets.

•

Show Statement Filter to display the Show all Statements pop-up menu.

Using Help | Contents | Index

Back

216

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

217

To edit the styles listed in the New Style submenu in the CSS Editor menu:
1 Choose New Style > Edit Style Examples from the CSS Editor menu.
2 In the exampleStyles.css CSS Editor window, do one of the following:
•

To edit an existing style, select a style to edit under the Name column.

•

To add a style to the list, use any method for creating a new style. (See “Creating CSS
styles in a style sheet” on page 219.)

3 Edit the style properties in the CSS Editor. (See “Defining style properties” on page 225.)
4 When you are finished editing styles, choose File > Save and close the exampleStyles.css CSS Editor window.

Using external style sheets
If multiple pages share style elements, you can create an external style sheet that you
reference from the individual pages. Using external style sheets helps to keep your page
sizes small and lets you update the entire site’s styles from within the single external style
sheet.
The order of the external style sheets in the CSS Editor indicates their order of precedence
(cascading order). Sheets that are lower in the list take precedence over sheets that are
higher in the list.
To see all of the pages that reference an external style sheet in your site, select the
style sheet file in your site window, and view all the references in the In & Out Links
palette.

Referencing external style sheets from an internal style sheet
Use the CSS Editor to reference the external style sheets from the pages that use them.
To reference an external style sheet:
1 Do one of the following:
•

To reference an external style sheet for a single Web page, in the CSS Editor click the
New Link To External CSS button , or choose New Link To External CSS from the CSS
Editor menu. Select the empty reference under the Name column and reference the
external style sheet in the Reference text box.

•

To reference an external style sheet for multiple Web pages, select two or more pages
within the site window’s File tab. In the CSS palette, click New Link To External CSS
button and then reference an external style sheet in the text box.

2 Add additional external style sheets as needed.
3 To change the order of precedence of an external style sheet relative to other external
style sheets referenced in the same page, drag the external style sheet to a new position in
the Name column in the CSS Editor of the page.
To easily reference a style sheet document from a page within the same site, drag the
style sheet file icon from the site window to either the page icon in the upper right
corner of the page or to a page’s CSS Editor.

Using Help | Contents | Index

Back

217

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

218

To view or edit a referenced external style sheet:
Do one of the following:
•

Double-click the external style sheet in the CSS Editor or the site window.

•

Select the external style sheet in the CSS Editor and click Edit.

To replace an external style sheet reference:
1 In the Files tab of the site window, select the.css file you want to replace.
2 In the In & Out Links palette, use the pick whip that is adjacent to the .css file and
reference a different style sheet document in the site window.
3 In the Change Reference dialog box, if necessary, deselect any files that you do not want
to update, and then click OK.
All selected files in the Change Reference dialog box use the new external style sheet.
Unselected files use the existing external style sheet.
To remove a reference to an external style sheet:
Do one of the following:
•

In the CSS Editor of a page, select the external style sheet and click the Remove
Selected Items button .

•

Select one or more pages in the site window, and then select the external style sheet in
the CSS palette and click the Remove Selected Items button.

Referencing external style sheets from an external style sheet
To reference an external style sheet from another external style sheet, you must use the
@import rule.
To reference an external style sheet from another external style sheet:
1 Open the CSS Editor for the page or .css file that you want to reference the external
style sheet.
2 In the CSS Definitions tab, click an empty area to display the Create buttons on the right
side of the Editor.
3 Expand the Advanced section and click the Create @import button.

Using Help | Contents | Index

Back

218

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

219

4 Do one of the following:
•

Reference an external style sheet in the Reference text box.

•

Click the Create button to create a new external style sheet. In the Save As dialog box,
type a file name for the external style sheet, and click Save. Display the CSS Editor for
the page that will reference the external style sheet you just created, and reference it in
the Reference text box.

5 If the styles in the style sheet are designed for certain media (such as a speech synthesizer, braille device, or PDA) specify the media type in the Media text box.
6 Do any of the following:
•

To edit the external style sheet, click Edit.

•

To display the In & Out Links palette, click In & Out Links.

Creating CSS styles in a style sheet
You can create new CSS styles from scratch or import CSS styles from an external style
sheet. There are three different types of styles you can define in a style sheet:
•

HTML element styles are “hard-wired” to specific HTML tags. This means the style
properties automatically apply to a tag, and any content it might enclose, wherever the
tag appears in a Web page. This style type lets you display pages in CSS-enabled
browsers exactly as you want them to appear. Simultaneously, browsers with no CSSsupport, or incomplete CSS-support, will have the benefit of the HTML-based
formatting that is inherent in the tag you specify in the style name. For example, if an
HTML element style is named for the tag, any style properties you add to the style
will be applied to any text that uses the Header 3 paragraph format in the page when
viewed in CSS-enabled browsers. Browsers without CSS-support will display the text
using the default Header 3 text properties.

•

Class styles apply to selected text or objects in a document, similar to the way word
processor styles function. Any number of elements inside the BODY section of a page
can host a class style. If you modify the class style’s properties, the changes affect all
text and objects to which the style was applied. Class styles are more flexible than
HTML element styles because a class style can be applied to multiple types of content
and only to items you select. For example, you can apply a class style to some of the
headings that use the Header 4 paragraph format in a page to distinguish them from
other Header 4 headings in the page.

•

ID styles define unique style properties for one element on a page. This style type is
used if the style properties of an item must be distinct from all other items on the page.
Consider using a class style instead since it can also be applied to a single item and is
more flexible.

Using Help | Contents | Index

Back

219

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

220

Two major style categories are used with cascading style sheets:
•

Simple Styles match elements based on the element type and/or attributes, not the
element’s position in the document structure. H1 (all level 1 headers) and H1.headline
(all level 1 headers with the CLASS attribute.headline) are examples of
simple styles.

•

Contextual Styles match elements based on their position in the document structure. A
contextual style consists of several simple styles. H1.headline B (all level 1 headers with
the CLASS attribute .headline and bold typeface) is an example of a contextual style
consisting of two simple selectors, H1.headline and B.

Importing styles from an external style sheet
You can import styles from an external style sheet into a Web page’s internal style sheet.
1 To import styles from an external style sheet:
2 Open the CSS Editor for the page to which you want to import the CSS styles.
3 Choose File > Import > External Style Sheet.
4 Select an external style sheet, and click Open. The external style sheet’s styles are added
to the list of internal styles in the CSS Editor.

Creating HTML element styles
One of the more powerful features of cascading style sheets is the ability to change the
properties of a Web page based on its HTML elements (tags). By using element styles, you
can enhance the presentation of a document and maintain downward compatibility as a
courtesy to viewers with browsers that don’t support CSS; browsers that support CSS
display the enhanced formatting that CSS permits, while the browsers that don’t support
CSS display HTML-based formatting and structure.
You can use element styles in two different ways:
•

Simple element styles reformat all instances of a particular element within your page.
For example, if you create a style with the text property 36 point and name it with the
tag, all text that uses that tag (the Header 1 paragraph format) will display with
size 36 point.

Using Help | Contents | Index

Back

220

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

•

Back

221

Contextual element styles reformat all instances of a particular element nested within
another element. For example, if you create a style named with the
tags and
assign the style a lime color, all text between start and end tags (italic style) that are
also within start and end tags will display in the lime color. (The proper style
name for this example is “h1 i” without the quotation marks. If a comma is inserted in
the style name, as in “h1,i” then any text between
or start and end tags will
use the style.)

To create hypertext links that change color when the mouse pointer hovers over the
link, use a contextual element style named after the “link” tag. In the CSS Editor,
choose a:hover from the New Element Style button’s menu or the CSS Editor menu.
To create an HTML element based style:
1 In the CSS Editor, do one of the following:
•

Click the New Element Style button

•

In the CSS Editor, choose a tag from the New Element Style button’s menu.
To add a HTML tag to both menus, choose Edit Style Examples from the New Element
Style button’s menu. (See “Using the CSS Editor” on page 215.)

•

Select an existing HTML element style in the CSS Editor, and choose Edit > Duplicate.

2 Select the new style in the CSS Editor, and select the Selector and Properties tab . If
you didn’t choose a tag in step one, type an HTML element (tag) name in the Name text
box. If you want to apply the same properties to multiple elements, separate each element
name with a comma in the Name text box.
Element styles use HTML start tags without the less than (<) and greater than (>)
characters—for example, h2 for second-level headers, p for paragraphs, td for table cells,
and the letter a for hypertext links. For more information on naming HTML element styles
to format tables and table content, see “Formatting tables and table content with
cascading style sheets” on page 181.
You can set the shared properties of all text in a page by creating an HTML element
style that is named after the tags , , and (for table cells). Add one
new HTML element style to the CSS Editor, and in the Basic set of the CSS Inspector, enter
the name as “td, body, div” without the quotation marks.
3 In the CSS Editor, add style properties to the selected style. (See “Defining style
properties” on page 225.)

Using Help | Contents | Index

Back

221

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

222

Any properties you add are automatically applied to the HTML element that the style is
named after wherever the tag appears in the page.

CSS Editor
A. Element style name B. Style properties
C. TD style is automatically applied to text in table cells in
the page

Creating class styles
You can apply class styles to any number of selections in a page and most any type of
content including a block of text, a single table cell, an image, and a layer. Typical uses of
classes include distinctive formatting for headings, quotes, warning notes, or other special
information-carrying items that need to stand out from the rest of the text. You can also
use classes to create typographical effects, such as varying font sizes or font colors within a
word.
To create a class style:
1 In the CSS Editor, do one of the following:
•

Click the New Class Style button

•

Select an existing class style, and choose Edit > Duplicate.

2 Select the new style in the CSS Editor, and click the Selector and Properties tab . Type
an alphanumeric name, preceded by a period in the Selector text box and with no
spaces—for example, .myboldclass.
Important: The leading period must precede the class style’s name; otherwise, the style
changes to an element style and can’t be used.
3 In the CSS Editor, add style properties. (See “Defining style properties” on page 225.)
To apply the class style, see “Applying styles” on page 233.

Using Help | Contents | Index

Back

222

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

223

Creating media, font, and page rules
You can specify media, font, and page information using CSS rules:
•

Use the @media rule to specify styles for different types of media. For example, use
@media to specify the font size for print media and a separate font size for the screen.

•

Use the @font-face rule to specify a font and its URL location to ensure the font will
display on systems without it.

•

Use the @page rule to specify the size of pages.

To create an @media, @font-face, or @page rule:
1 Open the CSS Editor for the page or .css file.
2 In the CSS Definitions tab, click an empty area to display the Create buttons on the right
side of the Editor.
3 Expand the Advanced section and do one of the following:
•

Click the Create @media button and choose the media type from the Media menu. In
the Source tab, enter the property and value pairs for the rule. (See “Editing cascading
style sheets manually” on page 224.)

•

Click the Create @font-face button; then click the Create New Item button. In the Font
Source tab, specify the URL of the font, and in the Font Styling tab, specify font
properties.

•

Click the Create @page button. Choose a selector from the Selector menu, and then
choose the type of marks you want from the Marks menu. Enter the margin and size
settings for the selector.

Creating ID styles
Unlike classes, which you can apply to an unlimited number of items in a page, an ID style
lets you apply a specific style only once in a document. Use IDs for a unique paragraph or
range of text, such as a headline, warning message, or other text that needs unique and
very restrictive treatment to distinguish it from other content in the page.
GoLive layers use ID styles to define their properties. If your document contains layers,
the document’s CSS Editor lists an ID style for each layer. You can use the CSS Editor to
edit many layer properties, such as border size and style, that are not available through the
Layer Inspector. (Many of these properties are not available in the Inspector because some
browsers may not consistently support them at this time.)
To create an ID style:
1 In the CSS Editor, do one of the following:
•

Click the New ID Style button .

•

Select an existing ID style, and choose Edit > Duplicate.

2 Select the new style in the CSS Editor, and click the Selector and Properties tab . Type
a unique alphanumeric ID name in the Name text box, preceded by a pound symbol(#)
and with no spaces—for example, #myheaderid.
Important: The pound symbol must precede the id style’s name; otherwise, the style
changes to an element style and can’t be used.

Using Help | Contents | Index

Back

223

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

224

3 In the CSS Editor, add style properties. (See “Defining style properties” on page 225.)
4 To apply the ID style, you must hand-edit the source code of your page. (See “Applying
styles” on page 233.)

Removing styles or external style sheets
You can remove styles or external style sheets from a Web page with the CSS Editor.
To delete a style or external style sheet from a Web page:
1 Select one or more styles or external style sheets in the CSS Editor; press Shift to select
adjacent items or press Ctrl to select nonadjacent items.
2 Click the Remove Selected Items button

in the CSS Editor.

Editing cascading style sheets manually
If you prefer to manually edit the source code of your cascading style sheets, you can do so
in the Source tab of the internal or external CSS Editor.
Use the following basic guidelines when editing your style sheets in the Source tab of the
CSS Editor.
Begin each style on a new line. Use the following basic CSS syntax definitions:
Class styles The syntax consists of a period followed by a unique class name, and a
property: value definition enclosed by braces:
.classname { property: value }

HTML element styles The syntax consists of an HTML tag, without the angle brackets <
>, followed by a property: value definition enclosed by braces:
tag { property: value }

ID styles The syntax consists of a pound symbol (#) followed by a unique alphanumerical
name, and a property: value definition enclosed by braces:
#idname {property: value}

If a style has more than one property: value pair, separate each pair with a semicolon. For
example:
.classname { property: value; property: value}

For more information on editing cascading style sheets, see “Creating CSS styles in a style
sheet” on page 219 and “Defining style properties” on page 225.

Using Help | Contents | Index

Back

224

Adobe GoLive CS Help

Using Help | Contents | Index

Using Cascading Style Sheets

Back

225

Defining style properties
After you have added a style to your cascading style sheets, you set the properties of the
style in the CSS Editor, which contains all of the style properties that GoLive supports.
Some style properties are automatically inherited by items contained within the item that
hosts a style.
The CSS Editor includes properties that cover the major part of the CSS specification, with
the exception of some style options that browsers don’t consistently support. If a property
you want to add is not included in the CSS Editor, you can enter the property and value in
the Selector and Properties tab or manually in the Source tab of the CSS Editor.
If multiple styles will share a set of properties, you can set the shared properties for
each style simultaneously. In the CSS Definitions tab of the CSS Editor, Shift-click to
select every style that will share the properties, and then set the shared properties in the
CSS Editor.

About property inheritance
Content and tags contained within an item that hosts a style will automatically inherit the
inheritable style properties. If you assign a style to an HTML tag or a selection in your
document, any tags and content contained between the start and end tags or within the
selection will inherit those style specifications. For example, consider an HTML element
style named after the tag (Header 1 paragraph format) and given a blue color
property. If the page has text that uses the Header 1 paragraph format, and some of that
header text is also italicized with the tag, the italicized text will inherit the blue
properties of the start and end tags that contain it.
This is a heading of size one.

If we create an additional HTML element style named after the tag and apply a pink
color property to it, the tag HTML element style will take precedence over the
tag HTML element style because the tags are nested within the tags. The italicized text would display in pink, and the rest of the heading would display in blue.
Inheritance can also impact the value of a style. The value of a style property can be given
as a percentage that refers to a property that precedes it. In the following example, the
line-height value of 120% is determined by the font-size property that precedes it in the
style sheet.
H1 { font-size: 24pt }
H1 { line-height: 120% }
Children of H1 will inherit the computed value of line-height and be set to 28.8 pt, but
they will not inherit the percentage.
When applying a style property to your pages, make sure you test it in all major browsers
that support CSS. For more information on browsers that support CSS, visit the World Wide
Web Consortium’s Cascading Style Sheets Home Page at http://www.w3.org/Style/CSS/.

Using Help | Contents | Index

Back

225

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

226

About relative, absolute, and percentage units
There are two types of length units: relative and absolute. Relative units specify a length
relative to another length property. Style sheets that use relative units will scale more
easily from one output medium to another (for example, from a computer display to a
laser printer). Relative units may also reduce the differences in font size that occur when a
page is viewed on different platforms.
The following relative units are supported:
•

pixel is relative to the resolution of the computer display. This unit is best for reducing
size display differences between browsers on Windows and Mac OS.

•

em represents the height of the style item’s font.

•

ex represents the Height of the letter x.

•

% Percentage values are always relative to another value—for example, a length unit.

•

Keywords such as XX-small through X-large specify font size relative to the parent
element.

Absolute length units are only useful when the physical properties of the output medium
are known.
The following absolute length units are supported:
•

Inch (in) is equivalent to 2.54 centimeters.

•

Centimeters (cm).

•

Millimeters (mm).

•

Point (pt) is equivalent to 1/72 of an inch.

•

Pica (pc) is equivalent to 12 points.

Some properties allow negative length units, but this may complicate the formatting and
there may be browser-specific limitations.

Setting Font properties
The Font Properties tab
in the CSS Editor lets you define a font family and make font
style settings, including color, font size, and line height. As you set font property options, a
preview of the text properties displays in the lower right section of the CSS Editor.
To edit the font properties of a style:
1 Select a style in the CSS Editor and click the Font Properties tab

2 To set the text color, do one of the following:
•

Choose a color from the color field menu

•

Choose a color name from the Color menu

•

Click the color field, and then select a color from the Color palette.

3 To display a color behind text, do one of the following:
•

Choose a Web-safe color from the Back Color color field menu

•

Choose a color name from the Back Color menu.

•

Select the Back Color field, and then select a color in the Color palette. To set the font
size, choose an absolute, relative, length unit, or a percentage from the Size menu. If
you choose a length or percentage unit, enter a font size or percent in the Size text box.

Using Help | Contents | Index

Back

226

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

227

For more information on units, see “About relative, absolute, and percentage units” on
page 226.
Choose Pixel units to ensure that a font size will display the same across the Mac OS
and Windows platforms.
4 To set the distance between the baselines of two adjacent lines of text, choose a unit
from the Line Height menu, and enter a number in the text box.
5 To choose the style’s preferred font family and alternate fonts and font families to use if
the font is not available on the viewer’s system, do one of the following:
•

To add a font set, choose a set from the New Font Family menu . After choosing a font
family, each font from the font set is listed with a plus sign to the left of the font.

•

To add a font, click New Font
font name in the text field.

•

To change the order of preference, select an entry in the list, and then click the Move
Item Upwards and Downwards buttons to shift the selection. A font that is higher in the
list takes precedence over fonts that are lower in the list. If none of the listed fonts is
available on the viewer’s system, a font that matches a listed font specification, such as
sans serif, is used.

•

To change a font in the list, select the listed font and then either type a different font
name in the text field or choose a font from the pop-up menu .

, and then choose a font from the Font menu or enter a

6 To set the font style, choose a font style from the Style menu.
7 To set the font weight, choose a font weight from the Weight menu. Values of 100–300
are lighter than normal, and values of 500–900 are heavier than normal. Lighter and
Bolder apply font weights that are relative to the weight inherited from the parent item.
8 To set text-decoration properties, select any of the following Decoration options: None,
Underline, Strike (to display a line through text), Overline (to display a line above text), or
blink.
To remove underlines from hyperlinked text, create an HTML element style named “a”
after the tag that is used for links. In the Font set of the CSS Inspector, set the
style’s Decoration property to None.

Using Help | Contents | Index

Back

227

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

228

Setting Text properties
The Text set of the CSS Inspector lets you define spacing, case, and alignment
properties for the selected style. For more information on units, see “About relative,
absolute, and percentage units” on page 226.
To edit the text spacing, case, and alignment properties of a style:
1 Select a style in the CSS Editor, and click the Text Properties

set.

2 To set the horizontal alignment, choose an option from the Text Alignment menu.
3 To use small caps, choose Small Caps from the Font Variant menu.
4 To specify inheritance, choose Inherit from the Font Variant menu.
5 To specify the text case, choose an option from the Transformation menu.
6 To set the text indentation, choose a unit of measurement from the Text Indent menu,
and then enter a value in the Text Indent text box.
7 To set word spacing, choose a unit of measurement from the Word Spacing menu, and
enter a value in the Word Spacing text box. (This option adds to the default word spacing.)
8 To set letter spacing, choose a unit of measurement from the Letter Spacing menu, and
then enter a value in the Letter Spacing text box. (This option adds to the default letter
spacing.)
9 Choose an option from the Vertical Align menu:
•

% raises or lowers the line-height property of the item relative to its parent. Enter a
value followed by the percent symbol (%).

•

Baseline aligns the baseline of the style item with the baseline of the parent.

•

Sub subscripts the style item.

•

Super superscripts the style item.

•

Top aligns the top of the style item with the tallest item on the line (relative to the
formatted line that the style item is a part of ).

•

Text Top aligns the top of the style item with the top of the parent’s font.

•

Middle aligns the vertical midpoint of the style item (typically an image) with the
baseline plus half the x-height of the parent.

•

Bottom aligns the bottom of the style item with the lowest item on the line (relative to
the formatted line that the style item is a part of ).

•

Text Bottom aligns the bottom of the style item with the bottom of the parent’s font.

Setting Block properties
The Block set of the CSS Inspector lets you define the dimensions of the item’s area.
Some of the properties in this set are not consistently supported across browsers and
platforms. Be sure to test your pages on multiple browsers, browser versions, and
platforms.

Using Help | Contents | Index

Back

228

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

229

For more information on units, see “About relative, absolute, and percentage units” on
page 226.

D
E

Block set of CSS Inspector
A. Sets invisible margins around the style item
B. Sets floating style item position and size
C. Sets distance between border and style item
D. Formats style item as a layer
E. Clears or allows layers on either side of the style item

Cascading style sheets are based on a simple block-oriented formatting model. Each item
that hosts a style consists of one or more rectangular blocks, each of which has a core
content area with optional surrounding padding, border, and margin areas. (Use the
Margin and Padding Properties set to format surrounding areas.) This formatting model
gives you much more flexibility in controlling spacing between objects.
A
B
C
D
E

Cascading style sheet block properties
A. Block width B. Margin (transparent) C. Border
D. Padding E. Content F. Element width

To edit the block properties of a style:
1 Select a style in the CSS Editor and click the Block set

of the CSS Inspector.

2 Specify the Width and Height properties for any item formatted with the current style
by doing one of the following:
•

Choose a unit of measurement from either the Width or Height Units menu, and enter a
value in the text box. Leave one dimension set to Auto to ensure that the item scales
proportionally.

•

Leave both Width and Height set to Auto to display the referenced item in its
original size.

Note: Setting Width and Height is most useful with replaced elements, such as images.
Using Help | Contents | Index

Back

229

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

230

3 In the Float menu, the float property creates a style item that is not part of the normal
flow of text. Choose any of the following options:
•

Left moves the style item to the left, so the text wraps on the right side of it.

•

Right moves the style item to the right, so the text wraps on the left side of it.

•

None causes the style item to appear where it occurs in the text.

4 In the Clear pop-up menu, specify how an element accepts floating elements.
•

Left moves the element below any floating element on the left side.

•

Right moves the element below any floating element on the right side.

•

Both does not allow floating elements on either side.

•

None allows floating elements on all sides.

5 In the Visibility menu, specify whether the element should be visible, hidden,
or inherited.

Setting Margin and Padding properties
The Margin and Padding set
element.

lets you specify the space around the content area of an

To specify margins and padding:
1 Select a style in the CSS Editor and click the Margin and Padding set.
2 Choose a unit of measurement and enter a numeric value in any of the Top, Right,
Bottom, and Left Margin text boxes, or use the All Margins text box to specify the margin
in all four directions at once.
You can decrease the spacing between surrounding elements by entering negative
values, which causes two elements to overlap.
Using the View palette while in the Layout Editor, select Allow Overlapping
Paragraphs to simulate how items with negative margin values overlap
adjacent items.
3 In the Padding section, set the amount of space between the block border and the
style item.
Choose a unit of measurement (percentage is recommended for better scalability), and
then enter a number in any of the Top, Right, Bottom, and Left Padding text boxes. Or, to
specify the spacing in all four directions at once, use the All Paddings text box.

Setting Border properties
The Border set of the CSS Inspector lets you set the borders of the block generated by a
style, including line width, color, and line style. For information on the CSS block model,
see “Setting Block properties” on page 228. Some of the properties in this set are not
consistently supported across browsers and platforms. Be sure to test your pages on
multiple browsers, browser versions, and platforms.
For information on units, see “About relative, absolute, and percentage units” on page 226.

Using Help | Contents | Index

Back

230

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

231

To edit the border properties of a style:
1 Select a style in the CSS Editor. In the Border set of the CSS Inspector, choose a unit
from any of the Units pop-up menus, and enter a number in the adjacent border text
boxes to set the border width for the top, right, bottom, or left borders. Use the All Borders
menu to set all four borders at once.
2 To set the border color, do any of the following:
•

Choose a color from a color field menu

•

Choose a color name from a color pop-up menu

•

Click a color field, and then select a color from the Color palette.

3 Choose a line style from the Line Style pop-up menu.

Setting Image and List properties
The List Item and Other Properties set lets you set the appearance of list item markers—
for example, the appearance of a bullet in a bulleted list. You can set list item marker
shapes and marker positioning, or specify a custom image to serve as the marker. Some of
the properties in this set are not consistently supported across browsers and platforms.
Note: Be sure to test your pages on multiple browsers, browser versions, and platforms.

Background Image and List Properties set of CSS Editor

To edit the list item marker properties:
1 Select a style in the CSS Editor and click the Image and List Properties set

2 Select the Image option, and then reference the image file to use a custom image as a
list item marker.
3 To set the type of the list item marker, choose from the following properties in the Style
pop-up menu:
•

To create bulleted lists, choose Disc, Circle, or Square.

•

To create numbered lists, choose Decimal, Lower Roman, or Upper Roman.

•

To create an alphabetical list, choose Lower Alpha or Upper Alpha.

Using Help | Contents | Index

Back

231

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

232

4 To set the position where the list item marker appears, choose one of the following
from the Position pop-up menu:
•

Inside sets the list item marker flush with the second, third, and following lines of text.

•

Outside adds a first-line indent, letting the list item marker stand out from the rest of
the text (like the bullet at the start of this item).

Setting Background properties
The Background set of the CSS Inspector lets you set a background image in the block
generated by a style. Some of the properties in this set are not consistently supported
across browsers and platforms. For information on the CSS block model, see “Setting Block
properties” on page 228.
To edit the background properties of a style:
1 Select a style in the CSS Editor and click the Background Image and List
Properties set .
2 Select the Image option, and then reference an image file to set a background image.
3 To tile the background image horizontally, vertically, or in both directions, choose an
option from the Repeat pop-up menu.
•

Repeat tiles the image both horizontally and vertically.

•

Repeat x tiles the image horizontally.

•

Repeat y tiles the image vertically.

•

Once disables tiling—that is, the image does not repeat.

4 To set a background to scroll or not scroll with other elements on the page, choose an
option from the Attach pop-up menu:
•

Scroll makes the image scroll.

•

Fixed prevents the image from scrolling.

5 To set the position of the image within the style item block, choose any of the Left,
Center, Right, or Top, Center, Bottom keyword options from the Top and Left Units menu.
Or choose a length unit or a percentage, and enter a number in the Top and Left
text boxes.

Setting unsupported properties
To ensure upward compatibility with future releases of the CSS Specification, GoLive lets
you specify new properties and their values.
To specify a new property for a style:
1 Select a style in the CSS Editor, and do one of the following:
•

In the Selector and Properties set of the CSS Inspector, click the New Property
button . Enter the new property name in the first text box, and enter a property value
in the second text box.

•

In the Source tab of the CSS Editor, enter the property and value manually within the
braces that appear adjacent to the style name. For more information, see “Removing
styles or external style sheets” on page 224.

Using Help | Contents | Index

Back

232

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

233

Applying styles
After you’ve created your cascading style sheet, added styles to it, and edited the style
properties, you need to apply class and ID styles to text or objects in your pages and
reference external style sheets from your pages. Element styles automatically apply to
tags of the same name. (For more information on style types, see “Creating CSS styles in a
style sheet” on page 219.)

Applying styles
You can apply styles to text and other objects in one of three different ways, depending on
the
style type:
•

Element styles apply automatically to the HTML tags that share the element style names.

•

Class styles require that you select text or other items in the page and apply the style
with the CSS palette or the inline CSS Style preview. The CSS palette lists all available
class styles defined in a page’s internal or external style sheets. The inline CSS Style
preview displays the Style Apply tab of the CSS palette inline for selected text.

•

ID styles require that you apply the style in layout using the Visual Tag Editor or
manually in the page’s Source Code Editor.

To apply a class style:
1 Do one of the following:
•

To apply the style to an object on a page, select the object, including text, table, table
cell, image, or markup tree tag.

•

To apply a style to the entire body of a page, select the tag in the markup tree
at the bottom of the page, and then use the option (as explained in step 2).

2 Do one of the following:
•

In the CSS palette, select a formatting option adjacent to the class style’s name.

•

Choose Type > CSS > [format].

•

Choose Type > CSS Style, and then select the formatting option in the inline pane that
appears. (You can also preview styles by placing the pointer over a formatting option.)

Note: The options in the CSS palette and the CSS commands in the Type menu vary
depending on the selection in the document window. For example, if text is selected, the
CSS palette displays Inline, Par, and Div options. If a table cell is selected, the palette
displays one option for the tag.
You can choose from the following formatting options:
Inline Style or (CSS palette) Formats an item inline.
Block Style (CSS palette) Creates a division that is disconnected from the normal flow of
HTML.
(CSS palette) Formats an entire paragraph with a style. You don’t need to select the
entire paragraph; either place an insertion point in the paragraph or select a portion of it.
(CSS palette) Applies a style to the entire body of a page. If this option isn’t
listed in the CSS palette, select the tag in the markup tree at the bottom of the
page, or place an insertion point anywhere in the Layout Editor, except inside a table or
layer.
Using Help | Contents | Index

Back

233

Adobe GoLive CS Help

Using Cascading Style Sheets

Using Help | Contents | Index

Back

234

Specific HTML tags (CSS palette) Apply the style to a selected object, such as a table
cell, image, or layer. For example, the tag for a table cell, the tag for an image
object, and the tag for a layer.
For more information on naming HTML element styles to format tables and table content,
see “Formatting tables and table content with cascading style sheets” on page 181.

Applying a style to a paragraph and another style to a selection of table cells

To apply an ID style:
1 In the Layout Editor, select the text, paragraph, or object to which you want to assign
the ID and do one of the following:
•

If the text to be reformatted is a portion of the text within a paragraph, Press
Ctrl+Shift+E (Windows) or Command+Shift+E (Mac OS) to open the Visual Tag Editor.
Type SPAN ID=[myID] or DV ID=[ myID] within the brackets.

•

Click the Source Editor tab and locate the highlighted source code for the selected item.
Add the ID style name (without the pound (#) symbol) as an attribute to the selected
item’s start tag. For example, if the ID style name is #headerbox, and we want to apply it
to the entire paragraph, we would edit the code as follows:
Welcome to TravelEZ

2 View the effect in the Layout Preview.

Using Help | Contents | Index

Back

234

Adobe GoLive CS Help

Adding Images and Multimedia

Using Help | Contents | Index

Back

235

Adding Images and Multimedia
About images and multimedia
GoLive offers two primary methods for adding images. You can add pre-optimized images,
which you optimize for the Web in another application. Or, for maximum control and
versatility, you can add Smart Objects, which you optimize in GoLive.
Pre-optimized images and Smart Objects share many features, such as rollovers and image
maps. Smart Objects, however, also provide many additional features. For more information about Smart Objects, see “Working with Smart Objects” on page 262.
GoLive also supports a variety of plug-ins that let you incorporate multimedia into a Web
page. With these plug-ins, you can enhance a Web site with video, audio, and animations.
For more information, see “Adding multimedia to a Web page” on page 251.

Adding pre-optimized images
You can add pre-optimized images in the GIF, JPEG, PNG, and WBMP formats. When you
add a pre-optimized image to a page, GoLive references the pathname to the image file.
To ensure that GoLive can properly manage these references and publish image files,
place image files in the site window before adding them to a page. Many Web designers
store all images in an images folder in the site window. That approach lets you manage
numerous image files more easily.
Smart Objects offer more flexibility than pre-optimized images. For example, GoLive
automatically reoptimizes Smart Objects if you resize them in the Layout Editor. For more
information, see “Working with Smart Objects” on page 262.
To insert a pre-optimized image:
1 Do one of the following:
•

Drag the image file from the site window into the Layout Editor.

•

Drag the Image icon from the Basic set in the Objects palette into the document
window, or double-click the icon in the palette. In the Image Inspector, specify an
image file in the Source text box.

Resizing pre-optimized images
You can resize pre-optimized images to change the design of a page. Before doing so,
however, note the following considerations:
•

If you shrink a pre-optimized image, your page still references the unnecessarily large
image file, resulting in inefficient use of bandwidth.

•

If you enlarge a pre-optimized image, it will appear pixellated.

Using Help | Contents | Index

Back

235

Adobe GoLive CS Help

Using Help | Contents | Index

Adding Images and Multimedia

Back

236

When you change the size of an image, GoLive displays a resize warning icon on top of
the image to warn you that the image may have an unnecessarily large file size and is not
displayed at its optimum resolution. You can restore the image to its original proportions
by clicking the Set to Original Size button in the Image Inspector.
If you often resize images, use Smart Objects for maximum flexibility. For more information, see “Resizing Smart Objects” on page 264.
To resize an image disproportionately:
1 Select the image in the Layout Editor.
2 In the Image Inspector, click the Basic tab.
3 From the Width and Height menus, choose Pixel or Percent, and then enter new values.
To resize an image and constrain proportions:
1 In the Basic tab of the Image Inspector, choose Image from either the Width menu or
the Height menu.
2 Choose Pixel from the pop-up menu for the remaining size attribute (Width or Height).
3 Type a value in the Width or Height text box, and press Enter (Windows) or
Return (Mac OS).

Setting basic image options
After you add an image to a page, you can set basic image options for borders and alternative text.
You can also add links to images. For more information, see “Creating resource and
navigational links” on page 61.

Adding alternative text
Alternative text replaces images in browsers that are configured to omit images; it is also
read aloud by software for the visually impaired. Even in browsers that display images,
however, alternative text can be useful. For example, in an image-based menu, alternative
text appears while the images download.
To enter alternative text for images:
1 Select the image or Smart Object on your Web page.
2 In the Basic tab of the Image Inspector, type text in the Alt Text text box.

Creating image borders
You can create image borders to highlight images on a page. Borders around linked and
non-linked images appear in the default colors for links and text, respectively. (For more
information about default text and link colors, see “Setting the default color for text or
links in a page” on page 70.)
To create an image border and adjust its width:
1 Select the image, and then select Border in the More tab of the Image Inspector.
2 Type in the desired border width in pixels, and press Enter (Windows) or
Return (Mac OS).
Using Help | Contents | Index

Back

236

Adobe GoLive CS Help

Adding Images and Multimedia

Using Help | Contents | Index

Back

237

Choosing a format for optimized images
Web-optimized images must be saved in a format recognized by Web browsers and have a
file size small enough to accommodate the bandwidth available to most Web users.
Optimized images strike a balance between image quality and small file size.
The file format you choose for an optimized image is determined by the color, tonal, and
graphic characteristics of the original image. In general, continuous-tone images such as
photographs should be compressed as JPEG or PNG-24 files. Illustrations with flat color or
sharp edges and crisp detail, such as type, should be compressed as GIF or PNG-8 files.
Vector graphics that are scalable or linked to scripts and variables should be optimized in
SVG or SWF format. And if you’re preparing an image for display on a wireless device,
choose GIF or WBMP.
Caution: Some browser versions do not display PNG format correctly.
Depending on the format, you can specify image quality, background transparency or
matting, color display, and downloading method.

About JPEG format
The JPEG format supports 24-bit color and preserves the broad range and subtle variations in brightness and hue found in photographs and other continuous-tone images.
JPEG is supported by most browsers.
JPEG compresses file size by selectively discarding data. Because it discards data, JPEG
compression is referred to as lossy. A higher quality setting results in less data being
discarded, but the JPEG compression method can degrade sharp detail in an image,
particularly in images containing type or vector art.
Note: You should always save JPEG files from the original image, not from a previously
saved JPEG. Artifacts, such as wave-like patterns or blocky areas of banding, are added to
a file each time you save in JPEG format.
You can create a progressive JPEG file. A browser immediately starts rendering a
progressive JPEG when it receives the first data representing the image. As the remainder
of the progressive JPEG file is received, the image increases in resolution.
The JPEG format does not support transparency, but you can simulate the effect of
background transparency by specifying a Matte color that matches the Web page
background color.

About JPEG2000 format
The JPEG2000 format builds on the JPEG standard with improved compression schemes
and performance.
GoLive can import JPEG2000 files, but not create them. Though you use the Image object
to import standard JPEG files, JPEG 2000 files require the generic Plug-in object. (See
“Adding multimedia files” on page 251.)
Note: To display JPEG2000 files, most browsers require an additional plug-in.

About GIF format
The GIF format uses 8-bit color and efficiently compresses solid areas of color while
preserving sharp detail, such as the detail in line art, logos, or illustrations with type. You
also use the GIF format to create animated images. GIF is supported by most browsers.

Using Help | Contents | Index

Back

237

Adobe GoLive CS Help

Using Help | Contents | Index

Adding Images and Multimedia

Back

238

The GIF format traditionally uses a lossless compression method, in which no data is
discarded during compression. You can save a GIF file multiple times without discarding
data. However, because GIF files are 8-bit color, optimizing an original 24-bit image as an
8-bit GIF will generally degrade image quality.
In addition, GoLive lets you create a lossy version of a GIF file. The lossy GIF format includes
small compression artifacts (similar to those in JPEG files) but yields significantly smaller
files.
GIF supports background transparency and background matting, in which you blend the
edges of the image with a Web page background color.

Using Help | Contents | Index

Back

238

Adobe GoLive CS Help

Using Help | Contents | Index

Adding Images and Multimedia

Back

239

About PNG-8 format
The PNG-8 format uses 8-bit color. Like the GIF format, PNG-8 efficiently compresses solid
areas of color while preserving sharp detail, such as the detail in line art, logos, or illustrations with type.
Because PNG-8 is not supported by all browsers, it may be advisable to avoid this format
when your image must be accessible to the widest possible Web viewing audience. For
more information about browser support for PNG, see your browser’s documentation.
The PNG-8 format uses a lossless compression method, in which no data is discarded
during compression. However, because PNG-8 files are 8-bit color, optimizing an original
24-bit image as a PNG-8 can degrade image quality. PNG-8 files use more advanced
compression schemes than GIF, and can be 10%–30% smaller than GIF files of the same
image, depending on the image’s color patterns.
Note: With certain images, especially those with very few colors and very simple patterns,
GIF compression may create a smaller file than PNG-8 compression. View optimized
images in GIF and PNG-8 formats to compare file size.
As with the GIF format, you can reduce the number of colors in the image and choose
options to control the way colors dither in the application or in the browser. The PNG-8
format supports background transparency and background matting, in which you blend
the edges of the image with a Web page background color.

About PNG-24 format
The PNG-24 format supports 24-bit color. Like the JPEG format, PNG-24 preserves the
broad range and subtle variations in brightness and hue found in photographs. Like the
GIF and PNG-8 formats, PNG-24 preserves sharp detail, such as the detail in line art, logos,
or illustrations with type.
Because PNG-24 is not supported by all browsers, it may be best to avoid this format when
your image must be accessible to the widest possible Web viewing audience. For more
information about browser support for PNG, see your browser’s documentation.
The PNG-24 format uses the same lossless compression method as the PNG-8 format, in
which no data is discarded. For that reason, PNG-24 files are usually larger than JPEG files
of the same image. PNG-24 browser support is similar to that for PNG-8.
Like the PNG-8 format, the PNG-24 format supports background transparency and
background matting, in which you blend the edges of the image with a Web page
background color. In addition, the PNG-24 format supports multilevel transparency, in
which you can preserve up to 256 levels of transparency to blend the edges of an image
smoothly with any background color. However, multilevel transparency is not supported
by all browsers.

About SVG format
SVG, which stands for Scalable Vector Graphics, revolutionizes the way graphics look and
function on the Web. SVG is a vector format, as opposed to GIF, JPEG, and PNG, which are
bitmap formats. Because bitmap files have to include every pixel needed to display an
image, they tend to be bulky, be limited to a single (often low) resolution, and consume
large amounts of bandwidth on the Web.

Using Help | Contents | Index

Back

239

Adobe GoLive CS Help

Adding Images and Multimedia

Using Help | Contents | Index

Back

240

SVG provides a more efficient approach to Web graphics. Because SVG files describe
images as shapes, paths, text, and filter effects, the files are compact and provide highquality graphics on the Web, in print, and even on resource-constrained, handheld
devices. Users can magnify their view of an SVG image on-screen without sacrificing
sharpness, detail, or clarity. In addition, SVG provides superior support for text and colors.
The SVG format is entirely XML-based, a fact that offers many advantages to developers
and users alike. With SVG, you can use XML and JavaScript to create Web graphics that
respond to user actions with sophisticated effects, such as highlighting, tool tips, audio,
and animation.
Note: Users must have the SVG viewer installed to view SVG files.

About SWF format
The Macromedia® Flash™ (SWF) file format is a vector-based graphics file format for the
creation of scalable, compact graphics for the Web. Since the file format is vector-based,
the artwork maintains its image quality at different resolutions and is ideal for the creation
of animation frames. Although the SWF format saves graphics using vector data, it also
uses bitmap data when appropriate.
Note: Users must have the SWF browser plug-in installed to view SWF files.

Creating rollovers
Rollovers respond to a viewer’s mouse movements and clicks, providing interactivity on a
Web page. To aid navigation, you can use rollovers to highlight hyperlinked images. To
further enhance interactivity, you can combine rollovers with actions.
Rollovers require separate images for each rollover state: Normal, Over, Down, Click, Up,
and Out. The Normal state appears when the mouse is over another part of the page. The
remaining states appear when the viewer moves or clicks the mouse over a rollover
object.
Normally, images for all states of a rollover have identical dimensions. If a rollover has
an image with different dimensions, you can either resize it in a graphic editor, or
choose Image from the Width or Height menu in the Image Inspector.
C

Rollovers tab of Rollovers & Actions palette:
A. HTML element of trigger object
B. Expert Mode warning icon C. Palette menu button

Using Help | Contents | Index

Back

240

Adobe GoLive CS Help

Adding Images and Multimedia

Using Help | Contents | Index

Back

241

Creating self rollovers
With self rollovers, the most common rollover type, mouse actions over an image cause
changes in that image alone.
To create a self rollover:
1 In the Layout Editor, select the desired image.
2 In the Rollovers & Actions palette, click the Rollovers tab.
3 Select the desired rollover state, and then click the New Rollover Image button .
4 In the URL text box, specify an image for the state.
5 To force browsers to fully download the image before enabling the rollover, click
Preload.
Note: Don’t select Preload for a state that contains an animated GIF file. Some browsers
will immediately play the animation after preloading the file.

Creating remote rollovers
While self rollovers change trigger images, remote rollovers change images located
elsewhere on the page. Because these changes occur elsewhere, trigger objects for
remote rollovers can include paragraphs, table cells, or any other HTML element. Only
trigger images, however, can combine remote rollovers with self rollovers.
To create a remote rollover:
1 In the Layout Editor, select the trigger object.
2 In the Rollovers & Actions palette, click the Rollovers tab.
3 Select the state that will trigger the rollover, and then click the New Rollover Image
button .
4 In the Name/ID text box, specify the remote image object.
Note: Use the pick whip to specify an object that lacks a name or ID. If you type a name
or ID that doesn’t exist, GoLive displays a bug in the Kind column of the Rollovers & Actions
palette.
5 In the URL text box, specify the image file for the remote image object.

Using Help | Contents | Index

Back

241

Adobe GoLive CS Help

Adding Images and Multimedia

Using Help | Contents | Index

Back

242

6 To force browsers to fully download the image before enabling the rollover, click
Preload.
To trigger multiple remote rollovers from an object, add more than one rollover image
to a state.

Combining self and remote rollovers:
A. Normal state. B. Down state

Adding status bar messages to rollover states
For any rollover state, you can add a message that appears in the status bar of the browser.
Such messages can provide helpful additional information for the viewer.
To add a message to a rollover state:
1 In the Rollovers tab of the Rollovers & Actions palette, select the state.
2 Click the New Message button , and then type in the Message text box.

Removing rollover states
You can remove individual rollover images, entire rollover states, or all states for an object.
To remove a rollover image or state:
1 In the document window, select the object that contains the image or state.
2 In the Rollovers tab of the Rollovers & Actions palette, drag the image or state to the
Delete icon .
To remove all states for an object:
1 In the document window, select the object.
2 In the Rollovers & Actions palette, click the Rollovers tab, and then choose Remove All
Rollover States from the palette menu.

Changing the size of rollover thumbnails
You can change the size of rollover thumbnail images in the Rollover & Actions palette.

Using Help | Contents | Index

Back

242

Adobe GoLive CS Help

Adding Images and Multimedia

Using Help | Contents | Index

Back

243

To change the size of rollover thumbnails:
1 In the Rollovers & Actions palette, click the Rollovers tab.
2 From the palette menu, choose View, and then choose No Thumbnails, Small Thumbnails, Medium Thumbnails, or Large Thumbnails.

Assigning rollover images automatically
The Detect Rollover Images feature automatically assigns images to rollover states. After
you specify the filename of the Normal image, GoLive automatically searches for Over,
Down, Click, Up, and Out files that use a similar naming convention. For example, if you
specify a Normal image named myimage_Base.gif, GoLive looks for myimage_Over.gif.
You can edit the rollover naming conventions that GoLive uses. (See “Viewing and editing
rollover naming conventions” on page 243.)
To use the Detect Rollover Images feature, you must place images for all rollover states
(Normal, Over, Down, etc.) in the same folder. If images for some states are not yet
complete, you can manually start the rollover detection process after adding the needed
images to the folder.
The Detect Rollover Images feature is on by default, but you can turn it off if you prefer to
assign rollover images manually.
To automatically display the Rollovers & Actions palette when GoLive detects
rollovers:
1 In the Rollovers & Actions palette, click the Rollovers tab, and then choose Rollover
Detection Settings from the palette menu.
2 Select Automatically Open Rollover Palette.
To turn off the Detect Rollover Images feature:
1 In the Rollovers & Actions palette, click the Rollovers tab, and then choose Rollover
Detection Settings from the palette menu.
2 Deselect Automatically Detect Rollover Images.
To manually start the Detect Rollover Images feature:
1 Select a rollover object in the Layout Editor.
2 In the Rollovers & Actions palette, click the Rollovers tab, and then select Detect
Rollover Images from the palette menu.

Viewing and editing rollover naming conventions
You can view the sets of naming conventions used by the Detect Rollover Image feature.
GoLive also lets you edit the settings if you have your own naming convention for rollover
images.
To view or edit the default naming conventions:
1 In the Rollovers & Actions palette, click the Rollovers tab, and then choose Rollover
Detection Settings from the palette menu.

Using Help | Contents | Index

Back

243

Adobe GoLive CS Help

Adding Images and Multimedia

Using Help | Contents | Index

Back

244

2 To overwrite a naming convention set, select it, and type new suffixes in the text boxes
for each rollover state.
If you work with ImageReady, do not overwrite the third default set, which conforms
to ImageReady’s rollover naming conventions.

Using Expert Mode for rollovers
To ensure that rollovers behave as most viewers expect, GoLive creates additional rollover
states that it doesn’t display in the Rollovers & Actions palette. For example, when you add
an Over state, GoLive creates an Out state that uses the Normal image. Without this extra
state, the Over image would remain when the mouse left the trigger area.
To prevent GoLive from creating these extra states, or to delete them from existing
rollovers, use the Expert Mode for rollovers. In Expert Mode, only states displayed in the
Rollovers & Actions palette are added to the JavaScript code.
When Expert Mode is enabled, GoLive displays a warning icon
Actions palette.

in the Rollovers &

To use the Expert Mode for rollovers:
1 In the Rollovers & Actions palette, click the Rollovers tab.
2 From the palette menu, select Expert Mode.

Importing rollovers from ImageReady
To import ImageReady rollovers, use Smart Photoshop objects. If you change the original
ImageReady PSD file, GoLive can automatically update the Smart Photoshop object. (See
“Working with Smart Objects” on page 262.)
In GoLive, you can view all states in ImageReady rollovers, but you can edit only remote
rollover states; self rollover states must be edited in ImageReady. You can use GoLive,
however, to create additional self or remote rollover states.

Attaching actions to a rollover
The Action tab of the Rollover & Actions palette lets you attach scripted actions to a
rollover—for example, an action that changes the background color of the page. For more
information, see “Setting up actions” on page 414.
To ensure that scripted actions work with rollovers, follow these guidelines: Make sure that
all images on a page have a unique name (button1, button2, and so on). Avoid names that
contain only numbers (1, 2, 3, and so on) or that start with a number; the names won’t
work in all browsers. Finally, do not include spaces or special characters.

Adding rollover and action code for images
By default, GoLive adds rollover and action code for images to a hyperlink surrounding the
image element. This default behavior ensures compatibility with the largest number of
browsers. To create smaller code, however, you can instead configure GoLive to apply
rollover and action code directly to the image element.
To specify how GoLive adds rollover and action code for images:
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 In the list on the left, expand General, and then select Images.

Using Help | Contents | Index

Back

244

Adobe GoLive CS Help

Adding Images and Multimedia

Using Help | Contents | Index

Back

245

3 Select one of the following:
•

Apply to Hyperlink around Element.

•

Apply to Element.

Creating image maps
Image maps consist of clickable hotspots in an image. Image maps are helpful navigational tools, because each hotspot can link to a different destination and have a unique
size and shape. GoLive lets you create and edit image maps, and associate them with
actions and rollovers.
To create a clickable image map:
1 Select an image on your Web page.
2 In the Smart Image or Image Inspector, click the More tab and select the Use Map
option.
Note: By default, GoLive assigns a unique ID to the image map and enters the ID in the
Name text box. You can replace this ID by typing a name for the image map in the Name
text box on the More tab.
3 In the toolbar, select the Rectangular tool , the Circular tool , or the Polygonal
tool .
4 Drag in the image to define the hotspot. (If you are using the Polygonal tool, click to
define each point of the polygon.)
5 In the Map Area Inspector, specify a file for the link destination of the selected hotspot.
6 Use the Target text box to specify the target frame in the destination frame set (if any).
7 Type additional information in the Title text box. Some browsers use this information to
display tool tips or voice annotations.
You can also click an image and use the context menu to create a clickable image
map.
To customize the appearance of a hotspot:
1 Select the hotspot in the image.
2 Use the following tools available in the toolbar:
•

Use the Select Map Area tool to move or resize the hotspot by dragging.

•

Click the URL button to display the destination URL in the hotspot. The URL appears in
the GoLive Layout Editor for your convenience; it does not appear on the Web page.

•

Click the Frame or Color buttons to edit or turn border and color display on and off,
respectively, while editing.

•

Click the Color button to change the color used for highlighting.

•

If you are working with multiple overlapping hotspots, use the Bring Region to Front
button and the Send Region to Back button in the toolbar to change the stacking
order.

Note: The Bring to Front and Send to Back buttons are also available in the
Transform palette.

Using Help | Contents | Index

Back

245

Adobe GoLive CS Help

Adding Images and Multimedia

Using Help | Contents | Index

Back

246

To add actions to image maps:
1 Select a hotspot in an image map.
2 In the Actions tab of the Rollovers & Actions palette, choose a mouse or key event, and
click the New button .
3 Choose the desired action from the Action menu.
For more information about actions, see “Setting up actions” on page 414.
To associate a rollover with an image map:
1 Select a hotspot in the image map.
2 In the Rollovers tab of the Rollovers & Actions palette, create and edit rollover states.
For more information about rollovers, see “Creating rollovers” on page 240.

Building a Web page using tracing images
You can design Web pages by using tracing images as visual guides. As a design develops,
you can cut out parts of a tracing image and convert them into Smart Objects on the final
Web page. (See “Working with Smart Objects” on page 262.)
You can import the following formats as tracing images: Illustrator AI, Photoshop PSD, JPG,
JP2, GIF, PNG, BMP, TARGA, EPS, PCX, PDF, PICT, PIXAR, SVG, TIFF, and Amiga IFF.
To add a tracing image to your Web page:
1 Select Window > Tracing Image.
2 In the Tracing Image palette, select Source and specify a file for the tracing image.
3 If the source is a PDF file, rotate the document if desired, and then select a page.
4 Set the opacity of the tracing image in the Tracing Image palette.
5 Do one of the following to position the image in the Layout Editor:
•

Type pixel values in the Position text boxes.

•

Click the Move Image tool in the Tracing Image palette, and drag the image in the
Layout Editor. When you’re done, click the Move Image tool again to disable the tool.

Note: You can quickly resize the window to fit the tracing image by selecting Tracing
Image from the Change Window Size pop-up menu in the bottom right corner of the
document window.
To align a tracing image with an object in the document window:
1 Select the object.
2 From the Tracing palette menu, choose Align with Selection.
You can align tracing images with objects such as table cells and GoLive layers.
To return a tracing image to the default position:
From the Tracing palette menu, choose Reset Position. The image returns to the upper left
corner of the page.
To remove a tracing image:
Deselect the Source check box in the Tracing Image palette.
Using Help | Contents | Index

Back

246

Adobe GoLive CS Help

Adding Images and Multimedia

Using Help | Contents | Index

Back

247

To cut out a portion of a tracing image:
1 Select the tracing image.
2 Click the Crop tool

and select a rectangular portion of the tracing image.

Note: You can cancel the cut out process by clicking the Cut Out tool again.

Cutting out a portion of a tracing image
A. The Cut Out tool selects a portion of the tracing image.
B. Save For Web generates a target file from the cut out portion.

3 Double-click the selection in the Layout Editor, or click Cut Out in the Tracing
Image palette.
4 In the Save For Web dialog box, make your desired optimization settings, and click Save.
5 Specify a destination for the file and click Save. The cutout becomes a Smart Object in
the document window.

Generating low source images
A low source image is a low-resolution version of an image that displays until the fullresolution image downloads. Low source images are particularly useful for Web audiences
with low bandwidth and images with very large file sizes.
You can either specify an existing low source image or have GoLive generate one for you.
To specify or generate a low source image:
1 In the Image Inspector, click the More tab.
2 Select Low, and then do one of the following:
•

Specify an existing low source image in the text box.

•

Click Generate to create a low source image. To regenerate the low source image if the
original image changes, also select Auto-update.

Using Help | Contents | Index

Back

247

Adobe GoLive CS Help

Using Help | Contents | Index

Adding Images and Multimedia

Back

248

To change default settings for low source images:
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 In the list on the left, expand General, and select Images.
3 Select a default color mode: Color or Black and White.
4 Do one of the following:
•

Select Place in Same Folder as Source to store low-resolution images generated by
GoLive in the same folder as the high-resolution source images.

•

Select Place in Import Folder to store low-resolution images temporarily before you
move them to the site folder.

5 Select the Auto-Generate by Default option to instruct GoLive to automatically create a
low-resolution copy of each image you import and add it to the page.

Managing color in images
GoLive provides many of the same color management features found in other Adobe
applications, such as Adobe Photoshop and Adobe Illustrator. With these features, you can
use ICC profiles to ensure that images have consistent color when displayed on different
monitors or printed on different printers.
Most current browsers do not fully support color management, but you can color-manage
files for use in both GoLive’s PDF Preview and future browsers.

Setting up color management
GoLive simplifies the task of setting up a color-managed workflow by gathering most
color management controls in a single Color Settings dialog box. You can select from a list
of predefined color management settings, or you can adjust the controls manually to
create your own custom settings. You can even save customized settings to share them
with other users and other Adobe applications that use the Color Settings dialog box.
GoLive also uses color management policies, which determine how to handle color data
that does not immediately match your current color management workflow. Policies
provide guidelines on what to do when you open a document or import color data into an
active document.

Using Help | Contents | Index

Back

248

Adobe GoLive CS Help

Using Help | Contents | Index

Adding Images and Multimedia

Back

249

To specify color management settings:
1 Choose Edit > Color Settings (Windows) or GoLive > Color Settings (Mac OS).
2 Do one of the following:
•

To set up a predefined color management workflow, see “Using predefined color
management settings” on page 249.

•

To customize your own color management settings, see “Customizing color
management settings” on page 250.

Using predefined color management settings
GoLive offers a collection of predefined color management settings designed to produce
consistent color for a common publishing workflow, such as preparation for the Web or
offset press output. In most cases, the predefined settings provide sufficient color
management for your needs. These settings can also serve as starting points for customizing your own workflow-specific settings.
To choose a predefined color management setting:
Choose one of the following options from the Settings menu in the Color Settings
dialog box:
Color Management Off Uses passive color management techniques to emulate the
behavior of applications that do not support color management. Although working space
profiles are considered when converting colors between color spaces, Color Management
Off does not tag documents with profiles.
ColorSync Workflow (Mac OS only) Manages color using the ColorSync CMS with the
profiles chosen in the ColorSync control panel. Use this option if you want to use color
management with a mix of Adobe and non-Adobe applications. This color management
configuration is not recognized by Windows systems, or by versions of ColorSync earlier
than 3.0.
Emulate Acrobat 4 Emulates the color workflow used by Adobe Acrobat 4.0.
Emulate Photoshop 4 Emulates the color workflow used by the Mac OS version of
Adobe Photoshop 4.0 and earlier.
Europe Prepress Defaults Manages color for content that will be output under common
press conditions in Europe.
Japan Prepress Defaults Manages color for content that will be output under common
press conditions in Japan.
Photoshop 5 Default Spaces Prepares content using the default working spaces from
Photoshop 5.
U.S. Prepress Defaults Manages color for content that will be output under common
press conditions in the U.S.
Web Graphics Defaults Manages color for content that will be published on the World
Wide Web.
When you choose a predefined configuration, the Color Settings dialog box updates to
display the specific color management settings associated with the configuration.

Using Help | Contents | Index

Back

249

Adobe GoLive CS Help

Using Help | Contents | Index

Adding Images and Multimedia

Back

250

Customizing color management settings
Although the predefined settings should provide sufficient color management for many
publishing workflows, you may sometimes want to customize individual options in a
configuration. For example, you might want to change the CMYK working space to a
profile that matches the proofing system used by your printer or your service bureau.
Note: For Web publishing, the recommended RGB working space is sRGB, which reflects
common Windows monitors used by most of the Web audience.
To customize color management settings:
1 Choose Edit > Color Settings (Windows) or GoLive > Color Settings (Mac OS).
2 To use a preset color management configuration as the starting point for your custom
settings, choose that configuration from the Settings menu.
3 Specify the desired color settings (working spaces and policies). As you make adjustments, the Settings menu option changes to Custom by default.
4 To enable color management for pages, select Use Color Management When
Displaying Images on Web Pages. (Because most browsers don’t support color
management, this option is deselected by default to optimize the performance of GoLive.)
For detailed information about working spaces, color management policies, and
conversion options, see Adobe Photoshop, Adobe Illustrator, or Adobe InDesign Help.

Associating profiles with pages and images
GoLive lets you associate ICC profiles with entire pages or individual images. You can
associate all pages and images with separate, external profiles, but only JPEG images
support embedded profiles. Include external profiles in the site window so GoLive can
properly manage and publish them.
To change a page profile:
1 In the upper right corner of the document window, click the Page icon .
2 In the Page Inspector, click the Color Profile tab.
3 Select one of the following:
•

Default to use the system profile.

•

Profile to specify a desired profile.

•

None to specify no profile.

To change an image profile:
1 Select the image in the document window.
2 In the Image Inspector, click the Color Profile tab.
3 Select one of the following:
•

Default to use the embedded profile listed in the Embedded text box, the page profile if
an embedded profile doesn’t exist, or the system profile if a page profile doesn’t exist.

•

Profile to specify a desired profile. If an embedded profile exists, this option overrides it.

•

None to specify no profile.

Using Help | Contents | Index

Back

250

Adobe GoLive CS Help

Adding Images and Multimedia

Using Help | Contents | Index

Back

251

Adding multimedia to a Web page
GoLive supports a variety of plug-ins that let browsers play back multimedia over the Web,
allowing you to place video and audio clips on your page. You can preview supported
media clips from within GoLive.
GoLive offers a generic Plug-in object that you configure, as well as predefined SWF ,
QuickTime , RealOne , SVG , and Windows Media plug-in objects. You can also
associate other file types with plug-ins. (See “Setting plug-in preferences” on page 258.)
Important: Before uploading QuickTime movies, you must make them self-contained—
that is, convert them to a “Web-compatible” sequential format. For information on
creating QuickTime movies, see the GoLive CS Multimedia Authoring Guide, available on
the Adobe Web site.

Adding multimedia files
To add multimedia files to Web pages, use plug-in objects.
To add a multimedia file:
1 From the Basic set
document window.

of the Object palette, drag the desired plug-in object to the

2 In the Basic tab of the Plug-in Inspector, specify a file for your plug-in.

Setting basic plug-in options
To set basic plug-in options, use the Basic tab of the Plug-in Inspector. For the SWF,
QuickTime, RealOne, SVG, and Windows Media plug-in objects, most basic options are
predefined. For the generic Plug-in object, however, you must manually specify the
MIME type.
To set basic plug-in options:
1 In the Layout Editor, select a plug-in object.
2 In the Plug-in Inspector, click the Basic tab.
3 If you are setting up a generic Plug-in object
from the pop-up menu.

, select Mime, and choose the MIME type

4 Enter a value in the Width text box for the width of the media clip in pixels or as a
percentage.
5 Enter a value in the Height text box for the height of the media clip in pixels or as a
percentage.
6 Choose an alignment option from the Alignment pop-up menu:
•

Default to position the icon according to the browser’s preferences. If the browser does
not specify any alignment preferences, the clip will be left-aligned. (Most browsers do
not specify alignment preferences.)

•

Left to position the icon in the upper left corner.

•

Middle to position the icon in the upper middle.

•

Right to position the icon in the upper right corner.

Using Help | Contents | Index

Back

251

Adobe GoLive CS Help

Adding Images and Multimedia

Using Help | Contents | Index

Back

252

7 From the HTML menu, choose the tags that browsers will use to detect the
required plug-in.
Note: If you choose the

Adobe GoLive CS User Guide Go Live Instruction Manual En

,

,

,

,

, or

. Most Web browsers use a diminishing character point size to display the sequence of headings, where

is the largest and

start and end tags will display in the lime color. (The proper style name for this example is “h1 i” without the quotation marks. If a comma is inserted in the style name, as in “h1,i” then any text between

start and end tags that contain it.

This is a heading of size one.