Adobe GoLive 9.0 User Guide

Adobe GoLive 9.0 User Guide
ADOBE GoLive 9
®
USER GUIDE
®
© 2007 Adobe Systems Incorporated. All rights reserved.
Copyright
Adobe® GoLive® 9 User Guide for Windows® and Macintosh
If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or
copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the
content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.
The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.
Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such
material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner.
Any references to company names in sample templates are for demonstration purposes only and are not intended to refer to any actual organization.
Adobe, the Adobe logo, Acrobat, After Effects, Dreamweaver, Flash, FrameMaker, Illustrator, InCopy, InDesign, Photoshop, and Version Cue are either registered trademarks or
trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Microsoft and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Mac, Mac OS, and QuickTime are
trademarks of Apple Inc., registered in the United States and other countries. SVG is a trademark of the World Wide Web Consortium; marks of the W3C are registered and held
by its host institutions MIT, INRIA, and Keio. Java is a trademark or registered trademark of Sun Microsystems, Inc. in the United States and other countries. All other trademarks
are the property of their respective owners.
This product contains either BISAFE and/or TIPEM software by RSA Data Security, Inc.
Portions Copyright © 1998 Gilles Vollant
This product includes software developed by the Apache Software Foundation (http://www.apache.org/).
This Program was written with MacApp®: ©1985-1988 Apple Inc. The MacApp software is proprietary to Apple Inc. and is licensed to Adobe for distribution only for use in
combination with Adobe GoLive.
PANTONE® Colors displayed in the software application or in the user documentation may not match PANTONEidentified standards. Consult current PANTONE Color Publications for accurate color. PANTONE® and other Pantone, Inc. trademarks are property of Pantone, Inc. © Pantone, Inc. 2003. Pantone, Inc. is the copyright owner of color data
and/or software which are licensed to Adobe Systems Incorporated to distribute for use only in combination with Adobe Illustrator. PANTONE Color Data and/or Software shall
not be copied onto another disk or into memory unless as part of the execution of Adobe Illustrator software.
Portions © Eastman Kodak Company, 2007 and used under license. All rights reserved. Kodak is a registered trademark and Photo CD is a trademark of Eastman Kodak
Company.
Portions © The Focoltone Colour Systems, and used under license.
Software is produced under DIC's copyrights of color-data-base derived from Sample Books.
Flash 9 video is powered by On2 TrueMotion video technology. © 1992-2005 On2 Technologies, Inc. All Rights Reserved. http://www.on2.com.
This product includes software developed by the OpenSymphony Group (http://www.opensymphony.com/).
Portions of this code are licensed from Nellymoser (www.nellymoser.com)
Sorenson Spark™ video compression and decompression technology licensed from Sorenson Media, Inc.
Certain Spelling portions of this product is based on Proximity Linguistic Technology. ©Copyright 1990 Merriam-Webster Inc. ©Copyright 1990 All rights reserved. Proximity
Technology A Division of Franklin Electronic Publishers, Inc. Burlington, New Jersey USA. ©Copyright 2003 Franklin Electronic Publishers Inc.©Copyright 2003 All rights
reserved. Proximity Technology A Division of Franklin Electronic Publishers, Inc. Burlington, New Jersey USA. Legal Supplement ©Copyright 1990/1994 Merriam-Webster
Inc./Franklin Electronic Publishers Inc. ©Copyright 1994 All rights reserved. Proximity Technology A Division of Franklin Electronic Publishers, Inc. Burlington, New Jersey
USA. ©Copyright 1990/1994 Merriam-Webster Inc./Franklin Electronic Publishers Inc. ©Copyright 1997All rights reserved. Proximity Technology A Division of Franklin
Electronic Publishers, Inc. Burlington, New Jersey USA ©Copyright 1990 Merriam-Webster Inc. ©Copyright 1993 All rights reserved. Proximity Technology A Division of
Franklin Electronic Publishers, Inc. Burlington, New Jersey USA. ©Copyright 2004 Franklin Electronic Publishers Inc. ©Copyright 2004 All rights reserved. Proximity
Technology A Division of Franklin Electronic Publishers, Inc. Burlington, New Jersey USA. ©Copyright 1991 Dr. Lluis de Yzaguirre I Maura ©Copyright 1991 All rights reserved.
Proximity Technology A Division of Franklin Electronic Publishers, Inc. Burlington, New Jersey USA. ©Copyright 1990 Munksgaard International Publishers Ltd. ©Copyright
1990 All rights reserved. Proximity Technology A Division of Franklin Electronic Publishers, Inc. Burlington, New Jersey USA. ©Copyright 1990 Van Dale Lexicografie bv
©Copyright 1990 All rights reserved. Proximity Technology A Division of Franklin Electronic Publishers, Inc. Burlington, New Jersey USA. ©Copyright 1995 Van Dale
Lexicografie bv ©Copyright 1996 All rights reserved. Proximity Technology A Division of Franklin Electronic Publishers, Inc. Burlington, New Jersey USA. ©Copyright 1990
IDE a.s. ©Copyright 1990 All rights reserved. Proximity Technology A Division of Franklin Electronic Publishers, Inc. Burlington, New Jersey USA. ©Copyright 1992
Hachette/Franklin Electronic Publishers Inc. ©Copyright 2004 All rights reserved. Proximity Technology A Division of Franklin Electronic Publishers, Inc. Burlington, New
Jersey USA. ©Copyright 1991 Text & Satz Datentechnik ©Copyright 1991 All rights reserved. Proximity Technology A Division of Franklin Electronic Publishers, Inc.
Burlington, New Jersey USA. ©Copyright 2004 Bertelsmann Lexikon Verlag ©Copyright 2004 All rights reserved. Proximity Technology A Division of Franklin Electronic
Publishers, Inc. Burlington, New Jersey USA. ©Copyright 2004 MorphoLogic Inc. ©Copyright 2004 All rights reserved. Proximity Technology A Division of Franklin Electronic
Publishers, Inc. Burlington, New Jersey USA. ©Copyright 1990 William Collins Sons & Co. Ltd. ©Copyright 1990 All rights reserved. Proximity Technology A Division of
Franklin Electronic Publishers, Inc. Burlington, New Jersey USA. ©Copyright 1993-95 Russicon Company Ltd. ©Copyright 1995 All rights reserved. Proximity Technology A
Division of Franklin Electronic Publishers, Inc. Burlington, New Jersey USA. ©Copyright 2004 IDE a.s. ©Copyright 2004 All rights reserved. Proximity Technology A Division
of Franklin Electronic Publishers, Inc. Burlington, New Jersey USA. The Hyphenation portion of this product is based on Proximity Linguistic Technology. ©Copyright 2003
Franklin Electronic Publishers Inc.©Copyright 2003 All rights reserved. Proximity Technology A Division of Franklin Electronic Publishers, Inc. Burlington, New Jersey USA.
©Copyright 1984 William Collins Sons & Co. Ltd. ©Copyright 1988 All rights reserved. Proximity Technology A Division of Franklin Electronic Publishers, Inc. Burlington, New
Jersey USA. ©Copyright 1990 Munksgaard International Publishers Ltd. ©Copyright 1990 All rights reserved. Proximity Technology A Division of Franklin Electronic
Publishers, Inc. Burlington, New Jersey USA. ©Copyright 1997 Van Dale Lexicografie bv ©Copyright 1997 All rights reserved. Proximity Technology A Division of Franklin
Electronic Publishers, Inc. Burlington, New Jersey USA. ©Copyright 1984 Editions Fernand Nathan ©Copyright 1989 All rights reserved. Proximity Technology A Division of
Franklin Electronic Publishers, Inc. Burlington, New Jersey USA. ©Copyright 1983 S Fischer Verlag ©Copyright 1997 All rights reserved. Proximity Technology A Division of
Franklin Electronic Publishers, Inc. Burlington, New Jersey USA. ©Copyright 1989 Zanichelli ©Copyright 1989 All rights reserved. Proximity Technology A Division of Franklin
Electronic Publishers, Inc. Burlington, New Jersey USA. ©Copyright 1989 IDE a.s. ©Copyright 1989 All rights reserved. Proximity Technology A Division of Franklin Electronic
Publishers, Inc. Burlington, New Jersey USA. ©Copyright 1990 Espasa-Calpe ©Copyright 1990 All rights reserved. Proximity Technology A Division of Franklin Electronic
Publishers, Inc. Burlington, New Jersey USA. ©Copyright 1989 C.A. Stromberg AB. ©Copyright 1989 All rights reserved. Proximity Technology A Division of Franklin Electronic
Publishers, Inc. Burlington, New Jersey USA.
Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA
Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial
Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with
48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are
being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions
herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate,
the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the
Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in
the preceding sentence shall be incorporated by reference.
Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.
iv
Contents
Chapter 1: Getting Started
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Register
.................................................................................. 1
Adobe Help
............................................................................... 2
Resources
................................................................................ 3
What’s new
............................................................................... 5
Chapter 2: Work area
Working with windows and editors
Panels, tools, and menus
Working with objects
........................................................ 7
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Previewing and zooming documents
Setting preferences
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Reverting and restoring changes to pages
Chapter 3: Version Cue
Working with Adobe Version Cue
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Working with the Version Cue Server
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Working with Version Cue projects
Working with files in Version Cue
Version Cue versions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Editing and synchronizing offline files
Version Cue Server Administration
Version Cue PDF reviews
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Using Version Cue in GoLive
Troubleshooting
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Chapter 4: Setting up sites and pages
Creating sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Importing sites from remote servers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Version control sites
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Adding files to sites
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Setting up pages
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Document type definitions
Adding elements and scripts
Creating links
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Specifying and editing links
Anchor links
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Getting information about documents
Color
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
v
Chapter 5: Managing and viewing websites
Site management features and preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Working with the site window
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Inspecting, tracking, and deleting files
Refreshing and cleaning up sites
Providing names and paths for files
Using absolute link paths
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Working with graphical site views
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Changing the display of the site window
Editing links and URLs sitewide
Fixing site errors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Providing file status information
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Chapter 6: Laying out pages
Page layout for the web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
CSS layout objects
Creating layers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Selecting, resizing, and positioning layers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Managing layers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Animating layers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Understanding frames
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Setting up frame sets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Setting up individual frames
Layout grids
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Grouping and arranging objects on layout grids
Converting table-based layout grids to tables
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Special page elements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Chapter 7: Tables
Understanding tables
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Creating tables
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Selecting tables, rows, columns, or cells
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Moving, adding, or deleting rows or columns
Resizing and fixing tables
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Formatting tables with table styles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Formatting tables with the Table Inspector or Control panel
Formatting tables with cascading stylesheets
Text in tables
Sorting in tables
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Chapter 8: Formatting text
Formatting text in web pages
Adding and selecting text
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Formatting paragraphs with HTML text attributes
Formatting text inline
Changing fonts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
vi
Changing the size and color of text
Spelling
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Searching text and HTML source code
Non-roman characters
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Chapter 9: on Cascading stylesheets
Understanding cascading stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Creating and viewing stylesheets
Using external stylesheets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Creating CSS styles in stylesheets
Defining style properties
Applying styles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Chapter 10: Adding images and multimedia
Pre-optimized images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Setting basic image options
Creating rollovers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Assigning rollover images automatically
Using actions with rollovers
Creating image maps
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Building a web page using tracing images
Adding multimedia to web pages
Multimedia plug-in options
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Java applets and W3C object controls
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Chapter 11: Working with Smart Objects
Understanding Smart Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Adding and copying Smart Objects
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Updating and editing Smart Objects
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Resizing and cropping Smart Objects
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Optimizing and saving web graphics
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Working with slices during optimization
Web graphics formats and options
Output settings for web graphics
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Chapter 12: Adding content from Adobe applications
Adding Adobe Photoshop images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Adding Adobe InDesign content
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Chapter 13: Working with PDF documents
Displaying and navigating PDF documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
PDF comments
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Editing PDF link regions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Exporting web pages to PDF
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Setting global options for PDF documents
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
vii
Chapter 14: Forms
Creating forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Adding form elements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Adding form navigation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Advanced form elements and properties
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Chapter 15: Site assets, resources, and collections
Understanding site assets, resources, and collections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Creating page templates
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Applying and updating page templates
Components
Snippets
Site colors
Font sets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Site URLs and e-mail addresses
Collections
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Chapter 16: Publishing websites
Preparing to publish a site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Uploading and downloading files
Exporting sites
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Setting up distributed websites
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Managing websites with WebDAV
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Chapter 17: Authoring mobile content
Authoring for mobile devices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
XHTML Basic and Mobile
i-mode HTML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Chapter 18: Editing source code
Source code editors and preferences
Source code management tools
Using the Outline Editor
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
Adding new elements to source code
Working with source code
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Selecting and highlighting source code
Locating source code
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Navigating through source code
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
Inserting or rewriting source code automatically
JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
JavaScript libraries
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
Chapter 19: Using actions
Actions overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Browser-triggered actions
User-triggered actions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Timeline-triggered actions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
viii
Getters actions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
Image actions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Link actions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Message actions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Multimedia actions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Others actions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Specials actions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Variables actions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Chapter 20: Configuring Web Settings
Web Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Markup Language options in Web Settings
Characters options in Web Settings
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Browser Profiles options in Web Settings
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
File Mappings and Global options in Web Settings
Chapter 21: Color management
Understanding color management
Keeping colors consistent
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
Color-managing imported images
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Color-managing documents for online viewing
Proofing colors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377
Color-managing documents when printing
Working with color profiles
Color settings
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
Chapter 22: Keyboard shortcuts
Customizing keyboard shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Default keyboard shortcuts
Index
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
1
Chapter 1: Getting Started
If you haven’t installed your new software, begin by reading some information on installation and other preliminaries. Before you begin working with your software, take a few moments to read an overview of Adobe Help and of
the many resources available to users. You have access to instructional videos, plug-ins, templates, user communities,
seminars, tutorials, RSS feeds, and much more.
Installation
Requirements
❖ To review complete system requirements and recommendations for your Adobe® product, see the Read Me file
included with your software download.
Install the software
1 Close any other Adobe applications open on your computer.
2 Double-click the executable file that is included with your download, and follow the on-screen instructions.
Note: For more information, see the Read Me file included with your software download.
Activate the software
If you have a single-user retail license for your Adobe software, you will be asked to activate your software; this is a
simple, anonymous process that you must complete within 30 days of starting the software.
For more information on product activation, see the Read Me file installed with your software download, or visit the
Adobe website at www.adobe.com/go/activation.
1 If the Activation dialog box isn’t already open, choose Help > Activate.
2 Follow the on-screen instructions.
Note: If you want to install the software on a different computer, you must first deactivate it on your computer. Choose
Help > Deactivate.
Register
Register your product to receive complimentary installation support, notifications of updates, and other services.
❖ To register, follow the on-screen instructions in the Registration dialog box, which appears after you install and
activate the software.
If you postpone registration, you can register at any time by choosing Help > Registration.
ADOBE GOLIVE 9 2
User Guide
Adobe Help
Adobe Help resources
Documentation for your Adobe software is available in a variety of formats.
In-product Help
In-product Help provides access to the documentation and instructional content available for the software. It is
available through the Help menu in your Adobe software.
PDF documentation
The in-product Help is also available as a PDF that is optimized for printing. Other documents, such as installation
guides and white papers, may also be provided as PDFs. PDF documentation included with the software can be
found in the folder with your software download.
PDF documentation is also available through the Adobe Help Resource Center, at www.adobe.com/go/documentation.
Using Help in the product
In-product Help is available through the Help menu. After you start the Adobe Help Viewer, click Browse to see Help
for additional Adobe products installed on your computer.
These Help features facilitate cross-product learning:
• Topics may contain links to the Help systems of other Adobe products or to additional content on the web.
• Some topics are shared across two or more products. For instance, if you see a Help topic with an Adobe®
Photoshop icon and an Adobe After Effects® icon, you know that the topic either describes functionality that is
similar in the two products or describes cross-product workflows.
• You can search across the Help systems of multiple products.
Note: If you search for a phrase, such as “shape tool,” enclose it in quotation marks to see only those topics that include
all the words in the phrase.
Accessibility features
Adobe Help content is accessible to people with disabilities—such as mobility impairments, blindness, and low
vision. In-product Help supports these standard accessibility features:
• The user can change text size with standard context menu commands.
• Links are underlined for easy recognition.
• If link text doesn’t match the title of the destination, the title is referenced in the Title attribute of the Anchor tag.
For example, the Previous and Next links include the titles of the previous and next topics.
• Content supports high-contrast mode.
• Graphics without captions include alternate text.
• Each frame has a title to indicate its purpose.
• Standard HTML tags define content structure for screen reading or text-to-speech tools.
ADOBE GOLIVE 9 3
User Guide
• Style sheets control formatting, so there are no embedded fonts.
Keyboard shortcuts for toolbar controls (Windows)
Back button Alt+Left Arrow
Forward button Alt+Right Arrow
Print Ctrl+P
About button Ctrl+I
Browse menu Alt+Down Arrow or Alt+Up Arrow to view Help for another application
Search box (Windows) Ctrl+S to place cursor in Search box
Keyboard shortcuts for navigation (Windows)
• To move between panes, press Ctrl+Tab (forward) and Shift+Ctrl+Tab (backward).
• To move through and outline links within a pane, press Tab (forward) or Shift+Tab (backward).
• To activate an outlined link, press Enter.
• To make text bigger, press Ctrl+equal sign.
• To make text smaller, press Ctrl+hyphen.
Resources
Extras
To help you make the most of your Adobe product, certain resources may be installed on your computer during the
setup process or offered online by the Adobe Exchange community.
GL2DW extension
The GL2DW extension assists in the conversion of a GoLive .site file to a site that can be managed using Adobe
DreamWeaver®. The extension is available with the software installation.
Adobe Exchange
For more free content, visit www.adobe.com/go/exchange, an online community where users download and share
thousands of free actions, extensions, plug-ins, and other content for use with Adobe products.
Adobe Design Center
Adobe Design Center offers articles, inspiration, and instruction from industry experts, top designers and Adobe
publishing partners. New content is added monthly.
New ideas are the heart of Think Tank, Dialog Box, and Gallery:
• Think Tank articles consider today’s designers engage with technology and what their experiences mean for
design, design tools, and society.
• In Dialog Box, experts share new ideas in motion graphics and digital design.
ADOBE GOLIVE 9 4
User Guide
• The Gallery showcases how artists communicate design in motion.
Visit Adobe Design Center at www.adobe.com/designcenter.
Adobe Developer Center
Adobe Developer Center provides samples, tutorials, articles, and community resources for developers who build
rich Internet applications, websites, mobile content, and other projects using Adobe products. The Developer Center
also contains resources for developers who develop plug-ins for Adobe products.
In addition to sample code and tutorials, you'll find RSS feeds, online seminars, SDKs, scripting guides, and other
technical resources.
Visit Adobe Developer Center at www.adobe.com/go/developer.
Customer support
Visit the Adobe Support website, at www.adobe.com/go/support, to find troubleshooting information for your
product and to learn about free and paid technical support options. Follow the Training link for access to Adobe
Press books, a variety of training resources, Adobe software certification programs, and more.
Downloads
Visit www.adobe.com/go/downloads to find free updates, tryouts, and other useful software. In addition, the Adobe
Store (at www.adobe.com/go/store) provides access to thousands of plug-ins from third-party developers, helping
you to automate tasks, customize workflows, create specialized professional effects, and more.
Adobe Labs
Adobe Labs gives you the opportunity to experience and evaluate new and emerging technologies and products from
Adobe.
At Adobe Labs, you have access to resources such as these:
• Prerelease software and technologies
• Code samples and best practices to help accelerate your learning
• Early versions of product and technical documentation
• Forums, wiki-based content, and other collaborative resources to help you interact with like-minded developers
Adobe Labs fosters a collaborative software development process. In this environment, customers quickly become
productive with new products and technologies. Adobe Labs is also a forum for early feedback, which the Adobe
development teams use to create software that meets the needs and expectations of the community.
Visit Adobe Labs at www.adobe.com/go/labs.
User communities
User communities feature forums, blogs, and other avenues for users to share technologies, tools, and information.
Users can ask questions and find out how others are getting the most out of their software. User-to-user forums are
available in English, French, German, and Japanese; blogs are posted in a wide range of languages.
To participate in forums or blogs, visit www.adobe.com/communities.
ADOBE GOLIVE 9 5
User Guide
What’s new
Design mode
Design mode includes a number of new features intended to help make web design more accessible to traditional
Creative Suite designers. The objective is to enable designers to design for the web visually and without the need for
deep knowledge of web technologies such as HTML and CSS.
Designer Styles To manage and facilitate Designer Styles, GoLive 9 includes Character and Paragraph Styles. From
the Control panel, you can add new, edit existing, or delete old styles. Double-clicking a style in the Styles panel
invokes the Styles Options dialog where you can define the specific properties of each style. These styles are comparable to InDesign styles but write to CSS, which allows power and flexibility in designing text for web pages. See
“Formatting text” on page 162 for more information about styling text or “Adding content from Adobe applications”
on page 240 for information about using InDesign styled text in GoLive.
CSS Summary Each of the Styles Options dialog include a CSS Summary option. The CSS Summary option displays
the CSS code that GoLive 9 writes in the background. This is useful for more advanced users that would like to check
the code, as well as the designers that would like to learn more about CSS. For more information, see “Creating and
viewing stylesheets” on page 186.
Automated CSS Styles Text and background attributes on the Control panel and different panels write CSS code
rather than inline HTML tags (e.g. <FONT>). This transition to CSS is consistent across the whole application.
Tools panel A redesigned Tools panel supports the new, more visual process of designing for the web in GoLive 9. It
is intended to let designers work with tools that they are already familiar with to select, edit and create objects on a
web page. See “Panels, tools, and menus” on page 10 for more information.
Control panel The Control panel offers quick access to options related to the objects you select. The options that
display on this panel change in a context-sensitive manner based upon which tool you use. By default, the Control
panel is docked to the top of the work space, below the menu bar. See “Panels, tools, and menus” on page 10 for more
information.
New and revised tools New and revised tools, such as the Text tool, the Container tool, the Deep Selection tool, and
several others, are included to streamline the designing process. There are multiple ways to customize and use a
specific tool by selecting options and inputting values in the Control panel while using the tool. See “Panels, tools,
and menus” on page 10 for information about the tools available in GoLive.
Designer-focused site window GoLive 9 simplifies site management tools by leveraging concepts that designers are
already familiar with from using the Creative Suite. The design of the site window is largely based upon Adobe Bridge
and it brings together all of the tools needed to manage a site from start to finish. See “To display site and document
windows” on page 8.
Publishing The site window includes a Publish Server area that allows convenient access to the Publish Server
settings or the files on the publish server, depending on whether you are connected or disconnected to the server.
See “Working with windows and editors” on page 7 and “Managing and viewing websites” on page 98 for more information.
New default workspace GoLive 9 limits the default workspace to a set of panels that are the most relevant and
familiar to designers. See “Work area” on page 7 for more information.
New dialog box The New dialog box allows you to quickly start a new project by choosing from among the different
type of documents GoLive 9 supports.
ADOBE GOLIVE 9 6
User Guide
User-friendly interface
Revised menu options A new menu option allows you to place images and other page content in pages conveniently
by choosing File > Place. Integration with other GoLive features, such as the Save For Web feature, allows you to
optimize your images while placing them on a web page. See “Adding images and multimedia” on page 206 for more
information.
Also, some menu names have been changed to make them more intuitive, such as the Site menu options and
Advanced menu options.
Panel management The way in which you manage panels in the workspace has changed to make the workspace
more efficient and easier to use. The management is similar to some Creative Suite components and it allows you a
variety of options for how you view and use the panels. For more information, see “Work area” on page 7.
Integration
Copy and drag from InDesign GoLive 9 allows you to copy or drag specific content components between InDesign
and GoLive. Most formatting or applied styles are preserved in the process and automatically translated into
standard CSS styles. See “Adding content from Adobe applications” on page 240 for more information.
Improved color management Maintain common color settings throughout Adobe applications. Print with the
simplified printing interface for color management.
7
Chapter 2: Work area
Working with windows and editors
About the Welcome Screen and work area
When you first start Adobe GoLive, the Welcome Screen appears with options to create a new document or open a
recent item. You can select the option to not show the screen at startup and later reselect the option in the Preferences
dialog box. Also, you can open the Welcome Screen from the Help menu on the application window.
The GoLive work area includes the site window (one for every site project), document windows for each open web
page, a variety of editors and panels, a Tools panel, and a Control panel for working with everything in your site. There
are multiple ways that you can configure and customize the work area to make it an efficient and easy-to-use
workspace. Many of the options for customizing the workspace, such as displaying or completely hiding specific panels
or saving a workspace configuration, are available from the Window menu on the application window menu bar.
A B
C
D
E
F
G
H
GoLive workspace
A. Application window menu bar B. Tools panel C. Control panel D. Site window E. Document window F. Panels collapsed to icons
G. Inspector panel H. Paragraph Styles and Character Styles panel
See also
“About preferences” on page 20
ADOBE GOLIVE 9 8
User Guide
About the New dialog box
When you click New Document in the Welcome Screen or choose File > New, GoLive displays the New dialog box.
The New dialog box lets you choose from several categories (Site, Web, Mobile, and Scripting) and to add files of
several types (including HTML pages, cascading stylesheets, or images) to a Favorites category. When you select a
category, GoLive displays a list of options from which you can choose, such as file types or whether to build a new
site or connect to an existing one. When you select a file type, the file opens for editing. When you select whether to
build a new site or connect to an existing one, you can either begin creating a site by using the Site Creation Wizard
or choose a specific site.
You can set options for files, such as doctype and encoding, in the Options section of the New dialog box (available
in Web, Mobile, Scripting, and Favorites).
See also
“To create a new page in a site” on page 73
“Methods for creating sites in GoLive” on page 64
To edit descriptions in the New dialog box
GoLive displays descriptions of files in the New dialog box. You can edit these descriptions in the Description dialog box.
1 Select the file in the New dialog box.
2 Right-click the icon next to the file you want and choose Edit Description.
3 In the Description dialog box that appears, edit the description as desired.
Note: Depending upon the file, the options of Can Change Markup Type, Can Change Doctype, or Can Change Encoding
display in the Description dialog box. You can use these options to enable modifications of the markup type, doctype, or
character encoding for this file.
See also
“About site assets, resources, and collections” on page 269
Displaying the site and document windows
For ease of use, keep the site window, the Objects panel, the Tools panel, and the Inspector open while building,
revising, and uploading a site.
You can display multiple site and document windows at one 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 site and document windows
• To display the site window, open the site file (.site).
• To collapse the site window to a single pane, click the Toggle Split View icon
at the bottom of the window. (To
expand the site window to two panes, click the button again.)
• To toggle between the site window and the document window, choose the Select Window button
Control panel.
• To display the document window, open an XHTML or HTML page, or create a new page.
in the
ADOBE GOLIVE 9 9
User Guide
• To display the head section pane in the document window, select the Layout tab, and then click the Toggle Head
Section icon
in the upper left corner of the document window (next to the Head label).
• To display the source code pane in the document window, select the Layout tab, and then 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 to a new vertical or horizontal position in the Layout Editor, Alt-click (Windows)
or Option-click (Mac OS) the Show/Hide Split Source icon.
To display an editor or preview
❖ From within the document window, click any of the following tabs:
Layout tab Lets you add content to a document.
Frame Editor tab Lets you create a frameset and lay out frames that display individual web pages.
Source tab Lets you work directly with your document’s source code.
Outline Editor tab Lets you view source code in a hierarchical, structured view.
PDF Preview tab Lets you preview and export a web page to PDF.
To arrange windows and editors
❖ Select a document window, site window, graphical site view window, or editor and choose Cascade, Tile Horizon-
tally, or Tile Vertically from the Window > Cascade and Tile menu.
To switch between windows or editors
❖ Do any of the following tasks:
• Click the window or editor that you want to make it active.
• Choose the desired window or editor from the bottom of the Window menu.
• Click the Select Window button
on the Control panel to toggle between the foremost window or editor and
the site window.
• Click and hold the mouse button on the Select Window button
to display a pop-up menu from which you can
choose a window or editor.
• If you’re creating a link to a page or object in another window, drag the pick whip
to the Select Window button
on the Control panel to bring the other window to the front. Then, continue to drag to the destination in the open
window.
If a window or editor is off-screen and not visible (e.g., if you changed your monitor’s resolution or dragged the
window or editor off the screen edge), choose Window > Cascade and Tile > Cascade to return the window or editor
to view.
See also
“Specifying the destination URL for a link” on page 87
ADOBE GOLIVE 9 10
User Guide
To display rulers in the Layout tab
When you place an object in the Layout tab, gray 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.
Panels, tools, and menus
Workspace overview
You create and manipulate your documents and files using various elements such as panels, bars, and windows. Any
arrangement of these elements is called a workspace. When you first start an Adobe Creative Suite component, you
see the default workspace, which you can customize for the tasks you perform there. For instance, you can create one
workspace for editing and another for viewing, save them, and switch between them as you work.
You can restore the default workspace at any time by choosing the default option on the Window > Workspace menu.
Although default workspaces vary across Flash, Illustrator, InCopy, InDesign, and Photoshop, you manipulate the
elements much the same way in all of them. The Photoshop default workspace is typical:
• The menu bar across the top organizes commands under menus.
• The Tools panel (called the Tools palette in Photoshop) contains tools for creating and editing images, artwork,
page elements, and so on. Related tools are grouped together.
• The Control panel (called the options bar in Photoshop) displays options for the currently selected tool. (Flash has
no Control panel.)
• The Document window (called the Stage in Flash) displays the file you’re working on.
• Panels (called palettes in Photoshop) help you monitor and modify your work. Examples include the Timeline in
Flash and the Layers palette in Photoshop. Certain panels are displayed by default, but you can add any panel by
selecting it from the Window menu. Many panels have menus with panel-specific options. Panels can be grouped,
stacked, or docked.
ADOBE GOLIVE 9 11
User Guide
A
B
C
D
E
G
F
H
Default Photoshop workspace
A. Document window B. Dock of panels collapsed to icons C. Panel title bar D. Menu bar E. Options bar F. Tools palette G. Collapse To
Icons button H. Three palette (panel) groups in vertical dock
For a video on understanding the workspace, see www.adobe.com/go/vid0187.
Hide or show all panels
• (Illustrator, InCopy, InDesign, Photoshop) To hide or show all panels, including the Tools panel and options bar
or Control panel, press Tab.
• (Illustrator, InCopy, InDesign, Photoshop) To hide or show all panels except the Tools panel and options bar or
Control panel, press Shift+Tab.
You can temporarily display panels hidden by these techniques by moving the pointer to the edge of the application
window (Windows) or to the edge of the monitor (Mac OS) and hovering over the strip that appears.
• (Flash) To hide or show all panels, press F4.
Display panel menu options
❖ Position the pointer on the panel menu icon
in the upper-right corner of the panel, and press the mouse
button.
(Illustrator) Adjust panel brightness
❖ In User Interface preferences, move the Brightness slider. This control affects all panels, including the Control
panel.
ADOBE GOLIVE 9 12
User Guide
Reconfigure the Tools panel
You can display the tools in the Tools panel in a single column, or side by side in two columns.
In InDesign, you also can switch from single-column to double-column display by setting an option in Interface
preferences.
❖ Click the double arrow at the top of the Tools panel.
Customize the workspace
To create a custom workspace, move and manipulate panels (called palettes in Photoshop and in Adobe Creative
Suite 2 components).
A
B
C
Narrow blue drop zone indicates Color panel will be docked on its own above Layers panel group.
A. Title bar B. Tab C. Drop zone
You can save custom workspaces and switch among them.
In Photoshop, you can change the font size of the text in the options bar, palettes, and tool tips. Choose a size from
the UI Font Size menu in General preferences.
Note: For a video on customizing the workspace in Illustrator, see www.adobe.com/go/vid0032. For a video on customizing the workspace in InDesign, see www.adobe.com/go/vid0065.
Dock and undock panels
A dock is a collection of panels or panel groups displayed together, generally in a vertical orientation. You dock and
undock panels by moving them into and out of a dock.
Note: Docking is not the same as stacking. A stack is a collection of free-floating panels or panel groups, joined top to
bottom.
• To dock a panel, drag it by its tab into the dock, at the top, bottom, or in between other panels.
• To dock a panel group, drag it by its title bar (the solid empty bar above the tabs) into the dock.
• To remove a panel or panel group, drag it out of the dock by its tab or title bar. You can drag it into another dock
or make it free-floating.
ADOBE GOLIVE 9 13
User Guide
Navigator panel being dragged out to new dock, indicated by blue vertical highlight
Navigator panel now in its own dock
To prevent panels from filling all space in a dock, drag the bottom edge of the dock up so it no longer meets the edge
of the workspace.
Move panels
As you move panels, you see blue highlighted drop zones, areas where you can move the panel. For example, you can
move a panel up or down in a dock by dragging it to the narrow blue drop zone above or below another panel. If you
drag to an area that is not a drop zone, the panel floats freely in the workspace.
• To move a panel, drag it by its tab.
• To move a panel group or a stack of free-floating panels, drag the title bar.
Press Ctrl (Windows) or Control (Mac OS) while moving a panel to prevent it from docking.
Add and remove docks and panels
If you remove all panels from a dock, the dock disappears. You can create new docks by moving panels to drop zones
next to existing docks or at the edges of the workspace.
• To remove a panel, click its close icon (the X at the upper-right corner of the tab), or deselect it from the Window menu.
• To add a panel, select it from the Window menu and dock it wherever you wish.
Manipulate panel groups
• To move a panel into a group, drag the panel’s tab to the highlighted drop zone at the top of the group.
ADOBE GOLIVE 9 14
User Guide
Adding a panel to a panel group
• To rearrange panels in a group, drag a panel’s tab to a new location in the group.
• To remove a panel from a group so that it floats freely, drag the panel by its tab outside the group.
• To make a panel appear at the front of its group, click its tab.
• To move grouped panels together, drag their title bar (above the tabs).
Stack free-floating panels
When you drag a panel out of its dock but not into a drop zone, the panel floats freely, allowing you to position it
anywhere in the workspace. Panels may also float in the workspace when first selected from the Window menu. You
can stack free-floating panels or panel groups together so that they move as a unit when you drag the topmost title
bar. (Panels that are part of a dock cannot be stacked or moved as a unit in this way.)
Free-floating stacked panels
• To stack free-floating panels, drag a panel by its tab to the drop zone at the bottom of another panel.
• To change the stacking order, drag a panel up or down by its tab.
Note: Be sure to release the tab over the narrow drop zone between panels, rather than the broad drop zone in a title bar.
• To remove a panel or panel group from the stack, so that it floats by itself, drag it out by its tab or title bar.
Resize or minimize panels
• To resize a panel, drag any side of the panel or drag the size box at its lower-right corner. Some panels, such as the
Color panel in Photoshop, cannot be resized by dragging.
• To change the width of all the panels in a dock, drag the gripper
at the top left of the dock.
• To minimize a panel, panel group, or stack of panels, click the Minimize button in its title bar.
You can open a panel menu even when the panel is minimized.
ADOBE GOLIVE 9 15
User Guide
Minimize button
Manipulate panels collapsed to icons
Collapse panels to icons to reduce clutter on the workspace. (In some cases, panels are collapsed to icons in the
default workspace.) Click a panel icon to expand the panel. You can expand only one panel or panel group at a time.
Panels collapsed to icons
Panels expanded from icons
• To collapse or expand all panels in a dock, click the double arrow at the top of the dock.
• To resize panel icons so that you see only the icons (and not the labels), drag the gripper
at the top of the dock
toward the icons until the text disappears. (To display the icon text again, drag the gripper away from the panels.)
• To expand a single panel icon, click it.
• To collapse an expanded panel back to its icon, click its tab, its icon, or the double arrow in the panel’s title bar.
If you select Auto-Collapse Icon Panels from the Interface or User Interface Options preferences, an expanded panel
icon will collapse automatically when you click away from it.
• To add a panel or panel group to an icon dock, drag it in by its tab or title bar. (Panels are automatically collapsed
to icons when added to an icon dock.)
• To move a panel icon (or panel icon group), drag the bar that appears above the icon. You can drag panel icons up
and down in the dock, into other docks (where they appear in the panel style of that dock), or outside the dock
(where they appear as free-floating, expanded panels).
ADOBE GOLIVE 9 16
User Guide
Save, delete, and switch between workspaces
By saving the current size and position of panels as a named workspace, you can restore that workspace even if you
move or close a panel. The names of saved workspaces appear in the Window > Workspace menu.
In Photoshop, the saved workspace can include a specific keyboard shortcut set and menu set.
Save a custom workspace
1 With the workspace in the configuration you want to save, do one of the following:
• (Photoshop, Illustrator, InDesign) Choose Window > Workspace > Save Workspace.
• (Flash) Choose Window > Workspace > Save Current, or choose Save Current from the Workspace menu in the
Edit bar.
• (Photoshop) Choose Save Workspace from the Workspace menu in the options bar.
2 Type a name for the workspace.
3 (Photoshop) Under Capture, select one or more options:
Palette Locations Saves the current palette locations.
Keyboard Shortcuts Saves the current set of keyboard shortcuts.
Menus Saves the current set of menus.
4 Click OK.
Display or switch between workspaces
Flash, Illustrator, InDesign, and Photoshop include preset workspaces designed to make certain tasks easier.
• Choose Window > Workspace, and select a workspace.
• (Photoshop) Select a workspace from the Workspace menu in the options bar.
• (Flash) Select a workspace from the Workspace menu in the Edit bar.
(InDesign and Photoshop) Assign keyboard shortcuts to each workspace to navigate among them quickly.
Delete a custom workspace
• (Illustrator) Choose Window > Workspace > Manage Workspaces, select the workspace, and then click the Delete icon.
• (InDesign) Choose Window > Workspace > Delete Workspace, select the workspace, and then click Delete.
• (Flash) Choose Manage from the Workspace menu in the Edit bar, select the workspace, and then click Delete.
Alternatively, choose Window > Workspace > Manage, select the workspace, and then click Delete.
• (Photoshop) Choose Delete Workspace from the Workspace menu in the options bar. Alternatively, choose
Window > Workspace > Delete Workspace, select the workspace, and then click Delete.
(Photoshop) Start with the last or default palette locations
When you start Photoshop, palettes can either appear in their original default locations, or appear as you last used them.
❖ In Interface preferences:
• To display palettes in their last locations on startup, select Remember Palette Locations.
• To display palettes in their default locations on startup, deselect Remember Palette Locations.
ADOBE GOLIVE 9 17
User Guide
The Tools panel
GoLive includes tools for working with text, objects, layers, grid text boxes, and color. By default, the Tools panel is
docked on the left side of the workspace. Click the double-arrow button at the top of the Tools panel to display the
panel in either a single or double column layout.
Selection tool
Lets you select any object.
Lets you select any item on the page regardless of object hierarchy or covered layers, such as
images and multimedia objects.
Deep Selection tool
Link tool
Turns on link editing mode. In link editing mode, valid links appear in blue and broken links appear in red.
The Link edit tool works with the Control panel at the top of the workspace to replace the Link Inspector available
in previous versions of GoLive.
Text tool
Lets you edit text by placing a text cursor at the mouse pointer position.
Lets you create a <div> element that flows with surrounding text. You can nest container <div>
elements to create advanced CSS-based layouts.
Container tool
Layer tool
Lets you draw and position layers on a page.
Grid Text Box tool
Lets you draw and position text boxes on a layout grid.
Note: If the Grid Text Box tool isn’t visible, click and hold the Layer tool to display it.
Table Cell tool
/Table tool
Lets you create and set up tables by using the Control panel and to select cells,
rows, and columns for editing.
Eyedropper
/Styledropper tool
Lets you paste the color attributes of a selected layer or other object to
another object with Eyedropper, or use a workflow to transfer style attributes with Styledropper.
Hand tool
Lets you scroll the page view.
Zoom tool
Lets you magnify a document.
Lets you color any element that accepts color as a visual
attribute, such as layer boxes, text, and tables. The Swap Colors and Apply None buttons below the stroke and fill
tools give you complete control over the colors of layers and text.
Background color tool and Stroke/Text color tool
Lets you work on your document in Layout mode or preview your work in
Frames, Source, Outline, or PDF previews in Preview mode.
Layout mode /Preview mode tool
Opens your document in the Adobe GoLive built-in Live Rendering browser or another
browser that you select. If a browser is installed and specified in the Browser preferences, this icon changes to reflect
the specified browser.
Preview in Browser
See also
“To magnify or reduce a document” on page 20
“About GoLive layers” on page 122
“To add text to a layout grid” on page 138
“To use the Color panel” on page 93
ADOBE GOLIVE 9 18
User Guide
The Control panel
The Control panel appears below the command menus at the top of the screen. It contains buttons and pop-up
menus that change depending on what you have selected in the work area.
To display the Control panel
• To show or hide the Control panel, choose Window > Control. (A check mark next to the selection indicates that
it is showing.)
• To move the Control panel drag the lower left corner.
See also
“About version control” on page 69
To use a context menu
Context-sensitive menus display commands relating to the active window or selection. You can use these context
menus as a quick way to choose commonly used commands.
❖ Right-click (Windows) or Control-click (Mac OS) the active window or selection.
Working with objects
About the Objects panel
The Objects panel holds a wide selection of web page elements, all ready for insertion. Insert an object by dragging
and dropping it or by double-clicking it. You can use them to insert web basics like multimedia plugins or Java
applets, smart objects linked to Adobe Illustrator or Adobe Photoshop source files, ready-for-use CSS layout objects,
and web form elements. If desired, you can click the Join/Separate Tools and Objects button on the panel to switch
between the panel layout and a layout that is similar to the Tools panel.
Previewing and zooming documents
Previewing web pages
You can preview web pages and test 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 browser, you can preview
changes you make in the Layout Editor using Live Rendering. Use the Small Screen Rendering (SSR) option in the
Live Rendering browser to approximate what your page looks like when it’s published to a mobile device. Layout
preview approximates what your page looks like when it’s published on the Web.
You can also preview PDF files you create or open in GoLive.
ADOBE GOLIVE 9 19
User Guide
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, Firefox, Mozilla, or Microsoft Internet Explorer from within GoLive by first adding it
to the Preview In Browser menu in the Tools panel.
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 panel.
See also
“To set view options for page layout” on page 77
“Exporting pages to PDF” on page 250
To preview your page in the Live Rendering browser
❖ Do any of the following tasks:
• Open the page you want to preview and click the Preview in Browser tool in the Tools panel.
• 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
or click the Browse button
to open a page.
• Choose File > Preview In > Live Rendering, choose Load from the Live Rendering window pop-up menu, and
then select a page in the Choose dialog box.
To preview your page as it will appear on a mobile device, click SSR in the Live Rendering browser, or open the page
you want to preview and choose File > Preview In > Small Screen Rendering.
Changes you make in the Layout Editor are reflected in the Live Rendering browser after you click in the Live
Rendering browser. If you have multiple document windows open, the Live Rendering browser previews the
currently selected document.
To set Live Rendering browser options
❖ Choose an option from the Live Rendering window menu:
Load Opens a file from the Choose File To Render dialog box.
Reload Reflects changes you’ve made in the Layout Editor (use this option if you’ve deselected Auto Update).
Auto Update Ensures that the Live Rendering browser displays changes you make in the Layout Editor when you
click in the Live Rendering browser (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.
Bound Binds the Live Rendering browser to a specific document: select the open document you want to preview,
and then choose Bound from the Live Rendering window menu.
To specify browsers for previewing
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 select the Browsers icon from the
list on the left. Or click and hold the Preview in Browser button on the Tools panel and select edit.
ADOBE GOLIVE 9 20
User Guide
3 Do one of the following tasks to populate the list of browsers:
• To add all browsers on your hard disk to the browser list, click Find All.
• To add a single browser to the list, click Add. Then locate and select the browser and click Open (Windows) or
Choose (Mac OS).
4 Select one or more browsers that you want to be started when you click the Preview In Browser button
Tools panel or when you choose File > Preview In > Default Browser.
in the
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 necessarily Netscape Navigator 7.0 and 8.1.2.
5 (Optional) To delete a browser from the scrolling window, select it and click Remove.
6 Click OK.
If you select two or more types of browsers, a generic browser icon appears in the Tools panel. If you select only a
single type of browser, the program icon for that browser appears in the Tools panel.
To preview your page in a browser
• To preview the page in all of the browsers selected in the Browsers preferences, click the Preview In Browser
button
in the Tools panel, or choose File > Preview In > Default Browser.
• To preview the page in a single browser from the Browsers preferences, click and hold the Preview In Browser
button in the Tools panel, and then choose the browser from the menu that appears. Or, choose a browser from
the File > Preview In submenu.
To magnify or reduce a document
❖ Do one of the following tasks:
• Click the Zoom tool
in the Tools panel and click in the document window. Alt-click (Windows) or Option-
click to reduce the view.
• Click the Zoom In button
or the Zoom Out button
at the bottom of the document window.
• Choose a magnification value from the Zoom Values menu at the bottom of the document window.
• 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.
• Right-click in the Layout tab of the document window and choose View > Zoom from the context menu to set the
zoom value.
• Choose View from the application window menu bar and select the zoom option you want to use.
Setting preferences
About preferences
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.
ADOBE GOLIVE 9 21
User Guide
The GoLive preferences file is located in the Documents and Settings/[user]/Application Data/Adobe/Adobe GoLive
folder (Windows) and the Mac OS X/Users/[username]/Library/Preferences folder (Mac OS).
Note: Some preferences 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 also
“Specifying preferences and settings for websites” on page 98
To set options in the Preferences dialog box
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 Select an icon or name from the list on the left. If needed, click the triangle or + symbol next to the icon to display
a list of names below the icon.
3 Specify options on the right side of the Preferences dialog box.
4 Click OK. The new settings take effect the next time you start GoLive.
To set General preferences
Set the General preferences to control the overall working behavior of GoLive.
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 Select General from the list on the left.
3 Set any of the following options, and click OK:
Launch Other Applications To Edit Media Files Specifies whether files that you double-click open in GoLive or in
another application that you specify in the File Mappings tab in the Web Settings window.
Show Tooltips Specifies whether tool tips appear when you place the pointer over an icon, button, or tool.
Write “Generator Adobe GoLive” Specifies that the meta information “<meta name="generator" content="Adobe
GoLive ">” will appear in each file that you create or save.
At Launch Specifies what window GoLive opens when it launches. Choose Create New Document to open a new file
at launch. Choose Show Welcome Screen to open a window that offers the choice of opening a new page or site, an
existing file, or tutorials and extras. Choose Do Nothing to launch without any file or window opening.
Default Mode Specifies which document window tab (such as the Source tab) is visible when you initially open a
document.
Cache Folder options Specify the folder and path to the cache folder for GoLive, specify the maximum size of the
cache folder, or clear the cache to empty its folder.
Panels option Select Auto-Collapse Icon Panels to automatically collapse the panels to icons.
See also
“Workspace overview” on page 10
“Setting up pages” on page 75
ADOBE GOLIVE 9 22
User Guide
To activate or deactivate program modules
Use the Modules preferences to 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.
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 Select Modules from the list on the left.
3 To read a description of a module, select it in the right pane and click the triangle next to Show Item Information
at the bottom of the window.
4 To select or deselect modules, click the check boxes. Program modules that are currently installed are checked by
default.
5 Click OK, and then restart GoLive.
Reverting and restoring changes to pages
Using the History panel
The History panel 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 panel. You can revert to a previous state of the page or site or you can restore changes that you
made to that state.
When you switch between open documents or site windows, the contents of the History panel adjust accordingly.
However, the content is cleared and you lose the information when you click a different tab in the document window.
You can set the maximum number of states that the History panel displays for a page or site (20 states by default).
To undo and redo changes using the History panel
1 Choose Window > History.
The History panel 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 panel, 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 panel. (The
newer states of the document are dimmed.)
In Windows press Shift+Control+Z, or 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 panel
❖ In the History panel, choose History Options from the panel menu
, enter a number between 1 and 1600 in
the Maximum History States box, and click OK.
To clear the History panel of all states
❖ In the History panel, choose Clear History from the panel menu
.
ADOBE GOLIVE 9 23
User Guide
To undo, redo, and revert actions
1 To undo an action, choose Edit > Undo.
The menu command describes the last action you performed. If no actions remain, the menu command is dimmed.
2 To redo the action, choose Edit > Redo.
The menu command describes the last action that you can redo. If all actions are redone, the menu command is
dimmed.
3 To revert to the way the page was when you last saved it, choose File > Revert To Saved.
24
Chapter 3: Version Cue
Adobe Version Cue® CS3 is a file-version manager included with Adobe GoLive 9 and Creative Suite 3 (CS3) components. Version Cue enables versioning and asset management.
You can use Version Cue with GoLive in conjunction with CS3 components. However, the way in which you access
and use Version Cue in GoLive is different from CS3 components; the Version Cue features in GoLive 9 are
integrated into the work flow associated with frequently used GoLive features, such as the Assets area of the site
window. If you compare the Version Cue in GoLive with the Version Cue used for CS3 components, you might find
that there are some differences. Version Cue Server is only available with the installation of a CS3 component;
however, you can use Version Cue client for version management in GoLive without administrative access to the
Server if desired. For help using Version Cue with a Creative Suite component, refer to the Help for that component.
The sections in this chapter first provide fundemental information and concepts for using Adobe Version Cue and
then provide instructions for using Version Cue specifically with GoLive. To read the instructions specific to GoLive,
see “Using Version Cue in GoLive” on page 55.
Note: You can perform certain Version Cue tasks only if you have access to the full Version Cue feature set, available in
Adobe Creative Suite and in a shared workspace, such as a network.
Working with Adobe Version Cue
About Version Cue
Version Cue is a file-version manager included with GoLive 9 and Creative Suite 3 Design, Web, and Master
Collection editions that consists of two pieces: the Version Cue Server and Version Cue connectivity. The
Version Cue Server (available only with CS3 installations) can be installed locally or on a dedicated computer and
hosts Version Cue projects. Version Cue connectivity, included with GoLive and all Version Cue-enabled components, enables you to connect to Version Cue Servers.
Use Version Cue to track versions of a file as you work and to enable workgroup collaboration such as file sharing,
version control, backups, online reviews, and the ability to check files in and out. You can organize Version Cuemanaged files into private or shared projects.
Use Version Cue Server Administration to create and manage user access, projects, and PDF reviews; administer
backups; export content; and to specify advanced Version Cue Server information.
See also
“Working with the Version Cue Server” on page 27
“Version Cue Server Administration” on page 41
“Version Cue PDF reviews” on page 52
“Using Version Cue in GoLive” on page 55
ADOBE GOLIVE 9 25
User Guide
Version Cue basics
Version Cue Server
When you perform the default installation of GoLive 9, Version Cue client is installed on your computer. A
Version Cue Server stores Version Cue projects and their related assets. You can install and start the Version Cue
Server on your computer, or, optimally, install and run the Version Cue Server on a dedicated computer accessible
to others on your network. Version Cue Server is only available with CS3 components.
When you first turn on the Version Cue Server, you can specify initial server settings, including a system administrator password, server name and visibility settings, and user account creation settings. Certain Version Cue Server
options only appear on the computer on which Version Cue Server is installed.
Version Cue Server Administration
Once you’ve installed and turned on the Version Cue Server, use Version Cue Server Administration to set up users,
create projects and edit their properties, create and administer PDF reviews, and configure the Version Cue Server.
Version Cue projects
Version Cue uses projects to store related files and folders. Projects are stored on Version Cue Servers. Projects store
the master copies of files added to the project, as well as file metadata such as version information and comments.
Local project files and server versions
Local project files are created on your hard drive when you open and edit a file from a Version Cue project
(Version Cue marks the file as checked out). As you work with the local project file, you save changes to it by
choosing File > Save. This updates the local file on your hard drive, but not the file on the Version Cue Server.
When you’re ready to check in the local project file changes back to the Version Cue Server, you create a version by
using the Check In command. Versions represent a snapshot of the file at a given time.
The Version Cue Server stores all versions of a file so you can view earlier versions, promote earlier versions to be
the current version, or delete unnecessary or obsolete versions.
Version control
Version Cue allows multi-user access to files on the Version Cue Server. If two users try to edit a file on the
Version Cue Server, Version Cue institutes version control by notifying the second user that the file is checked out.
Version Cue then lets you decide how to proceed.
See also
“Working with the Version Cue Server” on page 27
“Working with Version Cue projects” on page 32
“Version Cue Server Administration” on page 41
“About local project files” on page 35
“Version Cue versions” on page 39
“Edit files checked out by another user” on page 37
ADOBE GOLIVE 9 26
User Guide
Version Cue workflow
Before you begin using Version Cue features, you’ll need to install and configure the Version Cue Server and create
a project.
1. Install and configure the Version Cue Server
When you install GoLive 9, a Version Cue client is installed on your computer. You must install the Version Cue
Server (available with CS3 components) on the computer on which you wish to use the server. You can install the
server on the same computer as GoLive and turn it on to enable simple file sharing; however, if you want to share
Version Cue-managed assets with a workgroup, you should install it on a dedicated computer accessible to others on
your network. See “About Version Cue Server installation” on page 27.
When you start the server for the first time, you’ll be prompted to specify initial server settings, including a user
name and password, server name, and check in/out and synchronization settings. If you click the Advanced button,
you can set advanced options including privacy settings for the Version Cue project. See “Turn on and configure the
Version Cue Server” on page 28.
Configure the server further by specifying settings in Version Cue Server preferences and in Version Cue Server
Administration. See “Set Version Cue Server preferences” on page 29 and “Advanced Version Cue Server Administration tasks” on page 49.
2. Create a project and assign users
After you’ve set up and configured the Version Cue Server, you can create projects and assign users to them. By
default, projects you create in Version Cue are private. You change a project’s shared status at any time, and restrict
access to the project, by specifying that users log in when they access the project.
Create projects by using GoLive or the Version Cue Server Administration. To specify advanced project properties,
such as requiring user login and assigning user access permissions, you must use Version Cue Server Administration. See “Create projects” on page 33and “Advanced Version Cue Server Administration tasks” on page 49.
3. Add files to a project
Once you’ve created a project, add files to the project so users can check them out, make changes, and check them
back in. You can add multiple Adobe or non-Adobe files using any method of adding files to the Assets area of the
site window. See “Add files and folders to a project” on page 34.
Using Creative Suite 2 components with Version Cue CS3
You can use Acrobat 8 and Adobe Creative Suite 2 components with the Version Cue CS3 Server; however, there are
some differences to keep in mind.
• If you’re using Acrobat 8 or an Adobe Creative Suite 2 component to access Version Cue CS3-managed files, the
files must be part of a Version Cue CS2-compatible project. You can specify that a Version Cue CS3 project is
Version Cue CS2-compatible when you create it. (You cannot specify that a project is Version Cue CS2-compatible
after you create it.)
Note: Projects migrated from Version Cue CS2 to Version Cue CS3 remain compatible with Acrobat 8 and Adobe
Creative Suite 2 components.
• Acrobat 8 and Adobe Creative Suite 2 components can’t connect to a Version Cue CS3 Server if you enable SSL in
Version Cue Server Administration.
ADOBE GOLIVE 9 27
User Guide
• Adobe Creative Suite 2 components can’t work with Version Cue CS3 servers that are installed on the same
computer. Adobe Creative Suite 2 components can, however, connect to Version Cue CS3 Servers that reside on
the network.
• The Version Cue CS2 Workspace and the Version Cue CS3 Server can be installed and function on the same
computer simultaneously (and must be installed on the same computer if you want to migrate projects from
Version Cue CS2 to Version Cue CS3).
• If a Version Cue CS2 Workspace and a Version Cue CS3 Server are installed on the same computer, Adobe
Creative Suite 2 components work only with the Version Cue CS2 Workspace, because they can communicate
only with the port that the Version Cue CS2 Workspace uses.
• Version Cue CS3 doesn’t support alternates; however, Adobe Creative Suite 2 components can work with alternates in Version Cue CS2-compatible projects on a Version Cue CS3 Server. Adobe Creative Suite 3 components
cannot access alternates in a Version Cue CS2-compatible project on a Version Cue CS3 Server.
For help using Acrobat 8 with Version Cue CS2, see “Using Version Cue” in Acrobat 8 Help. For help using Adobe
Creative Suite 2 components with Version Cue CS2, see Version Cue CS2 Help.
See also
“Create and manage projects in Version Cue Server Administration” on page 45
“Migrate projects to the Version Cue 3.0 Server” on page 31
Working with the Version Cue Server
About Version Cue Server installation
Version Cue Servers store Version Cue projects and their related assets. When you perform a default installation of
GoLive 9, Version Cue installs the Version Cue client on your computer, but not the Server. You need to install the
Version Cue Server (available with CS3 components) on the computer on which you want to run Version Cue Server.
Keep in mind that when the Version Cue Server is installed on your computer, the server is available only if your
computer is turned on and networked to a shared workspace. This scenario is adequate for personal use or for file
sharing between individuals.
Alternatively, you can install the Version Cue Server on a dedicated computer accessible to others on your network,
so that Version Cue-managed assets are always available to a workgroup.
The Version Cue Server is installed in the Program Files/Common Files/Adobe/Adobe Version Cue CS3/Server
folder (Windows) or in the Library/Application Support/Adobe/Adobe Version Cue CS3/Server folder (Mac OS).
You cannot change this location.
To install the Version Cue Server on a dedicated computer, run the installer for Version Cue Server on the dedicated
computer, following the on-screen prompts.
Note: Consult the End-User License Agreement (EULA) for your software copy before installing the Version Cue Server
on a dedicated computer.
ADOBE GOLIVE 9 28
User Guide
Turn on and configure the Version Cue Server
To use a Version Cue Server, you’ll need to turn it on and configure initial settings. Once you’ve configured initial
settings, you can configure additional Version Cue Server settings in the Version Cue preferences and specify
advanced server settings (such as enabling SSL) in Version Cue Server Administration.
1 Open the Control Panel and double-click Adobe Version Cue CS3 (Windows) or click Adobe Version Cue CS3 in
System Preferences (Mac OS), and then click Start.
Version Cue starts Version Cue Server Administration and displays the Initial Configuration window.
2 In the Initial Configuration window, specify a system administrator password in the Password text box.
Note: Be sure to note the password you specify. If you forget the system administrator password, you’ll need to reinstall
the Version Cue Server.
3 Specify a name for the server in the Server Name text box.
4 Choose an option from the Server Visibility menu:
• To prevent other users in your network from seeing the server, choose Private. Private Version Cue Servers can be
accessed only from your local computer.
• To make the server visible to other users in your network, choose Visible To Others. (You must configure the
server to be visible to grant others access to projects on the server.)
Note: If Version Cue is installed on a Windows computer that uses a firewall and you want to share the server with
others, make sure that TCP ports 3703 and 5353 are left open. If you've enabled SSL for the Version Cue Server, also
leave port 3704 open. If Version Cue CS2 is installed on the same computer, also leave port 50900 open. For instructions,
see Windows Help.
5 Choose an option from the User Accounts menu: I
• To enable users to access the server without an existing user account, choose Automatic User Creation. If you
select this option, Version Cue creates a new user account without a password when a new user accesses the server.
If you enable Automatic User Account Creation and then subsequently enable LDAP support, LDAP users are
automatically imported when they access the server with their LDAP account name. Users imported in this fashion
are added to the Everyone group, given a user access level of None, and are not able to log into Version Cue Server
Administration. Use this technique to automatically assign LDAP users default access rights to projects on a Version Cue
server without having to explicitly import users.
• To specify that only named users, defined in Version Cue Server Administration, can access the server, choose
Manual User Creation.
6 Click Save & Continue to log in to Version Cue Server Administration and specify advanced server settings.
See also
“Version Cue Server Administration” on page 41
“Troubleshooting” on page 62
“Create and manage users” on page 43
“Working with the Version Cue Server” on page 27
ADOBE GOLIVE 9 29
User Guide
Set Version Cue Server preferences
You can configure many Version Cue Server settings in Version Cue preferences, such as the amount of RAM
available to Version Cue and the location of the Data folder. To configure advanced settings, such as enabling SSL,
changing the name of the Version Cue Server, specifying server log options, resetting user locks, or backing up the
server, you must use Version Cue Server Administration.
See also
“Advanced Version Cue Server Administration tasks” on page 49
Access Version Cue Server preferences
1 Do one of the following to access Version Cue preferences:
• In Windows, double-click the Version Cue icon
• In Mac OS, click the Version Cue icon
in the system tray at the lower-right of the screen.
in the menu bar at the top of the screen, and choose Version Cue CS3
Preferences from the menu.
• Open the Control Panel and double-click Adobe Version Cue CS3 (Windows) or click Adobe Version Cue CS3 in
System Preferences (Mac OS).
2 Click the Settings tab in the Adobe Version Cue CS3 dialog box.
Make the Version Cue Server visible
1 To grant others access to shared Version Cue projects on the server, choose This Server Is Visible To Others from
the Server Visibility menu. To hide the Version Cue Server from other users, choose This Server Is Private.
Note: If Version Cue is installed on a Windows computer that uses a firewall and you want to share the server with
others, make sure that TCP ports 3703 and 5353 are left open. If you've enabled SSL for the Version Cue Server, also
leave port 3704 open. If Version Cue CS2 is installed on the same computer, also leave port 50900 open. For instructions,
see Windows Help.
2 Click Apply.
Specify a workgroup size
1 From the Workgroup Size menu, choose the number of people who use the Version Cue Server on a typical day.
This setting controls how the Version Cue Server handles the potential load.
2 Click Apply.
Specify RAM
The default amount of allocated RAM (128 MB) is sufficient for workgroups of fewer than 10 people and projects
with fewer than 1000 assets. Allocate at least 256 MB of RAM for larger workgroups and projects with up to 1000
assets. Allocate at least 512 MB of RAM if you work with more than 1000 assets per project or more than 50 projects,
regardless of workgroup size.
1 In the Memory Usage text box, enter the amount of RAM that you want to make available to Version Cue (the
default is 128 MB).
2 Click Apply.
Keep the Version Cue icon visible
1 Select Show Version Cue CS3 Tray Icon (Windows) or Show Version Cue CS3 Status in Menu Bar (Mac OS) to
keep the Version Cue icon visible.
ADOBE GOLIVE 9 30
User Guide
2 Click Apply.
Turn Version Cue on when the computer starts
1 Select Turn Version Cue CS3 On When The Computer Starts.
2 Click Apply.
Change the location of the Data folder
The Data folder contains files that maintain the integrity of Version Cue projects, file versions, and metadata. You
can change the location of the Data folder; however, you cannot move it to a network volume. If you move the Data
folder to an external disk in Mac OS, make sure to deselect Ignore File Permissions in the disk’s Get Info dialog box.
Important: Shut down the Version Cue Server before you change the folder location. Do not attempt to move this folder
manually or edit any of the files in the Version Cue Data folder.
1 Do one of the following to access Version Cue preferences:
• In Windows, double-click the Version Cue icon
• In Mac OS, click the Version Cue icon
in the system tray at the lower-right of the screen.
in the menu bar at the top of the screen, and choose Version Cue CS3
Preferences from the menu.
• Open the Control Panel and double-click Adobe Version Cue CS3 (Windows) or click Adobe Version Cue CS3 in
System Preferences (Mac OS).
2 Click the Locations tab in the Adobe Version Cue CS3 dialog box.
3 Click the Choose button next to the current Data folder location, and select a new location for the folder. You must
choose a location on the computer (including external disks) where the Version Cue Server is installed.
4 Click OK.
5 Click Apply. If prompted, click Yes (Windows) or Restart (Mac OS) to restart the Version Cue Server.
Connect to remote servers
When you need to work on Version Cue projects that are located on a different subnet, you can use the IP address of
the computer to access the remote Version Cue Server, as long as it is configured to be visible to other users.
Version Cue Servers within your subnet that are configured to be visible are visible automatically.
1 In GoLive, choose File > Server > Connect to.
2 In the Connect To Server dialog box, type the IP or DNS address and port of the Version Cue Server, for example,
http://153.32.235.230. If you’re connecting to a server that is on the same system as a Version Cue CS2 workspace,
append the port number 50900 to the end of the Version Cue URL, for example, http://153.32.235.230:50900.
Display the Version Cue Server Administration login page to identify the Version Cue URLs that remote users and
WebDAV applications need to access the server.
3 Click OK.
A shortcut to the remote server is automatically included in your list of available Version Cue Servers.
Connect to a Version Cue Server using WebDAV
Although it is recommended to access Version Cue projects for GoLive sites using the site window (or using Adobe
Bridge if you are using Creative Suite components), you can use the Version Cue WebDAV Server URL to access
projects on a Version Cue Server.
ADOBE GOLIVE 9 31
User Guide
You can access a Version Cue Server by using a WebDAV-enabled application, such as a Microsoft Office application.
In Windows, specify a project on a Version Cue Server as a network place by specifying the project’s WebDAV URL.
In Mac OS, specify the project’s WebDAV URL by using the Connect To Server Command from the Finder. Before
attempting to connect, refer to your application’s documentation on using its WebDAV features.
❖ Enter the Version Cue WebDAV URL, the port number (3703, or 50900 if you’re connecting to a server that is
running on the same system as a Version Cue CS2 workspace), “webdav,” and the project name. For example:
http://153.32.235.230:3703/webdav/project_name
Migrate projects to the Version Cue 3.0 Server
If you currently use Version Cue CS2, you need to migrate your projects to Version Cue CS3. When you migrate
Version Cue CS2 projects to Version Cue CS3, users assigned to those projects are also migrated.
You cannot migrate Version Cue CS2 projects to Version Cue CS3 on Intel-based Macintosh computers.
Before migrating projects, ask all users to synchronize their assets so project data is up to date.
1 Locate the folder “com.adobe.versioncue.migration_2.0.0” on the computer on which Version Cue CS3 is
installed and copy it to the Version Cue CS2 Plugins folder.
2 Restart Version Cue CS2.
3 Log in to Version Cue CS3 Server Administration.
4 Click the Advanced tab, and then click Import Version Cue CS2 Data.
5 Enter a Version Cue CS2 administrator login and password, and click Log In.
6 Select the project you want to migrate, and click Migrate.
Note: If the Version Cue CS2 project has the same name as a project that exists on the Version Cue CS3 Server,
Version Cue will append a number to the end of the Version Cue CS2 project name (e.g., Test Project (2)). If a
Version Cue CS2 user has the same user name as an existing user on the Version Cue CS3 Server, Version Cue will use
the existing Version Cue CS3 user account.
7 When Version Cue Server Administration displays the confirmation page, click End.
8 Stop the Version Cue CS2 workspace.
9 Uninstall Version Cue CS2.
10 Restart the Version Cue CS3 Server. This resets the port to allow access from both Adobe Creative Suite 2 and
Adobe Creative Suite 3 components.
See also
“Log in to Version Cue Server Administration” on page 42
“Using Creative Suite 2 components with Version Cue CS3” on page 26
Shut down or restart the Version Cue Server
When you shut down the Version Cue Server, you disable access to the Version Cue projects hosted on that server.
ADOBE GOLIVE 9 32
User Guide
Each time you restart the Version Cue Server, it performs an integrity check and makes repairs, if necessary. To
ensure best performance, restart the Version Cue Server weekly so that it can perform the integrity check and make
repairs.
1 Do one of the following to access Version Cue preferences:
• In Windows, double-click the Version Cue icon
• In Mac OS, click the Version Cue icon
in the system tray at the lower-right of the screen.
in the menu bar at the top of the screen, and choose Version Cue CS3
Preferences.
• Open the Control Panel and double-click Adobe Version Cue CS3 (Windows) or click Adobe Version Cue CS3 in
System Preferences (Mac OS).
2 Click the Settings tab in the Adobe Version Cue CS3 dialog box.
• To shut down the Version Cue Server, click Stop. When prompted, click Yes (Windows) or Shut Down (Mac OS).
• To restart the Version Cue Server, click Stop, and then click Start.
• To automatically turn on Version Cue when the computer starts, select Turn Version Cue CS3 On When The
Computer Starts.
3 Click OK (Windows) or Apply Now (Mac OS).
You can also restart the Version Cue Server by clicking Restart Server in the Advanced tab of Version Cue Server
Administration.
See also
“Advanced Version Cue Server Administration tasks” on page 49
Working with Version Cue projects
About Version Cue projects
Version Cue projects are stored on Version Cue Servers. Projects store the master copies of files added to the project,
as well as file versions and other file data, such as comments and version dates. When the Version Cue Server is
specified to be visible and projects are shared, multiple users can access projects, which can contain both Adobe and
non-Adobe files.
You can create and administer projects only if you’ve been assigned appropriate permissions in Version Cue Server
Administration.
Note: Creative Suite 2 components and Acrobat 8 can’t connect to a Version Cue CS3 Server that uses SSL.
See also
“About local project files” on page 35
“About versions” on page 39
“Create and manage users” on page 43
ADOBE GOLIVE 9 33
User Guide
Create projects
You can create projects by using Version Cue Server Administration, which provides options for specifying advanced
project properties. (For information about creating a project in Version Cue Server Administration, see “Create and
manage projects in Version Cue Server Administration” on page 45.)
You can also create projects by creating a new site in GoLive and connecting it to Version Cue. You must have project
creation permissions to be able to create projects in Version Cue.
If you create a shared project, make sure that the Version Cue Server is set to be visible to others. If the server is
private, other users won’t be able to access the shared project.
See also
“Create and manage users” on page 43
Open a project
You can open projects that are stored on a local Version Cue Server or open shared projects on a remote server that
is configured to be visible to others.
See also
“Set Version Cue Server preferences” on page 29
“Connect to remote servers” on page 30
Open a project in GoLive
In GoLive, you cpen the Version Cue project when you open a site that uses Version Cue and connect to the server.
Edit project properties
You can edit the properties of a project, including lock protection, assigned users, or required log in to the project,
using Version Cue Server Administration instead.
See also
“Open a project” on page 33
“About local project files” on page 35
“Create and manage projects in Version Cue Server Administration” on page 45
Change a project’s shared status
By default, Version Cue CS3 projects are private; however, you can change a project’s shared status at any time. If you
change a project’s status to shared, make sure that the Version Cue Server is set to be visible to others. If the server is
private, other users won’t be able to access the shared project.
You can use Version Cue Server Administration to require login for shared projects, thus restricting access to specific
users.
See “Set Version Cue Server preferences” on page 29 for more information.
ADOBE GOLIVE 9 34
User Guide
See also
“Open a project” on page 33
“Create and manage projects in Version Cue Server Administration” on page 45
Change the location of project backups
You must shut down the Version Cue Server before you change the backup folder location. Do not move this folder
manually.
1 Shut down the Version Cue Server (see “Shut down or restart the Version Cue Server” on page 31.
2 Do one of the following to access Version Cue preferences:
• In Windows, double-click the Version Cue icon
• In Mac OS, click the Version Cue icon
in the system tray at the lower-right of the screen.
in the menu bar at the top of the screen, and choose Version Cue CS3
Preferences from the menu.
• Open the Control Panel and double-click Adobe Version Cue CS3 (Windows) or click Adobe Version Cue CS3 in
System Preferences (Mac OS).
3 Click the Locations tab in the Adobe Version Cue CS3 dialog box.
4 Click the Choose button next to the Backup Folder location, and select a new location for the folder. You must
choose a location on the computer on which the Version Cue Server is installed.
5 Click OK (Windows) or Apply Now (Mac OS). If prompted, click Yes (Windows) or Restart (Mac OS) to restart
the Version Cue Server.
Add files and folders to a project
To save versions of a file, share the file with your workgroup, and take advantage of Version Cue file management,
you must add the file to a Version Cue project. You can add both Adobe and non-Adobe files to Version Cue projects.
Add files to your GoLive site and then synchronize the files to the Version Control server.
See also
“Open a project” on page 33
Delete projects
You can delete a Version Cue project in Version Cue Server Administration.
Note: Remove file locks to remove the Checked Out status of files designated as such. See “Advanced Version Cue Server
Administration tasks” on page 49.
Deleting a project permanently erases all of its files (including versions) and folders from the Version Cue Server,
and erases shortcuts to the project and the local project files on your computer. (The local project files created on
other users’ computers are not deleted until they disconnect from the deleted project.)
1 In Version Cue Administration, choose the Projects tab.
2 Select the project you want to delete and click the Delete button.
ADOBE GOLIVE 9 35
User Guide
See also
“Open a project” on page 33
“Create and manage projects in Version Cue Server Administration” on page 45
Working with files in Version Cue
About local project files
When you work in files from a Version Cue project, you’re editing a local copy of the file in the project folder on your
hard drive, not the master file on the Version Cue Server, which remains protected and untouched. Local project files
also allow you to work on a file simultaneously with others.
As you work, use the Save command to save changes periodically and update your local project file. A new version
is added to the master file on the Version Cue Server when you choose the Check In command, or when you
synchronize your files with the Version Cue Server.
See also
“About Version Cue projects” on page 32
“About versions” on page 39
“Synchronize files” on page 41
File statuses
Files that are managed by Version Cue are marked with a status icon that describes the state of the file on the Version Cue
Server. You can view a file’s status while viewing the site window for a site that is configured for Version Cue.
If you don’t see the Version Cue status in the site window, right-click the status bar and choose Version Status.
A file can have more than one status at the same time.
Open
The file is open on your computer. The Open status is indicated only for files on your computer.
You are editing the file. Version Cue assigns this status when you make an edit that changes
the file’s content. You can mark a file as checked out before you edit it to alert other users that you intend to make
changes to the content.
Checked Out By Me
Checked Out By <user name>
Another user is editing the file and has not yet saved a new version.
Synchronized
The latest known version of the file is available for editing and you have a local copy of it on your
computer. Version Cue assigns this status when you check in a version of the file you’re editing, or when you
synchronize a project.
Conflicting
There is a version conflict, or both you and another user are editing the file.
The file in the local project folder is the only copy known to Version Cue and has not been synchronized with the Version Cue Server. This status may be applied, for instance, if a file is saved in an existing project for
the first time while the Version Cue Server is offline. You can edit the file, but it’s important to check in or
synchronize the file after you save your changes.
New File
ADOBE GOLIVE 9 36
User Guide
A local project file exists, but there is a newer version of the file on the Version Cue
Server. This status indicates that it will take a few moments to download an up-to-date local project file before you
can edit the file.
Newer Version On Server
There is a local project file, but the Version Cue Server is offline, or you are offline and not able
to access the server. There is no way of checking whether the local project file is synchronized with the latest version
on the Version Cue Server. You can edit an offline copy and save these changes; however, you must check in a version
or synchronize the file when the Version Cue Server comes back online.
Server Offline
The file or folder has been deleted from the project, but not yet permanently erased. (You can restore a
deleted file or folder.)
Deleted
See also
“Editing and synchronizing offline files” on page 40
“Delete files or folders from a project in GoLive” on page 38
“Edit files checked out by another user” on page 37
Open a file in a project
You can open files only from projects that are stored on a local Version Cue Server or from shared projects on a
remote server that is configured to be visible to others. In GoLive, you can synchronize the file in the site window to
ensure you have the latest and then open the file from the site window.
See also
“Open a project” on page 33
“Set Version Cue Server preferences” on page 29
Save changes to a local project file
If you want to save changes, but aren't ready to save a new version as you edit a file you have opened from a
Version Cue project, you can use the File > Save command to save your changes to the local project file on your
computer. Until you save a new version to the shared Version Cue Server, these changes won’t be available to any
other user. You can also close the file once you save changes, and then reopen the file and check in a version later.
❖ To save changes to your local project file, choose File > Save.
See also
“Check in versions” on page 39
Remove local project files
You can remove files that are not checked out by you from your local project folder if you want to free up more space
on your hard drive, for example. Removing local project files does not affect checked in files that are stored on the
Version Cue Server. Version Cue creates new local project files the next time you synchronize the project.
ADOBE GOLIVE 9 37
User Guide
Edit files checked out by another user
If someone is editing a local copy of a master file, Version Cue changes the file’s status to Checked Out to inform you
that the file is already checked out when you try to edit your local project file, and allows you to decide whether or
not to continue working with the file.
When finished with the file, both users can save a new version of the file to the Version Cue Server. Version Cue
alerts all current users of the file about the presence of a new version in the Version Cue Server and gives them the
option of downloading the latest version or continuing their edits.
Use Version Cue Server Administration to assign lock protection to a Version Cue project. Only the first user who
edits an available file in a lock-protected project can check in a version of that file to the Version Cue project. See
“Create and manage projects in Version Cue Server Administration” on page 45
Edit a file checked out by another user
1 If you open a file that is checked out, choose one of the following options when the checked out alert appears:
Cancel Returns you to the open document without checking in a version.
Continue Lets you edit a version of the project file without yet overwriting the changes made in another user’s
version of the same file (Version Cue will prompt each user to save a new version of the file).
Important: If you continue working with the document and make a change to the content, you could create a version
that conflicts with the other user’s version.
2 If the project doesn’t have lock protection applied to it, you can save a new version of your edits. If you check in
your version, Version Cue updates the master file in the Version Cue Server with the new version. (Version Cue
displays an alert to the other user to note that a newer version of the file has been created.)
At any point, you can choose to close the document and discard any changes you made. If another user creates a new
version of a file that you have open or that is still marked as Checked Out, Version Cue prompts you to update your
document with the latest version when you open it or attempt to make changes to it, or when you bring the document
window frontmost in a group of documents.
You might find it helpful to view versions of the file by highlighting the file in the site window and choosing Site >
Version Control > Show Versions from the application window menu.
Move and copy Version Cue files
When you copy or move a file, Version Cue copies or moves only the most current version.
See also
“Open a project” on page 33
Copy Version Cue files
❖ Do one of the following:
• Ctrl-drag (Windows) or Option-drag (Mac OS) the files to a different location.
• Drag the files from one project to another (if you drag the files to a different location in the same project, they are
moved).
ADOBE GOLIVE 9 38
User Guide
Move Version Cue files
❖ Drag a file to a different location in the same project (if you drag the files from one project to another, they are
copied).
Placing Version Cue files
While you’re working with a Version Cue project, you can add a Version Cue file to a document just as you would
place a non-Version Cue file—by using the Place command.
Always add assets to a Version Cue project before placing them in a Version Cue-managed file. When you place a
file that is not managed by Version Cue into a file that is, you cannot keep track of the placed asset's versions or
status.
The In & Out Links panel displays additional information about placed files from Version Cue projects, identifying
whether a linked file is being edited. You can also use the In & Out Links panel to determine whether the linked file
needs to be updated to a newer version from the Version Cue Server.
Replace a placed file with a previous version
You may find yourself working with multiple versions of a document that includes a link to a file with multiple
versions. If you decide to promote an earlier version of the document that includes a link to an earlier version of the
file, Version Cue links to the current version of the file in the promoted document.
Delete files or folders from a project in GoLive
Deleting a file or folder is a process that safeguards against accidental deletions. The first step is deleting the file or
folder and giving it Deleted status by moving it to the site trash. The next step is to synchroize the files in the Assets
area of the site window. When the Synchroize with Version Cue System dialog box appears, ensure that file you want
to delete is marked for deletion from the Version Cue Server before clicking OK. The last step is permanently deleting
and erasing the file or folder by emptying the site trash in the site window.
Note: Any user with appropriate privileges can delete files and folders unless the files or folders are marked as Checked
Out. If you’re in a workgroup and a user is editing a file that you need to delete, you can reset the file’s lock by using
Version Cue Server Administration.
See also
“Open a project” on page 33
“About local project files” on page 35
“Delete projects” on page 34
“Advanced Version Cue Server Administration tasks” on page 49
Restore a deleted file or folder
1 In GoLive, open the project containing the file or folder that you want to restore.
2 Click Project Trash in the site window, and drag the file you want to restore to the Assets area of the site window.
3 Synchronize the files in Assets.
The file or folder is restored to its original location in the Version Cue project.
Note: To restore a file in a previously deleted folder, you must first restore the folder. Doing so restores the folder and all
its contents.
ADOBE GOLIVE 9 39
User Guide
Version Cue versions
About versions
Versions track changes to a file: each version is a snapshot of the file at a particular point in time. When you edit a
file from the Version Cue Server, you’re editing the last version saved to the Version Cue Server. When you’re ready
to save changes to the Version Cue Server, check in the file to create a version. You don’t have to check in a file every
time you save your changes: check in a file only when you want to create a version, or snapshot, of the file.
You can save comments with versions to help you track changes. You can also promote a previous version to be the
current version, letting you recover from unwanted changes.
You can compare multiple versions of the same file, and delete versions as they become obsolete or to save disk space.
See also
“About local project files” on page 35
“Save changes to a local project file” on page 36
Check in versions
To check in a new version of a file, use the Check In command, which saves your changes to the Version Cue Server
and removes the Checked Out status from the file.
When you check in a version, Version Cue transfers and saves only the changes you’ve made to the file. Refer to “To
check in a file” on page 71 for more information about checking in files to create versions.
See also
“Open a project” on page 33
View, promote, and delete versions
Versions are treated as separate files, which you can access through the Versions dialog box in all GoLive and
Version Cue-enabled Creative Suite components. The Versions dialog box displays thumbnails of all file versions
(numbered sequentially) with comments, dates, and the login name of the user who created the version.
If you want to compare versions in detail, you can choose to view each version in its native application.
If you want both a previous version and the current version to be available for simultaneous use in a project, save
the previous version as a separate asset.
For more information about working with versions in GoLive, see “To view versions in GoLive” on page 59.
See also
“To view versions in GoLive” on page 59
“Open a project” on page 33
“Advanced Version Cue Server Administration tasks” on page 49
ADOBE GOLIVE 9 40
User Guide
View versions
1 Select the file for which you want to view version in the site window and then choose Site > Version Control >
Show Versions.
Versions appear in the Versions dialog box.
2 If you wish, select a version and click the View Versions button to view the version in its native application.
Promote a version
Promoting a previous version saves a copy of the previous version as the current version. This process keeps the
previous version intact, should you decide to return to it again in the future. Any changes made between its creation
and promotion don’t appear in the new current version.
1 In the Versions dialog box, select the version you want to promote, and click Promote To Current Version.
2 Type a version comment in the Check In dialog box and click Continue.
Delete a version
❖ In the Versions dialog box, select the version you want to delete and click Delete.
Note that the remaining versions are not renumbered.
Using Version Cue Server Administration, you can delete multiple previous versions of all files in a project simultaneously. By using this method, you can retain past versions by date or by number of versions to keep. See “Create and
manage projects in Version Cue Server Administration” on page 45.
Editing and synchronizing offline files
About offline files
When you need to work on files from a Version Cue project while the Version Cue Server is unavailable, you can edit
local project files on your computer. When the Version Cue Server is available again, you must synchronize your files
with the Version Cue Server to save your latest version to the Version Cue Server. You can synchronize an entire
project, or just a folder or a file in the project.
To prepare to work with offline files, it’s best to first synchronize the entire Version Cue project while the server is
still online to ensure that you have local project files. You can then edit the offline files and synchronize them once
the server is back online.
For more information about working offline with GoLive files, see “Working offline in a Version Cue project” on
page 60.
Edit offline files
You can edit offline files from an unavailable Version Cue Server by opening offline copies. If you know that you’ll
be working with an offline file, you should first check out the file before going offline.
See also
“Open a project” on page 33
ADOBE GOLIVE 9 41
User Guide
Edit local project files from an offline project
1 You should first check out the file in Version Cue so that later version conflicts do not arise with other users.
2 Choose Site > Version Control > Work Offline.
3 When you finish editing the file, choose File > Save to save the changes to the local project file. When the
Version Cue Server becomes available again, synchronize your files.
Synchronize files
If you’ve worked with offline files, you must synchronize your files with the Version Cue Server to save your latest
version to the Version Cue Server. You may also want to synchronize if another user has saved a newer version of a
file to the Version Cue Server.
Refer to “To synchronize files” on page 59 for information about synchronizing GoLive files.
See also
“Open a project” on page 33
File conflict options
If the master file on the Version Cue Server is newer than your local project file and you’ve made changes to the local
project file, a File Conflict dialog box appears with the following options:
Apply The Following Action To All Subsequent Conflicts Automatically applies the selected option every time there
is a file conflict.
Check In Saves your local project file as a new version to the Version Cue Server.
Skip This File Prevents the most recent version from the Version Cue Server from being downloaded. (This option
also prevents a version of your local project file from being saved to the server.) Choose this option only if you want
to keep your edits and disregard the other changes in the master file.
Version Cue Server Administration
About Version Cue Server Administration
Use Version Cue Server Administration to create, edit, and delete projects; manage user and group access; view logs
and reports; initiate and manage web-based PDF reviews; and perform advanced server administration tasks such
as deleting file versions, removing file locks, configuring plug-ins, and backing up the Version Cue Server.
The Version Cue Server Administration web page is divided into four tabs. Each tab contains controls that enable
you to configure Version Cue. You can access Version Cue Server Administration from the Version Cue icon, from
a web browser, or from any Version Cue-enabled Creative Suite component.
ADOBE GOLIVE 9 42
User Guide
A
B
Users/Groups and Projects tabs of Version Cue Server Administration
A. Tabs B. Controls
Version Cue Server Administration software requirements
Version Cue Server Administration for Windows requires the Java Runtime Environment (JRE) 1.5 or later to
import projects from folders. You can download the Java Runtime Environment from the Sun Microsystems Java
website at www.java.com/en/download/manual.jsp.
Version Cue Server Administration for both Windows and Mac OS requires Adobe Flash Player 9 for user and group
administration. When you first create users and groups, Version Cue will prompt you to install Flash Player.
Log in to Version Cue Server Administration
When you turn on the Version Cue Server for the first time, Version Cue automatically creates a default login name
(system) with administrator privileges and asks you to specify a password. This login name and password let you log
in to Version Cue Server Administration.
Other users with administrator privileges can also log in to Version Cue Server Administration.
See also
“Turn on and configure the Version Cue Server” on page 28
Log in from the Version Cue icon
1 Do one of the following:
• (Windows) Right-click the Version Cue icon
in the system tray and choose Server Administration.
• (Mac OS) Click the Version Cue icon at the top of the screen, and then click Server Administration.
2 Type your Version Cue login name and password in the text boxes, and click Log In.
Log in from a web browser
1 In a web browser, type the IP or DNS address of the computer on which the Version Cue Server is installed.
Precede the address with http:// and follow it with a colon and the default port number, for example,
http://153.32.235.230:3703 (IP) or http://myserver.mycompany.com:3703 (DNS). The default port number is 3703
(50900 if you’re connecting to a Version Cue CS3 server that’s installed on the same system as a Version Cue CS2
workspace).
Note: If the server is installed locally, type http://localhost:3703.
ADOBE GOLIVE 9 43
User Guide
2 A browser window displays the Adobe Version Cue Server Administration login page. Type your Version Cue
login name and password in the text boxes, and click Log In.
Create and manage users
Only users who have been granted System Administrator access privileges can create, import, export, and edit
Version Cue users.
If you didn’t enable automatic user account creation when you turned on the Version Cue Server, you need to create
Version Cue user names to let other users access projects on the Version Cue Server. To restrict the Version Cue
projects that a user can access, you can require login for the project and assign user names and permissions to that
project.
Adobe Flash Player 9 is required to create and manage users in Version Cue Server Administration. When you first
create users, Version Cue will prompt you to install Adobe Flash Player 9.
See also
“Create and manage projects in Version Cue Server Administration” on page 45
Create, edit, or delete users
Create users to let them access projects on the Version Cue Server.
1 Click the Users/Groups tab in Version Cue Server Administration, and then click New in the Users area.
2 In the New User dialog box, enter a user name, login, password, and choose the level of access to give the user
from the Admin Access Level menu:
• None denies the user access to Version Cue Server Administration.
• User grants standard access to Version Cue Server Administration. Users with standard access can create new
projects (if also granted project creation permissions) and modify projects they have created.
• System Administrator grants full access to all tasks in Version Cue Server Administration.
3 Select Project Creation to enable the user to create new Version Cue projects.
4 (Optional) Type a phone number, an e-mail address, and comments in the remaining text boxes. Make sure to
enter an e-mail address if the user will participate in Version Cue PDF reviews.
5 Click Save.
To edit a user, select the user, click Edit, change settings in the Edit [User Name] dialog box, and click Save. To delete
a user, select the user, and click Delete.
Create, edit, or delete a user group
Create user groups to group users with similar permissions. For example, create a user group named “Designers” to
group all users who are contributing artwork to a design project. The default group “Everyone” contains all users in
the system.
1 Click the Users/Groups tab in Version Cue Server Administration.
2 Click New in the Groups area.
3 In the New Group dialog box, enter a name for the group. Optionally, enter a comment, and then click Save.
4 Add users to the group by dragging them from the Users area to the new group.
ADOBE GOLIVE 9 44
User Guide
To change the name of a group, select it, click Edit, and enter a new name in the Groupname box. To delete a group,
select it, and click Delete.
Assign permissions to users and groups
You can assign permissions to individual users, or to a group of users. Permissions are different from access levels:
Access levels control access to Version Cue Server Administration, while permissions control access to the
Version Cue Server, projects, and Version Cue PDF reviews. Note that permissions you assign to users or groups may
be overwritten by permissions you assign to users for specific projects.
1 Do either of the following:
• To assign permissions to a user, select the user in the Users/Groups tab of Version Cue Server Administration.
• To assign permissions to all users in a group, select the group in the Users/Groups tab of Version Cue Server
Administration.
2 Select Allow or Deny for each permissions category in the Global Permissions section:
To allow or deny all permissions, choose Allow or Deny from the Presets menu. To display the default permissions
assigned to a user or group, select the user or group and click Effective Permissions.
• Read allows viewing projects and the files, versions, and file information within them.
• Write allows adding files to a project and saving versions and file information.
• Delete allows deleting projects or the files within them.
• Review Initiator allows initiating PDF reviews in Version Cue Server Administration (see “Start a Version Cue
PDF review” on page 52).
• Project Administration allows administering projects (for example, duplicating, backing up, exporting, and
deleting projects).
3 Click Save Permissions.
Import users from an LDAP directory
LDAP (Lightweight Directory Access Protocol) is a method of querying directory systems that contain information,
such as user names and passwords, about users. You can import users from an LDAP server and map their user
attributes (such as user name and password) to Version Cue user attributes. Users that you import from an LDAP
server appear with a user icon that is different from the typical user icon.
Note: If you enabled Automatic User Account Creation when you configured the Version Cue Server and then subsequently enable LDAP support, LDAP users are automatically imported when they access the server with their LDAP
account name. Users imported in this fashion are added to the Everyone group, given a user access level of None, and
are not able to log into Version Cue Server Administration. Use this technique to automatically assign LDAP users
default access rights to projects on a Version Cue server without having to explicitly import users.
1 Click the Advanced tab in Version Cue Server Administration.
2 Click LDAP Preferences.
3 Click Enable LDAP Support, and then enter information about the LDAP server:
• Enter the server name in the LDAP Server text box.
• Enter the server port in the Server Port text box.
• Enter the starting point in the LDAP hierarchy for the directory on the LDAP server in the Searchbase text box.
ADOBE GOLIVE 9 45
User Guide
• If the LDAP server requires authentication, enter a user name and password in the Username and Password text
boxes.
• Select Use LDAP with SSL if you want to connect via SSL to an SSL-enabled LDAP server.
• Enter LDAP attributes in the User-Id, Displayname, E-Mail, Info, and Phone text boxes. Version Cue maps these
to the corresponding Version Cue Server attributes.
• To specify that the Version Cue Server periodically synchronizes with the LDAP server, select Enable Automatic
Synchronization and specify a synchronization period.
4 Click Save.
5 In the Users/Groups tab of Version Cue Server Administration, click Click To Maximize in the Users area.
6 Click Import External Users.
7 Type the first few letters of the LDAP user name or names you want to import in the External User dialog box.
(Version Cue auto-completes the entry.)
8 Select the name or names, and click Add.
9 Repeat steps 7 and 8 until you’ve added all desired LDAP users, and then click Import User.
Export a list of users
To add a set of users to another Version Cue Server, export a list of users and then copy it to the UsersExport folder
in the Version Cue application folder of the other computer with a Version Cue Server. You can then use the export
list to import users.
1 Click the Users/Groups tab in Version Cue Server Administration.
2 Choose Click to Maximize in the Users area.
3 Click Export Users.
4 Select the users you want to export (Shift-click to select contiguous users, Ctrl-click to select noncontiguous
users).
5 Type a name for the list in the filename text box. Optionally, type remarks in the Comments text box.
6 Click Export.
The location of the user list appears under the Export Users heading. To import this list into another Version Cue
Server, copy this file into the destination server’s Data/UsersExport folder in the Version Cue application folder.
Import users from a list
1 Click the Users/Groups tab in Version Cue Server Administration and then click Import Users.
2 Click the user list that you want to import.
3 Select the check box next to each user name that you want to import, or select the check box next to the User Name
column label to select all user names.
4 Click Next.
Create and manage projects in Version Cue Server Administration
You can create a new blank Version Cue project, a project from files in a folder on the computer where the
Version Cue Server is installed, or a project from a WebDAV or FTP server. Once you’ve created a project, you can
edit its properties in the Projects tab at any time.
ADOBE GOLIVE 9 46
User Guide
Create a new Version Cue project
1 Click the Projects tab in Version Cue Server Administration, and then click New:
• Click Blank Project to create an empty Version Cue project.
• Click Import From Folder to create a project that contains files from a folder of files on the hard drive.
• Click Import From FTP Server or Import From WebDAV Server to import a website or to import files from a
folder on an FTP or WebDAV server.
2 Type a project name in the New Project Name text box.
3 Specify Version Cue project properties.
4 Click Create (if you’ve created a new blank project) or Next (if you’ve created a project from a folder of files on an
FTP or WebDAV server or on your hard drive).
5 If you chose to import a project from a folder, do the following, and then click Import:
• If the content you’re importing is a website, select Import Folder As A Website.
• To specify the folder to import from, click Browse and select a folder.
Note: Don’t navigate away from Version Cue Server Administration after you click Import. If you navigate away before
all files have been imported into the project, Version Cue will create the project, but the project won’t contain all files.
6 If you chose to import a project from an FTP or WebDAV server, do the following, and then click Import:
• If the content you’re importing is a website, select Import FTP Directory As A Website or Import WebDAV
Directory As A Website.
• In the FTP Server or WebDAV Server text box, specify the server from which to import files, and type the port
number in the Port text box.
• To specify a folder, click Browse and select a folder.
• If a user name and password are required to access the server, type them in the User Name and Password boxes.
• To use a proxy server to connect to the server, select Use Proxy.
• To use passive mode to connect to the server, select Use Passive Mode.
7 If you chose to require login for the project, click Assign Permissions and assign permissions to users (see “Assign
user permissions,” below).
Version Cue project properties
Specify these options when creating or editing Version Cue projects in Version Cue Server Administration:
Share This Project With Others Users can be on your subnet, or they can be given the Version Cue Server IP or DNS
address and port number to gain access to the Version Cue Server.
Require Login For This Project Ensures that only users with a Version Cue login ID and password have access to the
project.
Note: If you select this option after other users have already accessed the project without being authenticated, those users
can still access the project without logging in to it. Make sure that you change their privileges as needed in the project’s
list of assigned users.
Enable Lock Protection For This Project Restricts file versioning to sequential versions. Only the first user to edit an
available file in a lock-protected project can check in a version of that file to the Version Cue project. Other users
can’t check in a version until the first user saves a version and closes the file or reverts to the project version of the
file and closes it—other users must save their changes as completely new files with their own version thread.
ADOBE GOLIVE 9 47
User Guide
Maximize Compatibility With CS2 Applications And Acrobat 8 Creates a project that uses the Version Cue CS2
project structure so that Adobe Creative Suite 2 or Acrobat 8 users can work with Version Cue CS3 projects.
Comments Stores any remarks you type about the project.
Assign user permissions
If you chose to require login when creating a project, you need to assign permissions to users to define their access
to the project.
1 In the Assign Permissions area of Version Cue Server Administration, select the user or the group that contains
the users for which you want to assign permissions.
2 Select Allow or Deny for each permissions category in the Permissions for [user name] section:
To allow or deny all permissions, choose Allow or Deny from the Presets menu. To display the effective global and
project permissions assigned to a user or group, select the user or group and click Effective Permissions.
• Read lets the user see files, versions, and file information in the project.
• Write lets the user create files, versions, and file information in the project.
• Delete lets the user delete files from the project.
• Review Initiator lets the user initiate PDF reviews in Version Cue Server Administration (see “Start a Version Cue
PDF review” on page 52).
• Project Administration lets the user administer projects (for example, duplicating, backing up, exporting, and
deleting projects).
3 Click Set Permissions.
Duplicate a Version Cue project
Duplicate a project to start a new project with the same users and privileges. Version Cue duplicates the folder
hierarchy within the project structure.
1 Click the Projects tab in Version Cue Server Administration.
2 Select the check box next to the project you want to duplicate, and click Duplicate.
3 In the Duplicate Project page, type a unique name for the project.
4 Edit project properties, and click Duplicate.
Delete a Version Cue project
1 Click the Projects tab in Version Cue Server Administration, and do one of the following:
• To delete one or more projects, select the check box next to each project you want to delete.
• To delete all listed projects, select the check box next to the Project Name column label.
2 Click Delete. The Delete Project page appears.
3 Select User Locks Will Be Ignored to delete the project even if a user has files checked out.
4 Click Delete.
Export a Version Cue project to your computer or to an FTP or WebDAV server
You can export the most recent version of all project files from the Version Cue Server. Export if you want to move
files from one host computer (or server) to another, create a package of the most recent files for output, or simply
create an archive of the final versions. Version Cue still manages projects moved between computers.
ADOBE GOLIVE 9 48
User Guide
Note: If you want to move a project, first decide whether to back it up (so that all past versions are also moved) or to
export it (so that only the current versions of project files are moved).
1 Click the Projects tab in Version Cue Server Administration. Select the check box next to the project you want to
export, and click Export.
2 In the Export Project page, choose a protocol by which to export the project.
3 Do one of the following:
• If you chose Export Project To Folder in step 2, specify the folder to which you want to export the project.
• If you chose Export Project To FTP Server or Export Project To WebDAV Server in step 2, specify the server
address in the Server Address text box, specify a folder in the Directory text box, and enter a user name and
password (if required). To use a proxy server to connect, select Use Proxy. If you are connecting to the server
through a firewall, or if you specified a port other than 21, select Use Passive Mode. (This is an option only if you
choose FTP in the Protocol menu.)
4 Click Export.
Back up and restore projects
When you back up a Version Cue project, Version Cue Server Administration creates backups of all the information
in a Version Cue project, including all versions of all files in the project. Use a project backup to move a project from
one Version Cue Server to another while retaining all the versions of that project. You can restore a backup copy that
represents a Version Cue project as it was on a specific date. Restored project backups do not replace the original
Version Cue project.
You can customize a backup configuration for your projects in the Version Cue project preferences. You can back up
a project using a new configuration or an existing configuration. A backup configuration includes the ability to
schedule a recurring backup for the project.
By default, project backups are stored in the Program Files/Common Files/Adobe/Adobe Version Cue
CS3/Server/Backups folder (Windows) or the Library/Application Support/Adobe/Adobe Version Cue
CS3/Server/Backups folder (Mac OS).
Back up a Version Cue project
1 Click the Projects tab in Version Cue Server Administration.
2 Click the check box next to the project name, and then click Back Up.
3 In the Backup Name text box, accept the backup name, or type a new name.
4 Choose the project components that you want to back up: Project Content (which is always selected) to back up
files, Project File Versions to back up all versions of the files, Project Metadata to back up embedded information
entered in Adobe Creative Suite components, and Users/User Assignments to back up information about the users
and their project privileges.
5 Click Back Up.
Restore a Version Cue project backup copy
1 Click the Projects tab in Version Cue Server Administration.
2 Click Project Backups.
3 Select the backup that you want to restore.
ADOBE GOLIVE 9 49
User Guide
4 In the New Project Name text box, type a name that is different from those of other projects in the Version Cue
Server.
5 Do any of the following, and then click Restore:
• To retain the list of users that were assigned to the project, select Restore Users.
• To retain the same privileges for each assigned user, select Restore User Assignments.
• To add remarks, type them in the Comments text box.
Create a new backup configuration
When you create a new configuration, it becomes the default for the project.
1 Click the Projects tab in Version Cue Server Administration.
2 Click the project for which you want to create a new backup configuration.
3 Click Backup Configurations, and then click New.
4 Type a name for the backup configuration in the Backup Name text box.
5 Select what to back up in the Include list of options: Project Content (which is always selected) to back up files,
Project File Versions to back up all the versions of the project, Project Metadata to back up embedded information
entered in Adobe Creative Suite components, and Users/User Assignments to back up information about the users
and their project privileges.
6 (Optional) Add remarks to the backup file in the Comments text box.
7 Click Schedule, and choose an option from the Repeat menu if you want backups to occur automatically (choose
Don’t Repeat if you want to back up the project manually).
8 Click Save.
Advanced Version Cue Server Administration tasks
Perform advanced Version Cue Server Administration tasks, such as backing up the server, specifying proxies, and
enabling SSL, in the Advanced tab of Version Cue Server Administration.
See also
“Change the location of the Data folder” on page 30
View Version Cue Server and plug-in information and log files
You can display the Version Cue Server version, name, Java version, database version, Version Cue URL (IP or DNS
address), and WebDAV URL with Version Cue Server Administration.
You can also view the Version Cue Server log file, which tracks all server operations according to the level of detail
you specify. Log files are saved in the Logs folder in the Version Cue application folder.
❖ Click the Advanced tab of Version Cue Server Administration and do any of the following:
• To view Version Cue Server information, click Server Info.
• To view information about installed Version Cue plug-ins, click Plugins Overview.
• To view the Version Cue Server log file, click Server Log.
• To specify the log level (Error, Warning, or Info), specify the maximum log size, or reduce the log size by saving
it as a compressed file, click Preferences and set these options.
ADOBE GOLIVE 9 50
User Guide
View a Version Cue import or export report
1 Click the Advanced tab in Version Cue Server Administration, and then click Reports.
2 Choose the type of report you want to view from the Report menu.
3 To view available reports from a single project, choose the project name from the Filter By menu. To view available
reports from all projects on the Version Cue Server, choose All.
4 Click the project’s name in the Project Name column to display the report.
5 To print a copy of the report, click Print View.
6 To return to the report list, click File List.
To delete a report, select it in the Report List and click Delete.
Back up the Version Cue Server
You can back up the complete Version Cue Server to move a complete server from one computer to another.
Important: If you restore a backup copy of the Version Cue Server, all current data on the server, including Version Cue
projects, files, and versions, is replaced by the backup.
Server backup files are saved to the default Backups folder in the Version Cue application folder.
1 Click the Advanced tab in Version Cue Server Administration, and then click Back Up Version Cue Data.
2 To add remarks about the server backup, type them in the Comments text box.
3 Click Save. After the backup is complete, click OK to view the list of server backups.
Replace a project with a previous backup
To replace current projects on a Version Cue Server with a previous version, you first restore the backup. When you
do this, Version Cue Server Administration shuts down.
1 Click the Advanced tab in Version Cue Server Administration, and then click Administer Backups.
2 Click the backup you want to restore and then click Restore. The Version Cue Server shuts down. Close the
browser. (Notice that the Version Cue icon in the system tray indicates that it’s off.)
3 Start the Version Cue Server.
4 Log in to Version Cue Server Administration.
Change the name of the Version Cue Server
1 Click the Advanced tab in Version Cue Server Administration, and then click Preferences.
2 Type a name in the Server Name text box.
Specify HTTP and FTP proxies
1 Click the Advanced tab in Version Cue Server Administration, and then click Preferences.
2 Specify the default FTP proxy server for users importing projects from or exporting projects to an FTP server.
3 Specify the default HTTP Proxy server for users importing projects from or exporting projects to a WebDAV
server.
ADOBE GOLIVE 9 51
User Guide
Remove file locks from a Version Cue project
Remove file locks to remove the Checked Out or In Use (Acrobat) status of files designated as such. A user with
system administrator access or with project-specific Project Administration privileges can remove file locks.
1 Click the Advanced tab in Version Cue Server Administration, and then click Reset Locks (under Maintenance).
• Choose a project from the Project Name menu.
• Choose a user from the User Name menu.
2 Click Reset Locks to remove the specified file locks.
Delete file versions in a project
Delete file versions to improve performance. Each time you check in a version, it’s stored in the Version Cue Server
database. This database creates a file version history that lets you quickly return to any former state of the file. An
extensive history takes up disk space and can degrade the performance of the Version Cue Server.
1 Click the Advanced tab in Version Cue Server Administration, and then click Remove Old Versions.
2 Choose a project from the Project Name menu.
3 To delete versions, select Delete All Versions Older Than, and then choose a month, day, and year.
4 To specify the maximum number of versions to remain in the server after you click Delete, select Number Of
Versions To Keep, and then type a number in the text box.
5 Click Delete.
Grant access to the server without an existing user account
If you select this option, Version Cue creates a new user account without a password when a new user accesses the
Version Cue Server.
1 Click the Advanced tab in Version Cue Server Administration, and then click Preferences.
2 Select Automatic User Creation to enable users to access the server without an existing user account.
Enable SSL
Enabling Secure Sockets Layer (SSL) for the Version Cue Server enables secure communication between the server
and the software. When you enable SSL, the Version Cue Server sends data over an encrypted connection.
Note: Acrobat 8 and Creative Suite 2 components can’t connect to a Version Cue CS3 Server that uses SSL.
1 Click the Advanced tab in Version Cue Server Administration, and then click Security Preferences.
• To enable SSL, select Use SSL.
• To view the existing SSL certificate, click View The Currently Installed SSL Certificate.
• To load a custom SSL certificate, click Import A Custom SSL Certificate, select the certificate you want to use, and
click Import.
2 Click Save.
Restart the Version Cue Server
1 In the Advanced tab of Version Cue Server Administration, click Restart Server.
2 Click Restart.
You can also restart the Version Cue Server in Version Cue Preferences.
ADOBE GOLIVE 9 52
User Guide
Version Cue PDF reviews
About Version Cue PDF reviews
Using Version Cue Server Administration, you can set up and conduct web-based reviews of PDF documents that
are on a Version Cue Server.
As the review progresses, reviewers upload their comments to the Version Cue Server. When a review is complete,
you can view all comments either in the context of the original document or as a list in Version Cue Server Administration.
• To use Version Cue PDF review, reviewers need a Version Cue login name and privileges that allow them to log in
to the Version Cue Server hosting the review.
• To view the PDF and add comments, users need Acrobat 7.0 Professional or later. For more information about
commenting in Acrobat, see Acrobat Help.
Start a Version Cue PDF review
You can start a Version Cue PDF review for any version of any PDF document that is on a Version Cue Server,
provided that you have appropriate privileges to access Version Cue Server Administration. Only one version of a
PDF document may be in review at any point in time.
1 Log in to Version Cue Server Administration. (For instructions, see “Log in to Version Cue Server Administration” on page 42
2 Click the Version Cue CS3 PDF Review link at the top of the page.
• In the main Version Cue CS3 PDF review page, click Start A Review.
• Click the Documents tab, and choose Not Started from the Review Status menu.
3 In the Document List, click the name of the PDF document you want to review.
4 Choose the version you want to review, and then click Start Review.
5 In the Start Review page, enter review information:
• To set an end date for the review, select Deadline, and then choose the end date from the Year, Month, and Day
menus.
• To let reviewers see each other’s comments, select Open under Review Mode. Select Private if you want reviewers
to see only their own comments.
• Type a description of the review in the Description text box.
• To add reviewers, select the reviewers’ names in the Reviewers section. (Click the check box next to the Reviewers
column label to select or deselect all reviewers.)
Note: If a reviewer is outside your workgroup and doesn’t have a Version Cue login, you need to set one up in advance.
You must also provide network access—typically through a firewall—for outside reviewers.
6 Click Next.
7 To send an e-mail invitation to reviewers, select Send E-Mail Invitation, and then modify the Mail Subject and
Mail Message as desired. In the E-Mail Recipients section, choose reviewers that you wish to invite by e-mail.
8 Click Start Review.
ADOBE GOLIVE 9 53
User Guide
9 If you chose to invite reviewers by e-mail, Version Cue starts your e-mail program and displays an e-mail message
addressed to the reviewers. The e-mail includes a direct link to the document being reviewed. Confirm the contents
of the review e-mail, and send it.
Manage PDF reviews
After you locate a PDF review, you can open it, view or delete review comments, edit review settings, stop or restart
a review, or delete the review from the Version Cue Server.
Locate PDF reviews
1 Log in to Version Cue Server Administration. (For instructions, see “Log in to Version Cue Server Adminis-
tration” on page 42.)
2 Click the Version Cue CS3 PDF Review link at the top of the page.
3 Do one of the following:
• If you don’t know the name of the PDF document under review, or want to view all active reviews, click Active
Reviews in the Home tab.
• If you don’t know the name of the PDF document for which a review has been completed, or want to view all
completed reviews, click Finished Reviews in the Home tab.
• If you want to search for a PDF document that is under review or for which a review has been completed, click
Search Documents in the Home tab, and choose search criteria from the Project Name, Review Status, and List
Entries menus. To find a PDF document by its name, enter the name or part of it in the Document Name field.
Click Search.
Open an active or completed PDF review
1 Locate the review.
2 Click the PDF document name in the Document List, and then select any of the versions in the Document History list.
Stop a PDF review
1 Locate the review.
2 Click the PDF document name in the Document List.
3 In the Document History list, select the active review and click Stop Review.
To restart a completed review, click Start Review in the Document History list.
Note: After you click Start Review, you see a series of screens that refer to starting, rather than restarting, a review.
However, this procedure does restart the review of the existing document.
Delete a PDF review
When you delete a review, Version Cue permanently removes the review comments. However, review comments for
a PDF file are also deleted if you permanently delete the file itself from the Version Cue Server. Note that if you delete
only a version of a PDF file from the server, the review comments for that version are deleted.
1 Locate the review.
2 Click the PDF document name in the Document List.
3 In the Document History list, select a version and click Delete Review.
4 When Version Cue prompts you to delete the review, click Delete.
ADOBE GOLIVE 9 54
User Guide
Edit review settings
1 Locate the review.
2 Click the PDF document name in the Document List.
3 Select one of the versions in the Document History list, and click Edit Review Settings.
• To set or change an end date for the review, select Deadline, and then choose the end date from the Year, Month,
and Day menus.
• To let reviewers see each other’s comments, select Open under Review Mode. Select Private if you want reviewers
to see only their own comments.
• To add or edit a description of the review, type the information in the Description text box.
• To add or remove reviewers, select or deselect the reviewers’ names in the Reviewers section (click the check box
next to the Reviewers column heading to select or deselect all reviewers).
4 Click Next.
5 To send an e-mail invitation to reviewers, select Send E-Mail Invitation, and then modify Mail Subject and Mail
Message as desired. In the E-Mail Recipients section, choose reviewers that you wish to invite by e-mail.
6 Click Save Review. If you chose to invite reviewers by e-mail, Version Cue starts your e-mail program and displays
an e-mail message addressed to the reviewers. This e-mail includes a direct link to the document being reviewed.
Confirm the contents of the review e-mail, and send it.
Set viewing options in the Document List
• To display only PDF documents in a specific project, choose that project from the Project menu.
• To limit the number of documents displayed, choose an option from the List Entries menu (use the arrows to the
right of the List Entries menu to view additional files).
• To limit the list according to document name, enter part of a document name in the Document Name field and
press Enter (Windows) or Return (Mac OS). (To view all files again, delete the text in the Document Name field
and press Enter or Return.)
• To sort the list by the entries in a column, click the column heading. (Click the heading again to reverse the sort
order.)
View or delete PDF review comments
Review comments include, in addition to the text of the comment itself, information about who created the comment
and when, what type of comment was created, and what page of the document the comment appears on. You can use
any of the Acrobat commenting tools in a Version Cue PDF review.
Version Cue stores review comments on the Version Cue Server. You can view comments in Version Cue Server
Administration or directly in the PDF document. To view all review comments directly in the document, you must
access the document either by using the link from the review invitation or by opening the review document from
Version Cue Server Administration.
For more information about Acrobat commenting tools, search for “commenting” in Acrobat Help.
1 Locate the review.
2 Click the PDF document in the Document List.
3 Do one of the following:
• To view all review comments directly in the PDF document, click the version name.
ADOBE GOLIVE 9 55
User Guide
• To view review comments in Version Cue Server Administration, select the version in the Document History list
and click View Comments.
To view any of the comments in the context of the PDF document, select a comment and then click Open In Acrobat.
• To delete review comments in Version Cue Server Administration, select the comment and click Delete
Comments. (To select all comments, click the check box next to the Page column heading.)
See also
“Manage PDF reviews” on page 53
Using Version Cue in GoLive
You can use Version Cue with GoLive in addition to using it in conjunction with CS3 components.
Note: You can perform certain Version Cue tasks only if you have access to the full Version Cue feature set, available in
Adobe Creative Suite or in a shared workspace.
Creating or opening Version Cue projects
Working with Version Cue projects in GoLive is a bit different than in other Adobe Creative Suite components. In
GoLive, Version Cue projects contain website files. You can create blank Version Cue projects in GoLive, or you can
use existing files, or an existing GoLive site, to create a project. You can also add GoLive site files to an existing
Version Cue project. You work with Version Cue-managed files in the site window, just as you do with non-Version
Cue files.
When you create a Version Cue project in GoLive, the standard GoLive site folders and a site project file (.site) are
created on the server you choose. Master files are kept on the server. When you mount or connect to a Version Cue
project, a full copy of the project is copied to your computer. This copy ensures that the project is always available on
both the host Version Cue server and your computer. This workflow allows you to publish the site project from either
your local computer or the server.
At any time you can synchronize your working copies to the Version Cue project to make sure that they are up to
date. It’s important to synchronize on a regular basis to make sure that you always have the latest files from the master
files on the server.
See also
“About local project files” on page 35
“About GoLive sites” on page 64
“To put an existing site under version control” on page 69
To create a new blank Version Cue project
1 In GoLive, choose File > New.
2 Click Site.
3 Select Create Site.
ADOBE GOLIVE 9 56
User Guide
4 Select Blank Site, and click Next.
5 Specify the name and the destination location of the new site, and then click Next.
6 Click Use Version Control, and then choose Version Cue from the Version Control menu. Do any of the following:
• Accept the server displayed in the Server text box, or click the triangle next to the server box and choose a new
server from the menu.
• Type a project name in the Project box.
• Accept the user name, or type a new name in the Username box.
• Leave the Port set to 3703.
7 Click Next.
8 Set publish server options as described in GoLive Help.
9 Click Finish to create the new project.
You can put an existing site under Version Cue control. See GoLive Help.
See also
“To create a new blank site” on page 65
“To add an existing file to a site” on page 74
“To put an existing site under version control” on page 69
“Methods for creating sites in GoLive” on page 64
To mount a project
Before you begin working with an existing Version Cue project in GoLive, you need to mount the project on your
computer. When you mount an existing project containing a GoLive site onto your computer, a local copy of the
project and site is created on your computer.
1 Choose File > New Site from the application menu bar, and then Connect to Site.
2 Enter the Version Control settings to connect to the correct server. (Refer to the administrator of the project for
this information if you do not have it.)
3 Click Next or OK.
Note: To subsequently open the site window and work with the project, you can open the *.site project file on your
computer by choosing File > Open in the GoLive application window menu.
For information about using a remote server, see “To connect to a version-controlled project on an HTTP or FTP
server” on page 69.
Logging into Version Cue
You may be asked to log into the Version Cue server when you use the GoLive Site Creation wizard either to create
a new Version Cue project or to access an existing Version Cue project, even if the Version Cue project doesn’t
requires users to log in.
When prompted, do one of the following:
• If you have a Version Cue user ID and password, enter them in the Username and Password boxes.
ADOBE GOLIVE 9 57
User Guide
• If you want to log in as the system administrator, enter system in the Username box and the system password in
the Password box. (The default system password is system.)
Viewing Version Cue information in the site window
The GoLive site window displays additional Version Cue information. The Assets area of the site window contains a
Version Status column and the site folders as well as the Version Cue project’s files from Illustrator, InDesign,
Photoshop, Acrobat 7, or any non-Adobe application. You may also find it helpful to view the User Activity dialog
box while working in the site window.
Files The Assets area of the site window displays all the files in the Version Cue project that you downloaded to your
local computer when you synchronized. Working copies of the site files are kept in the Version Cue project site folder
on your computer. The Status column indicates the current state of the file, for example, if a file contains broken
links, or if the file is empty, or if the file is missing from its folder. The Version Status indicates the status of your
working copy in relation to the Version Cue master file; for example, if your working copy is outdated because a
newer version exists, or if there is an editing conflict, the Version Status indicates it.
User Activity You can view a list of all Version Cue users who have accessed the Version Cue project, as well as their
activities.
Refer to “To show user activity” on page 73 for information on viewing the User Activity dialog box.
To change Version Cue project settings
1 With the site window open in GoLive, choose Site > Settings.
2 In the Site Settings dialog box, click Version Control.
3 To change the user ID and password you use to access the project, enter them in the Username and Password
boxes.
4 Do any of the following:
• Accept the server displayed in the Server text box, or click the triangle next to the server box and choose a new
server from the menu. If you change the server, any links between your local copies and the host server are cut.
• Type a project name in the Project box.
• Accept the user name, or type a new name in the Username box.
• Type a password in the Password box to save your information. This saves you from having to enter your password
manually each time login is required.
• Leave the Port set to 3703 (which is the default Version Cue port).
• Select Multiple Checkout Is Allowed to let more than one user work in the file. Deselect the option to disallow.
This option is unavailable if the project is created on a private workspace.
• Select Detailed Synchronization Report to view information about synchronizations. Deselect the option to skip
the report.
5 Click OK.
ADOBE GOLIVE 9 58
User Guide
Working with files and versions in a Version Cue project
When you open a Version Cue project in GoLive, the site window displays the files and folders you downloaded from
the project on the Version Cue server. When you want to edit a file, you need to use the Check Out command. When
you check out a file, other users are informed that you’re editing the file. Or you can simply begin editing a file;
Version Cue automatically prompts you to check the file out.
As you work, use the File > Save command periodically to save your changes. Also, you should check in the file when
you want to create a snapshot of the file. Saving a file uploads your changes to the master file on the host server.
Checking a file in allows you to go back later to a previously saved version of that file. For instance, you might check
in a file before making a dramatic change, like changing the color of the background. If the change is detrimental,
you could go back to the previous version and promote it to the current version without damaging your file.
The status of a file is displayed with an icon in the status area in the lower left of the document window, and in the
Version Status column of the site window. The status changes as you check in a file. When you finish editing a file
from a Version Cue project, you need to save the file to the Version Cue project folder using the File > Save
command, and then check in the file to the Version Cue server by using the Site > Version Control > Check In
command. If you decide that you don’t want to save your changes to the Version Cue server for some reason, you can
select Site > Version Control > Undo Check Out to check the file in without your edits; however, the next time you
check out the files, the files from the Version Cue server will overwrite the files on your local computer.
Note: The maximum size for a single file in a Version Cue project is 2 GB.
To add files to a Version Cue project
You can use any method of adding files to a GoLive site to add files to a Version Cue project. When you add files to
a Version Cue project, the files are added to the local site’s folder, and the new files must be synchronized to the
Version Cue server. When you synchronize the added files, you can use the version comment to provide information
about the file or project, which can be searched by using the Version Cue search feature. When you add a new file,
the file’s status is Only Copy until you check it in.
1 Use any method of adding files to a site.
2 Do one of the following to synchronize the added files:
• Click Synchronize with version control system
in the site window’s menu bar to synchronize the entire project.
• Select the file or files, and then choose Site > Version Control > Synchronize Selection.
3 Do one of the following:
• If the Synchronize dialog box appears, click OK to synchronize the files.
• If the Check In dialog box appears, enter any comments, and then click OK.
See also
“To synchronize a site” on page 72
“To create a new page in a site” on page 73
“To add an existing file to a site” on page 74
ADOBE GOLIVE 9 59
User Guide
Editing and saving versions
Before you edit a file in GoLive, you need to use the Check Out command to lock the file. You can use the Site > Version
Control menu to check out a file to edit in GoLive, or you can open and begin editing a file and then check out the file
when prompted by Version Cue. When the file opens, the checked out icon appears at the end of the file name.
While you edit a file, your changes affect only the working copy on your local computer until you check it in. Saving
a version updates the master file on the Version Cue server, and removes the lock on the server so other users can
access the file.
To edit a Version Cue file
1 In GoLive, choose File > Open, select the site project file for the Version Cue project, and click Open.
2 With the project site open, select one or more files in Assets and choose Site > Version Control > Check Out.
3 Open the file and edit it. As you edit, use the File > Save command to save your work on the local copy. You can
check in files as necessary to save a version, however, checking in a file removes your lock on that file. To continue
editing, check the file out again.
If you open a file without first checking it out, Version Cue prompts you to do so when you attempt to edit the file.
For more information on checking files in or out, refer to “To perform an initial check-in” on page 71, “To check out
a file” on page 71, and “To check in a file” on page 71.
To synchronize files
Synchronizing files in GoLive is important because it ensures that your local working copies and the files on the
Version Cue server are kept up to date. The Synchronize dialog box gives you options to download and upload files.
1 Do one of the following:
• To synchronize all edited files, click Synchronize With Version Control
in the menu bar.
• To synchronize selected files, select one or more files and click Synchronize With Version Control
, or choose
Site > Version Control > Synchronize Selection.
• To synchronize all files, choose Site > Version Control > Synchronize All.
2 When the Synchronize dialog box appears, click OK, or select another synchronization action for the file.
3 In the Check In dialog box, if you’d like, type a comment in the text box. Click OK.
See also
“To synchronize a site” on page 72
To view versions in GoLive
The Versions dialog box in GoLive displays all versions, version comments, version authors, and version dates for
any file in a Version Cue project in GoLive. You can open any version in a new window, view files in their native
applications, compare the source code of a working copy of GoLive web pages to the code of the master file on the
Version Cue server, and create a new version based on an existing version.
1 With the site window open in GoLive, select the file in the site window, and choose Show Versions from the
Version Control submenu in the Site > Version Control menu or the context menu.
ADOBE GOLIVE 9 60
User Guide
2 Do any of the following in the Versions dialog box:
• To compare the source code of a working copy to the source code of the master file, select the version, and click
Compare To Local.
• To the source code of two web page versions, select both versions, and click Compare Selected Versions.
• To open a version in its own document window, select the version, and click View Version.
• To create a new file version from an older version, select the version, and click Promote To Current Version.
• To close the Versions dialog box, click Done.
To compare a working copy to the master file
1 In GoLive, choose File > Open, select the site project file for the Version Cue project, and click Open.
2 Do one of the following:
• Open the file.
• Select the file in the site window.
3 Choose Site > Version Control > Compare To Latest Version. Right-click (Windows) or Ctrl-click (Mac OS) the
file and choose Compare to Latest Version from the context menu.
4 In the Compare Local Version To Latest Version dialog box, differences between the working copy and master file
are highlighted. In the dialog box, do any of the following:
• To remove blank lines from the view, select Skip Empty Lines.
• To visually parse the code, select Show Different Colors to make it easier.
• To remove lines that are exactly the same in the working copy and master file from the view, select Hide Identical
Lines.
• To scroll through each window separately, deselect Synchronize Scrolling.
• To click through the highlighted differences, click Next Difference or Previous Difference.
5 When you’re finished, click Close.
Working offline in a Version Cue project
If the Version Cue server is turned off or you can’t access the server on a network, you can edit the working copies
of a GoLive site on your computer. Because you have working copies of all the project files on your computer, your
workflow isn’t impaired.
Before working on a file offline, synchronize the project to make sure that you have the latest files, and then use the
Check Out command to edit the files. The Check Out command not only synchronizes the file before you edit it but
also alerts other users that you intend to work in the file. When you mark the file manually, the Version Cue server
protects it. After using the Check Out command, choose the Work Offline command to update the files’ status on
the server. When the Version Cue server is available to you again, you can synchronize the files to save new versions
to the Version Cue server.
ADOBE GOLIVE 9 61
User Guide
While working offline, you won’t be able to get any updated Version Status information. You also can’t check a file in
or out to the Version Cue server. However, because you have all the site files on your computer, you can publish files
to the Publish Server even when you’re working offline. By default, when choosing Site > Publish Server > Upload
Selection/Modified Files/All, the files will be uploaded from your local computer to the Publish Server. It's especially
important to synchronize before you go offline if you’d like to publish from your working copies. Synchronizing
ensures that you have the latest versions (any changes to files on the Version Cue server since you last synchronized
are not reflected in your working copies), and that the site on the host server is synchronized with the site on the
Publish Server.
You can go back online by deselecting Site > Work Offline from the application menu bar.
See also
“Editing and synchronizing offline files” on page 40
To work offline with a Version Cue project
❖ In GoLive, do one of the following:
• Choose Site > Version Control > Work Offline to work on your local copies without access to the host Version Cue
server. The master files remain available to other users. The files display as checked out in the server and a copy
of each selected file is added to the site’s folder on your computer.
• To download one or more files without checking them out, select the files in the site window, and choose Site >
Version Control > Force Download. A copy of each selected file is added to the site’s folder on your computer, and
the file remains available for all—so other users can change the files without regard to your edits.
To view, restore, or delete files deleted from the server
In GoLive, you can restore or permanently delete deleted files from Version Cue. The two-step deletion process
avoids accidental deletion. When you restore a file, it is returned to its previous location in the project.
1 With the site window open, choose Site > Version Control > Deleted Server Files.
The Deleted Files dialog box appears.
2 Select the deleted file in the dialog box. You can also select all of the files by choosing Select All, or you can choose
Do Nothing if you decide not to restore or delete any files.
3 Click the triangle at the bottom right of the icon in the Action column and choose one of the following:
Restore On Server Restores the file to its previous position in the project hierarchy.
Restore On Server And Download Restores the file and saves a working copy of the file on your computer.
Delete Permanently Completely removes the file from the project.
GoLive automatically restores the file to its original location in the site. Refresh the site view (Site > Refresh View)
to ensure that all files are correctly displayed.
ADOBE GOLIVE 9 62
User Guide
Troubleshooting
Multiple local project files folders
If you accessed a project that has the same name on two different Version Cue Servers, Version Cue may create
multiple copies of what appears to be the project’s local project files folder, but are actually the local project files
folders of the two different projects accessed from different servers. Version Cue names these folders with the project
name and a number (for example, project_001, project_002). You can delete these folders after you save versions of
your local project files to the Version Cue Server. (Or, you can simply ignore the multiple local project file folders.)
To delete the local project files folders, see “Delete files or folders from a project in GoLive” on page 38.
Offline projects
If your network access becomes unavailable while you’re working with a Version Cue project (for example, if you’re
traveling with a laptop computer), Version Cue may show the project as offline the next time you connect. You can
go back online by deselecting Site > Work Offline from the application menu bar. You should synchronize your files
when you are back online.
Project recovery
In the very unlikely event that you’re completely unable to access a Version Cue project, you can recover the current
versions of files found in the local project files folders on the computers of workgroup members who have accessed
the project. Local project files are located in the Version Cue folder in your My Documents (Windows) or
Documents (Mac OS) folder.
Files don’t appear in projects behind firewalls
Version Cue uses HTTP (Hypertext Transfer Protocol) and SOAP (Simple Object Access Protocol) to communicate
between Version Cue Servers and GoLive or Adobe Creative Suite components. Rarely, older firewall software may
not handle SOAP interactions properly. If you see folders but not files in your Version Cue projects, try disabling
your proxy server. If disabling the proxy server resolves the problem, you may need to update your firewall.
Disconnecting from projects with files checked out
If you have local project files with the Checked Out status, you can’t disconnect from a project until you check in a
version of those files. If you can’t check in a version of the files because the Version Cue Server is unavailable, there
are two ways to proceed. You can wait until the server is available, synchronize the files, and then disconnect from
the project. Or, you can delete the local project files folder from your hard drive and then disconnect from the project
when the server is available. (Other users who access the project will still see the files marked as Checked Out. Users
can save their own versions, or a user with Administrator privileges can reset locks on the project, which changes the
status of the files to Synchronized.)
Unable to migrate from Version Cue CS2 to Version Cue CS3 on Intel-based Macintosh
computers
To migrate projects from Version Cue CS2 to Version Cue CS3 on an Intel-based Macintosh computer, first back up
the project in the Version Cue CS2 Advanced Administration utility on a PowerPC-based Macintosh computer. (For
instructions, see Version Cue CS2 Help.) Then, transfer the project from the PowerPC-based Macintosh to the
project backup directory on the Intel-based Macintosh computer, restart the server, and restore the project in
Version Cue CS3 (see “Back up and restore projects” on page 48).
ADOBE GOLIVE 9 63
User Guide
Note: You cannot migrate Version Cue CS2 server backups to a Version Cue CS3 Server. You can, however, migrate
Version Cue CS2 projects to a Version Cue CS3 Server. See “Migrate projects to the Version Cue 3.0 Server” on page 31
Unable to connect to the Version Cue CS3 Server
Try any of the following:
• Make sure that your network connection is functioning properly.
• If you’re trying to connect to the server from Acrobat 8 or from a Version Cue-enabled Adobe Creative Suite 2
component, make sure that you haven’t enabled SSL for the server. In addition, Acrobat 8 and Adobe Creative
Suite 2 components can’t connect to Version Cue CS3 Servers installed on the same computer (that is, a local
Version Cue CS3 Server).
• Try to connect to the server from a Version Cue-enabled Creative Suite component.
• Temporarily disable firewalls or proxies.
• Restart the server (see “Shut down or restart the Version Cue Server” on page 31).
• Consult the server log file for details that may indicate the cause of the problem. You can access the log file from
the Advanced tab of Version Cue Server Administration (see “Advanced Version Cue Server Administration
tasks” on page 49.)
Forgotten Version Cue system administrator password
If you’ve forgotten your system administrator password, you’ll need to remove and reinstall Version Cue, creating a
new system administrator user name and password in the process. There is no way to remove Version Cue without
losing all Version Cue project files and data.
Version Cue Server performs slowly or stops responding
Try either of the following:
• Increase the RAM allocated to Version Cue (see “Set Version Cue Server preferences” on page 29).
• If Version Cue stops responding while you’re backing up project files, make sure that you’re backing up to a drive
with enough free hard drive space to store the files.
Unable to see Version Cue projects on a Version Cue CS3 Server
Try any of the following:
• Make sure that the project to which you’re trying to connect is shared. If the project creator chose to keep the
project private, you won’t be able to access it.
• If you’re using Acrobat 8 or a Version Cue-enabled Adobe Creative Suite 2 component to access the project, make
sure the creator of the project specified that it be compatible with CS2. Otherwise, you won’t be able to see the
project on the Version Cue CS3 Server.
64
Chapter 4: Setting up sites and pages
Creating sites
About GoLive sites
When you use the Site Creation Wizard to create a website, GoLive creates a site file (with the .site extension) to
manage and control the site contents. GoLive also creates folders to hold 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 folders within the project folder and the site file.
Typically there isn’t a need to open or manipulate files directly from the project folder. Keep in mind that changes
made directly to these files or default folder structure could adversely effect the site. The following example describes
the folders for your reference.
If you name the new site Mysite, the site file is named Mysite.site. The project folder is named Mysite and contains the
site file and the following folders:
aglextras Contains files for publishing settings, including settings you make in the site window and the Site Settings
dialog box. The publishing settings are not published when you upload the site to a publish server. This folder does
not display in the site window although it is contained within the site folder.
CSS Contains external cascading stylesheets and other source files. CSS files appear in the Assets area of the site
window. The CSS files are uploaded when you upload the site to a publish server.
See also
“Specifying preferences and settings for websites” on page 98
Methods for creating sites in GoLive
You can create or import sites by using any of the following methods:
Create a new blank site You can use the Site Creation Wizard to create a blank site from which you can design your
own, entirely new web pages either solely within GoLive or in combination with other graphics applications, like
Adobe Photoshop.
Import a site from a local folder of existing files GoLive creates 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 folder. GoLive asks you to specify a
location for the site file, name it (it should always have the .site extension), and create a folder to put it in.
Create a site from a site locator file GoLive creates a new site based on a site sample.
Import a site from files downloaded from a remote server GoLive creates a new site that is a copy of a site
downloaded from an FTP or HTTP server.
Import a site from workgroup projects on a version control system GoLive connects to a server and mounts the
target site on your computer. It checks in or checks out a file in your name to prevent other users from writing over
your changes. Use this method when you are part of a workgroup where version control is necessary, or if you want
to use version control for a single-user site, which lets you revert to previous versions. You can also use this method
if you want to connect to a site as you work on it (not download a copy of the site, but mount the site and work on it
from the server).
ADOBE GOLIVE 9 65
User Guide
To create a new blank site
1 Do one of the following:
• Choose File > New and then choose Site > Create Site.
• Choose File > New Site.
2 Select Blank Site, and click Next.
3 Specify a name and site location. To specify how the new site will handle encoding and case sensitivity checking
in URLs, click Advanced and specify options as desired. (See “Advanced URL handling options” on page 66.)
4 Click Next, and then specify Version Control options:
• If you plan to add the site to a workgroup or want to take advantage of versioning features, select Use Version
Control, choose a version control system, and specify server and user information.
• If you don’t want to use versioning features, select Don’t Use Version Control.
5 Click Next, and then specify Publish Server options:
• If you know the server to which you’ll publish the site, select Specify Server Now, and then enter the appropriate
server information. For more information, see “To set up access to a publish server” on page 285.
• If you don’t have server information, select Specify Server Later.
6 Click Finish.
See also
“To change version control settings” on page 73
“About version control” on page 69
To create a site from a local folder of existing files
You can also use this procedure to import sites from other applications.
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.
1 Choose File > New.
2 Choose Site > Create Site.
3 Select Site From Existing Content, and click Next.
4 Select From A Local Folder Of Existing Files, and click Next.
5 Click the Browse button beneath the Folder section to navigate to the local folder that contains the site files that
you want to use.
6 Click the Browse button beneath the Home Page Of The New Site section to locate the home page of the existing
site (if you don’t specify a home page, GoLive creates a blank home page in the site’s folder).
7 Click Next, and then designate a location for the new site in the Specifying a Site Name And Location box. To
specify how the new site will handle characters in URLs and case sensitivity, click Advanced. (See “Advanced URL
handling options” on page 66.)
8 Click Finish.
ADOBE GOLIVE 9 66
User Guide
To create a site from a site locator file
1 Choose File > New.
2 Choose Site > Create Site.
3 Select Site from a “Site Locator” File (*.aglsl), and click Next.
4 Click Browse under Site Locator File to navigate to the correct file.
5 Click the Browse button under Save Site to specify a name and location for the site.
6 Click Finish.
You can create site locator files for GoLive sites using the Export option in the File menu. For more information on
exporting site locator files, see “To export a site locator file” on page 68.
See also
“Importing sites from FTP or HTTP servers” on page 67
“About version control” on page 69
To open GoLive CS and CS2 sites
❖ Open the site in GoLive 9. GoLive automatically updates it to a GoLive 9 site, creating a GoLive 9 site file, and
backs up the site file.
Note: If you want to archive the entire previous site, not just the site file, copy it, archive the copy, and then open the site
file of the original site.
Advanced URL handling options
Advanced URL handling options let you specify how the site handles characters in URLs. After you create the site,
you can change the URL character encoding (but not the URL case sensitive checking) in the Site Settings dialog box.
URL Encoding Specifies the type of character encoding that you would like your site to use for its URLs. Unicode’s
UTF8 encoding is the most widely used, covering all major languages and platforms. Contact the administrator of
the web server to which you’ll be publishing to learn which character encoding the server uses.
Script This option is available only if you choose System Specific from the URL Encoding menu.
Apply %HH Escaping Specifies the circumstances under which your site will replace, or escape, unallowed characters
in your URLs. For example, the figure “%20” is used to escape spaces, which are not allowed in URLs.
See also
“Specifying preferences and settings for websites” on page 98
ADOBE GOLIVE 9 67
User Guide
Importing sites from remote servers
Importing sites from FTP or HTTP servers
Using the Site Creation 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.
Once you’ve created a single user site and downloaded files to your local hard disk, you can put the site under version
control. See “About version control” on page 69
Accessing login information for imported sites
To create sites based on files imported from an FTP server, you need valid account information to log into the
server—including the name of the server, and your FTP user name and password. Use the Advanced FTP Options
dialog box in the Site Creation Wizard to use passive mode if the site is protected by a firewall or if the server is
behind a rooter.
To create sites by importing sites from HTTP servers, you only need access to the Internet and a valid home page URL.
To download sites from HTTP and FTP servers
Using the Site Creation Wizard, you can import an entire website 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.
Note: If you already have an ongoing workgroup project that employs version control, and you wish to continue the
collaboration, connect to the existing site instead of using this procedure.
1 Do one of the following:
• Choose File > New and then select Site > Create Site.
• Choose File > New Site.
2 Select Site From Existing Content, and click Next.
3 Select By Downloading Files From A Remote Server, and click Next.
4 Choose the server type (FTP or HTTP) from the Type Of Server menu.
5 If you are downloading from an HTTP server, specify the home page URL of the server in the URL box and then
do one of the following:
• To download only the pages that are located in the same folder (or a subfolder) that contains the home page URL,
select Only Get Pages Under Same Path.
• To download only those pages that are on the same server as the home page URL, select Stay On Same Server.
GoLive downloads from other servers any source files that are referenced by the pages it downloads, whether or
not this option is selected.
6 If you are downloading from an FTP server, enter the FTP server information. Click Advanced to set security and
passive mode options. (See “To set up access to a publish server” on page 285.)
ADOBE GOLIVE 9 68
User Guide
7 Click Next, and then specify a name and location for the downloaded files. To specify how the new site will handle
encoding and case sensitivity checking in URLs, click Advanced. (See “Advanced URL handling options” on
page 66.)
8 Click Finish.
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. After you create the site, you can
individually download the pages from these external URLs by choosing Download from a URL’s context menu.
To download a page from an external link
1 Choose Hyperlinks in the Resources area of the site window.
2 Right-click the URL and select Download.
When you download a page and its source files from an external link, GoLive adds the page and the referenced
source files (such as images) to the Assets area of the site window.
See also
“Downloading a web page” on page 290
To export a site locator file
A site locator file describes the location of a site on a remote server and lets you quickly import remote sites. It
contains all the login and character encoding information necessary to create the site.
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.
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.
ADOBE GOLIVE 9 69
User Guide
Version control sites
About version control
Workgroups can use version control to manage files and ensure that only one person at a time is working on a file.
You can also use version control for a single-user site if, for example, you want the ability to revert to previous
versions of your site. When you connect to a project that employs version control, you can check out or check in the
target files. When you check out a file, the version control system marks it as being used and locks it from other users
so they can’t edit it. When you check in a file, you save changes to the master file and unlock it so that other users
may access it.
GoLive supports several version control systems. In addition, GoLive offers its own set of version control features
that you can use to work with files in a versioning repository on your local hard drive or on an FTP server.
To connect to a version-controlled project on an HTTP or FTP server
1 Choose File > New.
2 Select Site, and then do one of the following:
• Select Connect To Site.
• Select Create Site, and then choose Site From Existing Content. Click Next, select By Connecting To A Project On
A Version Control System, and click Next.
3 Choose a version control system from the Version Control System menu and enter the appropriate information
for that system in the Server, Project, Username, Password, and Port boxes. If you’re using CVS, choose an authoring
type from the Authoring Type menu.
4 Click Next.
5 Specify a local mount location, and click Finish.
6 Follow the on-screen instructions to complete the connection process.
Once you’ve connected to a version controlled project in GoLive, use the commands in the Site > Version Control
System menu to work with version controlled files.
To put an existing site under version control
1 Open the site.
2 Choose Site > Version Control > Enable Version Control.
3 In the Version Control area of the site Settings dialog box, select Use Version Control.
4 Choose a version control system from the Version Control System menu:
• Version Cue
• CVS
• Directory in File System
• FTP Server
5 Specify a server, a name for the project, a user name, your password, and port information. If you’re using CVS,
choose an authoring type from the Auth. Type menu.
6 Select other options as desired.
ADOBE GOLIVE 9 70
User Guide
7 Click OK.
About GoLive version control
GoLive lets you create a version control workspace in a folder on the local hard drive or on an FTP server, without
using third-party version control software. You can define any folder on your computer or on an FTP server as a
version control workspace to which you and co-workers can check files in and out.
GoLive version control lets you check files in and out, view and track versions of files and revert to previous versions,
and synchronize local files against those in the version control system. By default, files that you check in are readonly, and you can check out only one file at a time. If you try to edit a file that is part of a version controlled project,
GoLive prompts you to check out the file. The Version Status column in the Assets area of the site window displays
the versioning state of all files.
Note: For a full set of version control features, use Adobe Version Cue.
A
B
A. Checked in file B. Checked out file
The GoLive version control workflow
Before you can use version control features in GoLive, you must create a version control workspace and check files
in to the workspace. Once you’ve done so, you can check out files and check them back in, synchronize the site with
the version control workspace, and compare and revert to different versions of version controlled files.
To create a GoLive version control workspace for an existing site
1 Open the site for which you want to create a version control workspace.
2 Choose Site > Version Control > Enable Version Control.
3 In the Version Control area of the site Settings dialog box, select Use Version Control.
4 Choose one of the following options from the Version Control System menu:
• Directory in File System to create a version control workspace on the local hard drive.
• FTP Server to create a version control workspace on an FTP server.
5 Do one of the following tasks:
• If you’re creating a version control workspace on the local hard drive, enter a name for the project, enter a user
name, and reference a folder on the local hard drive in the Directory box (don’t reference the site folder—the folder
in which GoLive creates a version control workspace must be separate from the site folder).
ADOBE GOLIVE 9 71
User Guide
• If you’re creating a version control workspace on an FTP server, specify the server in the Server box, and specify
a user name, password, directory, and project in the Access Data section. Click Advanced to set advanced FTP
options.
6 Set options as desired.
7 Click OK.
To create a GoLive version control workspace for a new site
1 Choose File > New, and select Site > Create Site.
You can also connect to an existing GoLive version control workspace: Choose Site > Connect To Site in the New
dialog box.
2 In the Site Creation Wizard, choose Blank Site.
3 Follow the on-screen instructions until GoLive displays the Use A Version Control System window. Select Use
Version Control.
4 Choose one of the following options from the Version Control System menu:
• Directory in File System to create a version control workspace on the local hard drive.
• FTP Server to create a version control workspace on an FTP server.
5 Do one of the following tasks:
• If you’re creating a version control workspace on the local hard drive, type a name for the project in the Project
box and reference a folder on the local hard drive in the Directory box (don’t reference the site folder—the folder
in which GoLive creates a version control workspace must be separate from the site folder).
• If you’re creating a version control workspace on an FTP server, specify the server in the Server box, and specify
a user name, password, directory, and project name. Click Advanced to set advanced FTP options.
6 Click Next, and follow the on-screen instructions to complete the site creation.
To perform an initial check-in
Once you’ve created a version control workspace, you must check in all the site files to the version control workspace.
1 Choose Site > Version Control > Check In All.
2 In the Version Control File Checkin dialog box, select the files you want to check in and click Check In (to use
version control for the entire site, select all files).
To check out a file
❖ Select a file and choose Site > Version Control System > Check Out.
GoLive displays an icon in the Version Status column of the Assets section in the site window to indicate the version
status of the file. The icon may look different depending upon which version control system you use; for instance, if
you use Version Cue, this icon is the Checked Out By Me icon. To undo a checkout, choose Site > Version Control >
Undo Check Out.
To check in a file
1 Select a file and choose Site > Version Control > Check In.
2 In the Version Control File Checkin dialog box, click Check In.
ADOBE GOLIVE 9 72
User Guide
To synchronize a site
You can synchronize the local site with the latest versions of files in the version control workspace.
You can also choose Site > Version Control > Force Download to replace the local copy of a file with the latest version
of a file from the version control workspace.
1 Choose Site > Version Control > Synchronize All. The Synchronize With Version Control System dialog box
indicates which files will be uploaded to the version control workspace, which files will be downloaded to the local
copy of the site, and which files will be deleted.
2 Do any of the following tasks:
• To display files that aren’t selected for synchronization, select Show Skipped Items.
• To view the files as they exist on the server in folders, select Show Folder Structure.
• To display detailed information about a file, select it. GoLive displays local and version control workspace information about the file in the two text areas at the bottom of the dialog box.
• To exclude a synchronization action, deselect it in the Perform Actions section. For example, deselect Deletions
to prevent GoLive from deleting any files during the synchronization.
3 In the Synchronize With Version Control System dialog box, confirm the synchronization actions assigned to
individual files. If you want to assign a different synchronization action to a file, select the file and cycle through the
synchronization options by clicking the Synchronization Action icon displayed in the column next to the file:
A B C
A. File to be uploaded to the version control workspace B. File to be deleted C. File to be downloaded from the version control workspace to
the site folder
• Upload
to upload the file to the version control workspace.
• Download
• Delete
to download the file from the version control workspace to the local site.
to remove the file.
4 Click OK to start the synchronization process.
To compare a file to the checked in version in the version control workspace
❖ Select a file and choose Site > Version Control > Compare to Server Version.
ADOBE GOLIVE 9 73
User Guide
To compare checked in versions of a file
1 Select a file and choose Site > Version Control > Show Versions. GoLive displays thumbnails of all checked in
versions of a file in the Versions Of [File Name] dialog box.
2 Do one or more of the following tasks:
• To view a full-sized version of the file, select it and click View Version.
• To compare a version of the file to the local version, click Compare To Local. GoLive displays the Compare
Versions To Local window with the checked in version and the local version.
• To promote an older version of the file to the current version, click Promote To Current Version.
• To compare selected versions, shift-click to select multiple versions of a file and then click Compare Selected
Versions. GoLive displays the Compare Versions window with the selected versions.
To show user activity
❖ Choose Site > Version Control > User Activity. The User Activity dialog displays user names and a list of files each
user has checked out in the site window.
To change version control settings
You can change the version control settings of any site that you are working on.
1 With a site open, choose Site > Version Control > Settings.
2 Make changes to the fields in the Version Control Settings dialog box and click OK.
To stop using version control for a site
1 With the site open, choose Site > Version Control > Settings.
2 Deselect Use Version Control, and click OK.
Adding files to sites
To create a new page in a site
You can create a new HTML document, a text document, cascading stylesheet, or JavaScript file. Also, you can create
documents in a variety of special formats, including XHTML, and use page templates that you’ve set up for the site.
The Web section of the New dialog box lists many page samples on which you can base new pages.
Note: When you create a special HTML or XHTML document, GoLive automatically adds a doctype declaration to the
source code with a reference to the appropriate Document Type Definition (DTD).
❖ Do one of the following:
• With the site window open, choose Site > Add New Document and select Web. Choose a page type in the New
dialog box, and then click OK. GoLive adds an untitled file to the list of files in the site window.
• With the site window open, choose Site > Add New Document and select Favorites. Choose a page type in the New
dialog box, and then click OK. GoLive adds an untitled file to the list of files in the site window.
To add a file to the Favorites category in the New dialog box, select the file and choose Add To Favorites from the
pop-up menu next to the file in the New dialog box.
ADOBE GOLIVE 9 74
User Guide
• Select a folder in the site window. Click the Create New Page icon
in the site window menu bar. The new page
is added to the bottom of the list in the folder you selected.
• Select a page in the site window and choose Edit > Duplicate to create a copy of the existing page.
• With the site window open, choose File > New, and select Web. Choose a page type in the New dialog box, and
then click OK. GoLive creates an untitled file and displays it in the Layout Editor of the document window. 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.
Note: The site window must be open, but not necessarily selected, before the Site Folder menu will appear in the Save As
dialog box.
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 “About preferences” on page 20.)
To add an existing file to a site
❖ Do one of the following:
• Drag the file from your desktop into the site window.
• Move the file into the site’s root folder on your desktop. Then select the site window and choose Site > Refresh, or
right-click in the site window and select one of the refresh options.
• With the site Assets window open, choose File > Import > Files To Site. In the dialog box, locate and select the
desired file, and click Open. If prompted, click OK to copy the file and update the site.
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.
See also
“About GoLive sites” on page 64
Locking and unlocking 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 Double-click the file in the site window.
2 Make a change to the file. When GoLive returns the message “The file [file name] is read-only. Would you like to
make it writable?” click Yes.
To unlock multiple files, select them in the site window. Then, in Windows, choose Site > Explorer > Show Object
Information, and deselect Read-Only in the Properties dialog box. In Mac OS, choose Site > Finder > Show Object
Information, and deselect Locked in the Info dialog box.
ADOBE GOLIVE 9 75
User Guide
Setting up pages
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 panel 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 panel
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 a page template. View
and open your pages as desired from the Collections area of the site window. In the Collections area of the site
window, you can sort files within a collection by clicking on the column names. Also, you can click on the New
Collection icon to add, edit and otherwise manage the collections.
See also
“About site assets, resources, and collections” on page 269
“About graphical site views” on page 109
To change the page title
❖ Do one of the following:
• Select the default page title Untitled Page in the Title sectionof 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.
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.
You can create a custom page title on a blank page and set a preference to use that page for creating new pages.
See also
“About preferences” on page 20
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.”
ADOBE GOLIVE 9 76
User Guide
To choose 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. For
example, you may want to set the size of your page layout to 580 pixels or less to accommodate viewers with 14-inch
monitors. (The size you choose does not affect the size of the browser window that displays the page.) If sizes don’t
appear at the bottom of the document window, right-click the menu bar and select Show > Page Dimensions.
• To set the size for the open document window, choose a size from the menu at the bottom 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 menu at the bottom of the document
window. Select Markup Document Windows, and click OK.
• To add a size to the Status Page Dimensions menu, choose Options from the menu at the bottom of the document
window 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 Status Page
Dimensions menu, select it in the Window Size Configuration dialog box, click the Remove Selected Window
Configurations button, and then click OK.
To create view configurations for document windows
View configurations let you save the appearance of a document window in the Layout Editor. The default view
configuration is Web Layout View (if you choose a mobile document format in the New dialog box, GoLive uses the
Mobile View configuration). You can create and save your own view configurations. Once you’ve saved a view
configuration, you can use it in any new document by choosing it from the View Configuration menu at the bottom
of the document window.
1 Make changes to the document window in the View panel or Layout Editor until you’ve created the desired configuration.
2 Choose View > View Configuration > Save, or choose View Configuration > Save from the menu at the bottom
of the document window (if the View Configuration menu doesn’t appear, choose Show > View Configuration from
the menu).
3 In the Save View Configuration dialog box, enter a name for the view configuration in the Configuration Name
box, and set view configuration options as desired.
See also
“Save, delete, and switch between workspaces” on page 16
“Designing for mobile devices” on page 297
“To set view options for page layout” on page 77
To specify page margins
Page margins let you control how the contents of a web page are offset in browser windows. The margin width
specifies the space between the page’s content and the left edge of the browser window, and the margin height
specifies the space between the page’s content and the top edge of the browser window.
1 Click the Show Page Properties button at the top of the document window to open the Page Inspector.
2 In the Page Inspector, click the Page tab and enter values in pixels in the Margin Width and Height text boxes.
ADOBE GOLIVE 9 77
User Guide
3 To remove the automatic margin offset, right-click (Windows) or Control-click (Mac OS) in the page and choose
Document > Set Page Margins To Zero from the menu that appears.
Setting view options for page layout
To ensure that page layouts reflect what your viewing audience will see, you can configure the Layout Editor to
preview different browsers and devices, and to show or hide screen elements. For example, you can specify an
Internet Explorer profile if most of your viewers use Windows, or specify a Nokia or NTT DoCoMo profile for a
mobile audience. Changing basic profiles doesn’t change source code; rather, it simply provides an accurate preview.
You can freely switch from one profile to another as you develop a page.
View options are particularly powerful when combined with the @media rule and media type option for stylesheets.
If you’ve created different styles for media types such as screen and handheld, you can preview each of them by using
the Target Media option.
See also
“Media, font, and page rules” on page 195
To set view options for page layout
1 Select the Layout tab in the document window.
2 In the Options tab of the View panel, 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 stylesheet to apply it to the page, or choose a target media option to display a page that
contains an @media rule or a link to a stylesheet with a media type specifying formatting for print, screen display,
or a handheld device as the page would appear in that media. For example, choose handheld to display the page
as it would appear on a mobile device.
• Choose a stylesheet 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 Show Invisible Items to display or hide certain GoLive items in the page layout (these items do not show in
the browser). These items include Anchor Box, Comment, PHP Code element, and layer markers.
• Click Preferences to open the Invisible Elements Preferences dialog box and choose items that don’t show in the
browser window. The items you choose are displayed or hidden in GoLive when you select or deselect Show
Invisible Items from the View menu.
• Choose Visited Links, Active State, Hover State, or Focus State to preview the colors that have been chosen for
each link state.
See also
“To set default colors for text or links on the page” on page 97
“Media, font, and page rules” on page 195
ADOBE GOLIVE 9 78
User Guide
To open a page from the site in the Layout Editor
❖ Do one of the following:
• Double-click the page in the site window.
• To open a page with a particular tab showing, right-click (Windows) or Control-click (Mac OS) the file and
choose an item from the Open > Open in Mode menu. The menu lists all the tabs in the document window.
You can set an application preference to automatically open all pages in another tab.
See also
“About preferences” on page 20
To save pages in the site
You can save your web pages directly to the site’s root folder that stores the pages and media for your website. You
can also save your pages as components or page templates for the site.
1 Open the site file.
2 Select the document window, and choose File > Save or choose File > Save As, File > Save As Component, or File >
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.
4 Choose Root from the Site Folder menu in the Save As dialog box. You can also save the page in a custom folder
that you can create in the Assets area of the site window.
5 Click Save.
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 file name as the title.
To prevent the Set Title dialog box from appearing again, select Don’t Remind Me Again in this dialog and click OK.
Or, choose Edit > Preferences > Modules from the application window menu bar and then deselect SetTitle in the
Extend Scripts section.
See also
“To change the page title” on page 75
“About site assets, resources, and collections” on page 269
“About file names” on page 106
ADOBE GOLIVE 9 79
User Guide
Document type definitions
Setting the document type definition
A document’s doctype, which is specified in the !DOCTYPE declaration at the beginning of the document, tells
HTML validators and browsers which Document Type Definition (DTD) to use when handling the document. The
DTD specifies the elements that are allowed in the source code and the attributes for each element. For example, the
HTML 4.0 Strict DTD doesn't allow frames in documents, and the XHTML Basic DTD doesn’t allow font elements.
By setting a document’s doctype, you are declaring that the document complies with a particular DTD, which some
devices now require. Some cell phones, for example, require documents to comply with the XHTML Basic DTD. If
you are designing a document for display on cell phones, be sure to set the doctype of the document to XHTML
Basic. Most current versions of browsers can display documents that are not compliant with the document’s declared
DTD. But, by setting the doctype and making sure the document is compliant, you are preparing the document for
future versions of browsers that will require compliance. If a document doesn’t have a doctype, which is the case for
most older documents, browsers can still display the document.
If you set a document’s doctype and then use the Syntax Checker, GoLive checks the document’s structure and syntax,
and then highlights any elements that are not compliant with the DTD declared in the doctype. (See “Validating the
syntax of source code” on page 313.)
Changing a document’s doctype
You can set a document’s doctype when you create the document in the New dialog box or change the doctype of
one or more existing documents. For example, you can change the doctype of an HTML document, or you can
convert a document from HTML to XHTML and then choose an XHTML doctype. For best results, start by creating
the type of special document you want to ultimately deploy.
After you choose a doctype, GoLive sets the document’s doctype by inserting or changing the !DOCTYPE declaration at the beginning of the document’s source code. The doctype you set is also selected as the default DTD in the
Syntax Checker.
To change the doctype of one document
The doctype is context-sensitive—that is, if you are editing an HTML document, the valid HTML DTDs are
available. For an XHTML document, the XHTML DTDs are available, and for any other doctype, the associated
DTDs in the Markup tab of Web Settings are available.
❖ In the Layout Editor, choose Doctype from the document window menu
, and then choose a doctype from
the menu.
Note: If you associate imported DTDs with text or XML files in the Markup tab of Web Settings, those DTDs are also
available on the Doctype menu.(See “To import an XML DTD file” on page 362.)
To change the doctype of multiple files in a site
1 Open a site window and choose Advanced > Convert > Doctype.
2 Choose a doctype from the New Doctype menu. If Write Full Doctype is available, select it to ensure that GoLive
includes a complete doctype with URL.
3 Choose the files you want to convert using the Work On pop-up menu.
4 Click OK after you have completed the settings you want.
ADOBE GOLIVE 9 80
User Guide
To convert the doctype of a document from HTML to XHTML
1 Do one of the following:
• To convert a single document, choose Markup from the document window menu
in the Layout Editor, and
then choose Convert to XHTML. The Convert To XHTML dialog box opens.
• To convert multiple documents, open a site, select files you want to convert, and then choose Advanced >
Convert > To XHTML. The Convert to XHTML dialog box opens.
2 To make your converted XHTML document compatible with more browsers, select the following options to set
how GoLive converts the document from HTML To XHTML:
Write <?xml?> Choose Always to always include the <?xml?> declaration, choose Except UTF to include the decla-
ration unless the page’s encoding is set to UTF-8 or UTF-16 (<?xml?> declarations are not required if the document’s
encoding is set to UTF-8 or UTF-16), or choose Never to never include the declaration.
Wrap <style> Content Into CDATA Wraps all of the text inside stylesheets to conform to the XHTML specification.
Wrap <script> Content Into CDATA Wraps all of the text inside scripts to conform to the XHTML specification.
Note: Some browsers can’t display scripts and styles wrapped in CDATA. You can choose to wrap scripts and styles in
comments instead of CDATA: Choose Edit > Web Settings, click the Global tab, and choose Comments from the Wrap
Scripts In and Wrap CSS In menus.
Put A Space Character In Front Of “/>” Converts empty tags such as <empty> to <empty /> instead of <empty/> (no
blank space before the slash). This option helps make your document compatible with some browsers that can't
handle end tags that have the correct syntax according to standards published by the W3C.
Remove <meta> Encoding Element Removes the meta encoding element from the head section because the starting
XML element contains encoding information.
Remove Encoding Information If It Is UTF-8 Removes the encoding information if it is UTF-8, which is the default
encoding for XML.
3 Use the following options to set how you want GoLive to handle the conversion of the name attribute used in the
following elements: a, form, img, and map. The conversion of the name attribute can cause compatibility problems
in some browsers. HTML requires the name attribute for functionality, but the XHTML Strict DTD doesn’t allow the
name attribute in those elements.
Do Not Touch Does not change the name attribute or its value. For example, <form name="formName">
remains <form name="formName"> after conversion.
Copy To Attribute “ID” Copies the name attribute and its value to an ID attribute. For example, <form
name="formName"> becomes <form name="formName" ID="formName"> after conversion.
Convert To Attribute “ID” Converts the name attribute to an ID attribute. For example, <form name="formName">
becomes <form ID="formName"> after conversion.
Note: If you select the Do Not Touch option or the Copy To Attribute “ID” option and your document has an XHTML
Strict doctype, the Syntax Checker reports an error on the name attribute, but the document works correctly in a browser.
If you select the Convert To Attribute “ID” option, and your document has an XHTML Strict doctype, the Syntax
Checker doesn’t report an error, but the document might not work correctly in a browser.
4 Click OK.
ADOBE GOLIVE 9 81
User Guide
To convert the doctype of a document from XHTML to HTML
1 Do one of the following tasks:
• To convert a single document, choose Markup from the document window menu
in the Layout Editor, and
then choose Convert to HTML. The Convert To HTML dialog box appears.
• To convert multiple documents, open a site and select the files you want to convert, and then choose Special >
Convert > To HTML. The Convert To HTML dialog box appears.
2 Choose Write Full Doctype to ensure that GoLive includes a complete doctype with URL.
3 Use the following options to set how you want GoLive to handle the conversion of the ID attribute used in the
following elements: a, form, img, and map.
Do Not Touch Does not change ID attributes or their values.
Copy To Attribute “Name” (If There Is No Conflict) Copies the ID attribute and its value to a name attribute.
Convert To Attribute “Name” (If There Is No Conflict) Converts the ID attribute and its value to a name attribute.
Configuring the Objects panel for a doctype
After you set a document’s doctype, GoLive automatically disables buttons on the Objects panel and menu
commands so that you can’t add elements that are not compliant with the DTD for the current doctype. For example,
because the font element doesn’t comply with the XHTML Basic DTD, GoLive automatically disables the font size
and color options in the Tools panel and the Font menu commands.
The one exception where GoLive does not automatically disable tools is the icons in the Objects panel. You must
manually configure the Objects panel if you want to hide the icons for elements that are not allowed in the current
doctype.
Note: You can’t configure the Objects panel for an imported DTD.
To configure the Objects panel for a doctype
1 In the Objects panel, choose Configure from the panel Options menu.
2 Do one of the following:
• To show all icons in the Objects panel, choose GoLive.
• To hide the icons for elements not allowed in the current doctype, choose the current doctype.
Adding elements and scripts
To add 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.
1 Drag the desired icon from the Head set
in the Objects panel 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
in the upper left corner of the document window to open the head section pane.)
Section icon
ADOBE GOLIVE 9 82
User Guide
A
B
You can reposition head elements in the pane by dragging them.
A. Closed head section pane B. Opened head section pane
2 In the Inspector, choose various options and specify attributes for the selected element or script.
See also
“To add a browser-switch script” on page 84
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:
The Favorite icon Use to specify an image that appears with your page’s title in the Favorites or Bookmarks menu of
a web browser. Favorite icons should be 16x16 pixels. To specify an image that appears with all pages in your site,
name the image “favicon.ico” and upload it to your site’s root folder. (See “Publishing a site” on page 283 for more
information about uploading files to a publish server.) Use a Smart Favorite icon from the Smart set of the Objects
panel to specify a Smart Object as a favorite icon (see “Smart Favorite icons” on page 84).
The Keywords element Use 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 Advanced > 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 “To change the page title” on
page 75).
Comment Use 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 “To add comments to a page” on page 142.)
The Meta element Use 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.
ADOBE GOLIVE 9 83
User Guide
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 site window, choose Advanced > Convert > Encoding, select a new encoding, and click OK.
The Script element Use 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 324.)
The Refresh element Use 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.
<no edit> elements Use to add <no edit> 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 Use 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 UTF-8 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 Advanced > Document Encoding submenu, or change the character set for selected files in a
site by choosing Advanced > Convert > Encoding and selecting a new encoding in the Change Encoding dialog box.
(See “Non-roman character sets” on page 183.)
The Link element Use to define relationships between your current web page and other pages in your website, 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 Use 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 Use 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.
ADOBE GOLIVE 9 84
User Guide
To add a browser-switch script
A browser-switch script detects the web browser loading the page and automatically redirects viewers to an alternate
page based on their browser. You can also use the browser-switch script to separate Netscape from Internet Explorer
browsers based on browser-specific markup support.
1 Drag the Browser Switch icon
from the Smart set
in the Objects panel to the body of the page. GoLive
automatically moves it to the head section and opens the head section pane.
Note: Because 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.
2 In the Browser Switch Inspector, select the browsers that support the features on your page:
• To have GoLive determine browser compatibility, select Auto. 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.
When you have finished, try viewing your page with an incompatible browser and check whether the request is
correctly rerouted.
See also
“Specifying the destination URL for a link” on page 87
Smart Favorite icons
Favorite icons let you specify an image that appears with your page’s title in the Favorites or Bookmarks menu of a
web browser. When you use a Smart Favorite icon, GoLive enables you to include multiple images of different sizes
or quality, enabling the browser to choose the most appropriate image for the favorite icon. When you specify
multiple images, GoLive sorts the images in the favorite icon to provide best results with browsers that don’t support
all settings or that simply choose the first available image.
To use Smart Favorite icons
1 Drag the Smart Favorite icon
from the Smart set
of the Objects panel to the head section of the page.
2 In the Smart Favorite Icon Inspector, click the Browse button
image. (Smart Favorite icon source files should be 16x16 pixels.)
next to the Source field and specify a source
3 In the Settings window, choose image quality settings. Leave lower quality settings selected for browsers such as
Safari that don’t support alpha channels in favorite icons, and disable higher quality settings only if not needed (for
example, if your icon doesn't need true colors or an alpha channel).
4 Click OK, and specify a file name and location for the Smart Favorite icon target file.
ADOBE GOLIVE 9 85
User Guide
If you use a PSD file as the source file for a Smart Favorite icon, you can choose to use either layers or layer sets as
separate images to design specific versions for certain qualities or sizes. For example, you can design a high quality
version with a drop shadow in a PSD layer that you can then use only for a 32-bit version in GoLive. Another layer could
hold a version designed for fewer colors and without the drop shadow. By using PSD layers with different sizes, you can
also specify images for different icon sizes.
Creating links
About links
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. 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 Warnings area of the site window.
For information on creating links that originate from parts of an image, see “Image maps” on page 211.
See also
“About graphical site views” on page 109
“About site errors” on page 112
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 viewers 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 also
“Specifying the destination URL for a link” on page 87
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 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.
ADOBE GOLIVE 9 86
User Guide
• Select the placeholder object you want to link and use the Fetch URL or Create Link options in the Control panel
to set up the link.
See also
“Specifying the destination URL for a link” on page 87
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 email address in the text box, include “http://” or “mailto:” at the beginning, respectively.
• For selected images or objects, open the Hyperlink panel by choosing Window > Hyperlink, 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 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.)
• Choose the Link Tool from the Tools panel to create or modify hyperlinks or image maps.
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.
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.
See also
“About target frames for linked pages” on page 135
To create an empty reference link
❖ To create an empty reference link, do one of the following:
• Select the text or object in the page, and click the Create Link button
GoLive displays a bug icon
in the Inspector or Hyperlink panel.
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 panel. (See “Changing all
site URLs or links at once” on page 110.)
• Select the text or object you want to link and use the Create Link option in the Control panel to set up the link.
You can leave the reference empty.
To remove a link
❖ Select the linked text or object in the page, and then click the Remove Link
panel, or Control panel.
on the Inspector panel, Hyperlink
ADOBE GOLIVE 9 87
User Guide
Specifying and editing links
Specifying the destination URL for a link
You use the Inspector or Hyperlink panels, or the Fetch URL or Create Link buttons in the Control panel, 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 panel’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 panels when you need to link something to a file
in the site.
The pop-up menu to the right of the Browse button in the panel contains 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 site window.
See also
“Changing all site URLs or links at once” on page 110
To specify the link’s URL by dragging the destination file
• For resource links, drag an image file or other media file from 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 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 panel to the page.
(See “About site assets, resources, and collections” on page 269.)
To specify the link’s destination by 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 may be a file listed in the Assets area,
a URL, or an e-mail address in the Resources/Hyperlinks list. You can also drag to the Show Page Properties
icon
or an anchor
in an open page.
• 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.
ADOBE GOLIVE 9 88
User Guide
Drag the pick whip in the Inspector to a file in the site window.
See also
“Using anchors for links” on page 89
“Site URLs and e-mail addresses” on page 280
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 use the Clean Up Site command to move a copy of the file into the site.
See also
“To specify options for cleaning up a site” on page 106
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 pop-up
menu to the right of the Browse button.
Editing links and adding query parameters to 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.
ADOBE GOLIVE 9 89
User Guide
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.
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.
See also
“About web forms” on page 260
To edit a URL or add query parameters
1 In the Inspector, choose Edit from the pop-up menu to the right of the Browse button.
2 In the Edit URL dialog box, do any of the following:
• To specify a particular URL, modify or type a new URL in the Path text box.
• To locate and select a new destination page, click Browse.
• To use an absolute or relative path for the URL, click Make Absolute or Make Relative. By default, GoLive uses
relative URLs for the destinations of links.
Note: You can also make URLs absolute for a specific site, or set a preference to make all URLs absolute for all sites.
• To add parameter names and values to the list of Query Parameters, type them in the text boxes and click Add
Parameter.
• 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.
See also
“To make the path of a link absolute” on page 109
Anchor links
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:
• Don’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).
• Place anchors near the left margin of the page, so that the anchors work more consistently across browsers.
ADOBE GOLIVE 9 90
User Guide
• Test links to anchors extensively in browsers before publishing your website. Anchors don’t always work the same
way in all browsers.
Note: You won’t be able to preview certain link and anchor combinations in Layout Preview.
To create an anchor
❖ Do one of the following:
• Drag the Anchor icon from the Basic set of icons in the Objects panel 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.
To create an anchor link to a PDF bookmark
A PDF bookmark links to a specific location in a PDF file. (Anchor links to PDF bookmarks don’t work with Adobe
Acrobat® 6.0 in Mac OS X.)
1 Create a link to the PDF file.
2 In the Inspector, click Edit PDF Anchor.
3 In the PDF Anchor Editing dialog box, do one of the following:
• To open the PDF file to a bookmark, select the bookmark in the Settings pane.
• To open the PDF file to a specific page, select Use Page Number and enter the page number in the Use Page
Number text box.
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.
See also
“Creating resource and navigational links” on page 85
“Specifying the destination URL for a link” on page 87
ADOBE GOLIVE 9 91
User Guide
Getting information about documents
To view document statistics for the current page
❖ Open the document for which you want to view statistics. Choose File > Statistics to display the Document
Statistics dialog box, which provides 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).
Using metadata with site files
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 modify the metadata of any site file that already contains XMP (eXtensible Metadata Platform) data, except
HTML files. The information you add is embedded in the file using XMP. 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, you can use the XMP SDK to add fields to the File Info dialog box. More information on
XMP and the XMP SDK is available on the Adobe Solutions Network at www.adobe.com/go/gl_partners.
To view or change metadata in a document
1 Select one or more files in the site window and choose File > File Info.
2 Select a category from the list on the left, review or change the desired information, and click OK.
Note: If you selected more than one file, selecting the checkbox next to items in the Description and Origin categories
applies the information to all files.
Description Specifies 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 Specifies 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.
Advanced Lets you view the XMP data for the file in a structured format.
Raw Data Lets you view the raw XMP data for the file.
ADOBE GOLIVE 9 92
User Guide
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 file name, choose a location for the file, and click Save.
To import metadata into a document
❖ Select the documents that you want to import metadata into and 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.
Color
About the Color panel, Swatches panel, and the Color Picker
Use the Color panel, Swatches panel, swatch library panels, and the Color Picker to apply color to page backgrounds,
text, and objects on a page.
Color panel Contains color models based on CMYK, RGB, HSV, HSB (for video hardware), and Grayscale. The
Color panel 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 box displays the hexadecimal value of colors you’ve chosen.
Swatches panel, swatch library panels You can add or remove custom swatches to the default Swatches panel, and
open multiple swatch library panels, such as panels that include site colors (colors you’ve used in a site) and recent
colors (colors you’ve added to the Recent Colors list in the Color panel). The Show Search Fields option in the
Swatches panel and swatch library panels lets you search for colors by name or hexadecimal value.
ADOBE GOLIVE 9 93
User Guide
Color Picker In the Color Picker, you can select colors based on the HSB (hue, saturation, brightness), RGB (red,
green, blue), CMYK (cyan, magenta, yellow, black), or Lab color models. The Color Preview field displays the
currently selected color above the previously selected color. You can also specify a color based on hexadecimal values,
and add colors from the Color Picker to the Swatches panel. The Color Picker can be set so you choose from only
web-safe colors.
Eyedropper tool Use this tool in the Color panel, Swatches panel, or swatch library panels to extract colors from an
image or screen element.
Note: When you use the Color panel, Swatches panel, swatch library panels, or the Color Picker to apply color to text or
objects, GoLive inserts the color attribute inside the font element. Because the font element can cause problems with web
browsers, you may want to apply color to text and objects using CSS styles instead of the Color panel, Swatches panel,
swatch library panels, or the Color Picker. If you use the Color Tool in the Tools panel, GoLive writes the color to the
appropriate CSS file.
See also
“Applying styles” on page 204
To color-manage swatches and the Color Picker
Colors sometimes look different when viewed on different monitors, when printed, or when displayed on the web.
Print applications use color management to produce consistent color across different devices. Web browsers don’t
use color management to display colors on web pages. GoLive offers you the option to view colors by using a colormanaged preview in the Swatches panel, swatch library panels, or in the Color Picker.
❖ Do one of the following tasks:
• To view swatches in the default Swatches panel or in a swatch library panel using color management, choose Color
Managed View from the panel menu.
• To view colors in the Color Picker using color management, select Color Managed Preview in the Color Picker
window.
To use the Color panel
The Color panel lets you mix and edit colors.
• To display the Color panel, choose Window > Color.
Note: You can also open the Color panel by clicking a color field (for example, in the Inspector or Tools panel).
• To change the color model, choose a color model from the Color panel menu, or click a color model button,
located at the top of the Color panel.
• To display only web-safe colors, choose Only Web Colors from the Color panel menu. 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.
• To display color values in percentages, choose Percent Values from the Color panel 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 panel menu.
ADOBE GOLIVE 9 94
User Guide
• To show or hide the Recent Color list, choose Show Recent Colors from the panel menu.
• To manually add a color to the Recent Color list, either select a colored element on a page, such as colored text, or
select a color from the Color or Swatches panel, and then click the Add Color To Recent Colors List button
.
To use the Swatches panel or a swatch library panel
You use the default Swatches panel or a swatch library panel to select colors by color swatch, name, or hexadecimal
value. You can open multiple swatch libraries concurrently, and save Recent Colors, Site Colors, or custom swatches
added to the Swatches panel as an Adobe Swatch Exchange file.
Note: If you click the lower right corner of a color field, GoLive displays the last swatch library viewed.
• To display the Swatches panel, choose Window > Swatches.
• To open a swatch library, choose Open Swatch Library from the Swatches panel menu.
• To view recently used colors, choose Open Swatch Library > Recent Colors from the Swatches panel menu. GoLive
displays the date and time the swatch was added to the Recent Colors swatch library in the Name text box of the
swatch library panel.
• To view a list of site colors, choose Open Swatch Library > Site Swatches from the Swatches panel menu. (See “Site
colors” on page 277.)
• To add a custom swatch to the Swatches panel, choose a color from the Color panel or a swatch library panel, and
then click the Create New Swatch button
in the Swatches panel.
• To remove a custom swatch from the Swatches panel, select the swatch and click the Delete Swatch button
.
• To edit swatches in the default Swatches panel, click the Edit button
in the lower left corner of the Swatches
panel and use the Color panel to adjust the swatch. You can also edit the color name and value in the Name and
Value boxes while in Edit mode.
• To enable the current swatches in the default Swatches panel or in a swatch library to appear when you next open
GoLive, choose Persistent from the Swatches or swatch library panel menu.
• To change how swatches appear in the panel, choose an option from the Swatches panel or swatch library panel
menu: List View to display the hexadecimal value and thumbnail of each swatch, or Small Thumbnail to display a
thumbnail of each swatch.
To search for a color in the Swatches panel or in a swatch library panel
1 If you’re using the default Swatches panel, make sure that you’re not in Edit mode (deselect Edit Mode from the
Swatches panel menu).
2 Choose Show Search Fields from the Swatches panel or swatch library panel menu.
3 Do one of the following, and then press Enter or Return:
• 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.
ADOBE GOLIVE 9 95
User Guide
To save a swatch library as an Adobe Swatch Exchange file
You can save the Recent Colors swatch library, the Site Colors swatch library, or custom colors added to the Swatches
panel in Adobe Swatch Exchange format.
1 Choose Save Swatches for Exchange from the Swatches panel or swatch library panel menu.
2 In the Save Swatch Library As Adobe Swatch Exchange File dialog box, enter a name for the swatch library in the
File Name box, and choose a location in which to save the library.
3 Click Save.
To open Adobe Swatch Exchange files, choose Open Swatch Library > Other Library from a swatch library panel
menu, select the file, and click Open.
To display the Color Picker
❖ Double-click a color field (for example, in the Inspector or Tools panel).
To identify web-safe colors in the Color Picker
❖ Select the Only Web Colors option in the lower left corner of the Color Picker, and then choose any color in the
Color Picker. Any color you pick with this option is web-safe.
To specify a color using the Color Picker
• To specify a color in HSB, RGB, or Lab color modes, click a component next to the HSB, RGB, or Lab values and
select a color by dragging the triangles along the slider, clicking in the color slider, or clicking in the color field.
• To specify a color in CMYK mode, specify each component value as a percentage of cyan, magenta, yellow, and
black.
• To specify a color using hexadecimal values, enter a hexadecimal value in the # box. For example, 000000 is black,
ffffff is white, and ff0000 is red.
To add a color from the Color Picker to the Swatches panel
❖ Select a color in the Color Picker and click Add To Swatches.
To apply color to an object
1 Select the object you want to color (for example, a table cell).
2 Do one of the following tasks:
• Double-click the color field in the Inspector or Tools panel, choose a color from the Color Picker, and click OK.
• In the Inspector or Tools panel, click the color field and select a color from the Color panel, the Swatches panel,
or a swatch library panel.
• In the Inspector or Tools panel, click the lower right corner of the color field and choose a color from the swatches
that appear.
• In the Inspector or Tools panel, click the lower right corner of the color field and choose a swatch library. Click
the corner again to choose a color from the swatches displayed above the list of swatch libraries (GoLive displays
the swatches from the swatch library you chose).
ADOBE GOLIVE 9 96
User Guide
See also
“To apply an image or color to the page background” on page 96
“To add color to text” on page 174
To remove color from a selection
❖ Select the colored object and do one of the following:
• Deselect Color in the Inspector.
• Choose Remove Color from the Color menu in the Tools panel.
To extract a color by using the Eyedropper tool
❖ Do one of the following:
• In the Color panel, click the Eyedropper tool
, move it over the color that you want to extract, then click to
select the color.
• In the Swatches panel, make sure that you aren’t in Edit mode (choose Edit Mode from the Swatches panel menu
to deselect it), move the pointer over a swatch until it changes to an eyedropper
to the color that you want to extract.
, and then drag the eyedropper
Note: Notice that the color changes in the Color panel as you drag.
To apply an image or color to the page background
1 Click the Show Page Properties icon
in the upper right corner of the document window.
2 In the Page Inspector, click the Page tab.
3 Under Background, do one of the following:
• Select Image and reference an image file.
• Select color and double-click the color field. Select a color from the Color Picker and click OK.
• Select Color and click inside the color field. Then select a color from the Color panel or the Swatches panel, or
from a swatch library panel.
• Select Color, click the lower right corner of the color field, and choose a swatch library. Click the corner again to
choose a color from the swatches displayed above the list of swatch libraries (GoLive displays the swatches from
the swatch library you chose).
Note: 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.
See also
“About preferences” on page 20
ADOBE GOLIVE 9 97
User Guide
To set default colors for text or links on the page
You use the Page Inspector to set default colors for text that you type on a page and for the 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).
1 Click the Show Page Properties icon
in the upper right corner of the document window.
2 In the Page Inspector, click the Page tab and do one of the following tasks:
• To color all text on the page, select Text.
• To color the various stages of hypertext links on the page, select Link, Active Link, or Visited Link.
3 Do one of the following tasks:
• Click the color field, and select a color from the Color, Swatches panel, or a swatch library panel.
• Click the lower right corner of the color field and choose a color from the swatches that appear.
• Click the lower right corner of the color field and choose a swatch library. Click the corner again to choose a color
from the swatches displayed above the list of swatch libraries (GoLive displays the swatches from the swatch
library you chose).
• Double-click the color field and choose a color from the Color Picker.
98
Chapter 5: Managing and viewing
websites
Site management features and preferences
About site management
A website 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 Provides access to all of the site files and assets so that you can view and manipulate files and folders
within your site. 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. If you work with Adobe Bridge, you may find the layout of the site window familiar.
Graphical views Lets you look at the hierarchy of your site with different representations. Graphical site views are
useful for examining the navigation of your site, reviewing files, or establishing or correcting links.
In & Out Links panel Lets you manage your links. You can use this link management tool 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 panel to change all references in your site to the new file name.
See also
“About graphical site views” on page 109
“About GoLive sites” on page 64
“Changing all site URLs or links at once” on page 110
“About the site window” on page 99
“About site assets, resources, and collections” on page 269
Specifying preferences and settings for websites
When you manage a website, 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, Color Labels, Clean Up Site, and Upload/Export. 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, Script Library, and others. The site-specific settings override the Site preferences.
ADOBE GOLIVE 9 99
User Guide
To set preferences that affect all sites
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 In the Preferences dialog box, select one of these options from the list on the left: Site
Library , or Internet
.
and a Site category, Script
3 Set the preferences you want to apply to all sites.
4 Click OK.
To specify site-specific settings
1 Open a site.
2 Choose Site > Settings.
3 In the Site Settings dialog box, click a category from the list on the left pane and then select options on the right.
4 If the Site Specific Settings option is available for a category, select it to have the site-specific settings override the
Site preferences.
5 Click OK.
Working with the site window
About the site window
GoLive organizes a site into six areas to handle different aspects of site management. You can select from the list on
the left side of the site window to view the contents of the different areas on the right side of the site window. The site
window includes a Preview and Info tab that allow you to inspect the contents of the areas. Also, the site window
includes a menu bar underneath the list of areas on the left and a menu bar at the top of the site window area pane
to help you manage the area contents.
ADOBE GOLIVE 9 100
User Guide
The site window
Assets Contains HTML, XHTML, XML, media, and other files, as well as folders that you can use to organize the
files.
The status column in the Assets contains icons that show you each file’s status. For instance, the checkmark icon
indicates that the file is error-free—that all files referenced in it have been found. A construction worker indicates
that the file is empty. Other icons may indicate warnings or errors.
Resources Displays styles, color swatches, external URLs and e-mail addresses referenced by the site files, and font
sets used.
Warnings Contains missing files, orphan files, Smart Object warnings, and files that have a name that doesn’t meet
your file name constraints. An orphan file is referenced in a link but GoLive can’t find the file. If you manage files in
the site window, you can avoid creating orphan files.
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. This area allows you to search for all components and all templates. An extensive list of preexisting queries is available when you select the New Collection button. You can use collections to organize multiple
files within a site to streamline your work and save time, such as from tedious manual searching or from redesigning
pages for which you already have a basis for creating.
Publish Server Displays the site on a remote server while GoLive is connected to a publish server (an FTP, WebDAV,
or local file server). Allows you to create a new server and add or view a favorite server and manage Publish Server
settings.
Trash Contains a list of the files that have been deleted from the site. You can click Empty Trash to move these files
into the system recycle bin.
ADOBE GOLIVE 9 101
User Guide
See also
“About the Welcome Screen and work area” on page 7
“About graphical site views” on page 109
“About site errors” on page 112
To open a site file in the site window
❖ Do one of the following:
• Choose File > Open, browse to the site file (.site), select it, and then click Open.
• Double-click the site file on your system desktop.
Opening a site file automatically creates a backup of the file. GoLive deletes the backup when you save and close the
site file.
Note: 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.
To show or hide the left pane of the site window
❖ Click the Toggle Split View icon located beneath the scroll bar at the bottom of the window.
To customize the display of the site window
• To change the sort order of a column, click the column’s head.
• To sort by another column, click the column head.
• To show and hide columns, right-click on the column head and choose a column name from the pop-up menu.
• To resize a column, 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 leftmost column in any tab.)
• To go up one level in the folder or group whose contents are listed in the tab, click the Go Up button
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.
See also
“Panels, tools, and menus” on page 10
About site files and folders
In GoLive, a site is a collection of files that are used as resources for developing and maintaining a website on a web
server. Viewers of the website only see files that you upload to the web server. 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.
The files comprising a GoLive site include the site file (.site) and the contents of the aglextra folder and the CSS folder.
• Files and file information that are managed by the site file are displayed in the various site window views.
ADOBE GOLIVE 9 102
User Guide
• The contents of the site content folder are listed in the Assets area of the site window.
• The files in the aglextra folder are not displayed in the site window. These files are used for specific settings, such
as for publishing, and they are not uploaded to the web-server.
See also
“To upload site files to a publish server” on page 287
Working with files and folders in the site window
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 Assets area of the site window.
Note: 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. Therefore, 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
“To refresh the site window” on page 104.)
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 Assets are stored in regular folders. All non-file items are stored in groups. Items in the
Collections are stored in collections.
Dragging and dropping files in the site window
You can drag files around in the site window just like you drag files on your desktop. When you drag 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. Using the Objects panel, 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 panel for storage with the site or application.
To create a folder (group, regular folder, or collection)
1 Click the view where you want to create the folder.
2 If you want the folder you are creating to be subordinate to an existing folder, select the existing folder.
3 Do one of the following:
• To create a new folder, click the Create New Folder button
on the menu bar on the site window, or choose
right-click in the Assets area of the site window and choose New > Folder.
• To add a group in the Resources area of the site window, click the Create New Group button on the menu bar for
Swatches, Hyperlinks, or Font Sets.
• To add a collection to the Collections area of the site window, click the New Collection button
in the site
window and select either Add, Manage Collections, or Manual Collection. Using these options, you can add a
collection using certain GoLive parameters, you can edit and duplicate collections, or you can manually create a
collection.
GoLive assigns a generic name of “untitled folder” for a new folder in Assets; “manual collection” for a new manual
collection in Collections; and “untitled group” for a new group in Resources.
ADOBE GOLIVE 9 103
User Guide
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 also
“To add an existing file to a site” on page 74
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 the site window.
• Drag an object into a group.
Note: 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 Go Up button
at the top of the tab.
• Right-click on a folder in the Assets area of the site window and select Open > Open in New Window. You can
open any folders you wish into separate windows and drag and drop files between them.
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.
Inspecting, tracking, and deleting files
Inspecting files or folders
The Info and Preview tabs are located on the bottom left of the site window. You can select a file or folder in the site
window and then review the Preview and Info tabs for basic file or folder information and to view a thumbnail.
You can also use the Info tab to change the publish settings and the label for the file or folder.
See also
“About file status information” on page 115
“Naming files and folders” on page 107
“To change the page title” on page 75
To inspect a file or folder
1 Select the file or folder in the site window.
2 Click on the Preview or Info tabs to view a thumbnail or review information about the file or folder.
ADOBE GOLIVE 9 104
User Guide
To delete a file, regular folder, object, or group
You can delete items from all site window areas with the exception of Warnings.
1 Select the item.
2 Click the Delete button
on the site window.
3 If necessary, confirm the deletion by clicking Yes.
When you delete a file or folder from the site, you send it to the Trash area of the site window. Also, you can drag
files to your operating system’s trash or recycle bin.
Note: For many purposes, updating the site window view is preferable to deleting the file or object. (See “To refresh the
site window” on page 104.)
To recover a file from the Site Trash
1 Select Trash in the left side of the site window.
2 Select the file you want to recover.
3 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 site window.
To move files to the system Recycle Bin or Trash
❖ In the Trash area of the site window, do one of the following:
• To remove all files from the Trash, click Empty Trash.
• To move an individual file from the Trash to the system Recycle Bin or Trash, select the file and then drag it to the
system Recycle Bin or Trash icon.
Refreshing and cleaning up sites
To refresh the site window
Refreshing items in the site window lets you view the actual site—that is, the contents of the site’s folder(s) in the
Assets area of the site window.
1 Do one of the following:
• To refresh one of the site window views, select one of the view options in the left side of the site window. In Assets,
also open the desired folder.
• To refresh the Publish Server view, connect to a publish server, and then open the server directory you want to
refresh.
2 Right-click anywhere in the right half of the site window and select Update > Refresh All.
If your site contains a password-protected PDF file, GoLive will prompt you for the password when you refresh the
site.
ADOBE GOLIVE 9 105
User Guide
Note: Refreshing the site window may result in the appearance of files being added to the site window, files being
removed, or both, depending on changes you’ve made to files both inside 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.
Adding used items to 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 in the site window.
Once found, GoLive adds these items to the appropriate view of the site window. For example, GoLive adds a color
to the Swatches area of Resources if the color is being used on a page but wasn’t previously listed in Swatches.
If GoLive finds new references or addresses that need to be listed in the Hyperlinks area of Resources, GoLive creates
a Scanned URL or Scanned Addresses group for them in the list. Similarly, Scanned Font Sets groups are created in
the Font Sets area of Resources if new font sets are found.
You can remove references, colors, or font sets that are not being used in your site from the Hyperlinks, Swatches, or
Font Sets areas.
To add used items to and remove unused items from the site window
1 Choose Site > Clean Up Site.
2 Select the desired options under Add Used and Remove.
3 Click OK to confirm the removal of unused items.
To update site files that are dependent on site extras
When you update site files, GoLive checks the content of the Components, Templates, and Smart Objects for updates
to that content made outside of GoLive.
1 Open a site.
2 Do one of the following:
• To check all components, templates, or Smart Objects for updates, right-click in the site window and choose
Update > All Dependent Files.
• To check specific components, templates, or Smart Objects for updates, select templates, components, or Smart
Objects in the Assets or Collections areas of the site window (Control-click to select multiple files), and then rightclick and choose Update > Files Dependent On Selection.
3 If necessary, select files to update in the Update Dependent Files dialog box.
See also
“About site assets, resources, and collections” on page 269
“Advantages of Smart Objects” on page 222
ADOBE GOLIVE 9 106
User Guide
To clean 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. If the site references files or objects that are located
outside of the site, you can also use this command to copy those files or objects into the Assets area of the 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. (See “To specify
options for cleaning up a site” on page 106.)
3 If the Copy Files or Clean Up Site dialog box appears, select the files you want to copy into the site or remove from
the site and then click OK. Click OK in the Update Files dialog box.
To specify options for cleaning up a site
1 Do one of the following:
• To specify options for cleaning up the active site only, 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 select Site from the list on the left. Then click Clean Up Site.
2 Select options as follows:
• To refresh the view of items listed in the site window, select Re-search For Files.
• To copy files that are used in your site into the site folder if they are stored outside the site, 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 site window, select Hyperlinks, Swatches,
or Font Sets.
• To move files not being used in your site to the 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 site window, select Unused
Hyperlinks, Unused Swatches, or Unused Font Sets.
• To use the default settings for all options, click Factory Settings.
3 Click OK.
Providing names and paths for files
About file names
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, MS-DOS®, or some other operating system. GoLive comes with a set of
file name rules that ensure cross-platform compatibility. When a file name violates one of the rules, a warning
appears in the Warnings area of the site window.
You can examine, modify, delete, and add file name rules. (See “File name constraints” on page 107.)
ADOBE GOLIVE 9 107
User Guide
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.
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 file name at the
same time. For information on updating an entire site for a URL that other files reference, see “Changing all site
URLs or links at once” on page 110.
If you use a name for a file or folder that contains illegal characters as defined by the current file name constraint for
the site (or all sites), GoLive displays warnings in the Warnings area of the site window or the Status column of the
Assets area in the site window.
To rename a folder
❖ Select the folder name in the Assets area of the site window and then type in a new name.
To rename a file
❖ Select the file in the Assets area of the site window and then type in the new name.
File name constraints
GoLive alerts you if you use a file name that doesn’t meet the designated file name 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), MS-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 file name constraints instead of GoLive.
To check for file name constraint violations
❖ Check the Warnings area of the site window for Filename Warnings. If there is a warning, you can expand the area
to view the files that violate the constraints.
To change file name constraints
1 Do one of the following:
• To change file name constraints for the active site only, choose Site > Settings. Then click Filename Constraints on
the left, and select Site Specific Settings.
• To change file name constraints for all sites, choose Edit > Preferences (Windows) or GoLive > Preferences
(Mac OS), expand Site on the left, and then click Filename Constraints.
2 Choose a set of constraints from the Selected Constraints menu.
3 Click OK.
See also
“File name constraints” on page 107
ADOBE GOLIVE 9 108
User Guide
To add a set of file name constraints
1 Do one of the following:
• To add a set for the active site only, choose Site > Settings. Then click Filename Constraints on the left, and select
Site Specific Settings.
• To add a set for all sites, choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), expand Site on
the left, and then click Filename Constraints.
2 Choose a set of file name 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.
See also
“File name constraints” on page 107
Using absolute link paths
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.
For example, the 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.
ADOBE GOLIVE 9 109
User Guide
See also
“To make the path of a link absolute” on page 109
“To set a preference that makes all new links absolute” on page 109
“To specify a site setting that makes all new links absolute in the active site only” on page 109
To make the path of a link absolute
You can specify absolute paths for all new links or for specific links.
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 panel, if it is checked.
(Unchecked indicates the link is absolute.)
• Choose Edit from the URL menu in the Inspector panel. 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 also
“About links” on page 85
“Editing links and adding query parameters to links” on page 88
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 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 Choose Site > Settings.
3 Select URL Handling.
4 Select Make New Links Absolute, and then click OK.
Working with graphical site views
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 website,
and examine the links and relationships between pages.
To open the In & Out Links panel, select Window > In & Out Links.
ADOBE GOLIVE 9 110
User Guide
You can use the In & Out Links panel to see incoming and outgoing links for files, and change links and file references throughout a site.
Changing the display of the site window
Viewing thumbnails
When you edit and save an HTML or XHTML file, its thumbnail is stored in the site file. You can view the thumbnail
in the site window. GoLive automatically updates thumbnails when necessary.
To change the display for the site window
1 Open a site in the site window.
2 Click one of the site views on the right side of the bottom of the site window. You can view the files in the site
window in a list or as thumbnails, tiles, or large icons.
Editing links and URLs sitewide
Changing all site URLs or links at once
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 panel to view links
The In & Out Links panel 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
Warnings area of the site window, and showing all of the pages linked to a missing file.
You can use the In & Out Links panel with any file or non-file item in the site’s folder—that is, with any file or item
listed in the Assets, Resources, Collections, Warnings, or Trash areas in the site window. For example, you can use
the In & Out Links panel to show the files that use a color listed in Swatches in the Resources area, or use a cascading
stylesheet located in the CSS folder in the Assets area of the Site window.
You can use the Renditions tab of the In & Out Links panel 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 panel to view links and file references
1 Choose Window > In & Out Links and click on the Links tab.
ADOBE GOLIVE 9 111
User Guide
2 Do one of the following:
• Select the file or non-file item in the site window.
• Open the file in a document window.
Incoming links to the file appear on the left side of the In & Out Links panel, 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. As you move the mouse pointer over a file in the In & Out Links panel, a tool tip appears showing information
about the file.
The In & Out Links panel also supports cascading stylesheets (CSS) classes and identifiers.
Use the backward and forward arrow buttons at the bottom left corner of the In & Out Links panel to navigate
between link views in the In & Out Links panel.
To limit the types of links appearing in the In & Out Links panel
1 Choose Options from the In & Out Links panel 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 panel
1 Choose Window > In & Out Links and click on the Renditions tab.
2 Do one of the following:
• Select the file or non-file item in the site window.
• Open the file in a document window.
The In & Out Links panel displays implied links to or from the file.
To change all links or URLs to a destination item
1 Display the view 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, choose Window > In &
Out Links.
• If the new destination item you want to use as a replacement is not visible in the site window, choose Site > Change
Links/Hyperlinks Sitewide.
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
panel for the old item to the replacement item 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 Links dialog box. Then click OK.
5 In the Change Links 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.
ADOBE GOLIVE 9 112
User Guide
Fixing site errors
About 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 Warnings area of the site window and the
In & Out Links panel to list and track link errors.
If a file in the site’s folder contains an error or possible error, the Status column of the Assets area of the site window
.
shows one of the error icons rather than the checkmark icon
Bug icon
Alert icon
Indicates broken links in a web page file.
Indicates a Smart Object warning or other warning.
Indicates an empty page.
Empty Page icon
Stop icon
Indicates a missing file.
Question mark
Indicates a file that GoLive cannot open.
Error icon Indicates one or more files with that error in the folder (the icon appears in the Status column for a folder).
Note: Before checking the site for errors, be sure to refresh the site window to display the latest status information by
choosing Site > Refresh from the application window menu bar.
To fix a broken link listed with a Bug icon using the Link tool
1 Double-click the page with the broken link in the Assets area of the site window.
2 Select the Link tool from the Tools panel. The links in the page are highlighted according to whether they are
functional or broken.
3 Select each broken link and correct it using the link options in the Control panel, Inspector, Hyperlinks, or In &
Out Links panels.
To fix a broken link listed with a Bug icon using the Inspector
1 Make sure the Inspector panel is displayed.
2 Double-click the page with the broken link in the Assets area of the site window.
3 To show link warnings in the page, Choose View > Show Link Warnings.
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.
ADOBE GOLIVE 9 113
User Guide
See also
“About links” on page 85
To find the source of Smart Object warnings
Smart Object warnings occur when you copy a Smart Object but don’t create a separate target file for it (By default,
copies share target files).
1 Right-click (Windows) or Control-click (Mac OS) the warning icon
.
2 Choose Open > Open Related Smart Object Pages [x], where x is the number of pages that reference the Smart
Object.
See also
“To copy Smart Objects” on page 224
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
(Windows) or
(Mac OS) indicates that GoLive cannot find a file.
delete it. The Orphan File icon
The Warnings area 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 site folder is listed in Warnings as an orphan file if it is referenced in a page listed in the Assets area in the site window. The same image file is not listed in Warnings if it is referenced in a template because templates are not uploaded to the server.
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 Warnings area of 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 Assets area of the site window and, if necessary, change
the link to refer to the new name.
• To use the In & Out Links panel to show the pages that are linked to the file, choose Window > In & Out Links.
Then use the pick whip
in the Links tab of the In & Out Links panel to fix the link.
• To use the Inspector panel 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.
• To restore a file that has been deleted, drag the file from the Trash list in the site window to its original location in
Assets.
When you clean up a site, you can specify that GoLive copy all orphan files to the site folder and delete the entry for
the file from the Orphan list in the Warnings area of the site window.
ADOBE GOLIVE 9 114
User Guide
See also
“Changing all site URLs or links at once” on page 110
“To find files within a site” on page 114
“To specify options for cleaning up a site” on page 106
Checking external URLs and e-mail addresses
An external URL references a page outside your file system—that is, a page with an address that begins with http://,
ftp://, or 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 Hyperlinks area of Resources.
See also
“Site URLs and e-mail addresses” on page 280
To check the validity of external URLs
1 Be sure you have online access to the Internet.
2 Open the site.
3 Choose Resources and then Hyperlinks in the left side of the site window.
4 Right-click anywhere in the Hyperlinks list and choose Get Hyperlinks Used to update the site.
5 Right-click again and choose Check Hyperlinks. The Status column in the Hyperlinks list shows the Bug icon
for any invalid external links.
To find files within a site
You can find individual files or objects (such as colors and e-mail addresses) throughout your site. This feature 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 file name or URL.
To make a quick search for items across your site, use the Quick Search text box
in the site window.
1 Open a site file, or bring an open site window to the front.
2 Right-click anywhere in the Assets area of the site window and choose Find > Site Assets.
3 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.
4 In the text box, enter the full or partial name, URL, or hexadecimal value of the file or object you are searching for.
5 Choose an option from the Search In menu. For example, choose Hyperlinks to search for a specific URL.
6 Click Find All. GoLive displays the items found in the Matches list. (Click Instant Find to have GoLive start a
search automatically.)
7 To reveal a file in the site, select it in the Matches area 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.
ADOBE GOLIVE 9 115
User Guide
Providing file status information
About file status information
As you build and update a website, 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 Info tab on the site window. The publish state lets you
specify whether you want to publish a file or folder on a web server or not.
You can also provide status information about a group of files by creating a collection with a significant name such
as “Reviewed.” (See “Collections” on page 281.)
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 also
“To set upload options” on page 288
To assign a publish state to a file or folder
1 Select the file or folder in the Assets area of the site window.
2 In the Info tab in the lower left part of the site window, choose a publish state for the file or folder from the Publish menu.
Assigning status labels
GoLive comes with default color-coded file status labels red, blue, orange, green, yellow, purple, and gray. 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 Hyperlinks
in the Resources area in the site window. (See “About site errors” on page 112.)
To add or edit a file status label
1 Do one of the following:
• To add or edit a status label for all sites, choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS),
select Site from the list on the left, and then select Color Labels.
Note: You can only edit user-defined statuses.
• To add or edit a status for the active site only, choose Site > Settings. In the Site Settings dialog box, select Color
Labels from the list on the left, and then select Site Specific Settings to override the settings in the Preferences
dialog box.
Note: If you want the status in the Preferences dialog box to apply to an existing site, open the site and make sure that
Site Specific Settings is deselected in the Site Settings dialog box.
ADOBE GOLIVE 9 116
User Guide
2 Do one of the following:
• To add a new label, click the Create New Item button
. A new white label appears with the name “New Status”
in the bottom of the Site Settings dialog box.
• To edit an existing user-defined label, select it.
3 Do any of the following:
• Enter a name for the label in the text box.
• Click the lower right corner of the color field and select a new color from the swatches that appear.
• Click the Delete Item button
to delete the label.
4 Click OK.
To assign a status label to a file or folder
1 Select the file or folder in the Assets area of the site window.
2 In the Info tab in the lower left part of the site window, choose a status for the file from the Label menu.
117
Chapter 6: Laying out pages
Page layout for the web
Page layout techniques
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. CSS layout objects, tables, layers, frames, and GoLive layout grids and text boxes
provide the containers for holding and positioning text, images, animations, and movies.
CSS-based designs
CSS layout objects are used for advanced CSS-based layouts including liquid layouts, which enable you resize the
layouts to accommodate the viewer’s screen settings. Liquid layouts are quickly becoming the web standard and offer
both designers and viewers more flexibility than table-based designs. In GoLive, you can instantly create a liquid
layout by simply dragging preconfigured CSS layout objects from the CSS tab of the Objects panel to the page. The
Container tool in the Tools panel also allows you to create new CSS-based layouts or add coding to existing
documents.
Layout grid-based designs
GoLive CSS- or table-based layout grids enable you to create designs that let you freely position objects anywhere on
the page. You can convert a CSS-based layout grid to a table-based layout grid. You can also convert a table-based
layout grid to an HTML table.
Table-based designs
You can position images, text, and other objects on the page by placing them in table cells. To conceal the table
structure, you can leave cells empty and hide table borders.
GoLive provides two ways to create table-based page layouts: standard HTML tables or CSS table-based layout grids
that let you freely position objects anywhere on the page.
Layer-based designs
Like objects on a layout grid, you can freely position objects in layers anywhere on a page. However, layers also let
you overlap objects and interactively show and hide content in a browser. Use the Layer tool in the Tools panel to
draw layers on a page. You can also use this tool in conjunction with the Control panel to size a newly created layer.
A
B
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).
ADOBE GOLIVE 9 118
User Guide
Photoshop- and Illustrator-based designs
Many web designers create graphically rich page layouts in Adobe Photoshop or Adobe Illustrator and then convert
the designs into web pages. GoLive streamlines this process by automatically creating custom tables for sliced images
and fully supporting rollover code. With Smart Objects, as you update a design in Photoshop or Illustrator, GoLive
automatically optimizes related images for the web.
You can import Photoshop layers as GoLive layers, which you can reposition, overlap, and show or hide. Likewise,
you can use a Photoshop-based design as a tracing image and convert individual cutouts into GoLive layers.
Frame sets
Frames divide a web browser window into sections that contain separate pages. Frame sets hold the frame structure.
You create a new frame set by choosing a frame set layout in the New dialog box or by using the Frame Editor to
create a frame set and lay out frames that display individual web pages.
Site assets
Site assets such as components and page templates let you update common elements across your site while restricting
changes to specific areas of a layout. GoLive provides page template samples in the New dialog box.
See also
“CSS layout objects” on page 119
“About site assets, resources, and collections” on page 269
“Adding sliced Photoshop images” on page 240
Page layout workflow
Use the following workflow when laying out pages:
1. Add assets to the site window.
Add assets, such as images and multimedia files, to the site window. From this location, you can quickly add content
to pages and let GoLive keep all paths up to date as you work.
2. Create a content container.
Choose a content container, such as a CSS layout object, layout grid, layer, or table, and drag its icon from the Objects
panel to the Layout Editor. Or, use the Grid Text Box, Layer, Tables, or Container tools in the Tools panel to create a
container.
3. Add content to the container.
Add content to the container by doing either of the following:
• Choose File > Place from the application window menu and place the content you want to include.
• Drag placeholders from the Objects panel into the container, and then link them to reference files (such as image
files) in the site window.
• Drag files directly from the site window into the container. (Dragging image files directly to a container bypasses
the step for linking placeholders to reference files.)
Note: You can drag and drop content from other applications, such as Adobe InDesign, into GoLive pages. See “Adding
content from Adobe applications” on page 240 for more information.
ADOBE GOLIVE 9 119
User Guide
A
B
C
D
E
F
Drag to add images and other files or site assets to the page layout.
A. Component in a CSS layout object B. Image linked to its source file C. Layer marker D. Text in a CSS layout object E. Text in a layer F. zindex of layers
See also
“About GoLive sites” on page 64
“About links” on page 85
“About site assets, resources, and collections” on page 269
CSS layout objects
About CSS layout objects
GoLive lets you add a predesigned CSS layout object, based on containers, to a page, and then add text and objects
to the layout just as you would in any other page. CSS layout objects are liquid layouts—they adjust to accommodate
the viewer’s screen settings. You don’t need to know how to code CSS to create CSS layout objects, but you can
customize them by using the CSS Object Inspector and the CSS Editor.
ADOBE GOLIVE 9 120
User Guide
Note: Viewers may not be able to see CSS layout objects if their 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.
If you’re designing pages for mobile devices, designing with liquid layouts is a good way to ensure that your layout
resizes to accommodate small screens.
See also
“About cascading stylesheets” on page 185
To add a CSS layout object to a page
❖ Do one of the following:
• Drag a CSS layout object from the CSS set of the Objects panel to the page.
Note: When you hold the pointer over a CSS layout object in the CSS set of the Objects panel, a description of the CSS
layout object appears.
• Double-click the CSS layout object to place it at the insertion point.
Nest CSS layout objects by dragging a CSS layout object from the CSS set of the Objects panel to an existing CSS
layout object on the page. For example, drag a padded box inside a Left Fixed Box.
You can also use the Deep Selection tool to select covered objects and covered layers.
To customize a CSS layout object in the CSS Object Inspector
❖ Select the CSS layout object and set values for ID, width, height, color, or padding in the CSS Object Inspector
(available options vary depending on the layout you’ve selected).
See also
“Relative and absolute units” on page 197
To customize a CSS layout object in the CSS Editor
1 Use the Deep Selection tool to select the CSS layout object that you want to customize, and note its name in the
markup tree bar at the bottom of the document window (for example, div.navboxright_824DC9).
You can edit the IDs of CSS layout objects: Select the CSS layout object and type a new ID in the ID text field in the
CSS Object inspector. For example, change the ID for div.navboxright_824DC9 to “topbox,” so that the CSS layout
object’s name is div.navboxright_topbox.
2 Click the Open CSS Editor button in the upper right corner of the document window.
3 In the CSS Definitions tab of the CSS Editor, select the name you noted in step 1, and set attributes by using the
Properties tabs in the CSS Editor.
ADOBE GOLIVE 9 121
User Guide
Editing properties of a CSS layout object in the CSS Editor
See also
“About style properties” on page 196
To use the Container tool to create containers
You can use the Container tool to create DIV elements that flow with the text. This tool allows you to create
containers while working in the Layout tab of the document window.
1 Open the page in which you want to create containers.
2 Select the Container tool from the Tools panel.
3 Pressing down the mouse button, drag the tool across an area on the page, and then release the button, to create
the container.
4 Enter the container’s information into the Inspector, such as its name.
You can embed containers by creating a container within the area of another container. This creates nested
containers.
After you create a container(s), you can also choose the Source tab or Outline tab of the document window to view
or edit the containers if you desire.
Note: The Container tool may only be used to create a DIV that flows with the text, which cannot be positioned
absolutely or offset using relative values. For these options, consider using the Layer tool.
Note: If you are using the Japanese language, keep in mind that you cannot use kanji to enter a container’s name.
ADOBE GOLIVE 9 122
User Guide
Creating layers
About GoLive 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. You
use the Layer tool and the Layers panel to add and manage multiple layers on the page.
GoLive layers are DHTML layers, which you can overlap, hide and show, and animate on a 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 stylesheets” on page 185). 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.
See also
“About cascading stylesheets” on page 185
To add a layer to a page
❖ Do one of the following:
• Select the Layer tool in the Tools panel and drag on the page until the layer is the size you want.
• Drag the Layer icon from the Basic set in the Objects panel 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 panel.
When you add a layer to a page, GoLive inserts a small yellow marker, which stays at the original point of insertion
after you move the layer.
• Choose File > Place from the application window menu and highlight the content you want to add to a layer. Then
choose Place in a Separate Box at the bottom of the Place window and click Open.
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 panel into the layer.
Or, you can choose File > Place from the application window menu and select the content you want to add.
Layers can contain any valid HTML element, such as text and images. If you embed a layer within another layer, the
embedded box will inherit any CSS information from the parent layer.
To add a background color or image to a layer
1 Select the layer.
2 In the Background tab of the Layer Inspector, do one of the following:
• To add an image, select Image, and then select an image file.
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 in a browser” on page 126.)
ADOBE GOLIVE 9 123
User Guide
• To add a color, select Color, click the color field, and select a color from the Color or Swatches panel.
Note: Avoid using a background image alone in a layer. Some older browsers may not display background images or
colors unless there are other objects or text in the box as well. To work around this problem, you can apply padding to
the layer.
• Use the Background and Stroke tools on the Tools panel to set the color.
Note: You can also use the Styledropper tool from the Tools panel to copy a style from one layer to another or apply
borders to layers using the options on the Control panel or change colors using the CSS Editor.
See also
“Hiding and showing layers in a browser” on page 126
Selecting, resizing, and positioning layers
To select a layer
❖ Do one of the following:
• Select the Deep Selection tool from the Tools panel and select the layer you want from the page.
• 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 panel.
• Click on the text inside of the layer using the selection tool. This option also selects the topmost layer in addition
to the layer containing the text.
See also
“To reposition an object or group of objects” on page 140
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.
To move or resize a layer pixel by pixel
❖ Select the layer, and do one of the following:
• To move a layer pixel by pixel, press an arrow key. Hold down Ctrl (Windows) or Option (Mac OS) while pressing
an arrow key to toggle between pixel- or grid-sized movements.
• To resize a layer pixel by pixel, hold down Shift while pressing an arrow key. Hold down Ctrl (Windows) or Option
(Mac OS) while pressing an arrow key to toggle between pixel- or grid-sized movements.
ADOBE GOLIVE 9 124
User Guide
See also
“To reposition an object or group of objects” on page 140
To set an exact or relative size and position for a layer
1 Select the layer.
2 Do any of the following in the Layer tab of 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.
In addition to using the Layer panel for sizing and positioning, you can also select a layer and enter the size and
position in the boxes in the Control panel. Or, click on the Advanced Positioning option in the Control panel to select
from advanced options for size and position. Using this tool you can set the size in conjunction with the positioning,
which includes absolute, relative, or floating positions.
See also
“To reposition an object or group of objects” on page 140
To use grid lines for positioning the layer
1 Select the layer.
2 Do one of the following:
• Choose Layer Grid Settings from the Layers panel menu
.
• Choose View > Layer Grid Settings.
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.
See also
“To reposition an object or group of objects” on page 140
ADOBE GOLIVE 9 125
User Guide
To change the stacking order of multiple layers
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).
❖ Select a layer and enter a value in the Z-Index text box in the Layer tab of the Layer Inspector. Enter the z-index
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 panel and typing a new number.)
Managing layers
Using the Layers panel
You can use the Layers panel (Window > Layers) to quickly select multiple layers for alignment and grouping. You
can also use the Layers panel to temporarily lock, hide, or show a layer as you work. (Unlike similar settings in the
Layer Inspector, lock, hide, and show settings in the Layers panel do not affect the display of layers in the browser.)
Note: Some settings in the Layers panel 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.
See also
“To reposition an object or group of objects” on page 140
To name a layer
1 Select the layer in the page or in the list in the Layers panel.
2 Enter a new name either in the Layers panel or in the Name text box in the Layers tab of the Layer Inspector.
(Spaces and names that begin with a number are not allowed.)
GoLive displays the names of layers in the Layer panel and in lists to choose from when you’re applying actions or
animating them. The names are also used for referring to layers in JavaScript.
To temporarily lock, hide, or show a layer
❖ In the Layers panel, select the layer and do one of the following:
• To temporarily hide or show the content of a layer, click in the eye
column. You can also Ctrl-click (Windows)
or Command-click (Mac OS) any eye icon to hide or show all layers at once.
• To temporarily lock and unlock a layer, click in the padlock
column. To lock or unlock all layers at once, Ctrlclick (Windows) or Command-click (Mac OS) any padlock icon. When locked, you cannot select or drag the layer
or edit its content in the document window.
• To preserve all temporary hide/show and lock/unlock settings when you click the Play button in the DHTML
Timeline Editor or switch views, choose Lock Visibility from the Layers panel menu
.
• To bring a layer to the foreground and make it temporarily visible and editable regardless of the hide/show and
lock/unlock settings, click the name of a layer.
To view the hierarchy of nested layers
❖ Choose Hierarchic from the Layers panel menu
.
ADOBE GOLIVE 9 126
User Guide
With this option selected, you can drag layers in the panel to change their nesting order. (To display all the layers at
the same level in the list, choose Flat from the panel menu.)
Converting layers into table-based layout grids
You can convert non-overlapping layers and their contents into objects on a table-based layout grid in a new untitled
page. Converting layers is useful if you need a layout-grid-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.
You can also convert a table-based grid to a CSS-based grid by right-clicking (Windows) or Control-clicking
(Mac OS) the layout grid icon in the upper right corner of the layout grid, and choosing Convert To CSS Based Grid.
To convert a layer into a table-based layout grid
❖ Choose Convert To Layout Grid from the Layers panel menu
. (The option is not available if any layers are
overlapping.)
Hiding and showing layers in a browser
With layers, you can hide and show images or text when viewers click or move the mouse over links on a page. You
can also hide and show layers based on a given amount of time.
See also
“Applying timeline-triggered actions to layers” on page 129
To hide a layer when a page loads
❖ Select the layer and deselect Visible in the Layer tab of the Layer Inspector. (You can use the Layers panel to tempo-
rarily show the layer in GoLive as you work.)
To show or hide a layer using a mouse trigger
1 Use either the Link or Text tool from the Tools panel to select the text, object, or image that will serve as the mouse
event trigger and click the Create Link button
in the Inspector.
Note: You can also use the Hyperlink panel or the linking options on the Control panel to complete this task.
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.
3 In the Actions panel, 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.)
4 Save your page and preview the action in a web browser. You must preview actions in a browser or select File >
Preview In > Live Rendering for a preview.
For information about other scripted actions you can apply to layers, see “About actions” on page 329.
ADOBE GOLIVE 9 127
User Guide
See also
“To name a layer” on page 125
“Specifying the destination URL for a link” on page 87
“Previewing web pages” on page 18
Animating layers
Using the DHTML Timeline Editor
You animate layers in the DHTML Timeline Editor by inserting keyframes in a layer’s time track and repositioning
the layer 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.
A
B
C
D
E
F
G
H
I
J
K
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 button. I. Counter for keyframe position in seconds and frames J. Frames per second K. Keyframe
To insert a keyframe in the time track
1 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.
2 Click a keyframe
Inspector.
to select the time track of a layer. The name of the layer appears in the Layer tab of the Layer
3 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.
The new keyframe marks the end of the play range, 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 layer position 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 in the Layer tab of the Layer Inspector.
3 Click the first keyframe
in the DHTML Timeline Editor to return the layer to its start position.
ADOBE GOLIVE 9 128
User Guide
4 Click the Play button
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 .
5 (Optional) Click the Stop button
play range.
twice to stop playing and to reset the Time Cursor to the beginning of the
6 (Optional) Click the Backward button
to return the Time Cursor by increments to the beginning of the
timeline.
To set layer visibility 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 tab of the Layer Inspector, deselect or select the Visible 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.
To record an animation path
1 Open the DHTML Timeline Editor, and select the starting keyframe.
2 Click the Record button
in the Timeline tab of 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 Timeline tab of the Layer Inspector:
None Makes the layer jump between the keyframes.
Linear (default path shape) 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 set a color for the keyframes
1 Select a keyframe in the time track for a layer.
2 In the Timeline Editor, click and hold the Key Color box as you select the color for the keyframes for that layer.
You can also change the color for individual keyframes.
To loop playback
1 Use the Loop and Palindrome buttons in the lower left corner of the DHTML Timeline Editor to control the
playback looping:
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.
ADOBE GOLIVE 9 129
User Guide
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 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
to deselect it and disable automatic playback.
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 panel, 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
replaces the marker.
scene. On the Action Track, the Play Scene Action icon
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 panel, 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.
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 “About actions” on
page 329.
Applying timeline-triggered actions to layers
You use the DHTML Timeline Editor to insert actions for layers in a timeline. 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.
ADOBE GOLIVE 9 130
User Guide
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 “About
actions” on page 329.
Understanding frames
About 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 website. 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.
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.
Guidelines for 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.
When working with frames, keep in mind the following browser limitations:
• 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 “To specify page margins” on page 76.)
• Nesting frame set documents within the frames of other frame sets is possible but can cause serious navigation
problems.
Frame layout workflow
Use the following workflow when creating frames for your site:
1. Create the pages of content.
Create the pages that will be displayed in the frames.
2. Create and configure 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
“Selecting a frame set style” on page 131.)
3. 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 “To set up a frame
set” on page 132.)
ADOBE GOLIVE 9 131
User Guide
4. Open the navigation page.
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 “About target frames for linked pages” on page 135.)
You can double-click the Page icon in a frame to open the content page in another window.
Previewing frame sets and their contents
You use the Preview in Browser button in the Tools panel to preview the entire contents of the frame set in the
document window.
Setting up frame sets
Selecting a frame set style
You can use either the New dialog box or the Objects panel to choose from a selection of frame sets.
ADOBE GOLIVE 9 132
User Guide
A
B C
D
E
F
In this example, the left frame is fixed and contains a navigation bar while the right frame resizes automatically in the browser window and
contains content linked to the navigation bar.
A. Frame Editor tab B. Frame set divider C. Icon representing the page linked to this frame D. The name of the frame E. Frame Inspector
F Frame object–the shaded area in the frame object represents a fixed-pixel size
To set up a frame set
1 Do one of the following tasks:
• Choose File > New, and choose Web > Framesets. Choose a frame set, and click OK.
• Open a new document window, and click the Frame Editor tab
at the top of the window. In the Frames set
of the Objects panel, drag a Frame Set icon to the page or double-click it. When you hold the pointer over an icon
in the panel, a description of the frame set appears, indicating, for example, which frames are fixed sizes and which
ones aren’t. Make sure XHTML 1.0 Frameset is chosen in the New Doctype menu, and then click OK in the
Change Doctype dialog box.
2 Select the frame set by clicking any of its horizontal or vertical dividers.
ADOBE GOLIVE 9 133
User Guide
3 In the Frame Set tab of the Frame Inspector, do any of the following:
• To arrange the frames in the frame set horizontally (all in one column) or vertically (all in one row), select an
Orientation option. You can also select the Matrix option and enter the number of rows and columns in the Rows
and Columns text boxes.
• To change the thickness of the selected divider in the document window, select BorderSize 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 Frame Border,
and choose No from the pop-up menu. (This procedure 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 panel. 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.
4 Name the page title of the frame set document in the Layout Editor.
5 Save the frame set document. Make sure to save it with an .html extension, for example, Frameset.html.
See also
“To apply an image or color to the page background” on page 96
“To change the page title” on page 75
To add another frame to a frame set
❖ Do one of the following:
• To add a frame before the current frame, select the frame and click Create New Frame Before in the Frame tab of
the Frame Inspector.
• To add a frame after the current frame, select the frame and click Create New Frame After in the Frame tab of the
Frame Inspector.
• Drag the Frame icon from the Frames set
in the Objects panel into the frame set.
To split a frame
❖ Select the frame and click Split in the Frame tab of the Frame Inspector.
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 panel. (See “Snippets” on page 276.)
ADOBE GOLIVE 9 134
User Guide
Setting up individual frames
To name a frame
1 Click inside the frame to select it.
2 In the Frame tab of 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.
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.)
To add a page to a frame
❖ 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.
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 “About target frames for linked pages” on page 135.)
See also
“About links” on page 85
“About target frames for linked pages” on page 135
To set scrolling bars for a frame
❖ In the Frame tab of the Frame Inspector, choose Yes, No, or Auto from the Scrolling 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 tab of the Frame Inspector, do any of the following:
• If you want the frame to resize automatically when the browser window is resized, choose Scale from the Width
or Height menu.
Note: At least one frame in the frame set must be resizeable.
• If you don’t want the frame to be resizeable, choose Pixel from the Width or Height menu, and enter the desired
size in pixels. 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.
• If you want the frame to have a fixed ratio relative to the overall height or width of the frame set, choose Percent
from the Width or Height menu. 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.
Note: You can prevent users from dragging frame borders to resize the frame dimensions by deselecting Resize Frame in
the Frame tab of the Frame Inspector.
ADOBE GOLIVE 9 135
User Guide
To resize a frame by dragging
❖ Do one of the following:
• Click inside the frame to select it, and drag its vertical or horizontal border to resize the height or width.
• In the Frame tab of 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 tab of the Frame Set Inspector, select BorderSize and enter
a value in pixels in the text box.
About target frames for linked pages
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.
To specify a 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 “About links” on page 85.
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:
[Frame 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.
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 the Target2Frames action to set multiple target frames for a single link.
See also
“About actions” on page 329
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.
ADOBE GOLIVE 9 136
User Guide
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
place it at the insertion point.
from the Frames set of the Objects panel to the page, or double-click the icon to
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.
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 Frame Border to display a border around the inline frame.
Layout grids
About layout grids
GoLive layout grids take the pain out of creating CSS- and table-based designs for your web pages. Instead of hand
coding CSS or setting up table cells, you can add a single layout grid to the page, draw text boxes, or drag objects
anywhere on the grid. GoLive adjusts the properties of the layout grid as you add content and reposition it. Using
layout grids, you can position multiple objects on your page with 1-pixel accuracy.
ADOBE GOLIVE 9 137
User Guide
Layout grids and objects on the grid remain fixed in the browser window and don’t change to accommodate the
viewer’s screen settings. If you want your page or individual objects to automatically reflect adjustments to the
viewer’s screen settings, use CSS layout objects from the CSS tab of the Objects panel.
By default, layout grids are CSS-based, but you can convert them to a table-based design.
You can add tables to a layout grid (for example, to add a chart with multiple columns and rows).
See also
“Converting a table-based layout grid to a table” on page 141
“About CSS layout objects” on page 119
Guidelines for layout grids
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.
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. If you know
that you’ll always want the page margins to be zero, you can set this preference for all new pages.
All objects placed on the layout grid are considered part of the grid object. This placement 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, or
library object and store it for later use. (See “About site assets, resources, and collections” on page 269.)
See also
“To specify page margins” on page 76
To add a layout grid to a page
❖ Drag the Layout Grid icon
from the Basic set in the Objects panel to the page, or double-click the icon to place
it at the insertion point.
To convert a CSS-based layout grid to a table-based layout grid
❖ Right-click (Windows) or Control-click (Mac OS) the layout grid icon in the upper right corner of the layout grid
and choose Convert To Table Based Grid. To convert the grid back to a CSS-based design, right-click or Controlclick the layout grid icon and choose Convert To CSS Based Grid.
To resize a 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.
ADOBE GOLIVE 9 138
User Guide
• If the layout grid has a background image, click 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 720 pixels.
To customize the behavior of a layout 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. Choose Center to align the grid with the center of the page.
To add text to a layout grid
1 Do one of the following:
• Use the Grid Text Box tool in the Tools panel to draw a layout text box on the layout grid.
• Drag a Layout Text Box icon
from Basic set
in the Objects panel onto the layout grid.
2 Type or paste text into the layout text box. Layout text boxes can also contain images and other objects that you
want to align within the text or wrap text around.
See also
“Methods of formatting text” on page 162
“To wrap text around an image or object” on page 166
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 panel.
• Select BgImage, and then select an image file.
ADOBE GOLIVE 9 139
User Guide
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 in Mac OS and larger
in Windows. You can assign a pixel size definition for all text using a cascading style sheet. (See “Relative and absolute
units” on page 197.)
To add images or other objects to the layout grid
❖ Do one of the following:
• Choose File > Place from the application window menu bar, choose the image or other media files you want, and
click Open.
• 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.
• Drag object placeholder icons (such as Smart Objects or components) from the Objects panel onto the grid and
link its source file in the Inspector.
• Paste copies of layout text boxes, images, and other objects into a layout grid by clicking in an empty area of the
layout grid and choosing Edit > Paste.
While dragging layers, layout grid text boxes, and image map areas, you can show visual smart guides in the layout
window by choosing View > Show Smart Guides before you drag.
See also
“To add Smart Objects to pages” on page 223
“Adding multimedia” on page 214
“About links” on page 85
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
❖ In the Layout Grid Inspector, select Background Color, click the color field, and select a color from the Color or
Swatches panel.
ADOBE GOLIVE 9 140
User Guide
Grouping and arranging objects on layout grids
To group or ungroup 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. (Grouping is one of the key
advantages of the layout grid because it can’t be done using a standard HTML table.)
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 Choose Edit > Group, or the Layout Group button
or the Layout Ungroup button
in the Transform panel.
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 Tools panel or Transform panel.
To align objects in relation to their container
1 Select the layers, object, or group of objects that you want to align.
2 In the Align panel, under Align To Parent, click a horizontal or vertical alignment button. (The buttons in the
Align panel are the same as those on the Tools panel.)
Note: Because you cannot move a selected object if another object is in the way, some alignment buttons are unavailable
depending on the objects selected.
See also
“To wrap text around an image or object” on page 166
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 panel. You can
align objects along the left, center, or right vertical axis or along the top, center, or bottom horizontal axis. You can
also choose one of the alignment buttons on the Control panel.
See also
“To wrap text around an image or object” on page 166
To distribute objects in relation to each other
1 Select three or more layers or objects on a layout grid.
2 In the Align panel, do one of the following:
• To distribute objects relative to their vertical axis (left, center, or right) or horizontal axis (top, center, or bottom),
click a button under Distribute Objects.
• To distribute the space equally between the vertical or horizontal axes of the objects, click a button under
Distribute Spacing.
ADOBE GOLIVE 9 141
User Guide
• To distribute the objects or spacing based on a value, select Use Spacing and enter a pixel value in the box; then
click a Distribute Objects or Distribute Spacing button.
Converting table-based layout grids to tables
Converting a table-based layout grid to a table
You can convert table-based 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 “To fix table, column, or row size conflicts”
on page 153.)
When you convert a table-based 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 to a CSS- or table-based layout grid.
See also
“To convert a CSS-based layout grid to a table-based layout grid” on page 137
To convert a table-based layout grid to a standard HTML table
When you convert a table-based layout grid to a table, GoLive strips out the GoLive code and keeps the standard
HTML table format.
To retain the flexibility of a layout grid, you can wait to strip out GoLive code until you export or upload the web
page to the server. (See “Exporting a site” on page 291.)
1 Select the layout grid and choose Advanced > Convert > Layout Grid To Table.
Note: If the Layout Grid To Table option doesn’t appear in the Advanced > Convert 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.
2 In the Convert dialog box, do one of the following:
• To remove the empty, one-pixel control row and column at the bottom and right side of the grid, select Strip
Control Row and Column. (This option is selected by default.)
• To replace all Netscape Spacer elements with a spacer.gif transparent image that is one pixel high, deselect Strip
Control Row and Column, and select Replace Spacers By Image. You can also enter the name of a different image
located in the GoLive application folder.
• To keep the control row and column, and include the Spacer elements, deselect both options.
3 Click OK.
ADOBE GOLIVE 9 142
User Guide
To convert a table back into a table-based layout grid
❖ Select the table and click Convert in the Table Inspector.
Special page elements
To add comments to a page
As you lay out content on your web pages, you can 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.
1 Drag the Comment icon from the Basic set in the Objects panel 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.
See also
“To add elements or scripts to the head section” on page 81
To add 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.
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
place it at the insertion point.
in the Objects panel to the page, or double-click the icon to
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.
To add 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.
1 Drag the URL Popup icon from the Smart set in the Objects panel to your page.
A
B
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 panel
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.
ADOBE GOLIVE 9 143
User Guide
• 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. If you’re using a frame set, specify the target
frame for the URL in the Target text box. 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
.
3 Preview the URL pop-up menu and each link in a web browser.
See also
“About frames” on page 130
“About links” on page 85
“Previewing web pages” on page 18
To add horizontal lines
To visually separate blocks of text, you can use horizontal lines (also called rules).
1 Drag the Line icon from the Basic set in the Objects panel into a text area, or double-click 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.)
Adding horizontal space between items on a page
To quickly arrange and space items on a page, use layout grids. Without a layout grid, however, you can still space
items horizontally by using the following techniques:
• Use nonbreaking spaces to insert space between text.
• Add padding to the items using the CSS Editor.
• Use transparent GIF images to insert space between text and objects. These images download quickly and can be
resized to fill any space.
See also
“About layout grids” on page 136
To create a nonbreaking space
❖ Press Shift+spacebar (Windows) or Option+spacebar (Mac OS).
ADOBE GOLIVE 9 144
User Guide
See also
“Adding horizontal space between items on a page” on page 143
To use padding for spacing
1 Highlight an item on the page to which you want to add padding.
2 Do one of the following:
• Open the CSS Editor and apply a class to the item. You can specify padding for a class when you create the class.
• Use the Margin and Padding option on the Control panel to add values in the various padding boxes as you desire.
3 Repeat this task as you wish to add padding to multiple items so you can create custom padding throughout the page.
To use a transparent GIF image for spacing
1 Create a small (1x1 pixel) transparent GIF image in your image editing software and import it into the Assets area
of the 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 87.)
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 <img> tag in the markup tree bar at the bottom of the document
window.
You can save the resized transparent GIF image for reuse on other pages by dragging it into the Snippets tab of the
Library panel. (See “Snippets” on page 276.)
See also
“To move or resize a layer by dragging” on page 123
“Adding horizontal space between items on a page” on page 143
To create a scrolling marquee
1 Drag the Marquee icon from the Basic set in the Objects panel 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 Basic tab of the Marquee Inspector, type the message for the marquee in the Text box.
3 Choose an option from the Behavior menu:
Scroll Causes the message to scroll continuously.
Slide Moves the message into the marquee box and to hold it there.
Alternate Moves 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.
ADOBE GOLIVE 9 145
User Guide
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.
• Select the margin control option in the Control panel and enter the values you want to use for the margins.
• 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 panel for the background of the marquee. Or, click the lower
right of the color field and select a color from the swatches that appear.
146
Chapter 7: Tables
Understanding tables
Designing with tables
Golive provides many options for tables so you can customize displays of information in rows and columns.
However, you can also design tables to create visually rich page layouts as a simpler alternative to using containers
with CSS attributes for page layouts. You can include text and many kinds of objects—including images, nested
tables, Photoshop files, and QuickTime movies—within a table.
Positioning text and objects using tables is even easier if you use a GoLive layout grid with layout text boxes.
See also
“About layout grids” on page 136
GoLive table features
The table features in Adobe GoLive make it easy to lay out entire web pages or organize information in rows and
columns. 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 word-processing or spreadsheet applications, such
as Microsoft Excel or Microsoft Word.
To build tables manually, drag the Table icon from the Objects panel to the page or select the Table tool from the
Tools panel and draw a table on the page. Then, set table properties in the Table Inspector or, if you select the Table
Cell tool, using the table options in the Control panel. The Select tab of the Table & Boxes panel lets you 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. If you want to use HTML styles, you can quickly format
tables with the predefined table styles in the Table Style tab of the Table & Boxes panel.
Use the Smart Photoshop object to automatically create a table that contains optimized slices of a sliced Photoshop
image.
See also
“Adding sliced Photoshop images” on page 240
Creating tables
To create a new empty table
• To place the table at the insertion point with a particular number of rows and columns, Ctrl-drag (Windows) or
Command-drag (Mac OS) the Table icon in the Basic set of the Objects panel. Release the mouse button when the
desired number of rows and columns appear.
ADOBE GOLIVE 9 147
User Guide
Interactive pop-up table in the Objects panel
A. Table icon B. Dragging to define columns and rows
• Select the Table tool from the Tools panel and draw the table on the page wherever you wish. You can then select
the Table Cell tool from the Tools panel and customize the cells. With either of these tools, you can also use options
that appear in the Control panel and in the Inspector to apply further formatting to the table.
• To place a table at the insertion point, double-click the Table icon in the Basic set of the Objects panel. The number
of rows and columns for this table defaults to the number used in the previously created table.
• To place a table of three rows and three columns, drag the Table icon from the Objects panel to the document
window.
See also
“Converting a table-based layout grid to a table” on page 141
To copy GoLive tables
❖ Do one of the following:
• Select an existing GoLive table, and choose Edit > Copy. Then place an insertion point and choose Edit > Paste.
• To copy a cell or group of cells, use the Select tab of the Tables & Boxes panel. Select the cells that you want to copy.
Move the pointer over the black square in the upper left corner of the selection until the pointer changes to a hand
icon
; then drag the selection to a new location.
See also
“To select a table” on page 149
To copy a table from another application
1 In the other application, select and copy the table or cells you want to paste.
2 In GoLive, select an existing table cell to be the upper left corner cell of the content you copied.
3 Choose Edit > Paste.
The table creates additional rows and columns as needed to include all of the information that was copied.
ADOBE GOLIVE 9 148
User Guide
Original table (top) and after (bottom) pasting a table copied in a different application
See also
“Adding sliced Photoshop images” on page 240
“Selecting tables or cells” on page 148
To convert a table to a layout grid
You may want to convert a table to a layout grid in order to move items around the table more easily. Nested tables
and cells that contain text or an object convert to layout text boxes.
❖ In the Table tab of the Table Inspector, click Convert. If desired, customize the appearance of the layout grid and
layout text boxes.
See also
“About layout grids” on page 136
“Converting a table-based layout grid to a table” on page 141
Selecting tables, rows, columns, or cells
Selecting tables or cells
GoLive provides 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, in an outline of the table in the Select tab of the
Table & Boxes panel, or using the Table Cell or Deep Selection tools from the Tools panel. 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.
ADOBE GOLIVE 9 149
User Guide
A
B
Selecting a table cell with the Select tab of the Table & Boxes panel
A. Selected table cell B. Nested tables display a gray outline when not selected. (Cells within nested tables appear only when the nested table is
selected.)
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. Selected cells are outlined in bold in the document window and
in the Table & Boxes panel, and highlighted in source code views.
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
❖ Do any 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 & Boxes panel, or click
the <table> tag in the markup tree bar at the bottom of the page.
• To select a nested table, in the Select Tab of the Table & Boxes panel, move the pointer over the nested table until
the pointer changes to the Nested Table pointer
& Boxes panel to reselect the parent table.
and click. Click the Select Parent Table button
in the Table
• Select either the Table Cell tool or the Deep Selection tool from the Tools panel and then click inside the cell(s)
you want to select. (You can also use the Deep Selection tool to select images in cells.)
To select rows
❖ Do any of the following:
• In the document window, use the Table Cell Tools panel from the Tools panel and hold the mouse button down
while dragging across the cells you want to select.
• Drag the mouse slowly over the edge of the row until it changes to the Table Cell Tool and then click and drag to
select the row(s) you want.
ADOBE GOLIVE 9 150
User Guide
• In the select tab of the Table & Boxes panel, 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.
• Place an insertion point in the row, and click the rightmost <tr> 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 <table> tag in the markup tree bar at the bottom of the
page, drag to display a pop-up menu, and then choose the <tr> 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 Select tab of the Table & Boxes panel, 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. Also, use the Table
Cell tool from the Tools panel and hold down the mouse button while dragging over the cells you want to select.
To select cells
❖ Do any of the following:
• Choose the Deep Selection tool from the Tools panel and click anywhere in the table cell. Select Cell from the popup menu.
• To select cells from within the document window, select the Table Cell tool from the Tools panel and hold down
the mouse button while dragging over the cells you want to select.
• Drag the mouse slowly over the edge of the column until it changes to the Table Cell Tool and then click and drag
to select the column(s) you want.
• Place an insertion point in a cell, and either click the rightmost <td> tag in the markup tree bar at the bottom of
the page, or right-click and choose Select Cell.
• In the Select tab of the Table & Boxes panel, click to select a cell. 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 & Boxes panel, and
then drag over all cells in the table. Or 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.)
ADOBE GOLIVE 9 151
User Guide
Moving, adding, or deleting rows or columns
To move or duplicate a table column or table row
1 In either the document window or the Select tab of the Table & Boxes panel, select one or more entire columns or
rows.
2 Move the pointer over the square icon in the upper left corner of the selection until the pointer changes to a
hand
.
3 Do one of the following:
• To move the selection, 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.
• To duplicate the selection, Ctrl-drag (Windows) or Option-drag (Mac OS) to the desired location within the
current table. Release when a solid black line appears in the desired location.
Note: If you drag a selection of cells, you can add the cells to a different table only 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 replace table cells
1 Select a single cell or a block of adjacent cells that you want to duplicate.
2 Choose Edit > Copy.
3 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.
Moving a table column in a table in the document window
To add a table row or column
❖ Do any 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.)
ADOBE GOLIVE 9 152
User Guide
• 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
Column To Right button
.
, the Add Column To Left button
, or the Add
• Use the Table Cell tool from the Tools panel and select an adjacent cell. Enter the number of rows or columns in
the boxes in the Control panel or choose from the add/subtract rows or columns options in the Control panel.
• Place an insertion point in the last table cell, and then press Tab.
• Select a cell, right-click, choose Insert, and choose an insert command.
• Select the Table Cell tool from the Tools panel and then 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 delete a table row or column
❖ Select the row or column or one or more cells in the row or column, and then do one of the following:
• In the Table tab of the Table Inspector, enter the desired number for Rows and Columns. (Rows are removed from
the bottom of the table. Columns are removed from the right side of the table.)
• Use the Table Cell tool to select the table and then decrease the number of rows or columns in the Control panel.
• Click the Delete Column button
, or the Delete Row button
in the cell tab of the Table Inspector.
• Right-click and choose Remove > Column or Remove > Row.
• Select the entire row or column and choose Edit > Delete, or press Delete on the keyboard.
Resizing and fixing tables
Table size conflicts
The Select tab of the Table & Boxes panel lets you review the size and units of every row and column within a table,
as well as those of the entire table. This tab 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.
To identify table, row, and column sizes
❖ Select a table, row, column, or cell. In the Select tab of the Table & Boxes panel, selected cells appear in bold outline,
and blue lines mark the column and rows shared by the selection.
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.
ADOBE GOLIVE 9 153
User Guide
Table property sizes are shown in black, gray, or red characters to signify different value types:
• If the table, column, or row size is shown in gray characters, the size of the property is set to Auto in the Table
Inspector. This means that 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.
To fix table, column, or row size conflicts
• To set a table property to the pixel size that it requires, in the Select tab of the Table & Boxes panel, move the
pointer over the red pixel value until it changes to the Fix pointer
, and then click.
• 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
• To specify a new size 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, Alt-drag (Windows) or Option-drag (Mac OS) the right or
bottom edge of the table. (If the Width or Height is already set to pixels, you don’t need to press the Alt or Option
key while dragging.)
To resize a table row or table column
• To specify a new size in the Table Inspector, select a cell in the row or column that you want to resize, and then in
the Cell tab of the Table Inspector, choose an option from the pop-up menu for Width or Height 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 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, Alt-drag (Windows) or Option-drag (Mac OS) 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,
you don’t need to press the Alt or Option key while dragging.)
ADOBE GOLIVE 9 154
User Guide
Formatting tables with table styles
Using table styles
GoLive includes a variety of predefined table styles in the Style tab of the Table & Boxes panel, 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 website. Save different sets of table styles to a file
that can be shared with others or import table styles for use with specific sites.
Note: Predefined table styles are HTML-based and do not write to CSS. If you use predefined table styles, keep in mind
that in a table that uses CSS, an HTML entry in the source code may not effect the displayed output of that table.
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 two-column 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.
Table styles can contain the following attributes:
• In the Table tab of the Table Inspector: 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.
The Table & Boxes panel 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 applied only to the first row, while the styles of the second and third rows repeat for all other rows.
Note: Table styles are not related to CSS styles. To apply CSS styles to a table, row, or cell, see “Formatting tables with
cascading stylesheets” on page 158.
To apply a table style to a table or table area
1 Select the table or portions of it that you want to format.
2 In the Style tab of the Table & Boxes panel, 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 & Boxes panel menu
.
To remove a table style from 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 & Boxes panel, click Clear; or, from the Table & Boxes panel menu
Table Style.
, choose Clear
ADOBE GOLIVE 9 155
User Guide
To add or edit table styles
• 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 & Boxes panel menu
box and click OK.
. Enter a name in the New Table Style dialog
• To create a new table style based on an existing style that’s in the Table & Boxes panel, choose a table style in the
Style tab of the Table & Boxes panel, and then click the New Table Style button or choose New Table Style from
the Table & Boxes panel 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 & Boxes panel, select the table in the document, and then click the Grab Table Style button
Capture Table Style from the Table & Boxes panel menu.
• To rename a table style, choose the table style and then click the Rename Table Style button
or choose
or choose Rename
Table Style from the Table & Boxes panel menu.
• To remove a table style from the Table & Boxes panel, in the Style tab, choose a style from the pop-up menu, and
then click the Delete Table Style button
or choose Delete Table Style from the Table & Boxes panel menu.
To import or export table styles
• To export a set of table styles, choose Export Table Styles from the Table & Boxes panel menu
, name the file
with an .xml extension, and then click Save.
• To import a set of table styles, choose Import Table Styles from the Table & Boxes panel menu, and then open a
table styles file with an .xml extension in the file name.
To undo or redo a table style selection
❖ Choose Undo Select Table Style or Redo Select Table Style from the Table & Boxes panel menu
.
Formatting tables with the Table Inspector or Control
panel
Formatting tables
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 affect
only the current selection. For ease of use, you can also access many of these same options in the Control panel when
a table, or a portion of a table, is selected on a page.
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 panel.
The properties in the Table tab of the Table Inspector also 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.
ADOBE GOLIVE 9 156
User Guide
See also
“Using table styles” on page 154
“Snippets” on page 276
To format a table with the Control panel
You can format a table using the Table Cell tool from the Tools panel in conjunction with the contextual options that
appear in the Control panel.
1 Select Table Cell tool from the Tools panel and then select the table.
2 In the Control panel, enter the desired Border width value. 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 in the Control panel.
3 To change the size of cell walls, enter a number for Cell Space value in the Control panel.
A
C
B
E
D
F
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:
• Click the Background tool from the Tools panel and select the color and settings you want to use.
• Click the color field, and then select a color from the Color panel that appears.
If a table cell doesn’t contain text or other content, the table background color doesn’t appear in the Layout Editor or
in some browsers. To display background color in empty cells, insert a nonbreaking space into the cell.
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.
See also
“About the Color panel, Swatches panel, and the Color Picker” on page 92
“Adding horizontal space between items on a page” on page 143
To format rows with the Table Inspector
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.
1 Select the rows or a cell within a row that you want to format.
ADOBE GOLIVE 9 157
User Guide
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:
• Click the Background tool in the Tools panel and choose the color and settings you want.
• Click the color field, and then select a color from the Color panel.
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.
See also
“About the Color panel, Swatches panel, and the Color Picker” on page 92
To merge table cells
• To merge selected cells, select two or more adjacent cells, right-click, and choose Merge Cells.
• Select the cells you want to merge and click the Merge Cells button on the Control panel.
• 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 box 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 box 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.
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.
To reduce or unmerge a table cell
1 Select a cell that is merged with other cells.
2 Do one of the following:
• To shorten the cell one row up at a time, press Shift+Up Arrow key.
• To shrink the cell one column to the left at a time, press Shift+Left Arrow key.
• To unmerge all cells in the merged cell, right-click and choose Split Cell.
To format table 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.
ADOBE GOLIVE 9 158
User Guide
4 Select Color to apply a background color to the selection. To set the color value, do one of the following:
• Click the Background tool on the Tools panel and choose the color and settings you want.
• Click inside the color field and then select a color from the Color panel.
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.
See also
“About the Color panel, Swatches panel, and the Color Picker” on page 92
Formatting tables with cascading stylesheets
Formatting tables with cascading stylesheets
You can use cascading stylesheets (CSS) to set the properties of tables and content within a table. Styles can apply to
either all tables in a page or particular tables or cells. If you modify a CSS style, GoLive automatically updates all
tables and cells that use it. Pages can reference a unique internal stylesheet or a separate external stylesheet shared by
multiple pages.
Note: Some properties in the CSS Editor, such as those in the Background tab, affect the table, whereas other properties,
such as those in the Font tab, affect content within a table cell. For example, if a style defines a Font color property for a
cell, any text within the cell displays the color property but the cell does not.
A
B
Class style applied to a table column
A. Class style properties in the CSS Inspector B. Class style listed in CSS Editor
ADOBE GOLIVE 9 159
User Guide
See also
“About cascading stylesheets” on page 185
To create a CSS element style that applies to all tables, rows, or cells in a page
• To set the properties of all tables in a page, create an HTML element style named after the <table> tag.
• To set the properties of all table rows in a page, create an HTML element style named after the <tr> tag.
• To set the properties of all table cells in a page, create an HTML element style named after the <td> tag.
See also
“About HTML element styles” on page 192
To apply a CSS style to particular tables, rows, or cells
1 Create a class style.
2 Select a table, row, cell, or group of cells.
3 Do one of the following in the CSS panel:
• To apply the class to a selected table, select the <table> column that is adjacent to the style name.
• To apply the class to a selected row, column, or group of cells, select the <td> column that is adjacent to the style
name. (If a row or column is selected, the <td> column name will be followed by the number of cells in the
selection.)
See also
“Class styles” on page 193
“Applying styles” on page 204
Text in tables
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 file.
When you import data into a table, you need to begin by formatting data in a text 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 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.
ADOBE GOLIVE 9 160
User Guide
To paste text into a table
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 in another application.
2 In GoLive, place an insertion point in a table cell, and choose Edit > Paste.
To drag text into a table
❖ In GoLive or a different application, select the text you want to copy and then drag it to an empty table cell in
GoLive.
Linking text in tables
There are a variety of ways you can link text that’s selected inside a table. Simply select the text and then use the Link
tool from the Tools panel, the Hyperlink panel, the Inspector panel, or the linking options on the Control panel to
create the link.
See also
“Creating resource and navigational links” on page 85
To import tab-delimited text into a table
1 Select the table on the page.
2 In the Table Inspector, click Import, select the text file that contains rows and columns of text separated by tabs,
and click Open.
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 In the Table tab of the Table inspector, click Export. Give the file a name and click Save.
Sorting in tables
Sorting content in tables
You can sort the order of rows in a table so that the contents of one or more columns appear 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 appear in
numerical and alphabetical order. You can apply the sort to an entire table, specific rows, specific columns, or specific
cells. For example, you can apply the sort to all rows except for a top row that contains column headings.
GoLive performs the sort first in numerical order and second in alphabetical order. It considers the case of
characters. By default, GoLive performs the sort in ascending order. If desired, you can specify descending order.
ADOBE GOLIVE 9 161
User Guide
To sort the contents of a table
1 Select a table or group of cells you want to sort.
2 Right-click and choose Sort Table, or choose Sort on the Select tab of the Tables & Boxes panel.
3 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.
4 In the Sort By pop-up menu, do one of the following:
• If you chose Rows in step 3, choose the primary column with contents that you want to appear in numerical and
alphabetical order.
• If you chose Columns in step 3, choose the primary row with contents that you want to appear in numerical and
alphabetical order.
5 From the adjacent pop-up menu, choose Ascending or Descending to specify the sorting order.
6 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 3, 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 3, choose the secondary row in the table with contents that you want to appear in
numerical and alphabetical order.
7 From the adjacent pop-up menu, choose Ascending or Descending to specify the sorting order.
8 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 3, 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 3, choose the tertiary row in the table with contents that you want to appear in
numerical and alphabetical order.
9 From the adjacent pop-up menu, choose Ascending or Descending to specify the sorting order.
10 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 exclude the first row when the table is sorted. If only a portion of a table is
selected, you can choose Sort Selection Only to sort only the selection instead of the entire table.
162
Chapter 8: Formatting text
Formatting text in web pages
Formatting text for the web
You can make text more interesting and easier to read by formatting it, but keep in mind that text can appear different
on other computers, depending on the platform, browser, and browser preferences. You can use the View panel to
view a simulation of how your document would appear on different platforms and with different browsers.
See also
“Guidelines for controlling font sizes” on page 173
“Previewing web pages” on page 18
“To set view options for page layout” on page 77
Methods of formatting text
You can add form, color, and presentation to text in GoLive by using cascading stylesheets (CSS) and HTML text
attributes.
Paragraph Styles
You can use paragraph styles to apply style to paragraphs in a flexible and customized manner, with all of the ease
and formatting options of a print document. If you work with InDesign, GoLive paragraph styles may seem like a
familiar feature. However, GoLive paragraph styles also write to CSS, which provides web pages with the necessary
foundation to display these styles as you intend online.
Paragraph styles provide a quick way, when you are working in a site, to apply formatting to an entire paragraph.
After you set up a paragraph style, you can apply it to every paragraph that you want to have that formatting. If you
update the style later, the changes are automatically made to each paragraph to which you have applied the style.
Character Styles
You can also use character styles to apply style in a flexible and customized manner. Character styles are like
paragraph styles, but they apply to character and word-level text. GoLive character styles write to CSS.
Character styles provide a quick way, when you are working in a site, to apply formatting to individual characters or
words within a paragraph, rather than to the entire paragraph. After you set up a character style, you can apply it to
every character or word that you want to have that formatting. If you update the style later, the changes are automatically made to each character or word to which you have applied the style.
ADOBE GOLIVE 9 163
User Guide
Cascading stylesheets
Cascading stylesheets define text formatting attributes once and instruct web browsers to reuse the definitions
whenever text on a page refers to them. (This process reduces the amount of source code that’s required for the page,
which helps reduce the page size and the amount of time it takes a web browser to display the page.) Stylesheets give
you more design options and control than you get with HTML text attributes. It’s easier to maintain or change your
site’s appearance by using stylesheets—when you change a style in a stylesheet, the change is instantly updated in all
text that refers to the style in one or more pages.
HTML text attributes
HTML text attributes define formatting that affects only the text to which you apply the attributes. You can use the
formatting options in the Type menu in the application window menu bar, the context menu, and the Control panel
for applying HTML structuring and formatting attributes to text. The Control panel includes paragraph formats,
such as headers, font attributes, and numbered and bulleted lists. The Control panel generates CSS for these types of
formatting with the exception of alignment settings. The Type menu provides these options and more, including
options for creating and applying font sets. The context menu for selected text provides a quick way to apply all of
these items and more.
Formatting text with both cascading stylesheets and HTML text attributes
Pages that use cascading stylesheets load in the browser window much faster than pages that are individually
formatted with HTML text attributes—and most modern browsers support CSS. However, there may be cases in
which you want to use HTML text attributes. If you use HTML style attributes in conjunction with CSS, keep in mind
that some HTML text attributes rely on the font element, which is known to interfere with CSS. HTML text
formatting attributes that use the HTML font element include the Font or Size menu in the Type menu. Because the
font element can interfere with CSS, you should avoid mixing these two formatting methods in a single document.
To avoid browser problems, you can add a browser switch script to your pages that redirects browsers to alternative
pages that you’ve strictly formatted with either HTML text formatting attributes or CSS.
See also
“About cascading stylesheets” on page 185
“About HTML element styles” on page 192
“To add a browser-switch script” on page 84
Adding and selecting text
Methods of adding text to pages
You can add text to your page by typing directly in the document window or a container item such as a table, layout
grid, or layer; copying text or a table with text from another application and pasting it into the document; or
importing text from another application into a table on the page.
See also
“Adding text to tables” on page 159
“About layout grids” on page 136
ADOBE GOLIVE 9 164
User Guide
To type text into a page
1 Select the Text tool from the Tools panel or double-click the page wherever you want to type the text.
2 Click inside the page, layout text box, table cell, or layer to place the insertion point.
3 Type the text.
To copy text from a web page
1 In the Layout Editor or Source Code Editor select the text that you want to copy.
2 Do one of the following:
• Choose Edit > Copy. To place the insertion point, click inside a layout text box, table cell, layer, the current page
or another page. Choose Edit > Paste.
• Hold down Ctrl (Windows) or Option (Mac OS) and drag the selected text to the desired location.
You can also drag text from your collection of site assets in the Library panel to your page. (See “Snippets” on
page 276 and “Components” on page 274.)
To select a paragraph of text and the blank lines that enclose it
1 Click anywhere in the paragraph that you want to copy.
2 Click the last element tag that appears in the markup tree bar at the bottom of the document window. (Tags are
surrounded by angle brackets; for example <p> or <h1>.)
Formatting paragraphs with HTML text attributes
HTML paragraph formats
You can add structure to your text by using HTML paragraph formats that add a blank line before and after the
formatted text in most browsers:
Header Use for text that describes the topic of the section that follows the heading and to define a heading’s level of
importance in the heading hierarchy. Most browsers display header text in bold and with a particular character point
size, where Header 1 is the largest and Header 6 is the smallest size.
Address Use for a block of text that contains a document author’s contact information.
Preformatted Retains the character spacing, line spacing, and white space in blocks of text. This is useful for
retaining the structure of text you’ve copied in another application, such as columns of text, or presenting source
code with its proper spacing. Most browsers display preformatted text in a monospaced font.
Paragraph Use when you want to use the default paragraph format in the browser’s preferences.
None Use when you want to remove the blank lines before and after a range of text and remove all paragraph
formatting.
All HTML paragraph formats can be enhanced with cascading stylesheets and CSS element styles. See “About HTML
element styles” on page 192.
ADOBE GOLIVE 9 165
User Guide
Using HTML text attributes
GoLive provides a variety of ways to structure paragraphs of text by using HTML text attributes. 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 CSS element styles to build on the structured text.
In addition to formatting text in the Layout Editor, you can also format text by using HTML text attributes while
working in the source code split view in the document window.
See also
“About HTML element styles” on page 192
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 > HTML > Paragraph Format menu.
3 To reset a selected paragraph to the default format, choose Type > HTML > Paragraph Format > Paragraph.
See also
“About HTML element styles” on page 192
To remove the blank lines that enclose a selected paragraph
❖ Choose Type > HTML > Paragraph Format > None.
See also
“About HTML element styles” on page 192
To use paragraph styles
1 Place the insertion point inside the paragraph you want to format.
2 Do one of the following:
• Choose Type > Paragraph Styles, and choose the style you want to apply.
• Open the Paragraph panel to select, edit, or create the style you want.
• Use the Paragraph pop-up menu on the Control panel to select, edit, or create a style.
To create a new paragraph style
1 To create a new style, do one of the following:
• Open the Paragraph Style panel and click the New Style button at the bottom of the panel, or right-click in the
panel and select New Paragraph Style.
• Choose Type > Paragraph Styles > New.
• Choose New from the Paragraph pop-up menu on the Control panel.
ADOBE GOLIVE 9 166
User Guide
2 Next to Style Name, type a name for the new style.
3 In the General settings area, you can select an existing style to use as a starting point. This is helpful if you want
to adjust an existing style.
Note: When you create a style based on another style, changes that you make to the base style apply to both styles. For
instance, if you change the font of the base style to Arial, the style that is based upon it also changes to Arial unless you
otherwise specified a different setting for it.
4 Set any settings that you want to use. There are a variety of formatting options that you can access by selecting the
different content tabs.
5 After you have made all the changes, click OK.
To edit an existing paragraph style
1 Open the Paragraph Style panel.
2 Double-click an existing paragraph style or right-click the style and choose Edit Paragraph Style.
3 Adjust the settings that you want to change.
4 After you have made all the changes, click OK.
To align or add margins to a paragraph
You can align a paragraph to the left side, center, or right side of the page or container (such as a table cell). You can
also add left and right margins to a paragraph without affecting its alignment.
1 Click anywhere in the paragraph that you want to align or indent.
2 Do one of the following:
• From the application window menu bar, choose Type > Paragraph Styles > Edit and then select Indents and
Spacing. Enter the alignment and spacing settings you want and click OK when you are finished. When you edit
the style in this manner, the edits apply to other text using this style.
• Choose an alignment from the Type > Alignment menu. Choose Default Alignment to remove any existing
alignment from the paragraph.
• Click the Align Left button
, the Align Center button
, or the Align Right button
in the Control panel.
If you’re using cascading stylesheets, make sure that the type of alignment matches the corresponding CSS style.
Note: You can apply specific values and units for margins and padding using the CSS Editor. Adjusting margins or
padding in this manner requires some advanced knowledge of CSS formatting.
See also
“To reposition an object or group of objects” on page 140
To wrap text around an image or object
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.
1 Place the image or object at the beginning or within a line of text.
ADOBE GOLIVE 9 167
User Guide
2 To set the position of the image or object, select it and do one of the following:
• Choose Left or Right from the Alignment pop-up menu in the Inspector.
• To write to CSS, select the Advanced Positioning option in the Control panel and use the Float Left or Flat Right
options to set the position.
3 Drag the image or object up or down to the position that looks best within the paragraph.
Alignment settings
The Alignment pop-up menu in the Inspector for an image or other object provides the following options:
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.
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.
About text flow on web pages
A paragraph of text on a blank web page or inside a container automatically wraps itself to the left and right edges of
the browser window or container. When the browser window or container is resized, the text rewraps as needed.
You can control the flow of entire blocks of text by structuring it with paragraph formats, tables, and layers. You can
also control the text flow in any particular place by inserting link breaks or enclosing the text with the nobreak
element. You can also use line breaks to create additional space before or after paragraphs or objects.
See also
“Page layout techniques” on page 117
To prevent words breaking onto separate lines
1 Select one or more words that you want to always share the same line.
2 Choose Type > HTML > Style > Nobreak.
To insert a line break
You can make a line of text break after a particular word and continue to the next line by inserting a line break after
the word; the line break’s Clear option causes all text that follows the line break to appear below an adjacent image.
❖ Drag the Line Break icon from the Basic set in the Objects panel to the document widow, or double-click the icon
to insert the line break at the insertion point.
ADOBE GOLIVE 9 168
User Guide
A
B
The line breaks at the same position regardless of browser window size
A. Line break marker B. Line Break icon
Line Break options
The Line Break Inspector provides the following options for the Clear attribute:
All Moves the text after the line break to the bottom of any object in the line.
Left Moves the text after the line break to the bottom of a left-aligned object.
Right Moves 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- or right-aligned for the Clear
attribute to work as expected.
To create a list
You can format text as numbered, bulleted, or definition lists, and create hierarchies within the lists.
1 Do one of the following:
• To format existing text, select the paragraphs.
• To create a list from scratch, click in the document window where you want the list to begin.
2 Choose a list format from the Type > List menu or from the Control panel.
3 To add items to the list, put the insertion point at the end of the text in the last item in the list, and press Enter or
Return.
4 To modify a list item’s appearance, do any of the following:
• To assign a different leading character to the paragraph, choose a list option from the Type > List menu.
• To increase or decrease the item’s indent, choose Increase List Level or Decrease List Level from the Type > List
menu. When you apply the Decrease List Level option to a list item that’s at the first level in a list hierarchy, the
item is converted to an unlisted paragraph.
You can enhance the appearance of a bulleted or numbered list by using cascading stylesheets. First create your list
with the Type > List menu, create a CSS element style based upon the <li> tag, and then use properties in the List
Item tab of the CSS Editor to modify the list’s appearance. For more information , see “List item properties for CSS” on
page 202.
See also
“About HTML element styles” on page 192
“About style properties” on page 196
ADOBE GOLIVE 9 169
User Guide
Formatting text inline
About structural and physical text attributes
Unlike paragraph formats, structural and physical HTML text attributes affect only the text to which you apply them,
without affecting the rest of the paragraph. Structural text attributes appear in the upper half of the Type > HTML >
Style menu and physical text attributes appear in the lower half of the Type > HTML > Style menu.
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.
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.
See also
“To set font properties for a style” on page 198
“About HTML element styles” on page 192
Structural text attributes
The following structural text attributes appear in the upper half of the Type > HTML > Style menu.
Emphasis Emphasizes text. This is the most commonly used style to emphasize text. In most browsers, the selected
text appears italicized.
Strong Strongly emphasizing text. In most browsers, it makes the selected text bold.
Quotation Identifies the selected text as content taken from another source. Most browsers display quotations using
a smaller font size and italics.
Citation Identifies the text as the title of a cited work. Most browser display the selected text italicized.
Inserted Indentifies content that has been inserted. Use this attribute to indicate changes between versions of
documents. Most browsers display the text underlined.
Deleted Identifies content that has been deleted. Use this attribute to indicate changes between versions of
documents. Most browsers display the text with strikethrough.
Sample Places special emphasis on small character sequences taken out of their normal context. Most browsers
display samples using a monospaced font.
Definition Defines special terms or phrases, and to assist in creating a page index or glossary. Most browsers display
definitions as plain text.
Variable Works 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.
Code Signifies computer source code or other machine-readable content. Most browsers display code using a
monospaced, teletype-style font such as Courier.
Keyboard Signifies text that is typed on the keyboard. Most browsers display keyboard entries using a monospaced font.
ADOBE GOLIVE 9 170
User Guide
Physical text attributes
The following physical text attributes appear in the lower half of the Type > HTML > Style menu:
Note: Older browsers may not support physical attributes other than plain, bold, and italic.
Plain Uses the basic format for standard HTML text. It can be overridden by stylesheets.
Italic Instructs browsers to use an italic or oblique typeface. If the typeface is not available, highlighting, reverse
video, or underlining may be used.
Bold Instructs browsers to use a bold typeface. If that is not available, browsers might use something like reverse
video or underlining.
Underline Instructs browsers to underline text, spaces, and punctuation. (This attribute may be removed from the
next version of HTML.)
Strikeout Instructs browsers to put a line through the middle of text. (This attribute may be removed from the next
version of HTML.)
Superscript Instructs browsers to display text one-half of a character higher than the rest of the text.
Subscript Instructs browsers to display text one-half of a character lower than the rest of the text.
Teletype (tty) Instructs browsers to display text in a monospaced typeface.
Blink Uses a Netscape extension for reversing the background and foreground colors of text to make text appear to
blink on and off.
To apply an HTML physical or structural attribute to text
1 Do one of the following:
• To format existing text, select the text.
• To format text you are about to type, click in the document window to place an insertion point.
2 Choose an option from the Type > HTML > Style menu.
To use character styles
1 Select the text that you want to format.
2 Do one of the following:
• Choose Type > Character Style, and choose the style that you want to apply.
• Open the Character panel to select, edit, or create the style you want.
• Use the Character pop-up menu on the Control panel to select, edit, or create a style.
To create a new character style
1 To create a new character style, do one of the following:
• Open the Character Style panel and click the New Style button at the bottom of the panel.
• Choose Type > Character Styles > New.
• Choose New from the Character pop-up menu on the Control panel.
• Open the Character Style panel and click the New Style button at the bottom of the panel, or right-click in the
panel and select New Character Style.
ADOBE GOLIVE 9 171
User Guide
2 Next to Style Name, type a name for the new style.
3 In the General settings area, you can select an existing style to use as a starting point. This is helpful if you want
to adjust an existing style.
Note: When you create a style based on another style, changes that you make to the base style apply to both styles. For
instance, if you change the text color of the base style to gray, the style that is based upon it also changes to gray unless
you otherwise specified a different setting for it.
4 Set any settings that you want to use. There are a variety of formatting options that you can access by selecting the
different content tabs.
Note: If you leave an option blank, applying the character style will not override the setting that the text already has. For
example, if you do not select a font, applying the character style will not change the font for the text that you format.
5 After you have made all the changes, click OK.
To edit an existing character style
1 Open the Character Style panel.
2 Select an existing character style and do one of the following:
• Right-click the character style and choose Edit Character Style or double-click the name of the style in the
Character panel.
• Select Edit from the Character pop-up menu in the Control panel.
3 Adjust the settings that you want to change.
4 After you have made all the changes, click OK.
To remove all HTML physical or structural attributes from selected text
❖ Choose Type > HTML > Style > None.
To remove HTML styling from selected text
1 Choose Type > Clear Styles.
2 Do any of the following:
• Clear the text-tags to remove styles such as color, font, or physical attributes, from the selected text.
• Clear paragraph tags to remove styles such as address, preformatted, or a heading, from the selected text.
• Click the remove Overrides button in the Control panel to remove HTML styling for text, such as color or
emphasis.
3 Click OK.
ADOBE GOLIVE 9 172
User Guide
Changing fonts
Using fonts in web pages
If a web page doesn’t specify fonts, web browsers normally display text in the page with a default font that’s specified
by the browser. You can control 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.
To apply a font or font set by using HTML text attributes
The Type > HTML > Font menu lists the font sets and preferred fonts that are specified in the Font Editor, and also
any font sets that are saved to the current site window. Font sets that are specified in the Font Editor appear at the
top of the Font menu; preferred fonts and font sets that are saved to the current site appear at the bottom of the menu.
1 Either select existing text to which you want to apply a font, or click in the document window to place an insertion
point where you are about to type new text.
2 Choose a font or font set by doing one of the following:
• Select a font from the Control panel (recommended). You can also select character styles from the Control panel
while selecting the font.
• Choose Type > HTML > Font menu and then select the font set you want. Choose None if you want web browsers
to use their default fonts.
See also
“To set font properties for a style” on page 198
To create a font set
1 Choose Type > HTML > Font > Edit.
2 In the Font Editor, click the Default Font Sets tab.
3 Do one of the following:
• To create a blank font set, click the Create New Font Family button
.
• To create a copy of a font set, hold down the Create New Font Family button
4 To add fonts to the new font set, click the Add Font button
and choose the font set.
, and then choose a font from the menu.
5 Use the Up button
or the Down button
to move a selected font in the list. (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 > HTML > Font > Edit.
2 In the Font Editor, select the Default Font Sets tab.
3 Do any of the following:
• To add a new font, select the font set or a font in the set, click the Add Font button
, and choose a font name.
ADOBE GOLIVE 9 173
User Guide
• To change the name of a selected font or font set, click the name, and then enter a new name in the text box.
• To change the order in which one or more fonts, or font sets appear in the Font Editor, select the items and click
the Up button
or the Down button
.
• To remove a selected font set or fonts from the list, click the Delete button
.
4 Click OK.
To edit the Preferred Fonts list
The Preferred Fonts tab in the Font Editor lists the fonts that appear in the Type > HTML > Font menu. You can add
or remove fonts from the list.
1 Choose Type > HTML > Font > Edit.
2 In the Font Editor, select the Preferred Fonts tab.
3 Do any of the following:
• To add a new font, click the Add Font button
, and choose a font name.
• To change the name of a selected font, click the name, enter a new name in the text box.
• To remove a selected font from the list, click the Delete button
.
4 Click OK.
Changing the size and color of text
Guidelines for controlling font sizes
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 stylesheet, 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.
• 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 panel to view a simulated preview of your page in a web browser for Windows or Mac OS.
• Don’t use HTML heading elements (Header 1 to Header 6 in the Paragraph Format menu) 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 GoLive 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.)
ADOBE GOLIVE 9 174
User Guide
• 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.)
See also
“To set view options for page layout” on page 77
“To set font properties for a style” on page 198
To apply a relative font size to text
Text formatted with a relative font size appears at a size related to the size specified in the web browser’s preferences;
most browsers are configured to display text at 12 points by default. By applying a relative font size to text, you can
make the text appear the same size as, smaller than, or larger than the text size set by the browsers, or at a smaller or
larger size relative 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 interfere with cascading stylesheets in
the same page; therefore it’s safer not to use the font element and CSS in the same page.
1 Do one of the following:
• To format existing text, select the text.
• To format text you are about to type, click in the document window to place an insertion point.
2 Choose a size from the Font Size pop-up menu on the Control panel (recommended), or by choosing Type >
HTML > Size menu.
• 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).
Note: Many options on the Control panel for formatting text, including setting font size, write to CSS.
To add color to text
You can add color to selected text without affecting the page’s default text color (as specified in the Info tab of the site
window) by using the Set text color tool in the Control panel, the Swatches panel, or the Color panel.
1 Do one of the following:
• To format existing text, select the text.
• To format text you are about to type, click in the document window to place an insertion point.
2 Do one of the following:
• Click the lower right corner of the Set Text Color icon on the Control panel and select a color from the swatches
that appear. (The swatches displayed reflect the current settings in the Swatches panel.)
ADOBE GOLIVE 9 175
User Guide
• Click the Set Text Color icon on the Control panel and use one of the color sliders to select a color from the Color
panel. (Choose Only Web Colors from the Color panel menu
click a color in the Recently Used Colors list.
to select only web safe colors). You can also
• Select a color in the Swatches panel.
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.
See also
“Site colors” on page 277
To remove color from selected text
❖ Select the text, and then do one of the following:
• Choose Type > Remove Color.
• Click the lower right corner of the Set Text Color icon on the Tools panel, and choose Remove Color.
Spelling
To check the spelling in a page or site
You can check the spelling of a single page or an entire 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 insertion point.
• Expand More Options and specify conditions for the search, such as to ignore numbers.
4 To check the spelling in multiple files, select Add Files from the Work On menu.
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, click one of the following:
Ignore To allow a single occurrence of the word.
Ignore All To allow the questionable word for the current session. GoLive ignores all occurrences of the word in the
page or site.
Learn To add the questionable word to your personal dictionary. GoLive recognizes the word as correct in the future.
ADOBE GOLIVE 9 176
User Guide
8 To delete a questionable word from the page, click Delete.
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) and select Spell Checker from the list
on the left.
2 Choose a language set of spelling rules from the Personal Dictionary pop-up menu on the right.
3 Edit the dictionary by doing any of the following:
• To edit a word in the list, select it and change it in the text box below the scrolling box, and then press Enter.
• To add a word, click the New Word button
, type the word in the text box, and press Enter.
• To delete a word, select it in the list, and click the Delete button
.
4 Click OK.
You can create and edit a personal dictionary for each language that you have installed.
Searching text and HTML source code
Searching for words or HTML strings
Using the GoLive search tools, you can find and replace text or strings of HTML in any file throughout your website.
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, search for files in a site,
and create and save extensive site queries based on a search.
The Find command lets you specify the text to search for, while the Find Selection command finds the next instance
of text that matches text you select in the document window.
To find and replace text or HTML 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.
1 Choose Edit > Find > Find Text.
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.
• Select a group of files by using the Work On menu.
• Choose an item from a saved search from the Find Text window menu
.
ADOBE GOLIVE 9 177
User Guide
Recent search strings appear in the Find Text window menu.
3 Select options to match 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.
4 If you’re searching a site, select a search mode:
• To search text on web pages, select Layout Search Mode.
• To search source code, select Source Search Mode.
5 If you want to replace the found text, click the triangle to expand the Replace text box, and type in replacement text.
6 Click Find. GoLive highlights the first match, if any.
7 Do one of the following:
• To find the next occurrence of the text, click Find Next.
• To replace the found text, click Replace.
• To replace the text and find the next occurrence, click Replace & Next.
• To automatically replace all instances of the text in the document, click Replace All.
See also
“To use wildcards in a search” on page 179
To search for the next instance of selected text
❖ Make sure that you select your desired text and then choose Edit > Find > 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 > Find > Replace or choosing Edit > Find > Replace & Find Next. These commands are only available if the
item searched for was found and is still selected.
ADOBE GOLIVE 9 178
User Guide
To find and replace text or HTML in sites or files
You can search and replace text or strings of HTML in multiple files in any open site, or in multiple files in unopen
sites.
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.
1 Choose Edit > Find > Find Text.
2 Type the text or HTML code in the Find text box and the Replace text box, and then select search options.
3 Choose a search mode. Choose Layout Search Mode to search the text on your web pages, or choose Source Search
Mode to search only the text in your pages’ source code.
4 Click the Work On menu and do one of the following:
• To search the entirety of a currently open site, choose [site name] > The Whole Site from the menu.
• To search the files in a specific collection, choose the appropriate file from Collections. You can also drag a file
from the site window to the Find Text dialog box.
• To search a file that is selected in the site window, choose The Site Selection. You can also drag a file from the site
window to the Find Text dialog box.
Note: You can use these methods to search files from any open site. First, you must open any site that you want to search;
then choose the appropriate one, as described above.
• To search files in unopen sites, choose Add Files. Navigate to and select the files that you want to search; then click
Open. GoLive adds the selected files to the search list.
5 To exclude items from the search, deselect them by clicking in the corresponding box to remove the check.
Drag files into the Find window to add them to the search.
6 Select options to match 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.
ADOBE GOLIVE 9 179
User Guide
7 Click Find.
GoLive shows you the first file found containing matching text and opens the file.
8 Do one of the following:
• To find or view the next match in the same or next document, click Find Next.
• To find or view all matches, click Find All. 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.
See also
“Locating elements with the Find Code Elements dialog box” on page 318
“To use wildcards in a search” on page 179
To save search results for use in another search
• 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.
• To save the results as a collection in the currently open site, click Save Collection in the Results window (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 area of the Site
window.
See also
“Collections” on page 281
To use wildcards in a search
When you select Regular Expression in the Find Text window, you activate wildcard searching. GoLive makes
wildcard searching easier by providing default wildcard patterns.
1 In the Find Text window, do either of the following:
• From the window menu
, choose Saved Searches > Regular Expressions > [wildcard pattern].
• Type a search string in the text box. (See the wildcard search options in the table below.)
2 Select Regular Expression.
3 Click Find.
ADOBE GOLIVE 9 180
User Guide
Wildcard patterns appear in the Saved Searches menu.
Guidelines for wildcard seaching
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.
Wildcard search options
Search String
Finds
Adobe|GoLive
"Adobe" or "GoLive"
m(i|a)ll
"mill" or "mall"
Adobe(GoLive)?
"GoLive" if the latter exists,
else "Adobe"
</?HTML>
"<HTML>" and "</HTML>"
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"
ADOBE GOLIVE 9 181
User Guide
Search String
Finds
<H[1-6]>
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 "<P>",
"<b>", "<H2>", "<ImaGe>"
<[a-zA-Z][a-zA-Z0-9]*[^>]*>
Any start tag, including those
with attributes, such as
"<image width=20>"
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.
[x-x]
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).
\S
Finds any character other than
a white space.
\r
Finds any line break (in HTML
source code).
\t
Finds any tab character, such
as indentations in HTML
source code.
ADOBE GOLIVE 9 182
User Guide
Wildcard Option
Action
\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”.
+
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.
ADOBE GOLIVE 9 183
User Guide
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 backreference 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.
Non-roman characters
Non-roman character sets
Your ability to switch between roman and non-roman character sets depends on your operating system:
• The Windows XP operating systems with Microsoft Internet Explorer 6.0 or later let you view and create doublebyte 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.
• The Mac OSX or Mac OS 10 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 non-roman text. See your system documentation for further information.
Double-byte text in GoLive
By default, GoLive uses Multilingual UTF-8 encoding, which supports both roman and double-byte languages. To
create content in a double-byte language, however, you also need the appropriate system fonts.
In the Advanced > Document Encoding submenu, you can choose other encoding options, such as Japanese and
Multilingual UTF-16. You can add to these menu options in the Encodings preferences.
To activate encodings for language scripts
In the Encodings preferences, you can select the default language script and activate additional scripts so they appear
in the Advanced > Document Encoding menu.
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), and select Encodings from the list on
the left.
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 it in the Default column.
ADOBE GOLIVE 9 184
User Guide
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 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 Advanced > 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.
To import 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.
1 Open a new document window.
2 Choose Advanced > 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 Advanced > Document Encoding menu, see “To activate encodings for language scripts” on
page 183.)
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 <body> and </body> 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 “&lt;”, “&gt;”, and “&amp;”; 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 file name.
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.
185
Chapter 9: on Cascading stylesheets
Understanding cascading stylesheets
About cascading stylesheets
Cascading stylesheets (CSS) make it easy to update text properties and other attributes throughout a website. If a CSS
style needs to be updated, you simply edit the style and all content to which the style is already applied will automatically reflect the new properties. With stylesheets 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 stylesheet 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.
The GoLive CSS Editor, in conjunction with the CSS panel, lets you create CSS styles, edit style properties, reference
or create external stylesheets, and preview how some style properties may appear. Sample stylesheets are available in
the New dialog box. The CSS panel lists external stylesheets, classes, and identifiers used in the site. You can use the
CSS Editor, the CSS panel, and the CSS option in the Type menu to apply CSS styles in pages. Additionally, you can
view the In & Out Links panel to visualize the relationship of stylesheets linked and used for specific pages. For more
information, see “About the site window” on page 99.
You can use CSS layout objects to create layouts that change in size to accommodate a viewer’s browser settings. For
more information, see “About CSS layout objects” on page 119.
Some viewers may not be able to see CSS style properties if 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. Web
browser support for CSS varies greatly between both browser vendors and browser versions.
About the GoLive CSS workflow
In GoLive, you typically build cascading stylesheets with the following workflow:
1. Add styles, create links, or create a new stylesheet.
Use the CSS Editor to add CSS styles to a web page, link to an external stylesheet or create a new external stylesheet.
You can also import CSS styles from a different web page or from an external stylesheet, or create a new external
stylesheet from one of the stylesheet samples in the New dialog box.
ADOBE GOLIVE 9 186
User Guide
A
B
Internal stylesheet in the CSS Editor.
A. External stylesheet reference B. List of internal styles
2. Define the properties of each CSS style.
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.
3. Create links to an external stylesheet.
If you’re using an external stylesheet, you can link to it from an individual web page using the CSS menu on the application window or using the CSS Editor. Or, you can use the CSS panel and the site window to link multiple web pages
to it.
Select a page in the site window and then view the In & Out Links panel and the CSS panel, which lists the external
stylesheets, to determine where stylesheets are used in the site. You can also use these features to associate style sheets
with new pages. For more information, see “Using the In & Out Links panel to view links” on page 110.
4. Apply styles.
Apply class or ID styles to text and other items. You must manually apply class styles to selections in your page with
the CSS panel, and apply ID styles using the Outline Editor or the Source Code Editor tabs on the document window.
Element and inline styles, in contrast, are automatically applied to HTML tags in your web page.
You can also apply class styles with the inline CSS Style preview or Type > CSS menu options.
5. Modify styles.
You can continue to modify any style’s properties with the CSS Editor. All content that uses the style will automatically reflect the changes.
Creating and viewing stylesheets
Choosing between internal and external stylesheets
When you create a stylesheet, first determine whether it should be internal or external. An internal stylesheet is
written into the head section of a web page and is typically used if styles are used on only one page. An external
stylesheet exists as a separate file, which is useful if you want multiple pages to share the same styles.
ADOBE GOLIVE 9 187
User Guide
You can use both an internal stylesheet and external stylesheets in a single web page. You can also import styles from
an external stylesheet into an internal stylesheet, or export internal stylesheets to an external stylesheet file.
With CSS, stylesheets cascade—in other words, several external stylesheets, in addition to an internal stylesheet, may
define the properties of a single page and override one another according to certain rules of precedence. When
several stylesheets 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 stylesheets will override a rule in an external stylesheet, and external
stylesheets are assigned a level of precedence relative to other sheets. By default, the web page’s stylesheet overrides
the browser’s default values.
Note: Except for their title bars, internal and external CSS Editors appear identical. An internal CSS Editor, which is
specific to only its web page, displays the web page’s file name in the title bar. An external CSS Editor, which applies to
the whole site, displays the external stylesheet’s file name in the title bar.
To display the CSS Editor
1 Do one of the following:
• Open a page and click the Open CSS Editor button
in the upper right corner.
• Open an external stylesheet that is named with the .css file extension.
• Double-click a CSS file in the CSS panel.
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 stylesheet properties (though not the style properties within it), select an external stylesheet.
Select Show These Buttons At Top to also display the buttons on the right side of the CSS Editor at the top of the CSS
Editor.
3 To display the stylesheet source code, click the Source tab in the CSS Editor, or click the Show Split Source button
at the lower left of the CSS Editor to view the source simultaneously with the CSS definitions.
4 To change the CSS source code color display, choose a theme from the Theme menu in the Source tab.
See also
“Source preferences” on page 303
To edit the styles listed in the Create New CSS Statements menu in the CSS Editor
1 Click the Create New CSS Statements button
in the CSS Definitions tab of the CSS Editor, and choose New
Style > Edit Style Examples.
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.
3 Edit the style properties in the exampleStyles.css CSS Editor window.
4 When you are finished editing styles, choose File > Save and close the exampleStyles.css CSS Editor window.
ADOBE GOLIVE 9 188
User Guide
See also
“Types of CSS styles” on page 191
“About style properties” on page 196
View options for the CSS Editor
View options in the CSS Editor window menu include the following:
Show Split Style Preview Displays a preview of a selected style’s effect in the lower pane of the CSS Editor.
Show Split Source Displays the CSS source code in the lower pane of the CSS Editor.
Show Info Column Shows property types for a style.
Folder For Sections Separates the CSS Definitions tab of the CSS Editor into an Internal folder that lists internal
styles and an External folder that lists referenced external stylesheets.
Show Statement Filter Displays the Search for CSS Statements menu.
Sort Statements Displays styles in alphabetical order in the CSS Definitions tab.
Show Properties In List Displays properties for a style.
To create an internal stylesheet
1 Click the Open CSS Editor button
in the upper right corner of the Layout tab in a document window.
2 Add styles to the stylesheet by doing any of the following:
• Create new styles.
• Reference an external stylesheet.
• Import styles from an external stylesheet.
See also
“Types of CSS styles” on page 191
“To import styles from an external stylesheet” on page 192
“To reference an external stylesheet from web pages” on page 189
To create an external stylesheet
1 Do one of the following:
• To create a new external stylesheet, choose File > New, and then choose Web > CSS. Choose a preconfigured
stylesheet, or choose basic.css to open a simple stylesheet. The external CSS Editor appears.
• To create an external stylesheet based upon a page’s internal stylesheet, open the page, and choose File > Export >
Internal Style Sheet. Name the file using .css as the extension, and save the file to your site folder. You can export
internal stylesheets only if they contain styles other than inline styles.
2 Add styles to the stylesheet.
Note: To reference an external stylesheet in an external stylesheet, use the [email protected] button. See “To reference an
external stylesheet from another external stylesheet” on page 190.
3 Reference the external stylesheet from one or more pages.
ADOBE GOLIVE 9 189
User Guide
Create different external stylesheets and apply each external stylesheet separately to a page to quickly preview
different sets of styles.
To set an external stylesheet as the site default
You can set an external stylesheet to be the default stylesheet for a site. When you set an external stylesheet as the site
default, all new files you add to the site will reference it.
1 Right-click the stylesheet in the site window.
2 Choose Set as Default CSS.
See also
“Types of CSS styles” on page 191
“About external stylesheets” on page 189
“To reference an external stylesheet from web pages” on page 189
To add comments to a stylesheet
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.
Select Show These Buttons At Top to display the Create buttons at the top of the CSS 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 external stylesheets
About external stylesheets
If multiple pages share style elements, you can create an external stylesheet that you reference from the individual
pages. Using external stylesheets helps to keep your page sizes small and lets you update the entire site’s styles from
within the single external stylesheet.
The order of the external stylesheets 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 the pages that use an external stylesheet, open the In & Out Links panel, and then select the stylesheet in
the site window.
To reference an external stylesheet from web pages
1 Do one of the following:
• To reference an external stylesheet for a single web page, open the CSS Editor and click the Create a Reference To
An External Style Sheet File button
. Select the empty reference under the Name column and reference the
external stylesheet in the Reference text box.
ADOBE GOLIVE 9 190
User Guide
You can also click and hold the CSS Editor button to add links to external stylesheets from a page: the CSS Editor
button menu lists all external stylesheets in the site.
• To reference an external stylesheet for multiple web pages, select two or more pages in the site window. In the CSS
panel, click the Create New Link To External CSS button, and then reference an external stylesheet in the text box.
To easily reference a stylesheet document from a page within the same site, drag the stylesheet 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.
2 If the styles in the stylesheet are designed for certain media (such as a speech synthesizer, braille device, or PDA),
specify the media type in the Media text box.
3 Add additional external stylesheets as needed.
4 To change the order of precedence of an external stylesheet relative to other external stylesheets referenced in the
same page, drag the external stylesheet to a new position in the Name column in the CSS Editor of the page.
Select a page in the site window and use the CSS panel with the In & Out Links panel to quickly see which pages in
your site reference an external stylesheet. For more information, see “Using the In & Out Links panel to view links”
on page 110.
To view or edit a referenced external stylesheet
❖ Do one of the following:
• Choose Advanced > CSS > Edit > Edit Linked [stylesheet].
• Double-click the external stylesheet in the CSS panel or in the site window.
• Double-click the external stylesheet in the CSS Editor or select it and click Edit.
• Double-click the CSS icon in the Head section of the document window.
To replace a reference to an external stylesheet
1 In the site window, select the .css file you want to replace.
2 In the In & Out Links panel, use the pick whip that is adjacent to the .css file and reference a different stylesheet
document in the site window.
3 (Optional) In the Change Link dialog box, deselect any files that you don’t want to update, and then click OK.
All selected files in the Change Link dialog box use the new external stylesheet. Unselected files use the existing
external stylesheet.
To remove a reference to an external stylesheet
❖ Do one of the following:
• In the CSS Editor of a page, select the external stylesheet and press Delete (Windows) or Command-Delete (Mac OS).
• Select one or more pages in the site window, and then select the external stylesheet in the CSS panel and click the
Remove Selected Items button.
To reference an external stylesheet from another external stylesheet
1 Open the CSS Editor for the CSS file that you want to reference the external stylesheet.
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 [email protected] button.
ADOBE GOLIVE 9 191
User Guide
4 Do one of the following:
• Reference an external stylesheet in the Reference text box.
• Click the Create button to create a new external stylesheet. In the Save As dialog box, type a file name for the
external stylesheet, and click Save.
5 If the styles in the stylesheet 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 stylesheet, click Edit.
• To display the In & Out Links panel, click In & Out Links.
Creating CSS styles in stylesheets
Types of CSS styles
You can create new CSS styles from scratch or import CSS styles from an external stylesheet. There are four different
types of styles you can define in a stylesheet:
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 CSS-support,
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 <h3> 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 CSSenabled 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 that apply as priority. This advanced 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.
Inline styles Apply to specific elements on the page and add a style attribute to HTML tags. You create and apply
inline styles by using style-attribute editing in the CSS Editor. Because inline styles apply to specific elements on the
page, you can use them only in internal stylesheets.
Two major style categories are used with cascading stylesheets:
Simple Styles Match elements based on the element type, attributes, for both, but 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.
ADOBE GOLIVE 9 192
User Guide
To import styles from an external stylesheet
You can import styles from an external stylesheet into a web page’s internal stylesheet.
1 Open the CSS Editor for the page to which you want to import the CSS styles.
2 Choose File > Import > External Style Sheet.
3 Select an external stylesheet, and click Open. The external stylesheet’s styles are added to the list of internal styles
in the CSS Editor.
About HTML element styles
One of the more powerful features of cascading stylesheets 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.
A
B
C
CSS Editor
A. Element style name B. Style properties C. TD style is automatically applied to text in table cells in the page
You can use two different types of element styles:
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 <h1>tag, all text that uses that tag (the Header 1 paragraph
format) will display with size 36 point.
Contextual element styles Reformat all instances of a particular element nested within another element. For
example, if you create a style named with the <h1> <em> tags and assign the style a lime color, all text between <em>
start and end tags (italic style) that are also within <h1> 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 <h1> or <em> 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 <a> “link” tag. In the CSS Editor, choose a:hover from the Create A Style That Applies to
Markup Elements button’s menu. Contextual element styles like a:hover and a:active are pseudo classes.
To create an HTML element style
1 In the CSS Editor, do one of the following:
• Click the Create A Style That Applies To Markup Elements button
.
ADOBE GOLIVE 9 193
User Guide
• Choose New Element Style from the Create New CSS Statements button menu.
• Choose Advanced > CSS > New > Element Style.
• Choose a tag from the Create A Style That Applies To Markup Elements button menu.
To add an HTML tag to both menus, choose Edit Style Examples from the Create A Style That Applies To Markup
Elements button menu. (See “To edit the styles listed in the Create New CSS Statements menu in the CSS Editor” on
page 187.)
• 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 set
. If you didn’t choose a tag in
step one, type an HTML element (tag) name in the Selector text box. If you want to apply the same properties to
multiple elements, separate each element name with a comma in the Selector 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 with cascading
stylesheets” on page 158.
You can set the shared properties of all text in a page by creating HTML element styles named after the tags <body>,
<div>, and <td> (for table cells). For example, you could add one new HTML element style, “body,” to the CSS
Editor. Then, select basic.CSS from the CSS Inspector and enter an element named “td, body, div” (without the quotation
marks). Assign any shared properties you want to “td, body, div” and save the changes. In this example, the properties
that you set for “td, body, div” in the basic.CSS are then assigned to “body.”
3 In the CSS Editor, add style properties to the selected style.
Any properties you add are automatically applied to the HTML element that the style is named after wherever the
tag appears in the page.
See also
“About style properties” on page 196
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 Create A New Class Style button
.
• Choose New Class Style from the Create New CSS Statements button menu.
• Choose Advanced > CSS > New > Class Style.
• Select an existing class style, and choose Edit > Duplicate.
2 Select the new style in the CSS Editor, and click the Selector And Properties set
. Type an alphanumeric name,
preceded by a period in the Selector text box and with no spaces—for example, .myboldclass.
ADOBE GOLIVE 9 194
User Guide
Note: 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 also
“About style properties” on page 196
“Applying styles” on page 204
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 Create a Style That Applies to Unique Elements button
.
• Choose New ID Style from the Create New CSS Statements button menu.
• Choose Advanced > CSS > New > ID Style.
• Select an existing ID style, and choose Edit > Duplicate.
2 Select the new style in the CSS Editor, and click the Selector And Properties set
. Type a unique alphanumeric
ID name in the Selector text box, preceded by a number sign (#) and with no spaces—for example, #myheaderid.
Important: The number sign must precede the id style’s name; otherwise, the style changes to an element style and can’t
be used.
3 In the CSS Editor, add style properties.
4 To apply the ID style, select it from the Markup panel or from the markup tree on the bottom of the document
window.
See also
“About style properties” on page 196
“Applying styles” on page 204
ADOBE GOLIVE 9 195
User Guide
Inline styles
Inline styles enable you to apply a style to a single element on a page (for example, a paragraph of text) and add a
style attribute to HTML tags (for example, <p style = “color:#fa7442”>, which displays orange paragraph text). You
create and apply inline styles by using style-attribute editing in the CSS Editor. Because inline styles are attached
directly to HTML tags, they have a higher cascade precedence than other styles and override all other styles applied
to the page, including those specified by external stylesheets. You can use inline styles with any element in a page.
To create an inline style
1 Select the element on the page to which you want to apply the style (for example, a table cell).
2 Choose Style Attribute Editing from the CSS Editor window menu.
3 In the Name column of the CSS Definitions tab, select the tag that corresponds to the element you selected in step
1 from the Style Attribute list (for example, <td>).
4 In the CSS Editor, add style properties.
See also
“About style properties” on page 196
Media, font, and page rules
You can specify media, font, and page information using CSS rules:
@media rule Specifies 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.
You can specify media types for external stylesheets by setting the stylesheet’s media type in the CSS panel or the CSS
Editor. See “To reference an external stylesheet from web pages” on page 189 and “To reference an external stylesheet
from another external stylesheet” on page 190.
@font-face rule Specifies a font and its URL location to ensure the font will display on systems without it.
@page rule Specifies 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:
• To create an @media rule, click the Create @media button and choose the media type from the Media menu. In
the CSS Editor, drag an existing class, ID, or element style to the @media rule, or select the @media rule and create
a new class, ID, or element style within it. For more information about creating styles, see “To create an HTML
element style” on page 192, “To create a class style” on page 193, and “To create an ID style” on page 194.
Note: You cannot include links to external stylesheets, @import rules, @media rules, or a folder in an @media rule.
• To create an @font-face rule, click the Create @font-face button. In the Font Source set, click the Create New Item
button and specify the URL of the font. In the Font Styling set, specify font properties.
• To create an @page rule, 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.
ADOBE GOLIVE 9 196
User Guide
To delete a style or external stylesheet from a web page
1 Select one or more styles or external stylesheets in the CSS Editor, and then either press Shift to select adjacent
items or press Ctrl to select nonadjacent items.
2 Press Delete (Windows) or Command-Delete (Mac OS).
3 If you deleted one or more styles, choose options in the Delete CSS Style window.
Editing cascading stylesheets manually
If you prefer to manually edit the source code of your cascading stylesheets, you can do so in the Source tab or in the
Split Source view of the internal or external CSS Editor.
Begin each style on a new line. Use the following basic guidelines and CSS syntax definitions when editing your
stylesheets in the Source tab or the Split Source view of the CSS Editor:
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}
See also
“About style properties” on page 196
Defining style properties
About style properties
After you have added a style to your cascading stylesheets, 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 set or manually in the Source tab or Split Source
view of the CSS Editor. You can also store collections of properties and then quickly apply them to a style.
ADOBE GOLIVE 9 197
User Guide
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.
See also
“Property inheritance” on page 197
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 <h1> 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
<em> tag, the italicized text will inherit the blue properties of the <h1> start and end tags that contain it.
<h1>This is a heading of
<em>size one<em>.</h1>
If we create an additional HTML element style named after the <em> tag and apply a pink color property to it, the
<em> tag HTML element style will take precedence over the <h1> tag HTML element style because the <em> tags
are nested within the <h1> 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 stylesheet.
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/.
Relative and absolute units
Stylesheets can contain two types of length units: relative and absolute. Relative units specify a length relative to
another length property. Stylesheets 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.
In GoLive, you can use the following relative units:
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.
ADOBE GOLIVE 9 198
User Guide
% Percentage values are always relative to another value—for example, a length unit.
Keywords Specify font size relative to the parent element. For example, XX-small through X-large.
Absolute length units are only useful when the physical properties of the output medium are known.
In GoLive, you can use the following absolute length units:
• 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. However, negative length units may complicate the formatting and
there may be browser-specific limitations.
To set font properties for a style
The Font Properties set
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.
1 Select a style in the CSS Editor and click the Font Properties set
.
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 panel.
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 panel.
4 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. For more information on units, see
“Relative and absolute units” on page 197.
Choose Pixel units to ensure that a font size will display the same across the Mac OS and Windows platforms.
5 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.
6 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 Create 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 Create New Font
text field.
, and then choose a font from the Font menu or enter a font name in the
ADOBE GOLIVE 9 199
User Guide
• 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
.
7 To set the font style, choose a font style from the Style menu.
8 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.
9 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 <a> tag that is used
for links. Set the style’s Decoration property to none in the CSS Editor.
See also
“Relative and absolute units” on page 197
To set text spacing, case, and alignment for a style
The Text Properties set
style.
of the CSS Editor lets you define spacing, case, and alignment properties for the selected
1 Select a style in the CSS Editor, click the Text Properties
set, and do any of the following:
• To set the horizontal alignment, choose an option from the Text Alignment menu.
• To use small caps, choose Small Caps from the Font Variant menu.
• To specify inheritance, choose Inherit from the Font Variant menu.
• To specify the text case, choose an option from the Transformation menu.
• 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.
• 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.)
• 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.)
• To set the font stretch, choose a stretch style from the Font Stretch menu.
Note: Some options, such as font stretch, are not supported by all browsers. GoLive doesn’t preview font stretch.
2 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.
ADOBE GOLIVE 9 200
User Guide
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.
See also
“Relative and absolute units” on page 197
Block properties for CSS
The Block Properties set
of the CSS Editor 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.
C
A
D
E
B
Block set of CSS Editor
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 stylesheets 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
F
CSS block properties
A. Block width B. Margin (transparent) C. Border D. Padding E. Content F. Element width
See also
“Relative and absolute units” on page 197
To set block properties for a style
1 Select a style in the CSS Editor and click the Block Properties set
.
ADOBE GOLIVE 9 201
User Guide
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.
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 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.
To specify margins and padding for a style
1 Select a style in the CSS Editor, and click the Margin and Padding Properties 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 panel while in the Layout Editor, select Negative Margins 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.
4 Choose a unit of measurement, 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.
ADOBE GOLIVE 9 202
User Guide
To set border and outline properties for a style
The Border and Outline Properties set
of the CSS Editor lets you set the borders and outlines of the block
generated by a style, including line width, color, and line style. 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.
1 Select a style in the CSS Editor, click the Border and Outline Properties set
following:
, and do one or both of the
• In the Border section, choose a unit from any of the Units menus; then enter a number in the adjacent border
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.
• In the Outline section, choose a unit from the Unit menu, and then enter a number in the All box to set the outline
border.
2 To set the border or outline 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 panel, or double-click a color field to select a color using
the Color Picker.
• Click a color field and select a color from the Swatches panel.
3 Choose a line style from the Line Style menu.
See also
“Block properties for CSS” on page 200
“Relative and absolute units” on page 197
List item properties for CSS
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.
Note: 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.
To set properties for list item markers
1 Select a style in the CSS Editor and click the List Item and Other Properties set
2 Choose an option from the List Image menu, 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 List Style 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.
ADOBE GOLIVE 9 203
User Guide
4 To set the position where the list item marker appears, choose one of the following from the List Position 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).
5 To control white space in the list, choose from the following properties in the White Space menu:
• To format the lines of text in a list to break normally, choose Normal.
• To preserve line breaks and other white space, choose Preformatted.
• To suppress line breaks, choose No Wrap.
To set background properties for a style
The Background Properties set of the CSS Editor lets you set a background image in the block generated by a style.
Note: 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.
1 Select a style in the CSS Editor and click the Background Properties set
.
2 Choose an option from the Image menu, 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 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 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 a length unit or a percentage, and enter a
number in the Horizontal and Vertical Align text boxes.
See also
“Block properties for CSS” on page 200
To store and apply property collections
You can store collections of properties and then quickly apply them to a style. GoLive provides several default
property collections, available from the Apply Property Collection menu in the CSS Editor.
1 Create properties by using the properties sets of the CSS Editor.
2 Click the Selector And Properties set in the CSS Editor and select the properties you want to store. Shift-click to
select adjacent properties; Control-click (Windows) or Command-click (Mac OS) to select nonadjacent properties.
3 Click the Store Property Collection button
at the bottom of the CSS Editor.
4 Enter a name for the property collection in the Store Property Collection dialog box, and click OK.
ADOBE GOLIVE 9 204
User Guide
5 Select a style in the CSS Definitions tab of the CSS Editor, click the Apply Property Collection button
bottom of the CSS Editor and choose a collection.
at the
6 (Optional) To edit one of the default property collections, click the Apply Property Collection button and choose
Edit Property Collection. Choose a property collection in the CSS Definitions tab of the PropertyCollection.css
window, and edit properties in the properties sets of the propertyCollection.css window.
To create a new property for a style
To ensure upward compatibility with future releases of the CSS Specification, GoLive lets you create new properties
and specify their values.
1 Select a style in the CSS Editor, and do one of the following:
• In the Selector And Properties set
of the CSS Editor, click the Add New Property button
. Enter the new
property name in the first text box.
• In the Selector And Properties set
, click and hold the Add New Property button
and choose a property name.
2 Do one of the following:
• Set a value for the property in the properties sets of the CSS Editor.
• Enter a property value in the Source tab or the Split Source view of the CSS Editor immediately after the colon that
follows the property name.
Applying styles
Applying styles
After you’ve created your cascading stylesheet, 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 stylesheets from your pages.
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 panel, the inline
CSS Style preview, or the Type > CSS menu options. The CSS panel lists all available class styles defined in a page’s
internal or external stylesheets. The inline CSS Style preview displays the Style Apply tab of the CSS panel inline for
selected text.
ID styles Require that you apply the style in layout manually in the page’s Source Code Editor.
Inline styles Apply automatically to the element you selected when creating the style.
To apply a class style
1 Do one of the following:
• To apply the style to an object on a page, select the object, such as text, table, table cell, image, or markup tree tag.
• To apply a style to the entire body of a page, select the <body> tag in the markup tree at the bottom of the page,
and then use the formatting options in step 2.
2 Do one of the following:
• In the CSS panel, select a formatting option adjacent to the class style’s name.
ADOBE GOLIVE 9 205
User Guide
• Choose Type > CSS [format], and then choose a class style.
• Choose Type > CSS Style, and then select the formatting option in the inline CSS Style preview that appears. (You
can also preview styles by placing the pointer over a formatting option.)
Note: The formatting options in the CSS panel, CSS Style previews, 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 panel displays Inline, Par,
and Div options. If a table cell is selected, the panel displays one option for the <td> tag.
• Choose Window > Markup, and apply the style by choosing it from the Class menu in the Markup panel.
Class style format options
You can choose from the following formatting options in the CSS panel or the inline CSS Style preview:
Inline Style Formats an item inline.
Block Style Creates a division that is disconnected from the normal flow of HTML.
<p> 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.
<body> Applies a style to the entire body of a page. If this option isn’t listed, select the <body> 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.
Specific HTML tags Apply the style to a selected object, such as a table cell, image, or layer. For example, the <td>
tag for a table cell, the <img> tag for an image object, and the <div> tag for a layer.
See also
“Formatting tables with cascading stylesheets” on page 158
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:
2 Click the Source Code 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 you want to apply it to the entire paragraph, edit the code as follows: <P
ID=”headerbox”>Welcome to TravelEZ</P>
3 View the effect in the Layout Preview.
If you applied an ID style in the CSS Editor, you can use the context menu in the markup tree to assign this ID.
206
Chapter 10: Adding images
and multimedia
Pre-optimized images
Choosing between pre-optimized images and Smart Objects
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.
See also
“Advantages of Smart Objects” on page 222
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 path 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.
See also
“Advantages of Smart Objects” on page 222
To insert a pre-optimized image
❖ Do one of the following:
• Open the page that you want to include the image, choose the Layout Editor tab, and choose File > Place from the
application window menu bar and select the image you want.
Note: If you use File > Place you can select from options at the bottom of the Place dialog box to place the image inline,
to place the image in a separate box, or to replace the selected item.
• Drag the image file from the site window into the Layout Editor.
• Drag the Image icon
from the Basic set
in the Objects panel into the document window, or double-click
the icon in the panel. In the Image Inspector, specify an image file in the Source text box.
ADOBE GOLIVE 9 207
User Guide
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 pixelated.
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
in the Image Inspector.
restore the image to its original proportions by clicking the Set To Original Size button
If you often resize images, use Smart Objects for maximum flexibility.
See also
“Resizing Smart Objects” on page 227
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
❖ To resize and image and constrain proportions in the Layout Editor, do one of the following:
• Select the image, and position the pointer over the lower right-hand corner handle; the pointer becomes a doublearrow
. Hold down Shift, click and hold down the mouse button, and drag the mouse.
• In either the Control panel or Inspector, click the Constrain proportions for width & height button and enter the
width or height value that you want to use.
Setting basic image options
To add alternative text for images
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.
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.
See also
“Creating resource and navigational links” on page 85
ADOBE GOLIVE 9 208
User Guide
To create HTML image borders
You can create image borders that use HTML attributes to highlight images on a page. Borders around linked and
nonlinked images appear in the default colors for links and text, respectively.
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).
See also
“To set default colors for text or links on the page” on page 97
To create CSS image borders
You can create image borders that write to CSS to highlight images on a page. Borders around linked and nonlinked
images appear in the default colors for links and text, respectively.
❖ Select the image, and then use the settings on the Control panel to specify border properties such as color,
thickness, or stroke style.
Note: You can also change border color using the Background color tool and Stroke/text color tool in the Tools panel.
See also
“To set default colors for text or links on the page” on page 97
Creating rollovers
About 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.
Note: 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.
To create self rollovers
With self rollovers, the most common rollover type, mouse actions over an image cause changes in that image alone.
1 In the Layout Editor, select the desired image.
2 In the Rollovers panel, select the desired rollover state, and then click the New Rollover Image button
3 In the URL text box, specify an image for the state.
4 To force browsers to fully download the image before enabling the rollover, click Preload.
.
ADOBE GOLIVE 9 209
User Guide
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.
To create 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.
1 In the Layout Editor, select the trigger object.
2 In the Rollovers panel, select the state that will trigger the rollover, and then click the New Rollover Image
button
.
3 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 panel.
4 In the URL text box, specify the image file for the remote image object.
5 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.
Importing rollovers from ImageReady
To import ImageReady rollovers, use Smart Photoshop objects. If you change an original ImageReady PSD file,
GoLive can automatically update related Smart Objects.
For standard ImageReady rollovers, GoLive displays all states, but you can edit only remote states. For Selected State
rollovers, GoLive doesn’t display states.
See also
“Advantages of Smart Objects” on page 222
To add 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.
1 In the Rollovers panel, select the state.
2 Click the New Message button
, and then type in the Message text box.
To remove rollover images or states
1 In the document window, select the object that contains the image or state.
2 In the Rollovers panel, do one of the following:
• To remove an individual image or state, drag it to the Delete icon
.
• To remove all states, choose Remove All Rollover States from the panel menu
.
ADOBE GOLIVE 9 210
User Guide
To change the size of rollover thumbnails
❖ From the Rollovers panel menu
, choose View, and then choose No Thumbnails, Small Thumbnails, Medium
Thumbnails, or Large Thumbnails.
To highlight rollovers in the document window
To more easily identify rollover objects and rollover code, you can highlight them in the Layout Editor, Source Code
Editor, and Outline Editor.
❖ From the Rollovers panel menu
, select Highlight Rollovers & Actions.
About hidden rollover states
To ensure that rollovers behave as most viewers expect, GoLive creates additional rollover states that the Rollovers
panel hides by default. 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.
Use the Expert Mode of the Rollovers panel to prevent GoLive from creating these extra states, or to delete them from
existing rollovers. In Expert Mode, only states displayed in the Rollovers panel are added to JavaScript code.
To display all rollover states
❖ From the Rollovers panel menu
, select Expert Mode.
When Expert Mode is enabled, GoLive displays a warning icon
in the Rollovers panel.
Assigning rollover images automatically
Detecting rollover images
The Detect Rollover Images feature automatically assigns images to rollover states. After you specify the file name 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.
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.
Note: You must manually assign rollovers to images that you insert into a page by selecting File > Place.
To determine how GoLive detects rollovers
In the Rollover preferences, you can change how GoLive behaves when it detects rollovers. You can also view and
edit the sets of naming conventions that identify rollover images.
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), and select Rollover.
ADOBE GOLIVE 9 211
User Guide
2 Do any of the following:
• To prevent GoLive from detecting rollovers, deselect Automatically Detect Rollover Images.
• To open the Rollovers panel when GoLive detects rollovers, select Automatically Open Rollover panel.
• 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.
To manually detect rollover images
1 Select a rollover object in the Layout Editor.
2 From the Rollovers panel menu
, select Detect Rollover Images.
Note: You cannot assign rollovers to Smart Objects at this time.
Using actions with rollovers
Attaching actions to a rollover
The Actions panel lets you attach scripted actions to a rollover—for example, an action that changes the background
color of the page. You can even attach actions to a sliced Smart Object containing rollovers. If you edit the source file
in Photoshop or Illustrator, GoLive automatically reoptimizes target files and retains attached actions.
To ensure that scripted actions work with rollovers, 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.
See also
“About actions” on page 329
To change default 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.
Creating image maps
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 an image map
1 Select an image on your web page.
ADOBE GOLIVE 9 212
User Guide
2 In the Smart Image or Image Inspector, click the More tab and select the Use Map option. Or, select the Link tool
in the Tools panel and select a shape for the hotspot from the Control panel.
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 Drag in the image to define the hotspot.
4 In the Map Area Inspector or in the Control panel, specify a file for the link destination of the selected hotspot.
5 Use the Target text box to specify the target frame in the destination frame set (if any).
6 Type additional information in the Title text box. Some browsers use this information to display tooltips 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 hotspots in image maps
1 Select the hotspot in the image.
2 Use the following tools available in the Tools panel:
• To move or resize the hotspot by dragging, use the Select Map Area tool
.
• To change the stacking order of multiple overlapping hotspots, use the Bring Region To Front button and the Send
Region To Back button in the Control panel.
Note: The Bring To Front and Send To Back buttons are also available in the Transform panel.
To add actions to image maps
1 Select a hotspot in an image map.
2 In the Actions panel, choose a mouse or key event, and click the New button
3 Choose the desired action from the Action menu.
See also
“About actions” on page 329
To associate a rollover with an image map
1 Select a hotspot in the image map.
2 In the Rollovers panel, create and edit rollover states.
See also
“About rollovers” on page 208
.
ADOBE GOLIVE 9 213
User Guide
Building a web page using tracing images
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.
You can import the following formats as tracing images: Illustrator AI, Photoshop PSD, JPG, JP2, GIF, PNG, BMP,
TARGA, EPS, PCX, PDF, PIXAR, and SVG.
See also
“Advantages of Smart Objects” on page 222
To add a tracing image to a page
1 Select Window > Tracing Image.
2 In the Tracing Image panel, 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 panel.
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 panel, and drag the image in the Layout Editor. When you’re
finished, click the Move Image tool again to disable the tool.
Note: You can quickly resize the window to fit the tracing image. First, select Show > Page Deminsions from the Change
Window Size pop-up menu in the bottom right corner of the document window. Then, select Tracing Image from the
same pop-up menu (the menu changes depending upon view).
To align, reset, or remove a tracing image
❖ Select the image, and then do one of the following:
• To align with an object in the document window, choose Align With Selection from the Tracing Image alette menu.
You can align tracing images with objects such as table cells and GoLive layers.
• To return a tracing image to the default position, choose Reset Position from the Tracing Image panel menu. 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 panel.
To cut out a portion of a tracing image
1 Select the tracing image.
2 In the Tracing Image panel, click the Crop tool
. Then select a rectangular portion in the Layout Editor.
Note: You can cancel the cut out process by clicking the Crop tool again.
3 Double-click the selection in the Layout Editor, or click Cut Out in the Tracing Image panel.
4 In the Save For Web dialog box, make your desired optimization settings, and click Save.
ADOBE GOLIVE 9 214
User Guide
5 Specify a destination for the file and click Save. The cutout becomes a Smart Object in the document window.
Adding multimedia to web pages
Adding multimedia
GoLive supports a variety of plug-ins that let browsers play back multimedia over the web. By using these plug-ins,
you can add video and audio clips to your pages. You can add multimedia using the Objects panel or the File > Place
method. (Icons shown represent options in the Objects panel.)
GoLive offers the generic Plug-in object
that you configure, as well as the predefined SWF object
, the
QuickTime object
, the Real object , the SVG object
, and the Windows Media object . You can also
associate other file types with plug-ins.
To add multimedia objects to pages
1 From the Basic set
of the Object panel, drag the desired plug-in object to the document window. Or, choose
File > Place and select the media file you want to place in the document.
2 In the Basic tab of the Plug-in Inspector, specify a file for your plug-in.
To set basic options for multimedia objects
For the SWF, QuickTime, Real, 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.
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
, select Mime, and choose the MIME type from the pop-up menu.
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 menu:
Default Positions 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.)
Top Positions the icon at the top.
Middle Positions the icon in the upper middle.
Bottom Positions the icon at the bottom.
Left Positions the icon in the upper left corner.
Right Positions the icon in the upper right corner.
Texttop Positions the icon at the top of the text.
Absmiddle Positions the icon at the absolute middle.
Baseline Positions the icon at the baseline.
Absbottom Positions the icon at the absolute bottom.
ADOBE GOLIVE 9 215
User Guide
7 From the HTML menu, choose the tags that browsers will use to detect the required plug-in.
Note: If you choose the <object> or <object> <embed> tags for a generic Plug-in object, you must also specify a plug-in
class in the Class text box.
To set advanced options for multimedia objects
1 In the Plug-In Inspector, click the More tab.
2 Type a unique name for the multimedia element in the Name text box.
3 Select Page, and specify a file for the link destination for the Plug-in installation instructions. For a SWF or
QuickTime plug-in, a destination link appears by default.
4 Select Code for Real and SVG plug-ins, and specify a file for the link destination for the code base. The Adobe
Flash Player® Flash™ code base, for example, specifies the location of the Adobe Flash Player ActiveX control that the
browser can download if the control is not installed. The code base is provided by default when you use the
predefined SWF or QuickTime plug-in.
5 From the panel menu, select an option to determine whether the plug-in appears in the Foreground or
Background panel. Select Default to place the panel in the background.
6 Choose the Margin and Padding button in the Control panel and enter any padding values you want to use to set
padding around the multimedia element to separate it from surrounding text.
7 Select Is Hidden to hide the plug-in on the page. You might want to hide the plug-in if you want to play an audio
clip as soon as the page is loaded (without any controls being displayed on the page).
To set options for unsupported multimedia objects
The Attribs tab of the Plug-in Inspector lets you add, edit, and delete plug-in attributes manually. You can use this
tab with the generic Plug-in object to set options for multimedia formats that GoLive doesn’t support directly.
1 In the Attribs tab of the Plug-in Inspector, click New
to add a new attribute. In the left text box below the list
box, type an attribute name. The attribute name appears in the Attribute column of the list box.
2 In the right text box, enter an attribute value. The attribute value appears in the Value column of the list box.
3 To delete an attribute, select the desired entry from the list box, and click Delete
.
Multimedia plug-in options
SWF plug-in options
When you select a SWF object, the SWF tab of the Plug-in Inspector offers the following options:
Autoplay Plays the SWF movie as soon as the page is loaded.
Loop Plays the movie in an endless loop.
Quality Balances visual appearance versus playback speed. From the pop-up menu, choose one of the following:
• Best Provides an optimal balance between appearance and playback speed.
• Default Uses the player settings.
• High Gives priority to appearance over playback speed.
ADOBE GOLIVE 9 216
User Guide
• Auto High Emphasizes appearance but improves speed when the frame rate drops below the specified frame rate.
• Auto Low Emphasizes speed but improves appearance when the Adobe Flash Player determines that the
processor can handle it.
• Low Gives priority to playback speed over appearance.
Scale Specifies how the movie is placed within the browser window if the Width and Height settings specified in the
Basic tab are different from those of the movie clip. From the pop-up menu, choose one of the following:
• Default Makes the entire movie visible in the specified area while maintaining the original aspect ratio of the
movie. No distortion occurs. Transparent or matte-colored borders may appear on two sides of the movie.
• No Border Scales the movie to fill the specified area while maintaining the original aspect ratio of the movie.
Portions of the movie may be cropped. No distortion occurs.
• Exact Fit Makes the entire movie visible in the specified area. No attempt is made to preserve the original aspect
ratio. Distortion may occur.
QuickTime plug-in options
When you select a QuickTime object, the QuickTime tab of the Plug-in Inspector provides options on Standard,
HREF, and More tabs. On any of these tabs, you can click Open Movie to see a preview in an external QuickTime
viewer.
Important: Before uploading QuickTime movies, you must flatten them in a web-compatible format.
Standard options
Show Controller Shows playback controls.
BGColor Displays a background color you specify in the color field.
Cache Enables caching through the browser when the movie is played back.
Volume Sets the audio volume. Enter a value from 0 (mute) to 100 (full volume).
Autoplay Plays the movie automatically when the page opens.
Scale Resizes the movie. Enter one of the following values:
• Tofit Scales the movie to the size of the embedded player window.
• Aspect Scales the movie to the size of the embedded window but maintains aspect ratio.
• Numerical Value Scales the movie by a specific percentage. For example, .5 scales the movie to 50%, and 1.5 scales
the movie to 150%.
Loop Plays the movie in an endless loop.
Palindrome Plays the movie in a loop from beginning to end and then from end to beginning.
Play Every Frame Plays all frames of the movie even if it’s necessary to play at a slower rate to do so. This attribute is
useful to play simple animations. (Selecting this attribute will turn off all audio tracks in the movie.)
Don’t Flatten Maintains references to movie assets, rather than flattening them into the movie file.
Auto HREF Immediately loads any URL specified in the HREF parameter, without waiting for a mouse click.
Enable JavaScript Enables JavaScript functions to control movies.
Kiosk Mode Disables Save commands, including drag and drop functionality.
ADOBE GOLIVE 9 217
User Guide
HREF options
Link Provides a link to another page or movie when the movie is clicked.
Target Specifies the HTML frame targeted by the Link attribute. If a target isn’t specified, links open in the same
frame as the current movie.
Save Embed Tags Applies the current plug-in settings to another movie started via the Link, Hotspots, or QTNext
options.
Allow Embed Tags Overrides Enables plug-in settings to be overridden by user preferences or settings embedded in
subsequently loaded movies.
More options
From the Tags menu, choose any of the following, and then set related options:
Hotspots Links a hotspot to the specified URL.
Identifiers Identifies the movie name and ID for use in wired actions.
QTNext Specifies the URL of a movie that will play after the current movie.
QTSrc Forces browsers to use the QuickTime plug-in for the specified file, regardless of MIME type. Choose the Link
option and then specify the URL. Specify data rate in the Speed text box, and choose one of the following caching
options from the Use Browser menu:
• Default Uses the browser’s caching setting.
• True Prevents browser caching.
• False Allows browser caching.
URL Substitute Replaces every instance of the specified string with the specified URL Substitute.
Time Specifies start and end frames for the movie.
XML List Specifies an XML list for controlling movie playback.
See also
“About the Color panel, Swatches panel, and the Color Picker” on page 92
Real plug-in options
When you select a Real object, the Real tab of the Plug-in Inspector offers the following options:
Autostart Plays the audio or video as soon as the viewer opens the page.
No Labels Suppresses display of information such as title, author, and copyright.
Controls Determines what controls are displayed. Choose from the following options in the Controls pop-up menu:
• Default Uses the payer settings.
• Image Window Provides a context menu that allows the viewer to control playback in the playback area using
controls such as Play and Stop. (Image Window is available only for videos and animations.)
• Control Panel Displays the default RealPlayer control panel, which contains Play, Pause, Stop, Fast Forward, and
Rewind buttons, Position and Volume sliders, and a Mute button that appears when the speaker is selected.
• Play Button Displays a Play/Pause button.
ADOBE GOLIVE 9 218
User Guide
• Play Only Button Displays a Play button.
• Additional Play Buttons Display additional play buttons, such as Pause button, Stop button, Fast Forward button,
and Rewind button.
• Mute Control Displays a Mute button.
• Volume Slider Displays a Volume Slider.
• Mute Volume Displays a Mute button and a volume slider.
• Position Slider Displays a clip position slider.
• Clip Information Displays an information field for information about the Real clip.
• Home Control Displays the Real logo.
• Info Volume Displays presentation information as well as a volume slider and a Mute button.
• Info Panel Displays the presentation information panel.
• Status Bar Displays informational messages, the network congestion LED, and the position field, which indicates
the current place in the presentation timeline along with total clip length.
• Status Field Displays the message text area of the status bar. If no status field or status bar is embedded, error
messages display in the browser’s status bar.
• Position Field Displays the clip’s current place in the presentation timeline and the total clip length.
Note: You must have one Real object for each control. For example, Play and Pause buttons require two separate Real
objects.
Console Groups multiple controls using an option you choose from the Console menu. For example, you can place
different controls, such as a Play button and a Volume slider, in different HTML table cells. You can then tie these
controls together by assigning the same Console name to each of them. You can assign a user-specified name in the
Console text box, or you can choose a predefined name from the Console menu:
• Default Assigns no Console name.
• _master Links the control to all other controls or groups of controls.
• _unique Lets you avoid linking the control to any other control.
Controls that have no Console attribute assigned will be grouped together.
Windows Media plug-in options
When you select a Windows Media object, the Windows Media tab of the Plug-in Inspector provides options on
Basic, URL, Play Rate, and SAMI tabs.
Basic options
Autoplay Starts the media file automatically when the page opens.
Enable Context Menu Enables the context menu in the Windows Media Player window.
Enable Controls Reveals player controls during full-screen playback.
Full Screen Plays video in full-screen mode.
Invoke URLs Starts the default web browser automatically in response to URL events; no mouse click is required.
Mute Audio Mutes audio.
ADOBE GOLIVE 9 219
User Guide
Stretch To Fit Enlarges video to fit the dimensions of the video window.
Windowless Video Displays video directly in the browser window, rather than in the Windows Media Player
window. (Requires Internet Explorer for Windows XP or later.)
URL options
Base URL Converts relative links into absolute links. This option requires a Base element in the Head section of the
page. (See “To add elements or scripts to the head section” on page 81.)
Default Frame Specifies the default target frame for URL events. (See “About target frames for linked pages” on
page 135.)
Caption ID Identifies the HTML tag used to display captions. (Requires a tag that supports the innerHTML
attribute.)
Current Position Indicates the start position of the media file in seconds from the beginning.
Current Marker Starts playback from the specified marker.
Play Count Specifies how many times the media file will play.
UI Mode Specifies which interface elements appear. Choose one of the following from the pop-up menu:
• Invisible Hides all controls and media files.
• None Reveals only media files.
• Mini Reveals media files, the status bar, and play, pause, stop, mute, and volume controls.
• Full Screen Reveals all media files and controls.
Play Rate options
Play Rate Determines playback speed. Default value is 1; values such as .5 and 2 equal half-speed and double-speed,
respectively. (WMV and ASF files also support negative values, which cause reverse playback.)
Balance Determines audio balance between left and right speakers. Possible values range from -100 (full left) to 100
(full right).
Volume Determines audio volume. Possible values range from 0-100.
SAMI options
File Specifies a Synchronized Accessible Media Interchange (SAMI) file containing closed captions.
Language Specifies which language to access from a SAMI file.
Style Specifies which style definition to access from a SAMI file.
Java applets and W3C object controls
Java applets and W3C object controls
GoLive lets you insert Java applets on a layout grid or in the flow of HTML code, so you can add animation or other
advanced features to your page.
ADOBE GOLIVE 9 220
User Guide
GoLive also lets you insert W3C object controls, which web browsers can download and execute. In Windows, you
can set up these controls with installed ActiveX objects. Mac OS doesn’t support ActiveX, but you can specify object
files.
To set up Java applets
When you set up Java applets, the name of the .class file containing the applet appears in the Code text box of the
Java Applet Inspector. The name of the applet appears in the Java Applet icon in the document window.
1 Drag the Java Applet icon
icon in the Objects panel.
from the Basic tab
in the Objects panel to the Layout Editor, or double-click the
2 In the Basic tab of the Java Applet Inspector, specify an applet file in the Base text box.
Note: With some Java applet generator programs, the extension is not added correctly to the CODE attribute. These
applets work in the browser, but they won’t display in GoLive.
3 Name the applet by typing a unique name in the Name text box. The name cannot be used by any other object on
your page.
4 Resize the applet by dragging the resize handles, or type Width and Height values in the Java Applet Inspector.
(The values can be pixels or percentages.)
5 To align an applet with surrounding text when you are not using a layout grid, use the Hspace and Vspace text
boxes and the Align pop-up menu.
To set up W3C object controls
1 Drag the Object icon
icon in the Objects panel.
from the Basic tab
in the Objects panel to the Layout Editor, or double-click the
2 In the Object Inspector, do one of the following:
• (Windows) Click Select to open a list of installed ActiveX objects. Select an object to insert, and click OK.
• (Mac OS) Specify an object in the Base box.
To view W3C object contents while resizing, Ctrl-drag the lower right-hand corner handle.
To edit properties for Java applets and W3C object controls
1 In the Params tab of the Java Applet Inspector or the Properties tab of the Object Inspector, do either of the
following:
• To add a property, click the Create New Item button
, and type a name and value.
• To delete a property, select it, and click the Remove button
.
Note: You can’t delete properties of Windows ActiveX controls.
2 (Windows only) To access a built-in dialog box for an ActiveX control, double-click the control in the Layout
Editor, or click Properties in the Basic tab of the Object Inspector.
ADOBE GOLIVE 9 221
User Guide
To add alternative text or HTML objects for Java applets
GoLive lets you enter alternative text in the Java Applet icon
element is understood but applet loading is turned off.
. The browser displays alternative text if the applet
1 Select the Java Applet icon and click the Basic tab of the Java Applet Inspector.
2 In the Alt Text box, type the text you would like to display in place of the Java applet.
222
Chapter 11: Working with Smart Objects
Understanding Smart Objects
Advantages of Smart Objects
Smart Objects eliminate the need to preoptimize images outside of GoLive. With Smart Objects, you can import
source files in formats such as native Photoshop and Illustrator, and then use GoLive’s Save For Web feature to create
web-optimized images.
Smart Objects let you automate many common image-related tasks. For example, when you resize a Smart Object in
the Layout Editor, GoLive automatically reoptimizes the image, keeping its appearance clear and sharp. Likewise,
when you edit the source file of a Smart Object in another application, GoLive can automatically update the object’s
appearance on your web pages. Smart Objects also streamline the process of adding sliced images to a page: GoLive
automatically creates a table with cells for each slice.
The versatility of Smart Objects extends far beyond automated image optimization. They also provide features that
let you convert HTML text to an image, create multiple image variations from a single image file, and import text
and graphics from Adobe InDesign.
See also
“Choosing between pre-optimized images and Smart Objects” on page 206
About Smart Object source and target files
Smart Objects offer an efficient and powerful way to add images to web pages. After you specify a source file in a
format such as Photoshop, Illustrator, PDF, or EPS, GoLive creates a target file in a web-optimized format and
maintains a link to the source file.
When you move, resize, or reoptimize a Smart Object, you’re really manipulating the target file; the source file does
not change. This process lets you generate multiple image variations from a single source file throughout your
website.
When you double-click a Smart Object in the Layout Editor, the source file opens in its original application. If you
make changes to the source image, GoLive can automatically update the target file.
Storing Smart Object files
When working with Smart Objects, store source and target files in two different places in the site window. In the
Assets section of the site window, create separate folders for the source and target files; you can set default folders for
source image files in the Site Settings if you wish. From those folder locations, GoLive can properly update source
files and upload target files.
You can store target files anywhere in the site’s folders, but many web designers use the default web_images folder to
manage numerous image files more easily. You can set or change default folders for target image files in the Site
Settings if you wish.
ADOBE GOLIVE 9 223
User Guide
A
B
A Smart Object in Layout Editor referencing image file in site window B Optimizing Smart Object image in GoLive for web viewing C Saving
optimized image to site (Layout Editor maintains link between source and target files)
See also
“To add Smart Objects to pages” on page 223
Adding and copying Smart Objects
Adding Smart Objects
To optimize images for standard web graphics, add Smart Photoshop
, Smart Illustrator
, Smart PDF
, or
Smart Generic
objects. The Smart Generic object supports source files in the following formats: BMP, PCX,
Pixar, TARGA, PDF, EPS, JPEG, JPEG 2000, and PNG.
To optimize images for a browser’s Favorites or Bookmarks menu, use the Smart Favorite icon
elements or scripts to the head section” on page 81.
. See “To add
To add Smart Objects to pages
1 From the Smart set
in the Objects panel, drag a Smart Photoshop
, Smart Illustrator
, Smart
Generic
, or Smart PDF
object to the Layout Editor. Or, choose File > Place and select a Photoshop file that
is web-safe.
2 In the Smart Image Inspector, specify a file for the image.
You can also add a Smart Object by dragging a Smart Object-compatible file to the Layout Editor.
3 Do one of the following:
• For Smart Photoshop, Illustrator, or Generic objects, set optimization options in the Save For Web dialog box.
• For Smart PDF objects, click the Rotate Left button
or the Rotate Right button
if needed. Then navigate
to the desired page and click its thumbnail. (See “To navigate to a specific page or set of pages” on page 246.)
ADOBE GOLIVE 9 224
User Guide
See also
“To optimize and save web graphics” on page 229
“Storing Smart Object files” on page 222
“Adding sliced Photoshop images” on page 240
To add Smart Objects to CSS styles
If you use images in CSS backgrounds and lists, automate your workflow by optimizing Smart Objects in the site
window; then reference the target file in the CSS editor. If you revise the source file in the future, GoLive can
automatically reoptimize the target file and update styles that contain it.
1 In the site window, open the folder where the source files are stored and right-click the file.
2 Choose Smart Object > Create Smart Object.
3 Set the optimization options and click Save.
4 Save the file in the folder for the target files. You can now reference this file from the CSS editor.
See also
“To optimize and save web graphics” on page 229
“Storing Smart Object files” on page 222
“To update site files that are dependent on site extras” on page 105
To copy Smart Objects
When you copy a Smart Object to a different location, the copy uses the same source and target files as the original.
If you want to independently resize and optimize a copy, you can later create a unique target file.
1 Copy a Smart Object to a different location.
2 If desired, create a unique target file for the copy: In the Basic tab of the Image Inspector, click the folder icon
to the right of the Target text box. Or, right-click the image and choose Create New Target File in the context menu.
Note: If a copied Smart Object shares a target file, GoLive displays a warning icon
in the upper-left corner of the
image. This warning doesn’t indicate a problem with the site; it simply informs you that resizing or reoptimizing the copy
will change all related Smart Objects. To locate related copies throughout a site, see “To find the source of Smart Object
warnings” on page 113.
See also
“About Smart Object source and target files” on page 222
“Storing Smart Object files” on page 222
ADOBE GOLIVE 9 225
User Guide
Updating and editing Smart Objects
To change the matte color of Smart Objects
To create the illusion of transparency on a page, you can change the matte color of a Smart Object to match the
background color of the page. (In the target file, the matte color replaces transparency found in the source file.)
1 In the Layout Editor, select the Smart Object.
2 In the Basic tab of the Smart Image Inspector, specify a color in the Matte color box.
3 Click Apply.
To configure GoLive to open source files in a separate application
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 In the list on the left, select General.
3 Select Launch Other Applications To Edit Media Files.
See also
“About Smart Object source and target files” on page 222
To edit a Smart Object source file
1 Double-click the Smart Object in the Layout Editor or the source file in the site window.
2 In the native application, edit and resave the file.
Note: In Windows, an SVG file opens in the default browser. To change this behavior, use the Web Settings dialog box to
map a different application to SVG files.
See also
“To set General preferences” on page 21
“About Smart Object source and target files” on page 222
To update target files for an edited source file
❖ Do either of the following:
• Open any pages that contain the target files.
• Use the Update Files Dependent On command. For more information, see “To update site files that are dependent
on site extras” on page 105.
See also
“About Smart Object source and target files” on page 222
To reoptimize Smart Object target files
1 Right-click the Smart Object in the site window.
2 From the context menu, choose Smart Objects > Settings.
ADOBE GOLIVE 9 226
User Guide
3 Specify new settings in the Save For Web dialog box and click Save to keep your changes.
See also
“About Smart Object source and target files” on page 222
To find Smart Object target files
1 In the Assets area of the site window, select the source file.
2 In the In & Out Links panel, note related target files.
See also
“Using the In & Out Links panel to view links” on page 110
To convert Smart Objects to regular image objects
You can convert a Smart Object to a regular image object to unlink the source and target files. When these files are
unlinked, changes to the source do not affect the target.
1 Right-click (Windows) or Control-click (Mac OS) a Smart Object.
2 Choose Convert To Regular Image.
See also
“Advantages of Smart Objects” on page 222
To set preferences for Smart Objects
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), expand Images, and select Images.
2 To convert to Web optimized images, do any of the following:
• Choose the web format that you want to use by default when placing images.
• Choose the default setting that you want to use for drag-and-drop or cut-and-paste images. You can elect to use
the same default format used when placing images or you can elect for a default conversion to a GIF or JPEG based
on the transparency of the source file.
3 To set smart object behavior, do any if the following:
• To create smart objects based on large Web-safe images, choose the pixel and file size options and then enter the
required pixel width or height and the file size at which you want to create smart objects.
Note: The option above is particularly helpful for large images imported from digital cameras.
• If you want GoLive to prompt you before automatically converting large web-safe images to smart objects, choose
Ask Before Converting.
ADOBE GOLIVE 9 227
User Guide
Resizing and cropping Smart Objects
Resizing Smart Objects
To resize a Smart Object, you can simply drag one of its resizing handles. When you release the mouse, GoLive regenerates the target file using the last-applied optimization settings.
Resizing sliced images is also very easy with Smart Objects. When you resize a sliced Smart Object, GoLive automatically generates a new table and reoptimizes each slice.
Resizing a Smart Object
To resize a Smart Object
❖ In the Layout Editor, select the object, and then do one of the following:
• To change width or height, drag a side handle.
• To change both dimensions, drag a corner handle. (To resize proportionately, hold down Shift while dragging or
click the Constrain Proportions button
in the Smart Image Inspector.)
To return a resized Smart Object to its original size, in the Basic tab of the Smart Image Inspector, click the Set To
Original Size button .
To fit Smart Objects in smaller table cells and template regions
❖ In the Basic tab of the Smart Image Inspector, choose one of the following from the Scale menu:
Fit Content to Frame Disproportionately scales the image to the cell or region borders.
Fit Content Proportionally Proportionately crops the image at cell or region borders.
Fill Frame Proportionally Proportionately scales the image to the largest size that fits the cell or region.
To crop a Smart Object
With Smart Objects, you can create multiple cropped versions of a single source file—without leaving GoLive.
A
B
C
G
D
E
F
H
I
J
Cropping options in the Control panel
A. Horizontal position B. Vertical position C. Width D. Height E. Open Alignment panel F. Crop Transparent Pixels options G. Scaling
menu H. Use Original Image I. Cancel J. Crop
1 In the Layout Editor, select the object.
2 In the Control panel or in the Smart Image Inspector, click the Crop button
.
ADOBE GOLIVE 9 228
User Guide
3 In the Layout Editor, drag across the object to define crop boundaries.
4 To refine the position of crop boundaries, do any of the following:
• In the Layout Editor, place the cursor inside the crop boundaries, and drag with the Hand tool.
• In the Control panel, enter pixel coordinates in the Horizontal Position or Vertical Position text boxes.
• In the Control panel, click the Open Alignment panel button
, and then click one or more Align To Parent
options. (See “To align objects in relation to their container” on page 140.)
5 To refine the size of crop boundaries, do one of the following:
• In the Layout Editor, place the cursor over a corner or side handle, and drag.
• In the Control panel, enter pixel dimensions in the Width and Height text boxes.
6 To place crop boundaries at opaque image edges, click one of the following buttons in the Control panel:
• Crop Left Transparent Pixels
.
• Crop Right Transparent Pixels
.
• Crop Top Transparent Pixels
.
• Crop Bottom Transparent Pixels
• Crop All Transparent Pixels
.
.
7 From the scaling menu in the Control panel, choose one of the following options:
Keep Scaling Maintains the current scale of the target image relative to the source image.
Keep Object Size Resamples the cropped area so it fills the current image dimensions.
Scale To Source File Scales the cropped area to its dimensions in the original source file.
Note: If you use the Keep Size option, the image may become blurry.
8 To apply the crop, either click the Crop image button
Return (Mac OS).
in the Control panel, or press Enter (Windows) or
To cancel crop boundaries for a Smart Object
❖ Click the Cancel button
in the Control panel, or press the Esc key.
To restore a cropped Smart Object to its original size
1 In the Layout Editor, select the object.
2 In the Smart Image Inspector or in the Control panel, click the Crop button
3 In the Control panel, click the Use Original Image button
.
.
ADOBE GOLIVE 9 229
User Guide
Optimizing and saving web graphics
To optimize and save web graphics
Optimization is the process of compressing and setting display options for web graphics. You use the Save For Web
dialog box to optimize, preview, and save web graphics. To open the Save For Web dialog, select the smart object and
then click Settings in the Inspector.
1 At the top of the Save For Web dialog box, click a tab to select a display option: Original, Optimized, 2-Up, or 4Up. If you select 4-Up, click the preview you want to optimize.
2 If your artwork contains multiple slices, select one or more slices you want to optimize.
3 Select a preset optimization setting from the Preset menu, or set individual optimization options. The available
options change depending on the file format you select. (See “Comparing web graphics formats” on page 232.)
If you’re working in 4-Up mode, choose Repopulate Views from the Optimize menu to have GoLive automatically
generate lower-quality versions of the image after you change the optimization settings.
4 Fine-tune the optimization settings until you are satisfied with the balance of image quality and file size. If your
artwork contains multiple slices, be sure to optimize all the slices.
To reset optimization settings to the last saved version, press Alt (Windows) or Option (Mac OS), and click Reset.
5 Click Save.
6 Enter a file name, select a location, and then click Save.
Note: When you optimize a PSD file with slices or rollovers, GoLive saves the containing .data folder. To avoid duplicating files in your site, do not move saved images out of this target folder; GoLive will replace its contents when you next
update the related Smart Object.
See also
“Using slices” on page 231
To estimate the download time for a web graphic
1 In the Save For Web dialog box, select your optimization settings.
2 Select an Internet access speed from the Preview menu
above the optimized image.
The estimated download time is displayed under the optimized image. If the download time seems too long, try
different optimization settings or change the image size in the Save For Web dialog box.
See also
“Comparing web graphics formats” on page 232
To compress a web graphic to a specific file size
1 Click a tab at the top of the Save For Web dialog box to select a display option: Optimized, 2-Up, or 4-Up. If you
select 4-Up, select the preview you want to optimize.
2 (Optional) Select the slices you want to optimize and the file format you want to use.
3 Select Optimize To File Size from the Optimize menu
(to the right of the Settings menu).
ADOBE GOLIVE 9 230
User Guide
4 Enter the desired file size.
5 Select a Start With option:
Current Settings Uses the current file format.
Auto Select GIF/JPEG GoLive automatically selects the format.
6 Select a Use option to specify how you want GoLive to apply the file size to slices in your artwork, and click OK.
See also
“To optimize and save web graphics” on page 229
“Comparing web graphics formats” on page 232
To resize web graphics
You can use the Image Size panel in the Save For Web dialog box to change the pixel dimensions of web graphics.
1 Click the Image Size tab in the Save For Web dialog box.
2 Enter new pixel dimensions or specify a percentage by which to resize the image.
3 Set any of the following options, and click Apply:
Constrain Proportions Maintains the current proportions of pixel width to pixel height.
Quality Choose from the following resampling methods:
• Nearest Neighbor Resamples quickly but imprecisely. This method preserves hard edges and produces a smaller
file size.
• Bilinear Resamples moderately quickly and precisely.
• Bicubic Resamples slowly but precisely. This method results in the smoothest tonal gradations.
• Bicubic Smoother Greatly enlarges images.
• Bicubic Sharper Greatly reduces images.
See also
“To optimize and save web graphics” on page 229
“Comparing web graphics formats” on page 232
To preview optimized images in a web browser
You can preview an optimized image in any web browser installed on your system. The browser preview displays the
image with a caption listing the image’s file type, pixel dimensions, file size, compression specifications, and other
HTML information.
• To preview an image in your default web browser, click the browser icon at the bottom of the Save For Web dialog box.
• To select a different browser, select Other from the browser pop-up menu (next to the browser icon).
• To add, edit, or remove a browser in the browser pop-up menu, select Edit List from the browser pop-up menu.
ADOBE GOLIVE 9 231
User Guide
See also
“To optimize and save web graphics” on page 229
“Comparing web graphics formats” on page 232
To create or delete optimization presets
You can save optimization settings as a preset to apply the settings to other images. Presets appear in the Settings
pop-up menu of the Save For Web dialog box.
• To create a new preset, select Save Settings from the Optimize menu
(to the right of the Settings menu).
Name the settings, and select a location where they will be saved. By default, named settings are saved in the
Settings/SaveForWeb/Optimize folder inside the Adobe GoLive application folder.
• To delete a preset, select the preset from Settings menu, and select Delete Settings from the Optimize menu.
See also
“To optimize and save web graphics” on page 229
“Comparing web graphics formats” on page 232
Working with slices during optimization
Using slices
If your Photoshop PSD or Illustrator SVG file contains slices, you can specify unique optimization settings for each
slice. You can also share optimization settings between slices by linking slices together. Linked slices in GIF and
PNG-8 format share a color panel and dither pattern to prevent the appearance of seams between the slices.
For each slice, you can also add a URL link, Alt text, a status message, and a background color.
To show or hide slices in the Save For Web dialog box
❖ Click the Toggle Slice Visibility button
.
To select slices in the Save For Web dialog box
1 Select the Slice Select tool
.
2 Click a slice to select it. Shift-click or Shift-drag to select multiple slices.
To set options for a user slice
1 Double-click the slice with the Slice Select tool
.
2 In the Slice Options dialog box, do any of the following, and click OK:
• Type the slice name in the Name text box. By default, GoLive uses the slice name as the file name when you save
the web page.
• Specify a URL to make the slice area a hotspot in your web page. You can type a relative URL or a full URL
(including http://), or choose a previously created URL from the pop-up menu.
ADOBE GOLIVE 9 232
User Guide
• If you specified a URL, specify the frame you want the link to target in the Target text box. You can type the name
of a target frame, or choose a standard option from the pop-up menu.
• Type text in the Message text box that will appear in the browser’s status area when the mouse is positioned over
an image.
• Type text in the Alt text box that will appear in place of image data in nongraphical browsers (and will be used by
voice-recognition software).
• Choose a color that will appear in the slice area of your web page from the Background pop-up menu.
Web graphics formats and options
Comparing web graphics formats
Web graphics formats fall into two categories: bitmap and vector. The bitmap formats—GIF, JPEG, PNG, and
WBMP—describe artwork as a series of colored dots called pixels. Each pixel in a bitmap image has a fixed size and
is therefore resolution-dependent, meaning that dimensions of the image depend on the resolution of the monitor on
which it is viewed. The vector formats—SVG and SWF—describe artwork mathematically, as a set of geometric
objects. Because of this, vector graphics are resolution-independent and can be scaled up or down without losing any
image quality.
GIF and PNG-8
GIF is the standard format for compressing images with flat color and crisp detail, such as line art, logos, or illustrations with type. Like the GIF format, the PNG-8 format efficiently compresses solid areas of color while preserving
sharp detail; however, not all web browsers can display PNG-8 files. See “Optimization options for GIF and PNG-8
formats” on page 233.
Note: When optimizing images for i-mode cellphones, use GIF format. For more information, see “To add images to imode pages” on page 301.
PNG-8 and GIF files support 8-bit color, so they can display up to 256 colors. The process of determining which
colors to use is called indexing, so images in GIF and PNG-8 formats are sometimes called indexed color images. To
convert an image to indexed color, GoLive builds a color lookup table, which stores and indexes the colors in the
image. If a color in the original image does not appear in the color lookup table, the application either chooses the
closest color in the table or simulates the color using a combination of available colors. See “To customize the color
table for GIF and PNG-8 images” on page 235.
JPEG
JPEG is the standard format for compressing continuous-tone images such as photographs. Optimizing an image as
a JPEG format relies on lossy compression, which selectively discards data. See “Optimization options for JPEG
format” on page 236.
JPEG2000
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, JPEG2000 files require the generic Plug-in object. (See “Adding multimedia” on page 214.)
Note: To display JPEG2000 files, most browsers require an additional plug-in.
ADOBE GOLIVE 9 233
User Guide
PNG-24
PNG-24 is suitable for compressing continuous-tone images; however, it produces much larger files than JPEG
format. The advantage of PNG-24 is that it can preserve up to 256 levels of transparency in an image. See “Optimization options for PNG-24 format” on page 236.
Note: Versions of Internet Explorer for Windows that are earlier than 7 don’t support transparency in PNG-24 files.
SWF
The Adobe Flash Player® 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 any
resolution and is ideal for the creation of animation frames.
SVG
SVG is a vector format that describes images as shapes, paths, text, and filter effects. The resulting files are compact
and provide high-quality graphics on the web, in print, and even on resource-constrained, handheld devices.
WBMP
WBMP format is the standard format for optimizing images for mobile devices, such as cell phones. WBMP supports
1-bit color, which means that WBMP images contain only black and white pixels. See “Optimization options for
WBMP format” on page 237.
See also
“To optimize and save web graphics” on page 229
Optimization options for GIF and PNG-8 formats
A
B
C
Optimization settings for GIF
A. File format menu B. Color Reduction Algorithm menu C. Dithering Algorithm menu
Lossy (GIF only) Reduces file size by selectively discarding data. A higher Lossy setting results in more data being
discarded. You can often apply a Lossy value of 5–10, and sometimes up to 50, without degrading the image. File size
can often be reduced 5%–40% using the Lossy option.
Note: You cannot use the Lossy option with the Interlaced option or with Noise or Pattern Dither algorithms.
Color Reduction Method and Colors Specifies a method for generating the color lookup table and the number of
colors you want in it. You can select one of the following color reduction methods:
• Perceptual Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.
• Selective Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the
preservation of web colors. This color table usually produces images with the greatest color integrity. Selective is the
default option.
ADOBE GOLIVE 9 234
User Guide
• Adaptive Creates a custom color table by sampling colors from the spectrum appearing most commonly in the
image. For example, an image with only the colors green and blue produces a color table made primarily of greens
and blues. Most images concentrate colors in particular areas of the spectrum.
• Restrictive (Web) Uses the standard 216-color color table common to the Windows and Mac OS 8-bit (256-color)
panels. This option ensures that no browser dither is applied to colors when the image is displayed using 8-bit color.
Using the web panel can create larger files and is recommended only for audiences using older 256-color monitors.
• Custom Preserves the current perceptual, selective, or adaptive color table as a fixed panel that does not update
with changes to the image.
Use the Color Table tab in the Save For Web dialog box to customize the color lookup table.
Dithering Method and Dither Determines the method and amount of application dithering. Dithering refers to the
method of simulating colors not available in the color display system of your computer. A higher dithering
percentage creates the appearance of more colors and more detail in an image, but can also increase the file size. For
optimal compression, use the lowest percentage of dither that provides the color detail you require. Images with
primarily solid colors may work well with no dither. Images with continuous-tone color (especially color gradients)
may require dithering to prevent color banding.
You can select one of the following dithering methods:
• Diffusion Applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are
diffused across adjacent pixels.
• Pattern Applies a halftone-like square pattern to simulate any colors not in the color table.
• Noise Applies a random pattern similar to the Diffusion dither method, but without diffusing the pattern across
adjacent pixels. No seams appear with the Noise dither method.
Transparency and Matte Determines how transparent pixels in the image are optimized.
• To make fully transparent pixels transparent and blend partially transparent pixels with a color, select Transparency and select a matte color.
• To make all pixels with greater than 50% transparency fully transparent and all pixels with 50% or less transparency fully opaque, select Transparency and select None from the Matte menu.
• To fill fully transparent pixels with a color and blend partially transparent pixels with the same color, select a matte
color and deselect Transparency.
• To select a matte color, click the Matte color swatch and select a color in the Color Picker. Alternatively, select an
option from the Matte menu: Eyedropper (to use the color in the eyedropper sample box), White, Black, or Other
(to use the Color Picker).
• Interlace Creates an image that displays as a low-resolution version in a browser while the full image file is
downloading. Interlacing can make downloading time seem shorter and can assure viewers that downloading is in
progress. However, interlacing also increases file size.
• Web Snap Specifies a tolerance level for shifting colors to the closest web panel equivalents (and prevent the
colors from dithering in a browser). A higher value shifts more colors.
See also
“To optimize and save web graphics” on page 229
“Comparing web graphics formats” on page 232
ADOBE GOLIVE 9 235
User Guide
To customize the color table for GIF and PNG-8 images
You use the Color Table tab in the Save For Web dialog box to customize the colors in optimized GIF and PNG-8
images. With a maximum of 256 colors, you can add and delete colors in the color table, shift selected colors to websafe colors, and lock selected colors to prevent them from being dropped from the panel.
• To add new colors to the color table, select the Eyedropper tool, and click a color in the image. (Alternatively, click
the color selection box, and use the Color Picker to select a color.) Then, click the New Color button
in the
Color Table tab. A small white square with a dark center appears in the lower right corner of the new color,
indicating that the color is locked.
Note: If the color table already contains the maximum number of colors (256, or 255 with transparency), you cannot
add a new color.
• To change a color in the color table, double-click it. A small plus sign appears in the center of each edited color.
• To delete a color from the color table, select the color and click the Delete button. When you delete a color, areas
of the optimized image that previously included that color are re-rendered using the closest color remaining in the
panel. Deleting a color changes the color panel type to Custom to prevent the color from being added back to the
panel if you reoptimize the image.
• To shift a color to a web-safe color, select the color and click the Web Shift button
. A small white diamond
appears in the center of selected colors that have been web-shifted (and in all web-safe colors). To restore a shifted
color to its original value, click the Web Shift button again. Alternatively, select Shift/Unshift Selected Colors
To/From Web panel or Unshift All Colors from the Color Table tab menu. To specify a tolerance for shifting colors,
specify a value for Web Snap in the Settings section of the Save For Web dialog box. A higher value shifts more
colors.
• To lock a color so that it won’t be dropped from the color table if you reduce the number, select the color and click the
Lock button . A white square with a red center appears in the lower right corner of each locked color. To unlock a
color, click the Lock button again. To unlock all colors, select Unlock All Colors from the Color Table tab menu.
• To select multiple colors in the color table, press Shift and click another color. All colors in the rows between the
first and second selected colors are selected. To select a nonadjacent group of colors, press Ctrl (Windows) or
Command (Mac OS) and click each color that you want to select. The Color Table tab menu also provides
commands for selecting colors.
• To sort the colors in the color table, select a sorting command from the Color Table tab menu
. You can sort
colors by hue (neutral colors are assigned a hue of 0 and located with the reds), luminance (the lightness or
brightness of a color), or popularity, making it easier to see an image’s color range and locate particular colors.
• To save a color table, select Save Color Table from the Color Table tab menu. By default, the color table file is given
the extension .act (for Adobe Color Table).
• To load a color table, select Load Color Table from the Color Table tab menu. You can load a color table from an
.act file or a GIF file (to load the file’s embedded color table). Once you load a new color table, the colors in the
optimized image change to reflect the new color table.
See also
“To optimize and save web graphics” on page 229
“Comparing web graphics formats” on page 232
ADOBE GOLIVE 9 236
User Guide
Optimization options for JPEG format
A
B
Optimization settings for JPEG
A. File format menu B. Compression Quality menu
Quality Determines the level of compression. The higher the Quality setting, the more detail the compression
algorithm preserves. However, using a high Quality setting results in a larger file size than using a low Quality setting.
View the optimized image at several quality settings to determine the best balance of quality and file size.
Optimized Creates an enhanced JPEG with a slightly smaller file size. The Optimized JPEG format is recommended
for maximum file compression; however, some older browsers do not support this feature.
Progressive Creates an image that displays progressively in a web browser. The image will display as a series of
overlays, enabling viewers to see a low-resolution version of the image before it downloads completely.
The Progressive option requires use of the Optimized JPEG format.
Note: Progressive JPEGs require more RAM for viewing, and are not supported by some browsers.
Blur Specifies the amount of blur to apply to the image. This option applies an effect identical to that of the Gaussian
Blur filter and allows the file to be compressed more, resulting in a smaller file size. A setting of 0.1 to 0.5 is recommended.
ICC Profile Preserves the ICC profile of the artwork with the file. ICC profiles are used by some browsers for color
correction. This option is only available if the source file contains an ICC profile.
Matte Specifies a fill color for pixels that were transparent in the original image. Click the Matte color swatch to
select a color in the Color Picker, or select an option from the Matte menu: Eyedropper (to use the color in the
eyedropper sample box), White, Black, or Other (to use the Color Picker).
Pixels that were fully transparent in the original image are filled with the selected color; pixels that were partially
transparent in the original image are blended with the selected color.
See also
“To optimize and save web graphics” on page 229
“Comparing web graphics formats” on page 232
Optimization options for PNG-24 format
Transparency and Matte Determines how transparent pixels in the image are optimized:
• To save an image with multilevel transparency, select Transparency.
• To fill fully transparent pixels with a color and blend partially transparent pixels with the same color, deselect
Transparency and select a matte color.
ADOBE GOLIVE 9 237
User Guide
• To select a matte color, click the Matte color swatch and select a color in the Color Picker. Alternatively, select an
option from the Matte menu: Eyedropper (to use the color in the eyedropper sample box), White, Black, or Other
(to use the Color Picker).
• Interlace Creates an image that displays as a low-resolution version in a browser while the full image file is
downloading. Interlacing can make downloading time seem shorter and can assure viewers that downloading is in
progress. However, interlacing also increases file size.
See also
“To optimize and save web graphics” on page 229
“Comparing web graphics formats” on page 232
Optimization options for WBMP format
The Dithering Method and Dither options determine the method and amount of application dithering. For optimal
compression, use the lowest percentage of dither that provides the detail you require.
You can select one of the following dithering methods:
No Dither Applies no dithering at all and gives straight black and white pixels.
Diffusion Applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are diffused
across adjacent pixels. If you select this algorithm, specify a Dither percentage to control the amount of dithering
that is applied to the image.
Note: Diffusion dither may cause detectable seams to appear across slice boundaries. Linking slices diffuses the dither
pattern across all linked slices, and eliminates the seams.
Pattern Applies a halftone-like square pattern to determine the value of pixels.
Noise Applies a random pattern similar to the Diffusion dithering, but without diffusing the pattern across adjacent
pixels. No seams appear with the Noise algorithm.
See also
“To optimize and save web graphics” on page 229
“Comparing web graphics formats” on page 232
Output settings for web graphics
Output settings for web graphics
Output settings control how slices and files are named and formatted when you save an optimized image. To view
(to the right of the Settings menu) in the
output settings, select Edit Output Settings from the Optimize menu
Save For Web dialog box.
The Output Settings dialog box contains two sets of options: Slices and Saving Files. To switch to a different set of
options, use the menu below the Settings menu.
ADOBE GOLIVE 9 238
User Guide
See also
“To optimize and save web graphics” on page 229
“Comparing web graphics formats” on page 232
Slices output settings
You can set the following options in the Slices options in the Output Settings dialog box:
Generate Table Controls the layout of slices using an HTML table, rather than a Cascading Style Sheet.
Empty Cells Specifies how empty slices are converted to table cells. Select GIF, IMG W&H to use a 1-pixel GIF with
width and height values specified in the IMG tag. Select GIF, TD W&H to use a 1-pixel GIF with width and height
values specified by the table cell (TD tag). Select NoWrap, TD W&H to place a nonstandard NoWrap attribute on
the table data and also place width and height values specified on the TD tags.
TD W&H Specifies when to include width and height attributes for table data: Always, Never, or Auto (the recommended setting).
Spacer Cells Specifies when to add one row and one column of empty spacer cells around the generated table:
Always, Never, or Auto (the recommended setting). Adding spacer cells is necessary with table layouts in which slice
boundaries do not align, to prevent the table from breaking apart in some browsers.
Default Slice Naming Choose elements from the pop-up menus or enter text into the boxes to be combined into the
default names for all user slices. Elements include document name, the word slice, numbers or letters designating
slices or rollover states, slice creation date, punctuation, or none.
See also
“Output settings for web graphics” on page 237
“To optimize and save web graphics” on page 229
Saving Files output settings
You set the following options in the Saving Files set of the Output Settings dialog box:
File Naming Choose elements from the pop-up menus or enter text into the boxes to be combined into the default
names for all files. Elements include document name, slice name, rollover state, trigger slice, file creation date, slice
number, punctuation, and file extension. Some options are relevant only if the file contains slices or rollover states.
The text boxes let you change the order and formatting of the file-name parts (for example, letting you indicate
rollover state by an abbreviation instead of the full word).
Filename Compatibility Select one or multiple options to make the file name compatible with Windows (permits
longer file names), Macintosh, and UNIX operating systems.
Put Images In Folder Specifies a folder name where optimized images are saved (available only with documents
containing multiple slices).
Copy Background Image When Saving Preserves a background image that has been specified in the Background
preferences set.
ADOBE GOLIVE 9 239
User Guide
See also
“Output settings for web graphics” on page 237
“To optimize and save web graphics” on page 229
“Using metadata with site files” on page 91
240
Chapter 12: Adding content from Adobe
applications
Adding Adobe Photoshop images
Adding sliced Photoshop images
To add a sliced Photoshop image to a page, use the Smart Photoshop object
. After you specify the source
Photoshop file and optimize each slice in the Save For Web dialog box, GoLive automatically creates a table to
contain the sliced image.
GoLive adds the optimized target file for each slice to an image_name.data folder. Save this folder in the site folder
so that GoLive can properly manage and publish the target files.
Note: To edit the table attributes of a sliced Photoshop file, you must use Photoshop.
See also
“Using slices” on page 231
“To add Smart Objects to pages” on page 223
“Advantages of Smart Objects” on page 222
Creating variations of images
In GoLive, variables let you create multiple image versions from one image file. You first establish variables in
Photoshop; then you edit them in GoLive by using Smart Objects. Variables can control elements such as text content
and layer visibility. For example, you might have an image with text containing the price of an item. If you want to
quickly modify the price, there’s no need to create separate image files in another application. Instead, you can simply
modify a text variable in GoLive.
ADOBE GOLIVE 9 241
User Guide
A
B
C
Creating different versions of an image using variables
A. Source file B. Variables dialog box in Photoshop C. Different optimized versions in separate target files, each with different variable settings
The power of variables is that you can create more than one target file, each with different images and text created
by assigning different variable settings. Because variables use Smart Objects, you can edit the source file and quickly
update all related versions throughout your site. (See “To update site files that are dependent on site extras” on
page 105.)
To set variables in a Photoshop file
In a Photoshop file with variables, you can change the content of text layers and the visibility of image layers.
If you import a file with text layers, GoLive automatically imports the topmost text layer as a text variable. GoLive
can also import lower text layers as text variables, but only if you first assign variables to the layers in Photoshop.
1 Using a Smart Photoshop object
, add a PSD file with a text layer to the Layout Editor.
2 In the Variable Settings dialog box, do any of the following:
• To change the original text, select the Use option for the text variable and enter text in the text box.
• To specify whether the layer is visible or invisible in the target file, select the Use option for the image layer, and
then choose an option from the menu.
• To accept the original layer as is, leave the Use option deselected.
Important: If you select the Use option for a text variable and don't enter any text, the original text is deleted. GoLive
will treat the empty text box as the new value of the text variable.
For information about assigning variables in a Photoshop file, see Photoshop Help.
To update variables in a target file
After you create a target file containing variables, you can update those variables at any time.
1 In the Layout Editor, select the Smart Object that contains the variables.
2 In the Smart Image Inspector, click the Variables button.
ADOBE GOLIVE 9 242
User Guide
3 Make the desired changes in the Variable Settings dialog box, and click OK.
Converting text to an image
You can convert HTML text into an image using the Convert Text To Banner command. This command replaces the
HTML text with a Smart Object and requires a Photoshop PSD file with variables.
A
C
B
Converting text to an image
A. HTML text selected in Layout Editor B. Source file with text variable C. Target file replaces original HTML text
See also
“Creating variations of images” on page 240
To convert text to an image
1 Select text in the Layout Editor.
2 Choose Advanced > Convert > Text To Banner. GoLive replaces the text with a Smart Object.
3 Specify a Photoshop PSD source file with variables, and click Open.
4 To change the text, edit it in the text box of the Variables Settings dialog box.
5 Set optimization options in the Save For Web dialog box.
See also
“Creating variations of images” on page 240
“To set variables in a Photoshop file” on page 241
ADOBE GOLIVE 9 243
User Guide
Adding Adobe InDesign content
Adding Print Content
You can add print content to the Layout Editor by dragging and dropping content from an InDesign file. When you
drag print content into a page, GoLive converts it immediately. The conversion retains certain aspects of InDesign
formatting such as paragraph and character styles, tables, and colors. To drag and drop content, you need to have
both programs open with the content you want to add displaying in InDesign. In GoLive, open the page in which
you want to add the content to the Layout tab.
Note: GoLive only supports InDesign content that is developed with the InDesign CS3 version.
To add print content to a page
There are a few things to consider when pasting print content into GoLive pages. When you copy and paste text that
includes InDesign paragraph and character styles into a site that includes site styles, the InDesign styles convert to
GoLive CSS styles that retain certain formatting from InDesign. The copied styles from InDesign appear in the Styles
area of Resources in the site window.
GoLive retains character styles formatting such as:
• font face
• font size
• vertical position
• character color
• character spacing
• strikethrough
• underline
Also, it retains paragraph styles formatting such as:
• first line
• left and right indent
• alignment
• leading
• space before and after
• preferred word and letter spacing
However, if a converted style uses the same name as a GoLive style, the GoLive formatting is applied to that style
when the content is pasted into the page.
You can also paste in InDesign tables. GoLive converts aspects of table formatting such as stroke style, width and
color as well as the cell color, tint, and pattern. Any styles applied to cell content is also retained. However, certain
table formatting does not convert, such as double borders, background colors, or other advanced cell formatting. In
addition to tables, you can paste in images from InDesign content using the Paste Special option.
Keep in mind that threaded text frames do not convert to GoLive due to the differences between print and online
media.
1 Copy any print content that you want in the InDesign file to your clipboard.
ADOBE GOLIVE 9 244
User Guide
Note: If you are copying images from InDesign content into a GoLive page, copy just one image at a time.
2 Paste the content into the GoLive page by doing one of the following:
• Press the Control + V shortcut on the keyboard or choose Edit > Paste on the menu bar to paste the content.
• Choose Edit > Paste Special to use special options to paste the content. You can paste content as plain text, as
having empty CSS rules, or as an image.
3 Apply GoLive paragraph and character styles, use the CSS panel, and use the Table Cell Tool to make any adjustments to the pasted text that you desire.
Adding Images
You can place images manipulated in InDesign into GoLive pages. When you place images, the Save For Web
window allows you to optimize the images and target the graphic formats that you need to make the images accessible for Web browsers. After you finish working with the original image, the image appears on the page in which
you placed it in addition to the Assets area of the site window.
Certain InDesign formatting for images that is not supported by Web browsers does not convert into GoLive pages,
such as crop masks and rounded corners, and certain text, tables, and images.
To place an InDesign image into a GoLive page
1 Open the GoLive page in which you want to place the image.
2 Choose File > Place, select the InDesign image file you want, and click Open.
3 In the Image Import Options window, choose any import options you want to apply to this image and then click OK.
If you don’t choose a Web format and instead choose to open the Save for Web window, you can further optimize
and prepare the image for the Web as you desire.
4 Click on the location in the page in which you want to place the image.
5 Select the image on the page if you want to change any of its settings and open the Inspector panel to do the
following:
• Choose the Basic tab to change image settings such as source and target files, the appearance and size of the image,
and the Name/ID and ALT text.
• Choose the More tab to change settings such as the border, use map, and IS form.
245
Chapter 13: Working with PDF
documents
Displaying and navigating PDF documents
To display a PDF document
❖ Do either of the following:
• Open a web page, and click the PDF Preview tab in the document window.
• Open an existing PDF file.
See also
“Exporting pages to PDF” on page 250
“Editing PDF link regions” on page 248
To change the display of PDF documents
❖ In the status bar of the document window, do any of the following:
• To change the number of PDF pages displayed simultaneously, click the Single-Page View button
Page View button
, or the Multi-Page View button
, the Double-
.
To view more pages at one time in double- or multi-page view, either enlarge the document window or decrease
magnification.
• To view PDF pages continuously, rather than in sets, click the Continuous Mode button
. In Continuous Mode,
you can use the vertical scroll bar to move from page to page.
• To rotate the view of PDF pages, click the Rotate Left button
or the Rotate Right button
.
To smooth text, line art, or images in PDF documents
❖ In the View panel, select from the following options: Smooth All, Smooth Text, Smooth Line Art, or Smooth
Images.
ADOBE GOLIVE 9 246
User Guide
A
B
Smoothing text, line art, and images
A. Smooth options deselected B. Smooth All selected
To navigate to a specific page or set of pages
❖ Do one of the following in the status bar of the document window:
• Type the page number in the Page Number text box, and then press Enter or Return.
• Click the First Page button
, the Last Page button
, the Next button , or the Previous button .
To navigate to a specific area of a page
❖ Do one of the following in the document window:
• Drag with the Hand tool
.
• Hold down the Control key, and press the arrow keys.
To visually locate and select a page
1 In the status bar of the document window, click the Multi-Page View button
.
2 Navigate to the desired set of pages by using the First Page, Last Page, Next, and Previous buttons.
3 In the document window, click the desired page.
ADOBE GOLIVE 9 247
User Guide
Visually locating and selecting a page
Viewing saved page setup and security settings
When you view an existing PDF file, the status bar of the document window displays the file’s page setup and security
settings, including editing and printing restrictions. GoLive honors these settings but doesn’t let you change them.
For example, if a PDF file has a printing restriction, you can’t print the file in GoLive—even if you enter the master
password to open the file.
For more information about page setup settings, see “Exporting pages to PDF” on page 250. For more information
about security settings, see Adobe Acrobat Help.
Note: GoLive supports standard Acrobat security, but not Self-Sign Security.
A B C
Saved security settings in the status bar
A. Security off B. Editing allowed C. Printing allowed
To hide PDF status bar options
❖ From the document window pop-up menu, choose Status Bar, and then select from the following options:
PDF Page Control Hides page navigation controls.
PDF Page Zoom Hides magnification controls.
PDF Info Hides security settings.
PDF Page Rotation Hides rotation buttons.
PDF Display Mode Hides display options.
PDF comments
To create, view, or edit a PDF comment
1 Open an existing PDF file.
2 In the Control panel, click the Note tool
.
3 In the PDF Preview, do either of the following:
• Select an existing comment.
ADOBE GOLIVE 9 248
User Guide
• Click to create a new comment.
4 In the text box of the PDF Commenting Inspector, view or edit the comment.
To quickly view a comment, simply place the pointer over it.
To hide PDF comments
❖ In the View panel, deselect Show Annotations to hide all comments or Show Text Annotations to hide only text
comments.
Editing PDF link regions
Editing PDF link regions
With the PDF link editor, you can use GoLive to create, move, resize, and delete link regions in any existing PDF file.
You can also specify link destinations such as web pages, HTML anchors, PDF pages, and PDF bookmarks. When
you’ve finished editing links, you can test them by using the PDF Preview tab.
You can manage PDF links with the same site management tools used for HTML links, including the In & Out Links
panel. (See “Changing all site URLs or links at once” on page 110.)
To link from an HTML file to a PDF bookmark, use the Edit PDF Anchor option. (See “To create an anchor link to
a PDF bookmark” on page 90.)
A
B
Linking to another PDF file
A. PDF Link Inspector options B. New link
To create a new PDF link region
1 Open an existing PDF file, and click the PDF Link Editing tab in the document window.
2 In the Control panel, click the Add New Link button
.
3 In the document window, drag across the area you want to link.
ADOBE GOLIVE 9 249
User Guide
4 In the URL text box of the PDF Link Inspector, specify the destination file or anchor. If you specify a PDF file, also
enter the destination page number in the Page Number text box, or choose the destination bookmark from the
Bookmark list.
To change the color used to highlight link regions, specify a new Link Editing Color preference. (See “To change PDF
preferences” on page 252.)
See also
“Editing PDF link regions” on page 248
To move, resize, or delete a PDF link region
1 Open an existing PDF file, and click the PDF Link Editing tab in the document window.
2 In the Control panel, click the Edit Links button
.
3 In the document window, click the link to select it.
4 Do one of the following:
• To move the link region, drag it to the desired location on the page.
• To resize the link region, position the pointer over a corner or side handle. When the pointer becomes a double
arrow
, drag.
• To delete the link region, press Delete.
To precisely move or resize a link, increase display magnification.
See also
“Editing PDF link regions” on page 248
To change a destination for a PDF link region
1 Open an existing PDF file, and click the PDF Link Editing tab in the document window.
2 In the Control panel, click the Edit Link button
.
3 In the document window, select the desired link region.
4 In the URL text box of the PDF Link Inspector, specify the destination file or anchor. If you specify a PDF file, also
enter the destination page number in the Page Number text box, or choose the destination bookmark from the
Bookmark list.
You can point and shoot to a destination file by holding down Alt (Windows) or Command (Mac OS) and dragging
from the link region in the document window.
See also
“Using anchors for links” on page 89
“Editing PDF link regions” on page 248
ADOBE GOLIVE 9 250
User Guide
Exporting web pages to PDF
Exporting pages to PDF
You can export web pages to PDF while retaining formatting and features such as links, form elements, and
QuickTime movies. You can use this powerful functionality to quickly e-mail PDF versions of web pages or create
documents such as interactive PDF forms.
GoLive provides two ways to export PDF files, and each has unique advantages. If you export individual open pages,
you can preview various PDF settings with the PDF Creation Inspector. If you export selected files in the site window,
you can simultaneously export multiple files—or an entire site—and retain links between files.
Note: Frames, HTML comments, and JavaScript do not export to PDF. Exported anchors, however, become bookmarks
in the PDF file.
See also
“About web forms” on page 260
To export an open web page to PDF
1 In the document window, click the PDF Preview tab.
2 In the PDF Creation Inspector, set options as desired.
The Inspector displays only common options. To set additional options, click the Edit Adobe PDF Preset icon
.
3 In the Control panel, select any of the following:
• View PDF After Exporting
• Use PDF Security Preferences
4 Do any of the following:
• To attach a PDF file to an e-mail message, click the E-mail PDF button in the Control panel.
• To quickly save a PDF file, click the Export button
in the Control panel.
• To save a PDF file and customize options, choose File > Export > HTML As Adobe PDF.
See also
“About Adobe PDF presets” on page 252
PDF Creation options for open web pages
When you click PDF Preview tab for an open web page, the PDF Creation Inspector provides the following options.
The availability of some options may depend upon the types of content included in the web page.
Note: You can override these options in the Export Adobe PDF dialog box.
Preset Specifies the PDF preset used when exporting. PDF Presets are groups of compression, security, and other
settings. To customize presets, click the Edit Adobe PDF Preset button.
Size Sets the paper size. To change page orientation, click the portrait button
or landscape button
Margin Sets the page margins. To set uniform margins, click the Link All Margins icon
.
.
ADOBE GOLIVE 9 251
User Guide
Colors Specifies the ICC profile used for color management:
• Main Monitor Colors Uses the monitor profile.
• Working RGB Uses the RGB working space specified in the Color Settings dialog box (Edit > Color Settings).
• Mac Colors Uses the default profile for Mac OS.
• Windows Colors Uses the default profile for Windows.
Shrink Content to Paper Width Proportionally shrinks a web page that’s wider than the selected paper size.
Use Single Page Layout Extends the PDF page length to contain all the web content.
Allow Table Breaks Breaks tables at page breaks, rather than shifting entire tables and creating excess white space.
Allow Image Breaks Breaks images at page breaks, rather than shifting entire images and creating excess white space.
Remove Background Removes background colors, background images, and CSS background styles, replacing them
with a white background that emphasizes the content of the page.
Refresh PDF Preview Regenerates the PDF preview to reflect new PDF Creation settings.
See also
“About Adobe PDF presets” on page 252
“General options for Adobe PDF files” on page 253
“Compression options for Adobe PDF files” on page 256
“HTML Conversion options for Adobe PDF files” on page 257
“Advanced options for Adobe PDF files” on page 258
“Security options for Adobe PDF files” on page 258
To export selected pages in a site to PDF
1 In the site window, select one or more pages.
If you’re exporting an entire site, select only one page; you can later specify the entire site in the Export Adobe PDF
dialog box.
2 Choose File > Export > HTML As Adobe PDF.
3 In the Export Adobe PDF dialog box, select or edit a preset, and then click Export.
See also
“General options for Adobe PDF files” on page 253
“Compression options for Adobe PDF files” on page 256
“HTML Conversion options for Adobe PDF files” on page 257
“Site Creation options for Adobe PDF files” on page 258
“Advanced options for Adobe PDF files” on page 258
“Security options for Adobe PDF files” on page 258
ADOBE GOLIVE 9 252
User Guide
Setting global options for PDF documents
To change PDF preferences
GoLive lets you change several conversion, display, and security preferences for PDF documents. If you regularly use
certain settings to create PDF files, changing the preferences can help you work more efficiently.
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 In the list on the left, select Adobe PDF, and then select from the following groups of default settings:
HTML To PDF Conversion Sets the default PDF preset and page size. (GoLive applies the default page size if a preset
doesn’t specify this information.)
PDF Optimization Enables or disables Optimize For Fast Web View.
To ensure that uploaded PDF files have the smallest file size possible, select Rewrite PDF Files in the Upload/Export
section of the Site preferences. For more information, see “To select site export options” on page 292.
Initial View Determines default Zoom Factor and Display Mode.
Document Display Determines default smoothing of text and graphics, display of annotations, and colors for page
backgrounds and links.
3 If you create secure PDF files, expand Adobe PDF in the list on the left, select Security, and specify default settings.
See also
“PDF Creation options for open web pages” on page 250
“To smooth text, line art, or images in PDF documents” on page 245
“Security options for Adobe PDF files” on page 258
About Adobe PDF presets
A PDF preset is a predefined set of PDF options that you can use to create Adobe PDF files. The settings in default
presets balance file size with quality for specific mediums, such as the web, mobile devices, or print. You can also
create new presets with custom settings.
GoLive and Adobe Creative Suite applications (Acrobat, Illustrator, InDesign, and Photoshop) share PDF presets.
For more information about shared PDF settings, see the PDF Integration Guide on a Creative Suite CD.
GoLive provides the following Adobe PDF presets:
Note: Both of these presets use the Single Page Layout option, which prevents page breaks in web content.
GoLive Default Creates PDF files that are optimized for web browsers, reducing file size for fast downloads while
retaining features such as form elements, interactivity, and multimedia. This preset utilizes recent enhancements to
the PDF format, producing files that can be opened in Acrobat 6.0 and later.
Mobile PDF Creates PDF files that are optimized for mobile devices, such as cell phones and PDA’s. To accommodate
these devices, page size is reduced for small screens, and file size is optimized for fast downloads. For broad mobile
compatibility, this preset produces files that can be opened in Acrobat 5.0 and later.
Other Adobe CS applications install additional presets. For more information, see InDesign Help, Illustrator Help,
or Photoshop Help.
ADOBE GOLIVE 9 253
User Guide
See also
“General options for Adobe PDF files” on page 253
To customize Adobe PDF presets
In GoLive, you can create, edit, and load Adobe PDF presets. Saved preset files use the .joboptions extension. You
can transfer these files to a different computer or Adobe Creative Suite application. In GoLive, however, you can’t use
.
CMYK presets, which appear with a warning icon
You can create a new preset while exporting to PDF from the site window. After setting the desired options in the
Export Adobe PDF dialog box, click Save Preset.
1 Choose Edit > Adobe PDF Presets.
2 Do one of the following:
• To create a new preset, click New. Then specify a name for the preset, set the desired options, and click OK.
• To create a new preset based on an existing one, select the desired preset, and click New. Then, enter a name for
the preset, set the desired options, and click OK.
• To edit a preset, select it, and click Edit. Then set the desired options, and click OK.
As you edit a preset, you can view overall settings in the Summary area of the Edit PDF Export Preset dialog box.
• To delete a preset, select it, and click Delete.
• To import a preset, click Load. Locate the joboptions file you want to load, and click Open.
• To save a preset, select it, and click Save. Shared presets are stored in the Adobe PDF\Settings folder. To store the
preset in a different location, click Save As, specify a location, and click Save.
See also
“General options for Adobe PDF files” on page 253
“Compression options for Adobe PDF files” on page 256
“HTML Conversion options for Adobe PDF files” on page 257
“Advanced options for Adobe PDF files” on page 258
General options for Adobe PDF files
When you export to PDF or edit a PDF preset, you can set the following General options:
Compatibility Sets the compatibility level of the Adobe PDF file. When you create PDF files, you need to decide
which PDF version to use. Generally speaking, you should use the most recent version because it will support the
latest features and functionality. However, if you’re creating documents that will be distributed widely, consider
choosing Acrobat 4.0 (PDF 1.3) or Acrobat 5.0 (PDF 1.4) to ensure that all users can view and print the document.
The following table compares different Adobe PDF compatibility settings.
ADOBE GOLIVE 9 254
User Guide
Acrobat 4
(PDF 1.3)
Acrobat 5
(PDF 1.4)
Acrobat 6
(PDF 1.5)
Acrobat 7
(PDF 1.6)
PDF files can
be opened
with Acrobat
3.0 and
Acrobat
Reader 3.0
and later.
PDF files can
be opened
with Acrobat
3.0 and
Acrobat
Reader 3.0
and later.
However,
features
specific to
later versions
may be lost or
not viewable.
Most PDF files
can be
opened with
Acrobat 4.0
and Acrobat
Reader 4.0
and later.
However,
features
specific to
later versions
may be lost or
not viewable.
Most PDF files
can be
opened with
Acrobat 4.0
and Acrobat
Reader 4.0
and later.
However,
features
specific to
later versions
may be lost or
not viewable.
Cannot
contain
artwork that
uses live
transparency
effects. Any
transparency
must be flattened prior to
converting to
PDF 1.3.
Supports the
use of live
transparency
in artwork.
Supports the
use of live
transparency
in artwork.
Supports the
use of live
transparency
in artwork.
Layers are not Layers are not Preserves
supported.
supported.
layers when
creating PDF
files from
applications
that support
the generation of
layered PDF
documents,
such as
Illustrator CS
or InDesign
CS.
Preserves
layers when
creating PDF
files from
applications
that support
the generation of
layered PDF
documents,
such as
Illustrator CS
or InDesign
CS.
DeviceN color
space with 8
colorants is
supported.
DeviceN color
space with 8
colorants is
supported.
DeviceN color
space with up
to 31 colorants is
supported.
DeviceN color
space with up
to 31 colorants is
supported.
Double-byte
fonts can be
embedded.
Double-byte
fonts can be
embedded.
Double-byte
fonts can be
embedded.
Double-byte
fonts can be
embedded.
40-bit RC4
security
supported.
128-bit RC4
security
supported.
128-bit RC4
security
supported.
128-bit RC4
and 128-bit
AES
(Advanced
Encryption
Standard)
security
supported.
Description Displays the description from the selected preset, and provides a place for you to edit the description.
ADOBE GOLIVE 9 255
User Guide
You can paste a description from the clipboard. Editing the description of a preset appends the word “(modified)”
to the preset name. Conversely, changing the settings in a preset prepends the description with “[Based on <Current
Preset Name>].”
Embed Page Thumbnails Creates a thumbnail preview for each page being exported. Adding thumbnails increases
the PDF file size.
Optimize For Fast Web View Reduces PDF file size, and optimizes the PDF file for faster viewing in a web browser
by restructuring the file for page-at-a-time downloading (byte serving). This option compresses text and line art,
regardless of what you have selected as compression settings in the Compression area of the Export Adobe PDF
dialog box.
Create Tagged PDF Generates an Adobe PDF file with tagged text, links, and images—the subset of Acrobat 6.0 tags
that GoLive supports. If Acrobat 6 (PDF 1.5) or Acrobat 7 (PDF 1.6) is selected for Compatibility, tags are
compressed.
Create Acrobat Layers Saves each GoLive layer, including hidden layers, as an Acrobat layer within the PDF
document. The layers are fully navigable, which allows Adobe Acrobat 6.0 users to generate multiple versions of the
document from a single file. For example, if a document will be published in multiple languages, you can place the
text for each language in a different layer. Your can then show and hide the layers in Acrobat 6.0 to generate different
versions of the document.
Note: This option is only available when Compatibility is set to Acrobat 6 (PDF 1.5).
Embed Adobe PDF Preset Stores the current PDF preset in the exported PDF file.
View PDF After Exporting Opens the newly-created PDF file in the default PDF viewing application.
Bookmarks Creates bookmarks from HTML anchors.
Hyperlinks Creates Adobe PDF hyperlink annotations for GoLive hyperlinks. Set the following sub-options:
• Honor Base-URL Converts relative web links into absolute PDF links. (This option requires a Base element in the
head section of the web page.)
• Honor Rollover Effect Retains HTML rollovers in the exported PDF file.
Form Elements Retains interactive HTML form elements in the exported PDF file.
Note: JavaScript in forms and elsewhere does not export to PDF.
Multimedia Lets you specify how to embed or link movies and sounds:
• Automatic Links multimedia for Acrobat 4.0 and 5.0 files; embeds multimedia for Acrobat 6.0 and later files.
• Link All Links sound and movie clips placed in the document. If you choose not to embed media clips in the PDF
file, be sure to place the media clips in the same folder as the PDF.
• Embed All Embeds all movies and sounds, regardless of embed settings on individual objects.
Note: The Multimedia option is only available when Compatibility is set to Acrobat 6 (PDF 1.5) and Interactive
Elements is selected.
See also
“Exporting pages to PDF” on page 250
“About Adobe PDF presets” on page 252
“Head section elements” on page 82
ADOBE GOLIVE 9 256
User Guide
Compression options for Adobe PDF files
When you export to PDF or edit a PDF preset, you can set the following compression options for images. You may
want to experiment with these options to find an appropriate balance between file size and image quality.
Downsampling To downsample color, grayscale, or monochrome images, GoLive combines pixels in a sample area
to make one larger pixel. You provide the resolution of your output device in dots per inch (dpi) and enter a
resolution in pixels per inch (ppi) in the For Images Above box. For all images with resolution above this threshold,
GoLive combines pixels as needed to reduce the image’s resolution (ppi) to the specified dpi setting. The interpolation method you choose determines how pixels are deleted:
• Average Downsampling To Averages the pixels in a sample area and replaces the entire area with the average pixel
color at the specified resolution.
• Subsampling To Chooses a pixel in the center of the sample area and replaces the entire area with that pixel color.
Subsampling significantly reduces the conversion time compared with downsampling but results in images that are
less smooth and continuous.
• Bicubic Downsampling To Uses a weighted average to determine pixel color, which usually yields better results
than the simple averaging method of downsampling. Bicubic is the slowest but most precise method, resulting in the
smoothest tonal gradations.
Compression Determines the type of compression that is used:
• Automatic (JPG/ZIP) Determines automatically the best quality for color and grayscale images. For most files, this
option produces satisfactory results.
• JPG Is suitable for grayscale or color images. JPG compression is lossy, which means that it removes image data
and may reduce image quality; however, it attempts to reduce file size with a minimal loss of information. Because
JPG compression eliminates data, it can achieve much smaller files sizes than ZIP compression.
• ZIP Works well on images with large areas of single colors or repeating patterns, and for black-and-white images
that contain repeating patterns. ZIP compression can be lossless or lossy, depending on the Image Quality setting.
• JPG 2000 Is the international standard for the compression and packaging of image data. Like JPG compression,
JPG 2000 compression is suitable for grayscale or color images. It also provides additional advantages, such as
progressive display. The JPG 2000 option is only available when Compatibility is set to Acrobat 6 or later.
• Automatic (JPG 2000/ZIP) Determines automatically the best quality for color and grayscale images. This option
is available only when Compatibility is set to Acrobat 6 or later.
• CCITT (Consultative Committee on International Telegraphy and Telephony) and Run Length Are only available
for monochrome bitmap images. CCITT compression is appropriate for black-and-white images and any images
scanned with an image depth of 1 bit. Group 4 is a general-purpose method that produces good compression for
most monochrome images. Group 3, used by most fax machines, compresses monochrome bitmaps one row at a
time. Run Length compression produces the best results for images that contain large areas of solid black or white.
Image Quality Determines the amount of compression that is applied. For JPG or JPG 2000 compression, you can
choose High, Medium High, Medium, Medium Low, or Low quality. For ZIP compression, only 8-bit is available. If
you use 8-bit ZIP compression with 4-bit or 8-bit images, the ZIP method is lossless; that is, data is not removed to
reduce file size, so image quality is not affected.
Compress Text And Line Art Applies Flate compression to all text and line art in the document, without loss of detail
or quality.
ADOBE GOLIVE 9 257
User Guide
Crop Image Data To Frames May reduce file size by exporting only image data that falls within the visible portion of
the frame. Do not select this option if postprocessors might require the additional information (for repositioning or
bleeding an image, for example).
See also
“Exporting pages to PDF” on page 250
“About Adobe PDF presets” on page 252
HTML Conversion options for Adobe PDF files
When you export to PDF or edit a PDF preset, you can set the following HTML Conversion options.
Page Setup Specifies paper type, width, height, and orientation.
Margin Sets the page margins. To set uniform margins, click the Link All Margins button
.
Shrink Content To Paper Width Proportionally shrinks a web page that’s wider than the selected paper size.
When Opening Zoom In To Original HTML Font Size Selects Acrobat zoom setting that reflects HTML font size in
web browser.
Use Single Page Layout Extends the PDF page length to contain all the web content.
Allow Image Breaks Breaks images at page breaks, rather than shifting entire images and creating excess white space.
Ignore Page Breaks Ignores the following HTML comment, which forces a page break in exported PDF files:
<--GLPDF:Pagebreak-->
Remove Background Removes background colors, background images, and CSS background styles.
Mobile Compatible Selects the Create Tagged PDF option in the General area of the Adobe PDF Preset dialog box,
adding unique formatting tags for mobile devices. Mobile-compatible PDF files are best viewed in Acrobat 5.0 and
later.
Note: Deselecting Mobile Compatible doesn’t deselect Create Tagged PDF; you must deselect that related option
manually.
Treat Colors In Pages As Specifies the ICC profile used for color management:
• Main Monitor Colors Uses the monitor profile.
• Working RGB Uses the RGB working space specified in the Color Settings dialog box (Edit > Color Settings).
• Mac Colors Uses the default profile for Mac OS.
• Windows Colors Uses the default profile for Windows.
Use Embedded Image Profiles Retains image profiles in the exported PDF file.
See also
“To change PDF preferences” on page 252
“Exporting pages to PDF” on page 250
“PDF Creation options for open web pages” on page 250
ADOBE GOLIVE 9 258
User Guide
Site Creation options for Adobe PDF files
When you export to PDF from the site window, you can set the following Site Creation options:
Create A Single PDF From All Files Selected Exports a single PDF file from all selected web pages.
Create A Separate PDF For Each File Selected Exports a unique PDF file for each selected web page. To direct links
to other exported PDF files, rather than the original web pages, select Resolve Links To Point To The PDF’s.
Work On specifies the group of web pages to export. For example, The Whole Site specifies all pages, and The Site
Selection specifies selected pages.
See also
“Exporting pages to PDF” on page 250
Advanced options for Adobe PDF files
When you export to PDF or edit a PDF preset, you can set the following Advanced options:
Embed Fonts Includes complete fonts in the exported file. (Some fonts must be embedded to display correctly;
GoLive embeds these fonts even if this option is deselected.)
Note: GoLive cannot embed a font if the font vendor has disabled embedding.
Subset Fonts Includes only the specific font characters present in the document.
Metadata Stores Title, Author, Subject, and Keywords in the exported PDF file. Select Use HTML Page Title to
automatically complete the Title field.
Place Page Information As Headers And Footers Adds metadata to the top and bottom of each page.
See also
“Exporting pages to PDF” on page 250
“PDF Creation options for open web pages” on page 250
Security options for Adobe PDF files
When you export to PDF, you can set the following Security options:
Compatibility Sets the type of encryption for opening a password-protected document. The Acrobat 4 (PDF 1.3)
option uses a low encryption level (40-bit RC4), while the other options use a high encryption level (128-bit RC4).
Acrobat 6 (PDF 1.5) or later lets you enable metadata for searching.
Be aware that anyone using an earlier version of Acrobat cannot open a PDF document with a higher compatibility
setting. For example, if you select Acrobat 7 (PDF 1.6) compatibility for a document’s security setting, the document
cannot be opened in Acrobat 6.0 or earlier.
Require a Password to Open the Document Requires anyone who tries to open the PDF file to enter the password
you specify.
Document Open Password Sets the password to protect the PDF file. This option is only enabled when the previous
option is selected.
Note: If you forget a password, there is no way to recover it from the document. It’s a good idea to store passwords in a
separate secure location in case you forget them.
ADOBE GOLIVE 9 259
User Guide
Use a Password to Restrict Printing, Editing, and Other Tasks Restricts access to the PDF file’s security settings. If the
file is opened in Adobe Acrobat, the user can view the file but must enter the specified Permissions password in order
to change the file’s Security and Permissions settings. If the file is opened in Illustrator, Photoshop, InDesign, or
GoLive the user must enter the Permissions password, since it is not possible to open the file in a view-only mode.
Permissions Password Sets the password to protect the PDF file. This option is only enabled when the previous
option is selected.
Printing Allowed Specifies the level of printing that users are allowed for the PDF document.
• None Prevents users from printing the document.
• Low Resolution (150 dpi) Lets users print at no higher than 150-dpi resolution. Printing may be slower because
each page is printed as a bitmap image. This option is available only if the Compatibility option is set to Acrobat 5
(PDF 1.4) or a later Acrobat version.
• High Resolution Lets users print at any resolution, directing high-quality vector output to PostScript and other
printers that support advanced high-quality printing features.
Changes Allowed Defines which editing actions are allowed in the PDF document.
• None Prevents users from making any changes to the document, including filling in signature and form fields.
• Inserting, Deleting, And Rotating Pages Lets users insert, delete, and rotate pages, as well as create bookmarks
and thumbnail pages. This option is only available for high (128-bit RC4) encryption.
• Commenting, Filling in Form Fields, and Signing Lets users add comments, fill out forms, and add digital signatures. This option doesn’t allow users to move page objects or create form fields.
• Page Layout, Filling in Form Fields, and Signing Lets users fill out forms and add digital signatures. This option
doesn’t allow users to add comments or create form fields.
• Any Except Extracting Pages Lets users edit the document, create and fill out form fields, add comments, and add
digital signatures.
Enable Copying of Text, Images, and Other Content Allows users to copy and extract content from the PDF
document.
Enable Text Access Of Screen Reader Devices For The Visually Impaired Allows users to access content using
software tools for the visually impaired. This option is only available for high (128-bit RC4) encryption.
Enable Plaintext Metadata Allows users to copy and extract content from the PDF. This option is only available
when Compatibility is set to Acrobat 6 or later. Selecting this option allows storage/search systems and search
engines to access to metadata stored in this document.
See also
“Exporting pages to PDF” on page 250
260
Chapter 14: Forms
Creating forms
About web forms
A web form allows viewers to send information to a web server or e-mail address. You can design forms to let viewers
sign up for a newsletter, make purchases, and complete a questionnaire. You can use text fields, buttons, lists, and
images in your form. You can also add actions and events to your form.
The appearance of your form may vary between computer platforms and web browsers. With GoLive you can get
predictable results if you place form elements in HTML tables, rather than on layout grids or directly on a page.
Note: You create the form in GoLive, but your web server actually processes the information using a script that the form
specifies. All GoLive form elements fully support HTML 4.0 standards—including labels, tab order, and access keys—
and are backward-compatible with the HTML 3.2 specification.
See also
“Exporting pages to PDF” on page 250
To create a form
1 From the Form set in the Objects panel, drag the Form icon onto a page. This element is a container for individual
form elements, such as buttons and fields.
2 To provide the form’s structural foundation, create a table using the Table icon from the Tools panel.
3 Add form items by dragging them from the Objects panel to the table cells.
Note: Icons from the Forms set in the Objects panel must be added in the box that encloses the Form icon in the document
window; otherwise they will not be part of the form.
4 Add a Submit button so your viewers can submit their data to a server or an e-mail address.
5 Create a tabbing chain to help your viewers navigate within the form using the Tab key. You can specify the order
in which the focus moves from one form element to the next.
6 Preview your form in a browser and test its functionality.
GoLive includes several form samples that you can build your form upon. Choose File > New, select Web > Page
Samples (Tables), and then select one of the samples named “form”. (See “About the New dialog box” on page 8.)
A
B
C
Designing a form
A. Form icon contains all elements of a fill-in form B. Form icon C. Individual form elements placed in table cells
ADOBE GOLIVE 9 261
User Guide
To set up the form element
The form element tells the browser where and how to return form information for processing. If you are using a table
to organize the form elements, be sure to put the table inside the form element’s box.
1 Drag the Form icon from the Forms set in the Objects panel to the document window.
2 In the Form Inspector, choose an option from the Name/ID menu (choose Name & ID for maximum browser
compatibility), and then type a unique form name in the Name/ID box.
3 Select Action, and then specify the URL of the web server script that will process the form information when the
viewer clicks the Submit button.
4 If your form is embedded in a frame set and you want to control where the HTML page returned by the web server
appears, choose a target location from the Target menu.
5 Select an encoding method from the Encode pop-up menu:
Default and Application/x-www-form-url-encoded Use the ASCII character set. These two methods are the same.
Multipart/form-data Tells the server where the files begin and end.
Text/plain Sends the form data as plain text.
6 In the Method menu, choose the form delivery method:
Post Returns data entered by the viewer information separately from the web page.
Get Sends the viewer’s entries appended to the URL in the Action box.
Default Omits the Method attribute.
Note: Get appends the form information to the destination file and may exceed the URL length limit, causing the server
to lose information from the form.
Adding form elements
Types of form buttons and check boxes
You can set up several types of buttons and check boxes on your web page form.
Submit buttons Send data entered in the form to the CGI script for processing.
Reset buttons Clear the current form data, resetting the form to its default values.
Radio buttons Let viewers select one item from a list. To make sure that a list of radio buttons works properly, make
sure that each button shares the same Group name.
Buttons Can function like a Reset or Submit button, or perform a custom action that you create. You can use an
image for the button label.
Check boxes Let the viewer select one or more items from a list of options.
See also
“To insert a label” on page 264
ADOBE GOLIVE 9 262
User Guide
To create a Submit or Reset button
1 Drag the Submit Button icon
within your form.
or the Reset Button icon
from the Forms set in the Objects panel to
2 To change the label that appears on the face of the button, do one of the following:
• Use the Text tool or double-click the default label name to select it on the object and type the label name you want.
• Drag a label object from the Objects panel, select the default label name by double-clicking it or using the Text
tool, and then type the label name you want. Use the pick whip on the Inspector to link the label to the object.
To create a custom button
1 Drag the Button icon
from the Forms set in the Objects panel to your form.
2 Enter a unique button name in the Form Button Inspector.
3 In the Value box, specify an action or a value to be passed to the script.
4 To change the label that appears on the face of the button, do one of the following:
• To use HTML text, select the text on the button in the document window, and then type the new label. You can
format the label using any text formatting method in GoLive.
• To use an image, drag the Form Input Image icon from the Forms set in the Objects panel to the button. Use the
Form Input Image Inspector to specify the image source and options, which you set just as you set options in the
Image Inspector.
See also
“Adding pre-optimized images” on page 206
“Formatting text for the web” on page 162
To create a radio button
1 Drag the Radio Button icon
from the Forms set in the Objects panel to your form.
2 In the Group box, type a name that all radio buttons in its group share, or select an existing group name from the
pop-up menu.
3 In the Value box, type a unique value or descriptive name that identifies the button. If the viewer selects this
particular radio button, this value is passed to the web server script when they submit the form.
4 If you want the radio button to be selected by default, select Selected.
To create a check box
1 Drag the Check Box icon
from the Forms set in the Objects panel to within your form.
2 In the Name box, type a unique name to identify the check box.
3 In the Value box, type the value for the check box. If the viewer selects this particular check box, this value is
passed to the web server script when they submit the form.
4 If you want the check box selected by default, select Selected.
ADOBE GOLIVE 9 263
User Guide
To create a single-line text field or a password field in a form
Text and password fields let viewers enter a single line of text, or a required password. Text area fields let viewers
enter multiple lines of text. When a viewer clicks the Submit button, the form passes the text to the web server script.
1 Drag the Text Field icon
or the Password icon
from the Forms set in the Objects panel to your form.
2 In the Name box of the Form Text Field Inspector, type a unique name to identify the text field or password field.
3 In the Value box, type default text that can be overwritten by viewers, or leave the box empty.
4 In the Visible box, type the number of characters that appear in the text field. By default, a greater number of
characters can still be entered into the box.
5 If you want to restrict the number of characters that can be typed into the text field, type the maximum number
in the Max box. If empty, this limit is determined by the viewer’s web browser.
6 To make the text field a password text field, select Is Password Field. If this option is selected, web browsers
typically display an asterisk (*) or other character rather than text for each character.
Note: Password protection of web pages is an interactive feature that requires a web server. What you create in GoLive
is just the appearance for the password protection mechanism.
To create a multiple-line text field in a form
1 Drag the Text Area icon
from the Forms set in the Objects panel to your form.
2 In the Name box of the Form Text Area Inspector, type a unique name to identify the text area.
3 In the Rows box, type the number of rows that the text area displays.
4 In the Columns box, type the number of characters to define the width of the field.
5 From the Wrap menu, choose one of the following to specify how lines of text break:
Default Uses the web browser’s text area settings.
Off Prevents text from wrapping, and the Columns limit is disabled.
Virtual Wraps the text on-screen, but not when the data is processed.
Physical Wraps the text on-screen, and when it’s processed.
6 If you want text to appear in the field by default, such as instructions on what the viewer should type, type in the
Content box.
To set up a list box or a pop-up menu
The List Box icon inserts a scrolling list box with multiple options to choose from. The Popup icon inserts a pop-up
menu with multiple options to choose from.
1 Drag the List Box icon
or the Popup icon
from the Forms set in the Objects panel to your form.
2 In the Name box in the Inspector, type a unique name to identify the field.
3 In the Rows box, type in the number of rows you want to display by default. For a pop-up menu, this is the number
of rows viewers see when they open the menu.
4 Do any of the following:
• To allow viewers to select more than one option, select Multiple Selection.
• To select the option that appears in the field by default, select the desired option in the Label/Value list box, and
then select the box at the bottom of the Inspector.
ADOBE GOLIVE 9 264
User Guide
• To edit the field’s labels and value, select an item in the Label/Value list box, and enter a new label and appropriate
value.
• To add, duplicate, or delete an item, select the item in the list, and click the appropriate button at the bottom of the
Inspector.
• To move an item in the list, select the item and click either the Up button
or the Down button
.
To insert a label
The Label icon inserts a text-based label for identifying the purpose of an adjacent form element.
1 Drag the Label icon
from the Forms set in the Objects panel to your form.
2 Select the text on the label field in the document window, and type the text you want it to display. You can format
the label using any text formatting method in GoLive.
3 To associate the label with a particular form field, select the label field and then do one of the following:
• In the Form Label Inspector, drag from the pick whip
to the form element you want to label.
• Alt-click (Windows) or Command-click (Mac OS) the border of the label, and drag to the form element you want
to label.
The Reference box of the Form Label Inspector displays the ID that controls the association between the form
element and its label.
See also
“Formatting text for the web” on page 162
To group form elements
You can visually indicate that particular forms are related by placing them within a bounding box and displaying a
caption over the group.
Note: The bounding box and caption may not render correctly in all browser versions. Be sure to preview your form in
web browsers and from your web server.
1 Drag the Fieldset icon
from the Forms set in the Objects panel to your form.
2 If you want a caption to appear along the bounding box, select Use Legend in the Form Fieldset Inspector. Select
the “Legend” text in the document window, and type the caption. You can choose the legend’s alignment from the
Alignment menu in the Inspector. (Default positions the legend according to the browser’s preferences or aligns the
legend to the left.)
3 Drag form elements that you want to group, into the Form Fieldset bounding box.
Adding form navigation
Providing form navigation
You can make your forms easy to navigate by specifying a tabbing chain or assigning a keyboard shortcut that applies
focus to a particular form element. A tabbing chain lets you define the order in which form elements are selected
when viewers press the Tab key repeatedly.
ADOBE GOLIVE 9 265
User Guide
In an HTML form, each element must receive focus from the viewer to become active and perform its task. In
addition to clicking a specific form element, you can use either of these methods for navigating a form using the
keyboard:
• Define a tabbing chain, and then type text or press Enter to trigger some form-specific action.
• Provide a platform-specific access key combination, and then type text or press Enter to trigger some formspecific action.
Note: Not all browser versions support form navigation control keys.
Tabbing order
Navigation proceeds from the form element with the lowest tab index value to the form element with the highest.
Tab index values need not be contiguous or start at any particular value. If you assign the same tab index value to
two form elements, the order of those particular elements in the source code determines their tab order relative to
one another.
To assign a tabbing order to form elements
1 With the Layout Editor window open, choose Advanced > Forms > Start Tabulator Indexing from the application
window.
Small yellow index boxes appear on top of or inside form elements that can be tabbed, and a pound sign appears next
when it’s over such a form element.
to the index form element pointer
2 Click each element successively in the desired tabbing order. A tab index number appears in each index box and
in the Tab box of the Inspector.
3 When you have specified the tabbing chain, choose Advanced > Forms > Stop Tabulator Indexing, or click the
Start/Stop Indexing button
in the Inspector.
4 Test the result in a web browser that supports tabbing navigation, such as Microsoft Internet Explorer 4.0 or later.
A
B
C
Clicking to assign the tabbing order in a form
A. Text boxes in a form B. Yellow index boxes identify form elements that support tabbing. C. Click elements sequentially to set the tabbing
order.
Note: You can also assign the tabbing order by selecting each form element individually and entering a number in the
Tab box in each element’s Inspector. Form elements that support tabbing have the Tab option in their Inspector.
To assign a keyboard shortcut to focus on a form element
You can define a unique access key for some types of form elements to enable viewers to focus on that element by
pressing a keyboard shortcut (Alt-S, for example, to activate the Submit button in a Microsoft Windows-based
browser).
ADOBE GOLIVE 9 266
User Guide
Note: Some form element types don’t support access keys. Form elements that support these keys have the Key option in
their Inspector.
1 Select the form element.
2 In the Key box of the Inspector, type any alphanumeric character.
3 Provide the user with instructions next to the element in the document window—for example, drag a Label next
to the element or enter text that gives the key combination.
4 Repeat steps 1-3 for the next form element. Do not assign the same key to two form elements.
5 Test the result in a browser that supports navigation using access keys, such as Microsoft Internet Explorer 4.0 or
later.
Advanced form elements and properties
Special form elements
A number of special HTML elements in the Forms set of the Objects panel let you add images to your form buttons,
insert hidden data, include cryptographic keys, and insert a file selection dialog box.
Lets you add an image to a button created with the Button icon or use just the image for
a button. Inserting graphics can help viewers navigate through your pages.
Form Input Image icon
Hidden icon
Inserts an HTML tag that does not appear in a web browser. However, the form submits the HTML
tag values with the rest of the form data.
Key Generator icon
Lets viewers address an encryption algorithm for safeguarding transactions with your
website.
File Browser icon
Inserts a file selection dialog box.
To insert an input image placeholder
1 Drag the Form Input Image icon from the Objects panel to your form.
2 Link the image placeholder with a graphic by using the pick whip or the Browse button in the Form Input Image
Inspector.
3 In the Form Input Image Inspector, choose an option from the Name/ID menu (choose Name & ID for maximum
browser compatibility), and then type a unique form input image name in the Name/ID box.
Note: Naming the image is especially important when you are using several graphical Submit buttons within the same
form. This name is appended to the x and y coordinates that the CGI script uses to indicate that viewers clicked that
specific input image, and to trigger a button-specific action.
4 Select the More tab and set up the input image as desired.
Note: If you plan to use the image as a clickable button, make sure to select Is Form.
See also
“About links” on page 85
“Providing form navigation” on page 264
“To add alternative text for images” on page 207
ADOBE GOLIVE 9 267
User Guide
“To create HTML image borders” on page 208
“Setting up inactive form elements in a form” on page 267
To set up a hidden tag, key generator, or file browser
1 Drag the Hidden, Key Generator, or File Browser icon from the Forms set in the Objects panel to your form.
2 In the form element’s Inspector, enter a unique name in the Name box.
3 Enter a value:
• For a Hidden tag, type a default value in the Value box.
• For a Key Generator tag, type the security level in the Challenge box.
• For a File Browser, type the file browser window width value in the Visible box.
To set a text or text area form field to read-only status
1 Select the form element.
2 Select Read-only in the Inspector.
You can set text fields to read-only status. For example, you might want to include text that must accompany the
form. Only text fields, password fields, and text area fields support read-only status.
Setting up inactive form elements in a form
You can make particular form elements unavailable until the viewer does something, such as activate a script by
selecting a particular option or filling in a particular element. For example, you can keep a form’s Submit button
inactive until viewers enter some required data. Only text fields, password fields, text areas, all buttons, check boxes,
and radio buttons support inactive status.
The Form Inventory feature
When your viewers click the form’s Submit button, the browser sends the contents of the form to a specified server
and script for processing. The most common workflow is to pass information to a CGI script. You’ll need to develop
your custom scripts and work with the system administrator to implement them.
The Form Inventory feature lets you preview how the information will be returned by your form. This is especially
useful if the tasks of graphical form creation and web server integration are accomplished by different persons—for
example, a web author and a system administrator.
To create a form inventory
The top pane of the Form Inventory lists all form elements used—the form inventory. The bottom pane is the Form
Result Preview pane, which displays the code exactly as it will be passed to the script on the server. You can save the
content of both panes as separate text files.
1 Select the Form icon in the document window.
2 In the Form Inspector, click the Inventory button.
3 Select Export for the form inventory and the result preview; then name and save the text files.
To set up an inactive form element
1 Select the form element.
2 Select Disabled in the Inspector.
ADOBE GOLIVE 9 268
User Guide
3 Write a script that dynamically enables the item, and attach the script to the page or to another button.
269
Chapter 15: Site assets, resources, and
collections
Understanding site assets, resources, and collections
About site assets, resources, and collections
Site assets help you maintain a consistency throughout all the pages in your site. You can access the assets from the
site window. The site window provides several sections to help you access, organize, and work with assets, for
example, the various pages, components, resources, and descriptions that comprise the site that you build. Assets
include templates for pages and sites, as well as custom sets of files, text, objects, colors, fonts, and URLs that you can
collect and use on any page in your site. You can also use CSS styles as resources; see “on Cascading stylesheets” on
page 185 and “Formatting text” on page 162 for in-depth discussion of styles. For more information about the
different sections in the site window, see “Working with the site window” on page 99.
You can open panels from the application window menu bar to work with the assets in conjunction with the site and
document windows. You can use the Library panel to store application-wide or site-specific assets, such as snippets,
components, and smart objects. You can display previews of site assets kept in the Library panel in its preview pane
(to display the preview pane, choose Show Preview from the Library panel menu).
Additionally, GoLive includes many preset page template samples and snippets for common web design tasks. Page
template samples may be organized in Assets and in the Web section of the New dialog box. Snippet presets are
organized in the Application-Wide group in the Snippets tab of the Library panel.
See also
“To create a new page in a site” on page 73
Creating page templates
Page templates
You can save any page as a page template and use it to control the layout and appearance of other pages in your site.
Any part of the page template that is not marked as an editable region is automatically locked so that when you or
others on the same site project create new pages from the template, only the editable regions can be changed. Nested
templates enable you to create new locked and editable regions inside the editable region of another template.
You can select a page template sample as a starting point for a page template. Page samples are listed in the Web
section of the New dialog box.
You use color highlighting to show the difference between locked and editable regions. New pages based on a
template are automatically updated whenever you make changes to the template (content in the editable regions is
not affected).
ADOBE GOLIVE 9 270
User Guide
Creating a page template
You use the Template Regions panel to mark regions of the page as editable. You can create two types of editable
regions: paragraphs or inline selections within a paragraph. When a region is marked as an inline text style, you can’t
insert paragraphs in the region—in other words, you can type in the region but you can’t press return to start a new
paragraph.
You can lock or unlock everything in the template that is not marked as an editable region and use the Highlight tab
of the View panel to set the color highlighting for locked and editable regions. (Regardless of whether you lock the
uneditable regions in the template or not, these regions are automatically locked in all pages created from the
template.)
Use Smart Objects for images in your page templates. If you resize a Smart Object in a template, GoLive automatically resizes and optimizes its web image in every page that’s connected to the template.
A
B
Symbols indicate the type of editable region.
A. Inline text region B. Paragraph region
To create a page template
1 Select an area in the page that you want to mark as an editable region. To select an entire paragraph, click inside
it and then click the <p> tag in the markup tree bar at the bottom of the document window.
2 In the Regions tab of the Template Regions panel, click one of the following at the bottom of the panel:
Create New Editable Paragraph Region button
Create New Editable Inline Region button
Creates an editable paragraph region.
Creates an editable inline region.
3 Select the new region listed in the panel and type a new name for it. (Spaces and underscores are not allowed in
the name.)
Note: By default, names of new regions are based on the first few characters in a text selection or its object type. To
automatically name new regions Region 1, Region 2, Region 3, and so on, deselect Selection Defines Region Name by
choosing it from the Template Regions panel menu.
4 Repeat steps 1 through 3 for every region you want to mark as editable.
5 Choose options for working in the editable regions from the Template Regions panel menu:
Auto Selection Selects the entire content of the editable region when you click in it.
Cyclic Tabbing Lets you use the Tab key to cycle through the editable regions on the page.
ADOBE GOLIVE 9 271
User Guide
6 Open the site window and do one of the following to save the page as a template:
• Choose File > Save As, name the template, choose the template file type (.dwt), and click Save.
• Choose File > Save As Template from the document window menu, name the template, and click Save.
Note: Page templates are stored in the site’s folder and appear as assets in the site window or in the Web > [site name]
Templates section of the New dialog box. If you wish, you can create a new folder in Assets to organize templates. Also,
templates appear in the Collections area of the site window.
To set the color highlighting of editable and locked regions
❖ In the Highlight tab of the View panel, expand Highlight Colors, and do any of the following:
• Click the color field for the Locked Regions or Editable Regions, and then select a new color in the Color panel.
• Drag a color slider to adjust the color opacity for Locked Regions or Editable Regions.
• Click the button to the right of the color slider for the Locked Regions or Editable Regions to toggle between color
highlighting the borders or the background fills of these areas.
To see the color highlighting applied to the locked regions in the template, choose Advanced > Template > Lock
Page, or choose Lock Page from the Template Regions panel menu.
A
B
Toggle the button for borders or fills.
A. Highlights background fill of locked regions. B. Highlights borders of locked regions.
To create a new page using a page template
You can create new pages from a page template. Depending on the method you use, GoLive may open the new page
in an untitled.html document window or name the file based on the name of the template (for example, New from
Template1.dwt).
❖ Do one of the following:
• Choose File > New, and then click Web. Click [site name] Templates, choose a template from the list, and click OK.
• Choose File > New from Favorites > Template Page.
ADOBE GOLIVE 9 272
User Guide
• In the site window, double-click the template file.
• Right-click in the site window and choose New > Template Page.
Page templates with locked and editable regions can be used interchangeably with Dreamweaver to create new pages
either in Dreamweaver or GoLive.
Nested page templates
Nested templates enable you to create new locked and editable regions inside the editable region of another template.
Use nested templates for sites that share some elements but also have some variations. For example, you can create a
main template that contains your site's logo and create a nested template from the main template to further define
editable regions for a specific section of a site. Changes you make to the main template propagate to the nested
template, and to the pages generated from the nested template. However, changes you make to the nested template
affect only pages generated from that template.
To create nested page templates
1 Create a main template with locked and editable regions. See “To create a page template” on page 270.
2 Double-click the template in the site window.
3 In the editable regions of the page based on the main template, enter static content and define new editable
regions.
4 Choose File > Save As Template from the document's panel menu. This document is the nested template.
You can create additional layers of templates by generating pages from the nested template and adding static content
and editable regions to the editable regions of the page based on the nested template.
Applying and updating page templates
Applying a page template to existing pages
You can apply a page template to pages that already have content in them. When you apply a page template, GoLive
looks for matching names of marked editable regions in the existing content. If any are found, GoLive automatically
moves the existing content into the regions. If no matches are found, GoLive displays a list of regions in the template
to choose from and the option to overwrite the content by not choosing a specific region.
Using the Template Regions panel, you can quickly prepare existing content for a template by marking new editable
regions of the same type (paragraph or inline) and automatically renaming the regions with matching names from
the template.
To prepare content on a page with matching region names
1 Display the template and the page side by side.
2 Select the content on the page, and then click the Create New Editable Inline Region button
Editable Paragraph Region
in the Template Regions panel.
or the Create New
3 Control-drag (Windows) or Command-drag (Mac OS) from the new region in the panel to the region in the
template that has the name you want to use for the new region. GoLive applies the name of the template’s region to
the new region.
ADOBE GOLIVE 9 273
User Guide
Ctrl-drag or Command-drag to apply the template’s region name “Months” to a new region.
To apply a page template to an existing page
1 Choose Advanced > Template > Apply Template. Then select the template and click Open.
If all editable region names in the page match region names in the template, GoLive moves the page content into the
regions defined in the template. The Select Editable Region dialog box appears if there is content on the page that is
unmarked or marked with nonmatching region names.
2 If the Select Editable Region dialog box appears, do one of the following:
• Select a region in the template to move the content into and click OK.
• Select None to overwrite the content on the page and click OK.
To try out multiple templates with matching region names on existing pages
1 Apply the first template to the pages.
2 Select the second template in the site window or Library panel, and open the In & Out Links panel.
3 Choose Options from the panel menu, select Links To File, and click OK to display all pages that are linked to the
template.
4 Drag the pick whip
in the Links tab of the In & Out Links panel to the second template.
5 Click OK to change the reference.
See also
“Using the In & Out Links panel to view links” on page 110
Updating or detaching a page template
Pages that you create based on a page template remain linked to the template, so that when you make changes to the
template, the pages are automatically updated. You can detach the page template from the pages so there is no longer
a link between them.
To update a page template
1 Double-click the template file in the site window.
ADOBE GOLIVE 9 274
User Guide
2 Make changes to the template’s page layout as desired, and then do any of the following in the Template Regions
panel:
• Click the Create New Editable Inline Region button
or the Create New Editable Paragraph Region button
to apply an editable region to a selection in the layout.
• Select a region name and enter a new name.
• Select a region and click the Undefined Editable Region button
.
Note: You must unmark an editable region before you can delete its content in the document window.
3 Choose File > Save.
4 In the Updating Template dialog box, select the pages that you want to be updated from the modified template,
and click OK.
To detach a page from a page template
❖ Right-click (Windows) or Control-click (Mac OS) in the page and choose Template > Detach from Template from
the context menu.
Components
Components
You use GoLive components in your pages to reference one or more elements stored in a single HTML source file.
Components are useful for buttons, logos, headers, mastheads, or other common navigation elements that you want
to use throughout your site. When you add a component to a page, the component remains linked to its source file
until you detach it.
You can double-click components on the page to open their source files and edit the files. Changes you make to
elements in a component’s source file are updated dynamically in the pages that use the component. Once you’ve
added a component to the page, you can use the Crop Text feature to crop text in components. If you use a
component on multiple pages, you can crop each instance uniquely, creating text content specific to each page
design.
Note: Components cannot contain objects from the Head set in the Objects panel. Also, you should make sure to use the
same character encoding for a component’s source file as the character encoding in the pages that use the component.
(See “To add elements or scripts to the head section” on page 81.)
To create a component source file
1 In a new document window, add the desired content for the component (for example, a layout grid with your
corporate logo and headline).
2 If you’ve changed Script Library settings in Preferences or changed Site Settings to Write Code In Page, specify
that the component source file import the GoLive script library: Click the Show Page Properties icon in the upper
right corner of the document window. In the Page Inspector, click the HTML tab, and then click Component.
3 Open the site window and do one of the following to save the page as a component:
• Choose File > Save As, name the component, choose the component file type (.aglcomp), and click Save.
• Choose File > Save As Component from the document window menu, name the component, and click Save.
ADOBE GOLIVE 9 275
User Guide
Note: Components appear as assets in the site window and also in the Collections area of the site window.
To use a component
❖ Do one of the following:
• Drag the component from the Components tab of the Library panel to the page.
• From the Smart set in the Objects panel, drag the Component icon to the page. Then, in the Component Inspector,
specify the destination of the link by dragging from the pick whip to the component’s source file in the site
window.
To crop text in a component
You can crop text in components you’ve added to web pages, removing characters, words, or paragraphs. If you use
one component on multiple pages, you can crop each instance uniquely, creating text content specific to each page
design.
1 In the Layout Editor, select a component.
2 In the Component Inspector, click the Crop Text button
.
3 From the Crop Text By menu in the Control panel, select a unit: Characters, Words, Paragraphs, or Custom
Breaks.
Note: To use custom breaks, you must first add <agl:custombreak/> in the source code of the component to specify break
locations.
4 In the Layout Editor, drag to select the text you want to retain, or use the Selection Start and Selection End boxes
in the Control panel to specify the first and last unit retained. (For example, to retain “cat” in “scatter,” specify 2 and
4. If you’re using custom breaks, enter 1 in the Selection Start box to retain the text from the beginning of the text
string to the first custom break.)
5 In the Control panel, click the Accept Crop button
button
.)
. (Or, to cancel the crop without applying it, click the Cancel
To edit the component’s source file
1 Double-click the component on the page to open the source file.
2 Make the desired changes and save the source file.
3 Click OK to update all pages that use the component.
To detach a component from its source file
• To detach one component, select the component on the page, choose Advanced > Component > Detach Selected
Component, and then click OK.
• To detach all components on a page, choose Advanced > Component > Detach All Components, and then
click OK.
The detached component becomes part of the page and does not have a dependent link to the source file. Changing
the source file no longer affects the detached component in the page.
ADOBE GOLIVE 9 276
User Guide
Snippets
Snippets
You can copy portions of source code, text, images, and other objects from pages in GoLive or documents in other
applications and add them as snippets, or single objects, to pages. Snippets are similar to components except that
snippets do not remain linked to their source files when you add them to a page.
Collecting and organizing snippets
You collect snippets in the Snippets tab of the Library panel. When you save a site-specific snippet, GoLive adds a
corresponding source file to the site’s folder and displays it in the site-specific area of the Snippets tab in the Library
panel and as an asset in the site window. Snippets are not limited to HTML—for example, you can drag image files
from the site into the Snippets tab of the Library panel.
GoLive includes many preset snippets for common web design tasks. These presets are organized within a folder
structure in the application-wide group in the Snippets tab of the Library panel.
To create a snippet
1 Open a site.
2 Select the text, objects, or source code in GoLive or another application. You can also select a snippet from another
site.
To select paragraph formatting for text in the Layout Editor, select the paragraph or heading element in the markup
tree bar at the bottom of the document window.
3 Drag the selection into the application-wide or site-specific area of the Snippets tab in the Library panel.
Note: Site-specific snippets are stored in the site’s folder and appear in the Snippets tab in the Library panel and as an
asset in the site window.
4 To name the snippet, select it in the Snippets tab in the Library panel and type a new name.
Using snippets on your pages
You can add snippets directly from the Snippets tab of the Library panel to the Layout Editor by dragging them into
the Layout Editor.
You can use the In & Out Links panel to display snippets containing placeholders for other files (such as image files).
The In & Out Links panel shows the resource links to the files. If the source file is moved, GoLive displays a dialog
box so you can update the link.
See also
“Using the In & Out Links panel to view links” on page 110
To add a snippet to a page
❖ Drag the snippet from the Snippets tab in the Library panel to the Layout Editor.
ADOBE GOLIVE 9 277
User Guide
To edit a snippet’s source file
❖ Double-click the file in the Snippets tab of the Library panel, modify the contents using either the Layout Editor
or the Source Code Editor, and then choose File > Save.
Editing the contents of a snippet’s source file does not affect any pages that already use the snippet.
Site colors
Site colors
You can collect and organize colors for a site and apply them to text and objects on pages in the site using the
Swatches area in the Resources of the site window in conjunction with the Color and Swatches panels. Site colors
remain linked to the pages on which they’re used, so you can change a site color and update any page that uses the
color. The Swatches area in the Resources of the site window lets you list site colors individually or in groups. For
each color, the list includes a name that you assign, the HTML color name and value, whether the color is web-safe
or not, and whether the color has been used on a page in the site. The colors collected in the Color panel also appear
in the Site Colors swatch library and the Swatches area in the Resources of the site window.
After you use a site color on a page, you can update the list in the site window to show that the color has been used.
To populate the Swatches area, right-click the site window and choose Get Swatches Used.
Note: You can visualize how some resources are used for specific pages by viewing the In & Out Links panel.
See also
“To use the Swatches panel or a swatch library panel” on page 94
“Adding used items to and removing unused items from the site window” on page 105
“Working with files and folders in the site window” on page 102
To add site colors
1 Do one of the following:
• Select colored text in the document window and it appears in the Color panel. If you select text with multiple
colors assigned to it, each color is added to the list of site colors.
• Select a site color in the Swatches area of Resources from another site window and drag it to the Swatches area of
Resources in the site window in which you want that color.
• In the Swatches area of Resources in the site window, select the Create a new swatch icon at the top of the window.
Name the swatch and use the eye-dropper tool to define the color.
• Select the Swatches area of Resources in the site window and then right-click in the list area of the window and
select Get Swatches Used. GoLive retrieves all the colors used on pages in the site and lists them in the Swatches
area of Resources in the site window.
2 Rename the new site colors by entering the new names in the Color panel or the Name box in the Color Inspector.
To apply a site color to text or objects on a page
1 Select the text or objects to be colored.
ADOBE GOLIVE 9 278
User Guide
2 Do one of the following:
• Select a site color from the Site Colors swatch library.
• Click the color field in the Inspector, and then select a color from the Site Colors swatch library.
• Drag the site color from the Color panel to the selection on the page.
See also
“To use the Swatches panel or a swatch library panel” on page 94
To change a site color and update pages that use it
1 Select the site color, click the color field in the Color Inspector and select a new color from the Swatches or Color
panel.
2 In the Change Link dialog box, select the pages that you want to update, and click OK.
Note: The Change Link dialog box displays only pages that are closed.
To organize site colors in group folders
1 Open the site window to the Swatches area of Resources.
2 Select the Create a new group icon
the group folder as desired.
at the top of the window to create a color resource group and then name
3 Drag the colors into the group folder(s) as desired.
Font sets
Collecting font sets for a site
You can collect and name font sets for specific sites, and share them with others working on the same site project on
different computers. A font set applied to text provides the web browser with a choice of fonts to use for displaying
the text.
Site font sets remain linked to the pages on which they’re used, so you can change a font set and update any page that
uses it. Font sets are organized in the Resources area of the site window.
To populate the Font Sets area, right-click the site window and choose Get Font Sets Used.
See also
“Using fonts in web pages” on page 172
To add a font set to a site
1 Choose Resources > Font Sets in the site window.
2 Do one of the following:
• Drag text that uses the font set from a page into the site window.
ADOBE GOLIVE 9 279
User Guide
• Select the Font Sets area of Resources in the site window and then right-click in the list area of the window and
select Get Fonts Used. GoLive retrieves all the font sets used by pages in the site and lists them in the Font Sets
area of Resources in the site window.
• Drag a font set from another site window into the Fonts Sets area of Resources in the site window.
• Choose the Create new font sets group icon
at the top of the Fonts Sets area of Resources in the site window
and use the Font Set Inspector to add fonts to the set.
To name a site font set
❖ Do one of the following:
• Enter a name in the Fonts Sets area of Resources in the site window.
• Enter a name in the Name box in the Font Set Inspector (located in the bottom left corner of the site window).
To add, reorder, or delete fonts in a site font set
1 Select the font set in the Fonts Sets area of Resources in the site window.
2 Do any of the following:
• Click the Create new font sets group button
or the Create new font set button
and choose a font or font
family from the pop-up menu.
• Select a font and drag and drop it to move it up or down in the list.
• Select a font and drag it to the Delete icon
to remove the font from the list.
To use a site font set
1 Select the text on the page.
2 Drag the font set from the Fonts Sets area of Resources in the site window to the selected text.
Note: If you drag a font set from the Site into a selection in a layout page, CSS is generated for it.
To change a site font set and update pages that use it
1 Select the font set in the Fonts Sets area of Resources in the site window.
2 Add, reorder, or delete fonts in the font set in the Font Set Inspector.
3 In the Change Link dialog box, select the pages that you want to update, and click OK.
Note: The Change Link dialog box displays only pages that are closed.
To organize font sets in group folders
1 Choose the Create New Font Set Group icon
in the Fonts Sets area of Resources in the site window.
2 Name the group folder as desired.
3 In the Fonts Sets area of Resources in the site window drag font sets into the group folder.
ADOBE GOLIVE 9 280
User Guide
Site URLs and e-mail addresses
Site URLs and e-mail addresses
You can use site URLs, including e-mail addresses, on multiple web pages without having to type them each time you
use them. You collect site URLs in the Hyperlinks area of Resources in the site window. You can get the URLs for
your site collection by importing them from your web browser’s favorite URLs, copying them from other pages or
sites, or entering them in the site window.
If you need to change the value of a site URL that you’ve used on several pages, you can change it in the Resources
area of the site window. GoLive then updates all the pages that use the site URL.
To populate the Hyperlinks area, right-click the site window and choose Get Hyperlinks Used.
A
B
C
Use the External Group Inspector to specify type of folder.
A. A site e-mail address B. A site URL C. Four types of group folders
Note: By default, GoLive treats URLs containing the “@” symbol as e-mail addresses and adds “mailto:” to the URL text
box in the Inspector. To avoid this behavior, deselect the Auto Add “Mailto:” To Addresses option in the URL Handling
area of the site Settings or Preferences dialog box.
See also
“About preferences” on page 20
To add a URL or e-mail address to the site
❖ Do one of the following:
• Select Resources and then Hyperlinks in the site window. Right-click anywhere in the Hyperlinks list and choose
Get Hyperlinks Used. GoLive retrieves all the URL and e-mail addresses referenced on pages in the site and lists
them in the Hyperliks list.
• Select the URL in a web browser window and drag it (or the icon to its left) to the Hyperlinks list in the site
window.
ADOBE GOLIVE 9 281
User Guide
• Choose File > Import > Favorites As Site Hyperlinks. Then select a Bookmarks, Address Book, Nickname, or
Favorites file from a web browser or Eudora Pro, and click Open. If the file contains multiple URLs or e-mail
addresses, GoLive imports them as URL or Address groups.
• Drag a site URL or e-mail address from the Hyperlinks list of another site window to the Hyperlinks list in the site
window.
To rename or edit a site URL or e-mail address
1 Select the site URL or e-mail address in the Hyperlinks list.
2 Do any of the following:
• Type a new name in the Hyperlinks list in the site window.
• Click Edit on the Info tab in the lower left area of the site window.
3 If the Change Links dialog box appears, click OK to confirm the new URL or e-mail address and update all pages
in the site that use it. (If you want to exclude a page from updating, deselect it before clicking OK.)
See also
“Editing links and adding query parameters to links” on page 88
To organize URLs and e-mail addresses in group folders
1 Right-click in the Hyperlinks list and choose New Folder.
2 Name the group folder as desired.
3 Drag URLs or e-mail addresses into the group folder.
To use a site URL or e-mail address on a page
1 Select the text or object on the page that you want to use as a link.
2 Do one of the following:
• Drag the site URL or e-mail address from the site window’s Hyperlinks list to the selection in the page.
• In the Inspector, specify the site URL or e-mail address as the destination in the URL text box.
See also
“About links” on page 85
Collections
Collections
A collection is a custom set of files that you select. For example, you can collect groups of files that you use frequently
in a site. You can perform various file-management tasks on the files in a collection, such as deleting or duplicating
one or more files. Because you can select all of the files in a collection by selecting the collection, you can perform
these tasks quickly.
ADOBE GOLIVE 9 282
User Guide
You can define a static collection by dragging files from the Assets area of the site window to the Collections area or
by using one of GoLive’s predefined collections.
Files in collections are bound to their originals in the Assets list. If you delete a file in a collection, GoLive asks if you
want to delete the collection file, or the collection file and the original.
To create a static collection by dragging files
1 Open a site.
2 In the Collections area of the site window, choose Site > Add Collection, then choose the type of collection to add.
3 Type a name for the new collection folder in the Collections area of the site window or the Name text box in the
Collection Inspector.
4 Drag files or folders from the Assets area of the site window to the new folder under Collections.
To reveal the original collection files in a site
❖ Select the collection file and choose Open > Reveal In Site from the context menu.
To move or delete collection files
❖ Select the collection file and do one of the following:
• To move the file, drag or copy it to another folder in the Collections list on the left side of the site window.
• To delete the file, click the Delete Selected Item button
on the menu bar on the site window, then click Remove
Linked Item to remove only the collection file, or click Remove Both to remove both the collection file and its
original.
283
Chapter 16: Publishing websites
Preparing to publish a site
Publishing a site
For the public to view your website, you must first upload, or publish it to an FTP or HTTP (if you’re using WebDAV)
server that hosts your site files. You can publish your site directly from Adobe GoLive using either of two built-in
publish server clients: the Publish Server area or the Assets area of the site window. Before you publish your site,
make sure that it is clean and free of errors. You may also need to flatten the script library.
Choose Edit > Check Syntax to check for errors and warnings in the syntax of selected files.
Each subsequent time that you publish your site from GoLive by using a modified-item or synchronized upload, any
files that you have changed or added in GoLive will be automatically updated on the published site.
Note: Though rarely necessary, you may also need to export your site before you publish it to comply with certain server
policies. Consult your server administrator if you are having trouble publishing your site in the normal manner.
See also
“To specify options for cleaning up a site” on page 106
“Flattening the script library” on page 328
To set up Internet access preferences
Before you can use GoLive to connect to a publish server, you may need to customize the network settings you use
to access the Internet. For example, your Internet service provider (ISP) may require you to use a proxy server for
security reasons or use passive mode to work with a firewall that forbids incoming connections.
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 Click the Internet icon
.
3 Select Internet options as follows:
• (Mac OS) If you want to use your computer’s system proxy settings for GoLive Internet access, click the Import
Now button, and then select Always.
• If you need to use an FTP proxy or HTTP proxy, select Use FTP Proxy or Use HTTP Proxy and provide a host
name and port number. For information, ask your server administrator.
Note: Select Use Proxy when you set up a publish server to ensure that GoLive uses the proxy settings you configured in
Internet preferences. For more information about setting up a publish server, see “To set up access to a publish server”
on page 285.
• (Mac OS) If you use the system Keychain feature for storing passwords, select the Use System Keychain For
Passwords option.
• (Mac OS) Keep the Use ISO 8859-1 Translation option selected to use the Latin 1 character encoding set, which
encompasses the majority of Western European languages.
ADOBE GOLIVE 9 284
User Guide
• If you need to connect to an FTP server in passive mode, select Use Passive Mode.
Note: If you need to connect in passive mode, be sure to select Use Passive Mode in the Advanced FTP Options dialog
box when you set up an FTP publish server. For more information about setting up a publish server, see “To set up access
to a publish server” on page 285.
• To specify how long GoLive will try to connect to a publish server before cancelling the connection, enter values
in the FTP Timeout and HTTP Timeout boxes.
• If you want GoLive to display details after an upload, download, or synchronization, select Ask For Publish Server
Report.
4 Click OK.
About GoLive publish server clients
To publish your site, GoLive connects to an FTP server using File Transfer Protocol (FTP), and connects to a
WebDAV server using HyperText Transfer Protocol (HTTP). GoLive can also connect to a folder on your local file
system or network using the File protocol. To connect to a publish server, GoLive uses either of its two publish server
clients–the Publish Server area or the Assets area of the site window. Both clients list the files and folders in the
current publish server directory along with file size, modification date, and file type.
Note: The Info tab is available in the lower left corner of the site window when you select a file or folder in the Publish
Server area of the site window. You can review this tab for further information about individual files and folders and
you can also change rights in this area of the site window.
Depending on your circumstances, determine the appropriate publish server client according to the following
descriptions.
The Publish Server area of the site window
Use the Publish Server area of the site window for uploading and maintaining a one-to-one synchronized
relationship between local and remote files. The Publish Server area gives you access to commands that permit
modified and synchronized uploading and downloading, as well as one-step uploading. You can also specify a
primary server, which targets the server for the site unless you otherwise change it, and you can organize servers by
adding them to a favorites list. By default, all servers that you set up for the site appear in the Publish Server area of
the site window.
Assets area of the site window
Use the Assets area of the site window to view the list the files and folders in the current publish server directory
along with file size, modification date, and file type. You can choose the Publish button in Assets to synchronize the
files with the publish server.
The file browser
You can also use the file browser to quickly inspect files on a publish server, or to update a few files on your published
site without opening a site window. Open the file browser by selecting File > Publish Server > Connect to from the
application window menu bar.
Note: Before you set up access, make sure that you have TCP/IP networking set up properly on your computer. Consult
your computer’s Help for details.
ADOBE GOLIVE 9 285
User Guide
To set up access to a publish server
1 To start, do one of the following:
• View the Publish Server area of the site window and, if necessary, click the New Publish Server button.
• Choose Site > Publish > Add Server.
2 Type a name in the Nickname text box. Nicknames prevent confusion if you add more servers to the available
servers list.
3 Choose a protocol from the Protocol menu:
File Publishes files to folders on your local file system or on your network.
FTP Transfers files via FTP to a publish server.
HTTP Transfers WebDAV files to a WebDAV server.
4 If you chose File from the Protocol menu, browse or type the path to the directory to which you want to transfer
files, and then click OK.
5 If you chose FTP or HTTP from the Protocol menu, do all of the following, using values provided by the publish
server administrator, and then click OK:
• Type an address in the Server text box (don’t include the protocol).
• Type a path name in the Directory text box (click the Browse button to browse to your directory on the server). If
your access privileges on an FTP server are limited to your personal folder, you may be able to leave the text box
blank.
• Type a user ID in the Username text box.
• Type a password in the Password text box. Select Save if you want GoLive to save the password.
6 If necessary, click Advanced to set FTP or HTTP options:
• Choose a Security option. For information about security options, check with your server administrator. If you’re
using FTP and you choose SSH, you can select Use Public Key Authentication and enter a private key and
password.
• (FTP only) Select Use Passive Mode if the FTP server is protected by a firewall.
• (FTP only) Keep the Use ISO 8859-1 Translation option (Mac OS only) selected to use the Latin 1 character
encoding set, which encompasses the majority of Western European languages.
• Select Use Standard Framework to use the updated framework GoLive uses to connect to FTP or HTTP servers.
This framework enables SSL (Secure Socket Layer) connections.
7 If you want this server to be the default server for your site, select the Use as Primary Server option.
8 To organize the server within an application-wide list of servers, do any of the following:
• Click Add To Favorites to add the server that you are setting up to your favorites list.
• Choose File > Server > Favorites from the application window menu bar and add a favorite server.
• Choose Site > Settings > Publish Server from the application window menu bar, add a server, and then click the
Add to Favorites button.
ADOBE GOLIVE 9 286
User Guide
Uploading and downloading files
Connecting to a publish server
You connect to a publish server to upload or download a site or to perform any file transfer operation. Before you
can connect to a publish server for the first time, you must set up access to it. GoLive lets you store access to more
than one publish server. If GoLive can’t connect to the publish server, the Log window displays errors regarding the
failed connection. You can use this information to troubleshoot the connection with the publish server administrator.
You can connect to a publish server by using either the Publish Server area of the site window or the file browser:
• To transfer entire sites or to synchronize local files with published files, connect to the server from the site window
Publish Server section.
• To quickly inspect files on a publish server or update a few files on your published site without opening a site
window, connect to a publish server by using the file browser.
To have GoLive display status messages while you’re connecting to a publish server, select Status Messages in the Log
preferences.
To connect to a publish server
Use the Publish Server area of the site window to transfer entire sites or to synchronize local files with published files.
1 Open a site.
2 View the Publish Server area of the site window, or choose Site > Publish > Connect to Publish Server. If you are
in the Assets area of the site window it displays a split view, showing the local files on the left and the server files on
the right.
3 (Optional) If you have multiple servers available for connections, you can change to another one at any time by
right-clicking (Windows) or Control-clicking (Mac OS) in the site window, choosing Primary Server, and then
choosing another server.
If you receive the message “Can’t connect to server [servername]. Reason: Cannot connect to [protocol]”, check your
proxy settings, or review connection errors in the Log window (choose File > Log). Information on proxy settings and
connection errors is available in the support knowledgebase on the Adobe website.
See also
“To transfer files” on page 291
Types of site uploads
For a first-time upload, GoLive copies the entire site to the server. Subsequent uploads of the same site will update
the existing server-based site to reflect any changes that you may have made to the local files. However, you can also
update the entire site by choosing the Update All option when publishing the site. You can perform three types of
uploads to the server:
Modified-item Copies only new or updated site files to the publish server.
Synchronizing Compares the local modification time with the server modification time to decide whether to
upload, download, or delete a file. You can confirm synchronization actions assigned to individual files and assign a
different synchronization action to a file before uploading.
ADOBE GOLIVE 9 287
User Guide
Selection Uploads only the files that you select in the site window. This method is useful if, for example, you updated
multiple files using one of the other update methods and experienced a crash or an update failure. You can use the
selection method to upload one or a few files at a time to possibly locate the problematic file.
When GoLive uploads, downloads, or synchronizes files, it displays details regarding the transfer. You can use this
information to troubleshoot failed transfers with the publish server administrator.
If your site or system crashes, synchronizing your files to the server and then synchronizing the modification times is
recommended. To synchronize modicifation times after you have synchronized the files, choose Sync Modification
Times from the context menu in the Publish Server area of the site window.
Upload modification times
When uploading files to a publish server, GoLive caches the local modification time for any file you transfer to the
server. When an upload is successfully finished, GoLive gets a file listing with the time of the file modifications on
the server. GoLive stores both modification times in the site file and in a reference file so GoLive can distinguish
newer files from older ones. This enables GoLive to perform modified-item uploads and synchronizations.
In the event that the modification times for the local and server files become out of sync because you used a thirdparty file transfer client or because an upload was unsuccessful, GoLive lets you manually synchronize the modification times on both the server and local files without transferring any data.
When transferring files, you might receive an FTP reply code that indicates the state of the server you’re connecting
to. Search the Internet to learn more about FTP reply codes.
See also
“Synchronizing files without transferring data” on page 290
To upload site files to a publish server
You can upload selected files, upload all files, or use the modified-item method for both first-time uploads and
subsequent updates.
1 Open the site and connect to the server. (See “To set up access to a publish server” on page 285.)
2 Do one of the following:
• To upload modified files, right-click in the site window list of the local files and choose Publish Server > Upload
Modified Files (Windows), or press Control key + mouseclick (Mac), or choose Site > Publish > Upload Modified
Files. Review the files to be uploaded in the Upload dialog box, and then click OK.
• To upload selected files, select the folder or individual files to upload in the site window, right-click on the
selection, and choose Publish Server > Upload Selection or choose Site > Publish > Upload Selection.
• To upload all files, right-click in the site window list of the local files and choose Publish Server > Upload All or
choose Site > Publish > Upload All. Review the files to be uploaded in the Upload dialog, and then click OK.
• To manually upload selected files, drag the desired file or folder from the local files list in the site window to the
desired location in the Publish Server.
To reveal a file published to a server that is related to a local file, right-click on the local file in the Assets and choose
Publish Server > Reveal on Server. If you are using the split view, the related file is selected on the left; if you are not
using the split view, view the Publish Server area of the site window to locate the related file that is also selected.
ADOBE GOLIVE 9 288
User Guide
To perform a synchronized upload for an entire site
Once you’ve uploaded a site, you can synchronize it to ensure that the local site and the site on the server match. (You
can also use the synchronize feature for a first-time upload.)
1 Open the site and connect to the server.
2 Do one of the following:
• Choose Site > Publish > Synchronize All.
• Click the Publish button on the menu bar in the Assets area of the site window.
The Synchronize dialog box indicates which files will be uploaded to the server, which files will be downloaded to
the local copy of the site. This option automatically connects to the server if you have not connected already.
• Select Delete Remote Files Not in Local Site from the Synchronize dialog box.
3 Do any of the following:
• To display files that won’t be synchronized, select Show Skipped Items.
• To view the files as they exist on the server in folders, select Show Folder Structure from the pop-up menu in the
Synchronize dialog box.
• To exclude a synchronization action, deselect it in the Action section of the Synchronize dialog box. For example,
select skip to prevent the file from being synchronized.
4 Confirm the synchronization actions assigned to individual files. If you want to assign a different synchronization
action to a file, select the file and click the lower right corner of the Action icon displayed in the column next to the
file to choose a synchronization option:
Upload Upload the file to the server.
Download Download the file from the server to the local site.
Skip Prevents the file from being synchronized.
Select All Selects all files in the Synchronize dialog box.
5 If the Synchronization Conflict icon
appears by a file name, the file has been changed on the server and the
local site. Assign a synchronization action to the file so that it is not excluded from the synchronization. If you want
to upload the file, set the file’s publish status to Always or If Referenced (to upload it only if the file is referenced in
the site) in the Info tab in the site window.
6 Select Delete Remote Files Not in Local Site to erase files residing on the publish server that no longer exist on the
local site.
Note: To automatically delete files that exist on the server but not in your local site, select Delete Remote Files Not in
Local Site in the Perform Actions section of the Synchronization dialog box.
7 Click OK to start the synchronization process.
See also
“To set up access to a publish server” on page 285
To set upload options
Uploads are carried out according to options that you can change as necessary.
ADOBE GOLIVE 9 289
User Guide
Note: You should not modify files that are stripped of GoLive’s HTML coding by downloading the pages from the server
and editing them (instead, use the original file).
1 Do one of the following:
• To select options for the active site only, choose Site > Settings, then click Upload/Export and then select Site
Specific Settings.
• To select options for all sites, choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), expand
Site and click Upload/Export.
2 Select upload options as follows:
• To use Publish settings for individual files or folders, select an Honor Publish State Of option in the Publish States
section. To override individual publish state settings for files and folders, deselect the respective options.
• To upload only those files that are part of the site hierarchy, select Linked Files Only. Selecting Linked Files Only
automatically deselects the Honor Publish State Of Folders and Files options.
3 To change Cleanups options, click Edit Strip Options, configure the following settings, and then click OK:
Strip HTML Code For Adobe GoLive Elements Removes GoLive tags and attributes that let you edit your animations,
scripted actions, and so on.
Strip HTML Code For Comments Deletes the HTML Comments that you create when using the HTML Comments
feature.
Strip HTML Code For Spaces Deletes spaces within the HTML code.
Strip CSS Code For Adobe GoLive Properties Removes adbe-XXX type attributes in the CSS, which are generated
when using the Layout Grid feature.
Strip CSS Code For Adobe GoLive Comments Removes CSS Comments created only by GoLive, which are generated
when using features such as paragraph styles.
Strip CSS Code For Adobe GoLive Folder Removes CSS Comments used by GoLive to manage and organize CSS
styles.
Strip GoLive Data From Media Files Checks all GIF, JPEG, PNG, SWF, and SVG files for Smart Object data and
removes the data to make the files smaller.
Flatten Script Library Scans all files that use the GoLive JavaScript library and rewrites the external files so they
contain only the exact JavaScript code needed for the site.
Rewrite PDF Files Scans all PDF files in the site and optimizes them for quicker download and browser display.
Note: The Rewrite PDF Files and Strip GoLive Data From Media Files options are selected by default. You might find it
helpful to also select the Strip HTML Code for Adobe GoLive Elements option to streamline the download.
See also
“Assigning publish states to files and folders” on page 115
“Flattening the script library” on page 328
To update a site by downloading it
You can update local site files with files on a publish server by downloading them. Use this method if you make
changes at the server-based site that need to be reflected at the local site. You can also perform a synchronization to
download files from the publish server to the local site.
ADOBE GOLIVE 9 290
User Guide
Note: If you remove GoLive tags and attributes from files by selecting Strip GoLive Data From Media Files or Strip
HTML Code For Adobe GoLive Elements when you set upload options, upload the files to a server, and then download
them to your local site, GoLive overwrites your local files with the versions that don’t contain GoLive tags and attributes.
This may cause unexpected results. Use care when replacing local files with files from the server.
1 Open the site and connect to the publish server.
2 Choose Site > Publish, and choose one of the following options:
Download Selection Copies your selection of files from the server. They are useful for the same reasons that
selection uploads are useful.
Download Newer Files Copies only site files with modification times on the server that are newer than the modification times of the corresponding local files. (If a local file has a newer modification time, GoLive won't download
the corresponding server file.)
Download All Copies all files from the server.
See also
“To set up access to a publish server” on page 285
Synchronizing files without transferring data
You must keep both local and server files synchronized for GoLive to perform synchronized uploads and newer
downloads. GoLive lets you manually synchronize the modification times for your local site files and server files
without transferring data. Synchronizing manually is useful when the modification times of the local and the server
files are out of sync even though you know that the files are identical.
Files can get out of synchronization in a variety of ways. For instance, if you use a file transfer client other than
GoLive to upload the file, and later try to synchronize the file from within GoLive, your local file appears older than
the server file. The local file appears older because GoLive still refers to the timestamps it created the last time it
uploaded the file. To keep the files synchronized, GoLive will try to download the server file that appears to be newer.
Such downloads are unnecessary and might take a long time if multiple files are involved.
Synchronizing modification times for an entire site changes the modification times of all files, including any that
have been edited but not yet uploaded to the server. These files will not be uploaded by GoLive the next time you do
a synchronized upload because the modification times of the local files will match those on the server. If an upload
gets interrupted, make sure you don’t apply the Sync Modification Times command to files that weren’t uploaded.
To manually synchronize modification times without transferring files
❖ With the site open, right-click in the site window Assets area and choose Publish Server > Sync Modification
Times.
Downloading a web page
You can download a web page, complete with all its media and references, from any website that you can visit with a
web browser. You don’t need FTP access to the directories containing the page and its images. The page you
download opens in a GoLive document window when the download is complete.
The page is downloaded to a location you specify, and its media are placed in a folder alongside the page. This folder
structure might not reflect the relative locations of the files on the original website. Certain media files or media
referenced by scripting languages like JavaScript may not be downloaded.
ADOBE GOLIVE 9 291
User Guide
Note: You can also download web pages by viewing the Hyperlinks area of Resources in the site window. Right-click the
page you want to download and select Download from the context menu.
See also
“About GoLive sites” on page 64
“Importing sites from FTP or HTTP servers” on page 67
To download a web page
1 Make sure that you have a live web connection.
2 Choose File > Server > Download Page.
3 Enter the URL for the page.
4 Click Save As, specify a location, then click Save.
Because the page you’ll download probably consists of several files, consider creating a new site from existing content
using the site wizard.
To transfer files
You can use the file browser for any file transfer purpose, not just for transferring website files. You can open multiple
instances of the file browser and even drag files between them.
Note: To upload an entire site, or to perform an update so that the local site and the server-based site are synchronized,
use an Upload command from the Site > Publish Server submenu.
1 Choose File > Server > Connect To.
2 In the Nickname menu, select a server, or select New Server to set up a new server.
3 Click Connect.
4 To upload a file or folder, drag it from the site window Assets list or from the desktop to the file browser.
5 To download a file or folder, do one of the following:
• Drag it from the file browser to the site window Assets list.
• (Mac OS only) Drag it from the file browser to the desktop.
• Right-click (Windows) or Control-click (Mac OS) it, choose Download Files, and select a target folder for
download.
See also
“To set up access to a publish server” on page 285
Exporting sites
Exporting a site
Exporting a site is adapting its folder structure and other details to a particular publish server—the one you plan to
upload it to. Exporting is distinct from uploading; you export to a local drive as a separate step before uploading.
ADOBE GOLIVE 9 292
User Guide
Note: Few web servers require that GoLive sites be exported. Consult your server administrator for information before
beginning the export process.
To select site export options
• To select options for the active site only, choose Site > Settings, click Upload/Export, and select Site Specific
Settings.
• To select options for all sites, choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), expand
Site, and click Upload/Export.
Site export options
The following options are available for site export:
Honor Publish State Of Files/Folders Specifies whether to override individual publish state settings for files and
folders, deselect the respective options.
Linked Files Only Specifies whether to upload only those files that are part of the site hierarchy.
As In Site Maps the hierarchy of groups, pages, and resources within your site window to the resulting root folder.
Separate Pages And Media Creates a root folder that contains two subfolders for HTML pages and media, respec-
tively.
Flat Creates a root folder that contains all HTML pages and media, but no subfolders.
Folder Name Entries apply to the Separate Pages And Media option. For files that are not in the site, the Folder Name
entry applies only when you select the Export Linked Files That Are Not Part Of This Site option.
Export Linked Files That Are Not Part Of The Site Specifies that the export will include orphan files.
Show Options Before Export Displays these Export options at the time of each export.
Cleanups Click Edit Strip Options to set the following cleanup options:
Strip HTML Code For Select Commentsor Spacesto streamline the source code without affecting the appearance of
pages. Select Comments to remove HTML Comments that you created when using the HTML Comments feature.
Select Adobe GoLive Elements to remove GoLive tags and attributes that let you edit your animations, scripted
actions, and so on.
Strip CSS Code For Removes specific CSS coding generated by GoLive when working with certain features. You can
choose to remove GoLive Properties, which are generated when using features such as the Layout Grid, or GoLive
Comments, which are generated when using features such as paragraph styles, or GoLive Folder, which is used to
manage and organize CSS styles in folders.
Strip GoLive Data From Media Files Checks all GIF, JPEG, PNG, SWF, and SVG files for data that has been added to
those files to enable the Smart Object workflow. This data is only added to the target files of Smart Objects. The
option then removes the data to make the files smaller.
Flatten Script Library Scans all files that use the GoLive JavaScript library and rewrites the external files so they
contain only the exact JavaScript needed for the site. This option is recommended.
Rewrite PDF Files Scans all PDF files that are part of the site and optimizes them for quicker upload.
Note: The Rewrite PDF Files and Strip GoLive Data From Media Files options are selected by default. You might find it
helpful to also select the Strip HTML Code for Adobe GoLive Elements option to streamline the download.
ADOBE GOLIVE 9 293
User Guide
Note: You should not modify files that are stripped of GoLive’s HTML coding by downloading the pages from the server
and editing them (instead, edit the original file).
See also
“Flattening the script library” on page 328
“Assigning publish states to files and folders” on page 115
To export a site to a local drive
1 Open the site.
2 Choose File > Export > Site.
3 If the Export Site Options dialog box appears, review the options and make changes as needed. The changes you
make apply to the current export only.
4 Click Export. By default, the settings in the Export Site Options dialog are identical to those in the Site Settings
under Upload/Export.
5 Specify a location on a local drive for the exported root folder of the site.
6 Click Save.
7 Click Yes or No. Clicking Yes displays information about the export: the files exported, the files not exported and
the reasons they weren’t exported, and the export options used.
Note: If you want the Export Site Options dialog box to appear each time you export a site, choose Edit > Preferences
(Windows) or GoLive > Preferences (Mac OS), expand the Site settings, click Upload/Export and make sure the Show
Options Before Export Dialog option is selected.
To upload a site you have exported to a local drive
❖ Drag the exported root folder or its contents to its destination folder in the file browser window.
You cannot use an Upload command from the Site > Publish submenu for this operation.
Drag the contents of the folder if dragging the folder itself would create an unnecessary extra folder level on the server.
See also
“To transfer files” on page 291
Setting up distributed websites
About distributed websites
Distributed websites are spread across several servers, or subsites. If you plan to distribute your website, you can still
develop and test the site as a whole on your local file system. To do so, you need to set up the distributed site with
URL mappings between local addresses and server addresses.
The advantage of URL mappings is that you can easily manage multiple sites without having to rewrite URLs or
duplicate files. The sites may share many of the same files and may even link to each other.
ADOBE GOLIVE 9 294
User Guide
To set up a distributed website
1 Create a separate site document for each server.
2 Keep index.html as the file name for home page of the site that is the entry point of your distributed site.
3 Rename the home page file name for all the other subsites. Renaming avoids duplicate file names in your
distributed site.
4 Add pages and links for all the subsites, linking between subsites as you would if you were linking to another local
site. For example, a link from a page in the Soccer subsite to the Putters.html page in the Golf subsite might be
addressed file:////Golf/Putters.html. Links between subsites can use either relative or full paths.
5 Make the site window containing the index.html home page active.
6 Choose Site > Settings.
7 Click URL Mappings, and then click the Create New Item button
.
8 Choose Root Of This Site from the menu next to the Map Local Folder or Remote Server box.
The Root Of This Site option displays the path to the root folder corresponding to the current site document. When
you provide an external link to an address on the server in the next step, you can probably preserve some of this path.
9 Edit the path so it contains the URL to the location this root folder will have on the server.
Note: You can also use URL Mappings to map a local folder if you want to conceal your site’s folder hierarchy.
10 Choose Root Of This Site from the With Local Folder menu.
This option maps the current location of the root folder to its future location on the server.
11 Click OK to save the site settings, or repeat steps 4 - 10 for each of the site documents you renamed in step 3.
Note: If you plan to use the Clean Up Site command with any of the subsites you have created, first deselect Add Used
Files and Add Used External References in the Clean Up Site Options dialog box. Otherwise, using the Clean Up Site
command will destroy the structure of the distributed site.
To test a distributed site in a browser before uploading
1 View a page in any of the root folders that contains a link that references a page in another root folder.
2 Move the cursor over the link. The link should contain the local path to the page.
3 Repeat these steps for every link referencing a page in another root folder.
Managing websites with WebDAV
About WebDAV
GoLive supports a server technology known as Web Distributed Authoring and Versioning (WebDAV). WebDAV is
a standard (RFC 2518). This technology adds extensions to the HTTP protocol that let authors safely work on a
website in a workgroup environment. Using WebDAV, you can lock files so that documents will not be accidentally
overwritten or updates lost, as well as download and upload files, obtain information about files, and keep a local site
and server site fully synchronized. You can find more information and the latest news about WebDAV at
www.webdav.org.
ADOBE GOLIVE 9 295
User Guide
To use WebDAV, you must have connection to a server with WebDAV capability, which can be any of the following:
• Adobe Version Cue Workspace (a feature of the Adobe Creative Suite)
• Mac OS X and Mac OS X Server (with mod_dav installed)
• Microsoft IIS 5 (included with Windows 2000) and Microsoft IIS 6
• Microsoft Exchange Server
• Apache (with mod_dav module installed)
• Novell NetWare 6.0
• Tomcat (with Jakarta Slide)
• Tamino WebDAV Server
• Jigsaw
• Python WebDAV Server
A web team can work on a WebDAV production server in house, and then use the GoLive Publish Server feature to
upload the site to a public server without WebDAV capability.
Locking files
The WebDAV protocol supports two kinds of locks—exclusive and shared:
• An exclusive lock set by someone else is indicated by the padlock icon
. Only the user who locked the file can
edit it. Other users have read-only access to the file.
• An exclusive lock assigned to you is indicated by the pencil icon
. This indicates that only you can edit the file.
• A shared lock assigned to other users is indicated by the shared lock icon
. Unlike an exclusive lock, the shared
lock simply alerts people that several individuals are editing the same file. It does not actually lock the file. People
without a shared lock can only read the document.
• A shared lock you participate in is indicated by a variation of the shared lock icon
.
Note: Shared locking is not supported by all servers.
To lock and unlock files and folders
1 In the Publish Server area of the site window, select the file or files that you want to lock.
2 Right-click (Windows) or Control-click (Mac OS) the selected files or folders and do one of the following:
• To lock a file or selection of files, choose Lock or Shared Lock from the context menu, depending on whether you
want an exclusive or shared lock. An exclusive lock or shared lock icon appears to the right of the file name in the
Publish Server view.
• To lock a folder, choose Lock All or Shared Lock All from the context menu.
Note: Locking folders is unsupported by many servers, including Microsoft IIS 5. Only single files can be locked and
unlocked.
• To unlock files or folders, choose Unlock from the context menu. The locked icon to the right of the file names in
the Publish Server view disappears.
To delete a file or folder
❖ Right-click (Windows) or Control-click (Mac OS) the file or folder and choose Delete from the context menu.
ADOBE GOLIVE 9 296
User Guide
The context menu also lets you refresh the current view, select all files, and create a new folder, as well as set locks
and synchronize a site. You can copy and move files using the standard desktop commands for your computer
platform.
To obtain information about files
1 Select the file in the Publish Server area of the site window.
2 Click one of the tabs in the site window:
Info tab Displays a file’s name, URL, creation and modification dates, and size.
WebDav Lock tab Provides information on the file’s lock status, including the lock type, owner, access type available,
scope of the lock (exclusive or shared), and lock timeout.
297
Chapter 17: Authoring mobile content
Authoring for mobile devices
Designing for mobile devices
On mobile telephones and personal digital assistants, viewers can access a variety of mobile web content. Many users
pay additional fees for web browsing on their mobile telephones and handheld computers, so developing a successful
mobile website requires working within special constraints. You need to optimize text, images and navigation for
small screens, and file size for minimal download times.
GoLive helps you optimize mobile designs in several ways. When you create XHTML and i-mode HTML, Mobile
View reduces page width in the Layout Editor. For any mobile format, you can also preview content using the Small
Screen Rendering option in GoLive’s built-in Live Rendering browser. To view a small screen rendering from the live
rendering browser, click the SSR button at the top right side of the browser dialog box.
See also
“To set view options for page layout” on page 77
“To preview your page in the Live Rendering browser” on page 19
Using cascading stylesheets for flexible page designs
With cascading stylesheets, you can create flexible page designs that work well in both standard and mobile browsers.
To produce liquid layouts that automatically adjust to different screen dimensions, use GoLive’s CSS layout objects.
To specify different text formatting for standard and mobile browsers, create separate Screen and Handheld styles
(use the @media rule for internal stylesheets, or the Media box for external stylesheets). You can preview both Screen
and Handheld styles while laying out a page.
GoLive provides a cascading stylesheet that’s optimized for mobile devices: Choose File > New, and select Mobile >
CSS > Basic CSS.
See also
“About CSS layout objects” on page 119
“Setting view options for page layout” on page 77
“To create an @media, @font-face, or @page rule” on page 195
“To reference an external stylesheet from web pages” on page 189
Formats for mobile content
In GoLive, you can create content for mobile devices by using the following formats:
Scalable Vector Graphics (SVG) An XML-based format that lets you integrate web graphics with interactive scripting
and dynamic databases. GoLive produces SVG Tiny files, which are compatible with a wide range of mobile devices
and the Adobe SVG Viewer.
ADOBE GOLIVE 9 298
User Guide
Extensible Hypertext Markup Language (XHTML) An extensible, XML-based version of HTML, supported by 2.5G
and 3G mobile devices. For mobile authoring, you can use two types of XHTML: XHTML Basic and the more
advanced XHTML Mobile.
i-mode Hypertext Markup Language (i-mode HTML) Also known as cHTML, i-mode HTML is a special subset of
HTML developed for use with 2.5G i-mode devices.
See also
“To create a new XHTML Basic or Mobile page” on page 298
“About i-mode HTML” on page 299
XHTML Basic and Mobile
To create a new XHTML Basic or Mobile page
When you create a new XHTML Basic or Mobile page, you must manually configure the Objects panel so that it
provides only compatible items.
❖ Choose File > New, and then select Mobile > Pages > XHTML Basic Page or XHTML-MP Page.
See also
“Designing for mobile devices” on page 297
“To configure the Objects panel for XHTML Basic or Mobile” on page 298
To convert an HTML page to XHTML Basic or Mobile
1 From the document window menu
, choose Markup > Convert To XHTML, and then set conversion options.
2 From the document window menu, choose Doctype > XHTML Basic 1.0 or XHTML Mobile 1.0.
When you change the doctype, GoLive automatically disables unsupported text formatting options in menus.
See also
“Designing for mobile devices” on page 297
“To configure the Objects panel for XHTML Basic or Mobile” on page 298
To configure the Objects panel for XHTML Basic or Mobile
XHTML Basic and Mobile are a subset of XHTML, so these formats do not support all elements. You can configure
the Objects panel to display only supported elements.
❖ From the Objects panel menu
, choose Configure > XHTML Basic 1.0 or XHTML Mobile 1.0.
See also
“Designing for mobile devices” on page 297
ADOBE GOLIVE 9 299
User Guide
i-mode HTML
About i-mode HTML
i-mode HTML (also called cHTML) is most widely used in Japan for the popular i-mode mobile phone service. In
GoLive, you can easily develop i-mode sites for both Roman alphabets and double-byte (Asian) languages.
To efficiently develop an i-mode site, set up an i-mode template page that uses a DoCoMo layout profile, which
simulates the page and type size of a phone browser. Then you can quickly create new pages by opening your
template page in the site’s Templates folder.
To apply a DoCoMo layout profile, click the Layout tab in the document window. Then, from the Basic Profile menu
in the View panel, choose NTT DoCoMo > DoCoMo [browser version].
Accessing a DoCoMo profile to simulate phone layout in the Layout Editor
See also
“Page templates” on page 269
“To set view options for page layout” on page 77
To create a new i-mode page
When you create a new i-mode page, GoLive automatically uses Mobile View in the Layout Editor and disables
unsupported options in the Type menu. However, you must manually configure the Objects panel so that it provides
only compatible items.
❖ Choose File > New, and then select Mobile > Pages > i-mode EU Page or i-mode J Page.
See also
“Designing for mobile devices” on page 297
“To configure the Objects panel for i-mode HTML” on page 300
ADOBE GOLIVE 9 300
User Guide
To convert an HTML page to i-mode HTML
By default, new pages are created with the XHTML 1.0 Transitional Doctype option. In order to convert to i-mode
HTML pages, you might need to convert the default XHTML 1.0 pages to HTML before converting the pages to imode to HTML.
❖ From the document window menu
, choose Doctype > i-mode HTML [version number].
Note: Scrolling marquees are available only for i-mode HTML 2.0-5.0 pages. Also, when you change the doctype, GoLive
automatically disables unsupported text formatting options in menus.
See also
“Designing for mobile devices” on page 297
“To configure the Objects panel for i-mode HTML” on page 300
To configure the Objects panel for i-mode HTML
i-mode HTML is a subset of standard HTML, so not all elements and attributes are supported. You can configure the
Objects panel to display only supported elements.
❖ From the Objects panel menu
, choose Configure, and then choose an i-mode HTML version that’s
compatible with targeted mobile browsers.
Note: Avoid using Layer objects in your i-mode pages. Layers include invalid i-mode tags.
See also
“Designing for mobile devices” on page 297
To enable Japanese i-mode authoring
Japanese i-mode pages require Shift JIS and Unicode UTF-8 character encoding. In addition, to use emoji characters
in your pages, you must enable the i-mode Emoji module.
Note: UTF encoding is enabled by default. Use the following procedures to enable Shift JIS encoding as well.
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS).
2 Select Encodings from the list on the left.
3 On the right, expand Japanese Windows and select the “shift_jis” charset.
4 Select Modules from the list on the left.
5 On the right, expand the Extend Scripts folder, select i-mode Emoji.
6 Click OK, and then restart GoLive.
Adding emoji characters to an i-mode page
Emoji characters are picture symbols in the i-mode font set. The glyph, or visual representation of the character, is a
picture instead of a letter. Because an emoji is a character, it only takes up two bytes of memory—much less than a
small GIF image. There are 176 basic emoji characters and 76 extended characters, so you can communicate information very efficiently. In i-mode HTML, emoji are represented by name and category group, by default. You can
select one of three methods to insert your emoji entities: Shift JIS Decimal Code, Shift JIS Binary, and Unicode
Hexadecimal Code. (Page character encoding must be set to Unicode UTF-8.)
ADOBE GOLIVE 9 301
User Guide
An emoji entity is comprised of an ampersand, a pound sign followed by 5 digits, and an ending semicolon. For
example, the code &#63647 represents the character “fine” (as in “fine weather”), which looks like a shining sun. To
add emoji to Roman language pages, you can simply use ampersand code, without enabling Shift_JIS page encoding.
Note: To view emoji characters on a computer, the emoji font must be installed.
To set default emoji encoding and appearance
1 Choose Special > i-mode Emoji Settings.
2 Select a default encoding method and emoji appearance, and then click OK.
Note: If the emoji characters appear as a question mark in the Layout window, make sure that the Default Method
setting for emoji is set correctly.
To add emoji characters to i-mode pages
1 Drag the i-mode Emoji icon
from the Objects panel to the Layout Editor.
2 In the i-mode Emoji Inspector, select a character.
To add links to emoji characters, insert them into inline text.
To add images to i-mode pages
You can place GIF images on an i-mode page, but make sure that the image file size is small. Do your major image
editing in a graphics application such as Adobe Photoshop or Adobe Illustrator, and then save a copy as a GIF image.
Or better yet, use GoLive Smart Objects and link the original Photoshop or Illustrator image directly to your page.
Then you can optimize and resize the GIF image within GoLive.
❖ Do one of the following:
• Add a Smart Photoshop, Smart Illustrator, or Smart Generic Object to your page. In the Save For Web dialog box,
choose GIF format, and specify either 2 colors (for simple black-and-white graphics) or 256 colors (for images
with intermediate shades).
• Add a preoptimized GIF file to your page by using the Image icon.
See also
“Advantages of Smart Objects” on page 222
To add a text link that dials a phone number
1 Select the text you want to link to the phone number.
2 In the Text Inspector, click the New Link button
. Then, in the text box next to the button, type “tel:” followed
by the phone number (for example, tel:5555555555).
ADOBE GOLIVE 9 302
User Guide
To add form elements to i-mode pages
i-mode HTML supports forms so viewers of your site can interact with your pages. The information your viewers
send with the form must be processed by a Common Gateway Interface (CGI) script on the host server. Talk with
your web hosting provider to set up your CGI functions. Most of the HTML form elements are supported, but be
sure to test your form on all the devices you want to reach.
1 From the Form set in the Objects panel, drag the Form icon to your page. All other form elements should be
placed within this container.
2 From the Form set, drag other icons to the new Form object, and configure their Inspectors.
As you add form elements to i-mode pages, keep the following tips in mind:
• Set the visible attribute of text fields to fit within the phone’s screen. Usually it’s safe to set the visible attribute to 15.
• For form text fields, add the i-style attribute to specify the allowed input type, rather than relying on your users to
change it on their phones. You can quickly set the i-style attribute in the Outline Editor by choosing it from the
<input> tag’s attribute pop-up menu. Japanese is the default when you don’t choose a specific istyle. Set istyle to 1
for full-width Japanese Kana. Set istyle to 2 for half-width Japanese Kana. Set istyle to 3 for half-width roman
alphanumeric characters (English). Set istyle to 4 for half-width roman numeric characters (English).
• To allow users to quickly select an option using their keypads, set the access option in the Inspector for that
element. Generally you’ll set a number from 1 to 9. Also remember to label the option with the access key number.
See also
“About web forms” on page 260
“Types of form buttons and check boxes” on page 261
303
Chapter 18: Editing source code
Source code editors and preferences
GoLive source code editors
When you work in the Layout Editor, GoLive writes all of the source code for you. If you want to work directly with
HTML or JavaScript source code, you can use several different source code editors. Changes you make in the
document window are immediately reflected in all source code editors, and vice versa.
Source Code Editor Lets you edit your document’s HTML source code in text format, perform a syntax check, and
visually distinguish elements, attributes and content by color. You can type or paste text from another document or
application, and make and save changes.
Split view Lets you edit source code using a split view in the document window while in the Layout Editor, the
Frame Editor, or the Outline Editor without switching tabs in the document window. The source code editing
features function just like the Source Code Editor features.
Markup panel Lets you insert common HTML or JavaScript attributes while working in the Layout Editor, Frame
Editor, or the Outline Editor (for more information, see “To use the Markup panel” on page 305).
Outline Editor Presents the HTML code of your documents in a hierarchical, organized way, and provides a menu
of attributes for every element in the document.
JavaScript Editor Lets you build scripts in the application, embed them in your document, and test them immediately by launching the targeted browser.
GoLive includes several scripting samples in the New dialog box (File > New). You can choose from a variety of
script-based pages and scripting samples, including ASP, JSP, or PHP pages and QuickTime, CGI, Java, and Perl
scripts.
See also
“Snippets” on page 276
“Components” on page 274
Source preferences
Source preferences control how the Source Code and JavaScript Editors work, and how source code appears in the
Source Code and JavaScript Editors.
Source preferences Turn on and off word wrapping, support for dragging marked text, and control how source code
appears in the Source Code and JavaScript Editors. A preview panel in the Preferences dialog box shows you how the
source code appears as a result of the options you select.
Themes preferences Let you select, customize, and rename source code themes, as well as set color, font face, and
font size options for elements in different languages (for example, PHP, JavaScript, and HTML). Key sets enable you
to control how HTML tags are displayed in the Source Code Editor. For example, you can create a key set that
displays the table tag in a certain color, face, and size.
ADOBE GOLIVE 9 304
User Guide
Syntax preferences Enable you to turn on context-sensitive code completion options in the Source Code and
JavaScript Editors.
To set general Source preferences
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), and then click the Source icon.
2 Set the following preferences to control how the Source Code and JavaScript Editors work:
Enable Dragging for Marked Text Turns dragging on or off.
Auto Indent Controls the automatic indenting of lower level elements.
Tab Size Sets the tab size of the auto indent and the number of characters added when you press the Tab key.
Line Numbers Displays line numbers at the left margin of the Source Code or JavaScript Editor.
Word Wrap Wraps the source code in the Source Code or JavaScript Editor.
Default Theme and Print Theme Enables you to select the default and print themes the Source Code or JavaScript
Editor uses to display source code.
3 Click OK.
To set Themes preferences
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), and then select Themes under Source
preferences.
2 Do any of the following:
• To specify a theme for the source code, choose a theme from the Theme menu.
• To customize a theme, choose it from the Theme menu and select options from the Text Color, Background,
Script, Font, and Size menus.
To customize the appearance of a specific language in the Source Code Editor
1 Choose Edit > Preferences (Windows) or GoLive > Preferences (Mac OS), and then click Themes under Source
Preferences.
2 Choose a language from the Syntax menu.
3 Select an option from the list beneath the Syntax menu to specify what you want to customize.
4 Specify a color, face, and font size.
5 Repeat steps 2 through 4 for each language and option you want to customize; then click OK.
To set key sets for HTML elements
1 Choose Edit > Web Settings (Windows) or GoLive > Web Settings (Mac OS).
2 In the Markup Language tab, choose an HTML element (for example, Table).
3 Click the Output tab of the Web Settings Element Inspector.
4 Choose a key set from the Group menu, and then close the Web Settings window.
5 Choose Edit > Preferences (Windows) or GoLive > preferences (Mac OS), and then select Themes under Source
Preferences.
ADOBE GOLIVE 9 305
User Guide
6 Choose HTML Syntax from the Syntax menu.
7 Select the key set (from step 4) in the list beneath the Syntax menu.
8 Specify color, face, and size for the key set. GoLive displays the HTML element represented by the key set with
these attributes in the Source Code Editor.
To set Code Completion preferences
1 Choose Edit > Preferences (Windows) or GoLive > preferences (Mac OS), and then select Syntax under Source
preferences.
2 Select Enable Code Completion to turn code completion on.
3 Select Enable Immediate Completion to automatically insert end tags in the code.
4 Select Balance While Typing to automatically jump to the next open bracket when you type a close bracket.
5 Drag the Delay slider to specify a delay speed, and then click OK.
To use the Markup panel
Use the Markup panel to add or edit common HTML attributes (ID, class, title, or language) or JavaScript attributes
to any object on the page in the Layout Editor, Frame Editor, or Outline Editor.
1 Choose Window > Markup.
2 In the Layout Editor, Frame Editor, or Outline Editor, select the object to which you want to apply an Attribute.
3 Do one of the following tasks:
• To add or edit an HTML attribute, click the General tab.
• To add or edit a JavaScript attribute, click the JavaScript tab.
4 Add or edit attribute values, or choose them from the attribute menu.
Source code management tools
To open the Source Code Editor
❖ Click the Source tab
of the document window. The Source Code menu bar appears below the Source tab. (If
you don’t see the Source Code menu bar, choose View > Toolbar from the context menu.)
To hide or display the source code split view
❖ Either click the Show/Hide Split Source button
in the document bar at the bottom of the Layout Editor, the
Frame Editor, or the Outline Editor, or choose View > Show Split Source.
ADOBE GOLIVE 9 306
User Guide
Using the Outline Editor
About the Outline Editor
The Outline Editor, which is available as a tab in the document window, displays HTML elements in a hierarchical,
structured view. Using the Outline Editor, you can generate clean, valid source code without typing code. You select
elements and attributes from a context-sensitive menu, drag items from the site window or the Objects panel to the
to link documents and graphics. You can build documents from scratch,
Outline Editor, and use the pick whip
fine-tune your code, and drag elements in the Outline Editor to quickly move elements and their contents in your
document.
After checking the syntax of your document and finding errors, you can see an error description next to each element
in the Outline Editor where an error is located in your document. You can also highlight all broken links and invalid
on the Control panel while you are working
file references (in red, by default) by using the Link Warnings button
in the Outline Editor.
A
B
C
D
The Outline Editor
A. Outline Editor tab B. The +/- sign (Windows) or triangle control (Mac OS) expands or collapses element C. Path pointer lets you open the
referenced file D. The Select File dialog box appears when you click the path pointer
See also
“Validating the syntax of source code” on page 313
“To activate or deactivate program modules” on page 22
Navigating in the Outline Editor
The outline that appears when you create or view a document in the Outline Editor contains all of the essential
elements of an HTML document. You can use this structure as a template and fill it with your own content.
• An element is represented as a box symbol that is labeled with the element’s tag.
• Indents indicate an item’s position within the HTML hierarchy. The head and body elements are indented to show
that they are contained within the HTML element. The head element in turn contains a title element.
ADOBE GOLIVE 9 307
User Guide
• Start and end tags are connected by vertical lines to show that they are complementary items.
A
B
E
C
D
Working in the Outline Editor
A. Triangle control (Mac OS) or =/- sign (Windows) on HTML element expands and collapses entire outline. B. Use this handle to drag an
element to another location in the outline. C. Currently selected element D. Start and end tag connectors E. Contents of the title element
To navigate in the Outline Editor
• To collapse or expand the entire outline in the Outline Editor, click the triangle (Mac OS) or +/- sign (Windows)
to the left of the HTML element name at the top of the hierarchy.
• To collapse or expand the currently selected element, click the triangle (Mac OS) or +/- sign (Windows) control
to the left of the element name, or press Enter (Windows) or Return (Mac OS). This is only possible with binary
tags (tags always used in pairs).
• To select a different item in the Outline Editor, click the item or use the arrow keys. The Up Arrow Key selects the
item above the current selection, and the Down Arrow key selects the one below. If the cursor is in a text box
displaying the contents of an element, the arrow keys move the cursor within the text box.
• To activate the next text box, press Tab. To activate the preceding text box, press the Shift-Tab key.
To move elements or view images in the Outline Editor
• To move an element, drag the handle on the element box to the new location in the outline. To move multiple
elements, Shift-click to select them. While you are dragging, Golive displays a horizontal line indicating the
element’s new location.
• To view images, select the image and open the View panel. If you specified low source (low resolution) images,
you can show the low source images in the Outline Editor by selecting Low Source in the View panel.
Adding elements in the Outline Editor
While working in the Outline Editor, you can quickly add HTML elements along with their start and end tags. You
can select an element from a context menu that lists all elements defined in Web Settings, or only the elements that
the document’s DTD allows within or after the currently selected element. Or, you can define a new element by
typing the element’s tag directly in the Outline Editor.
When adding an element, you can choose to add the new element either at the same level in the HTML hierarchy as
the selected element, or at the next level deeper than the selected element.
See also
“Setting the document type definition” on page 79
ADOBE GOLIVE 9 308
User Guide
To add an element in the Outline Editor
1 In the Outline Editor, select the existing HTML element that is immediately above the location in the outline
where you want to add the new element. For example, to add a paragraph element below a table element, select the
table element.
2 To add an element at the same level in the HTML hierarchy as the selected element, do one of the following:
• To choose from a list of allowable elements, right-click and choose Add Item After > By Syntax > [element]. Two
boxes representing the start and end tags for the element are added to the outline after the end tag of the previously
selected element. (Some elements, such as img or meta elements, cannot have end tags, so only one box is added.)
The By Syntax submenu is especially useful for adding elements to documents that must comply with an XML DTD.
• To display a list of elements from the Markup tab of Web Settings, right-click and choose Add Item After > New
Element > [element].
• To enter a new element, right-click and choose Add Item After > New Element > Any, or collapse the existing
selected element and click the Add New Element button on the Control panel. Then enter a name for the new
element in the text box. The new element is added after the end tag of the previously selected element.
3 To add an element within another element (that is, at the next level deeper in the HTML hierarchy), do one of the
following:
• To display a list of allowable elements, right-click and choose Add Item Into > By Syntax > [element]. The new
element is added between the start and end tags of the previously selected element.
• To display a list of elements from the Markup tab of Web Settings, right-click and choose Add Item Into > New
Element > [element].
• To enter a new element, right-click and choose Add Item Into > New Element > Any or expand the existing
selected element and click the New Element button
on the Control panel. Then enter a name for the new
element in the text box. The new element is added between the start and end tags of the previously selected
element.
To add an element attribute with the Outline Editor
You can fine-tune the appearance of your document by adding attributes for an element. Attributes control the way
an element is displayed by the browser. Many elements support attributes for specifying special formatting instructions, such as element alignment, color, and directory paths to resource files.
1 In the Outline Editor, select the element you want to add an attribute to.
2 Do one of the following:
• To choose from a list of attributes defined for the selected element, click the Attributes triangle and choose an
attribute from the menu. Or right-click and choose Add Attribute > [attribute].
Using the Attributes triangle
ADOBE GOLIVE 9 309
User Guide
• To add a new attribute, click the New Attribute button
on the Control panel, or right-click the element, and
choose Add Attribute > Any. Then enter an attribute name in the text box.
If the attribute is recognized as an enumeration type (such as a color or path), a triangle, color field, path pointer, or
comment sign appears to the right of the attribute name.
Note: If you are not sure whether an attribute name is valid, refer to the World Wide Web Consortium’s (W3C) website
at www.W3.org or use GoLive’s Syntax Checker.
3 To specify a value for the attribute, do one of the following:
• Click the text box to the right of the attribute name, and then enter a value.
• If there are predefined values for the attribute, the Outline Editor displays the Attribute Values triangle. Click the
Attribute Values triangle, and then select a predefined attribute value from the menu.
A
B
C
D
Specifying attribute values
A. Attribute Values triangle B. Menu of predefined attribute values C. Color field D. Path pointer
• If the attribute uses a color value (such as a font color), a color field and a color code appear to the right of the
attribute name.
• If the attribute uses a path (such as a path to an image file), a path pointer appears to the right of the attribute name.
Click the path pointer, then select a file in the Select File dialog box, and then click OK.
Adding text or comments in the Outline Editor
After adding an element, you can use the Outline Editor to quickly add the contents of that element, such as the text
you want to display in your document. For example, you might enter heading text in an h1 element. You can also add
a comment for an element, which is any text you want to save but not display in your document when it is viewed in
a browser window. Comments are useful for storing notes for editing documents at later dates—for example, if you
intend to embed advanced features that require significant background information.
To add text or a comment with the Outline Editor
1 In the Outline Editor, select an HTML element that is immediately above the location in the outline where you
want to add the new text or comment.
2 Do one of the following:
• To add the text or a comment between the start and end tags for the selected element, expand the element and
then click the Add New Text button
or the Add New Comment button
with default text or comment is added to the outline.
on the Control panel. A text box
ADOBE GOLIVE 9 310
User Guide
• To add the text or a comment after the end tag for the selected element or item, collapse the element and then click
the Add New Text button
or the Add New Comment button
on the Control panel.
Note: You can add a comment anywhere in your document, even before or after the HTML element.
3 Enter your text or comment in the text box. If you temporarily stop entering text and then deselect the text box,
you can resume your work by inserting the cursor in the text box.
To add a generic item with the Outline Editor
You can add a generic element or item that contains non-HTML code in your document. For example, you can add
a generic item that contains ASP code.
1 In the Outline Editor, select an element or item that is immediately above the location in the outline where you
want to add the generic element or item.
2 Do one of the following:
• To add the generic element or item between the start and end tags for the selected element, expand the element
and then click the Add New Generic Item button
on the Control panel.
• To add the generic element or item after the end tag for the selected element, collapse the element and then click
the Add New Generic Item button
on the Control panel.
A text box with default text is added to the outline.
3 Click the Subtype triangle and choose a subtype for the generic item, such as ASP, from the menu.
Using the Subtype triangle to specify the subtype of a generic item
4 Enter the text content of the generic item in the text box. For example, if you selected an ASP subtype for the
generic item, enter ASP code in the text box.
Binary or container tags in the Outline Editor
You can toggle the binary tag format on and off in the Outline Editor to determine whether a new tag has a complementary end tag or not. Most tags are binary tags, or container tags. Binary tags enclose the content of an element in
a pair of tags, called start and end or open and close tags. By default, GoLive displays both parts of a binary tag. A
few tags (called unary tags), however, don’t need an end tag. One of the most frequently used unary tags is the <img>
tag for embedding images.
To toggle the binary format on and off in the Outline Editor
You can toggle the binary tag format for the currently selected element only.
1 In the Outline Editor, select an element that has binary tags.
2 Click the Toggle Binary button
in the Control panel.
ADOBE GOLIVE 9 311
User Guide
Adding new elements to source code
Adding unknown elements
HTML is an ever-evolving language, and new elements are created often. To ensure that your documents are always
up to date and use the latest technology, you can use the Tag icon to insert placeholders for elements that GoLive
doesn’t recognize.
You can also use the Tag icon to prevent GoLive from parsing or changing your source code. After you drag the Tag
icon from the Objects panel to the document window, GoLive adds <noedit> and </noedit> start and end tags to
your source code, and inserts a Tag placeholder in your document in the Layout Editor. You can then enter the code
that you don’t want to be parsed in the Content tab of the Tag Inspector. GoLive inserts your code between the
<noedit> tags without changing it.
To add an unknown element
1 In the Layout Editor, drag the Tag icon from the Basic set in the Objects panel to the document window.
A
B
Using the Tag icon
A. The Tag placeholder as it appears in the Layout Editor B. Tag icon in the Objects panel
2 In the Element tab of the Element Inspector, enter the name of the new element in the Element text box.
3 Click the Create New Item button
the list box.)
at the bottom of the Element Inspector. (This activates the text boxes below
4 Enter an attribute name in the left text box, and then enter an attribute value in the right text box.
5 To delete the currently selected attribute, click the Remove Selected Items button
.
Note: To add an unknown element to the head section of your document, drag the Element icon from the Head tab of
the Objects panel to the head section panel of the document window.
To enter code for an unknown element
1 Select the Tag placeholder for the unknown element.
2 In the Content tab of the Element Inspector, enter the source code. You can inspect the code in the Source Code
Editor or source code split view in the document window.
Working with source code
Dragging objects into the source code
When working in the Source Code Editor, source code split view, Outline Editor, or JavaScript Editor, you can drag
any icon from the Objects panel into your source code and use it as a starting point for coding the element. You can
also drag documents and URLs from the site window to the source to insert a link to the document or URL.
ADOBE GOLIVE 9 312
User Guide
To modify the appearance of source code
You can use the Source View menu bar in the Source Code Editor, source code split view, CSS Editor Source view,
or the JavaScript Editor to choose different themes that affect the appearance of your source code, and to choose
whether you want GoLive to display line numbers or wrap your source code at the margins of the editor.
❖ Do one of the following in the Source View menu bar:
• Choose a theme for the current document from the Theme menu.
• Click the Colorize Code button
to turn off the colors of all items.
See also
“GoLive source code editors” on page 303
To turn word wrapping on and off in the source code
❖ In the Source Code Editor, source code split view, CSS Editor Source view, or the JavaScript Editor, click the Word
Wrap button
in the Source View menu bar.
To show line numbers in source code
❖ In the Source Code Editor, source code split view, CSS Editor Source view, or the JavaScript Editor, click the Line
Numbers button
in the Source View menu bar.
You can also set options for word wrapping and line numbers in the View panel when you are working in the Source
Code Editor.
To look up and insert source code
The GoLive context-sensitive code completion feature enables you to write code without looking up hard-toremember elements, attributes, or functions. You can use code completion while writing HTML code, as well as
other languages such as JavaScript and PHP.
1 Begin typing code in the Source Code Editor, source code split view, CSS Editor Source view, or JavaScript Editor.
2 Scroll through the pop-up menu that appears, and then press Enter (Windows) or Return (Mac OS) to select the
desired element, attribute, or function.
To compare two files
The Find Differences dialog box lets you compare the source code of two files in a site. GoLive displays differences
and lets you set options to control the display.
1 Open a site.
2 Choose Edit > Find > Find Differences.
3 In the Find Differences dialog box, drag the pick whip
select the two files you want to compare.
to the two files you want to compare, or browse for and
4 Click OK.
GoLive displays the source code of each file in the Find Differences window, and highlights the differences.
5 Click Previous Difference or Next Difference to navigate through different code strings.
ADOBE GOLIVE 9 313
User Guide
6 Customize the view by selecting any of the following Compare Options:
Skip Empty Lines Skips empty lines in the code.
Show Different Colors Uses a different color for each code display.
Hide Identical Lines Hides lines of code that are identical.
Synchronize Scrolling Scrolls both code displays simultaneously.
Validating the syntax of source code
The GoLive Syntax Checker lets you make sure that one or more documents, or an entire site, contain valid and
error-free source code. The Syntax Checker can parse your source code to verify that your documents meet
standards of well-formedness, or to verify that your documents are compliant with a particular DTD. Each DTD has
different requirements regarding code syntax and the use of elements. The Syntax Checker can use the DTD assigned
to the document, or another DTD that you want to check against.
After parsing the source code, the Syntax Checker highlights faulty code elements in the editors, and lists the errors
and warnings in the Check Syntax Result window. You can also see the errors next to each element in the Outline
Editor where the error is located in your document.
C
A
B
Using the Syntax Checker
A. Compatibility list—select well-formedness, or select the DTDs you want to check compatibility with. B. Additional elements to allow—select
any additional code elements you want to allow in your documents. C. Location of DTD
See also
“About the Outline Editor” on page 306
“To check syntax” on page 313
To check syntax
1 Do one of the following:
• To check the syntax for all files in a site, open the site.
• To check syntax for a single page, select it in the Assets area of the Site window, or open the page.
2 Choose Edit > Check Syntax, or, if you’ve opened a page, click the Check Syntax button
panel or in the Source View menu bar.
in the Highlight
ADOBE GOLIVE 9 314
User Guide
3 Select the DTDs in the Comply With list:
Well-formedness Only Checks your document for compatibility with well-formedness standards, but not for
compatibility with a DTD or browser set. For example, the Syntax Checker generates error messages for required
closing end tags that are missing, attribute values that are required to be enclosed in brackets, or when an attribute
is defined more than once. When checking for well-formedness only, the Syntax Checker doesn’t generate error
messages for closing end tags that are not required, or for attribute values that are not required to be enclosed in
brackets.
!DOCTYPE assigned Checks compliance with the DTD for the doctype declared for the document. To use this
option, you must have already specified a doctype for the document. (See “Setting the document type definition” on
page 79.) The Syntax Checker uses the !DOCTYPE declaration to locate the DTD, which can be on your computer,
on a local network, or on the Internet.
Note: If the DTD specified for your document is on the Internet, GoLive checks whether the DTD is already cached. If it
is, GoLive uses the cached DTD. If it isn’t cached, GoLive displays an alert asking you for permission to access the
Internet. If you agree, GoLive downloads the DTD. If you refuse permission, GoLive checks your document for wellformedness, but does not check for compliance with the DTD. The cache is cleared when you quit GoLive.
A particular DTD (such as HTML 4 Strict) Checks compliance with that DTD.
4 If you added custom elements or attributes to the Markup tab in Web Settings that are not defined in a DTD, select
Elements in the Additionally Allowed list.
5 If you want to allow any additional elements in your document, select the sets of elements in the Additionally
Allowed list.
6 To control what to check for and how the Syntax Checker works, select either of the following options:
Show Warnings Checks for syntax warnings. For example, GoLive displays a warning if the value of an attribute is
invalid, such as <body bgcolor= “redd”>. Warnings are much less common than errors.
Show Errors Checks for syntax errors. The Syntax Checker displays an error if it can identify incorrect HTML
syntax, or if your document is not compliant with the specified DTD. For example, the Syntax Checker displays an
error if your document contains a start tag without a corresponding end tag. For most problems, the Syntax Checker
displays errors.
7 Click OK.
GoLive displays errors and warnings in the Syntax Check window, as well as highlighting the errors and warnings in
the Source and Outline editors. The Highlight tab in the View panel also opens and displays the total number of
errors and warnings.
8 Correct each error, and then follow the steps to check your source code again.
9 Do one of the following:
• To close the Syntax Check window, click OK.
• To create a collection of the syntax results in the currently open site, click Save Collection.
See also
“Collections” on page 281
ADOBE GOLIVE 9 315
User Guide
Selecting and highlighting source code
To select items by double-clicking in the source code
Open the Source Code Editor, source code split view, or CSS Editor source view and do one of the following:
• To select an element and its contents, double-click the angle bracket preceding the element.
• To select only the contents of an element, double-click the angle bracket following the element.
• To select an attribute and its value, double-click the equal sign following the attribute.
• To select only the value of an attribute, double-click the quotation marks preceding the value.
• To select a CSS property and its value, double-click the colon preceding the value.
Selecting elements using the markup tree bar
The markup tree bar at the bottom of the document window provides a navigational tool that makes selecting HTML
elements quick and precise, even in complex documents. The markup tree bar represents the current selection in the
Layout Editor, Frame Editor, source code split view, or Outline Editor as a path or series of element tags from the
root to the currently selected element. For example, with a table cell selected, the markup tree bar displays a path of
tags starting with the HTML element, and then the body, table, table row, and table cell elements. When you select
an element’s tag in the markup tree bar, the complete element and its contents (including start and end tags) is
selected in the document window.
You can use the markup tree bar to select an element within the currently selected element—that is, at the next level
lower in the HTML hierarchy. For example, you can select a table row within the currently selected table. Or, you can
use the markup tree bar to select an element that is outside the currently selected element—that is, at a level higher
or closer to the root. For example, if a table cell is currently selected, you can select the table row or the table where
the cell is located.
To select elements with the markup tree bar
1 Display the document in the Layout Editor, Frame Editor, or Outline Editor (you can also view the document
while using the source code split view).
2 Do one of the following:
• To select from a list of allowable elements, hold down the mouse button (or drag slowly) on a tag on the markup
tree bar and then choose an element from the pop-up menu. Or right-click a tag on the markup tree bar and
choose Select Item > [tag]. If the selected element is at the lowest level, such as a table cell, the Select Item menu is
not available.
ADOBE GOLIVE 9 316
User Guide
Using the markup tree bar to select an element within another element
• To select an element outside an element (higher in the hierarchy), click any tag currently displayed in the markup
tree bar. For example, you can select a table element directly (and all elements within the table such as its rows and
cells) by clicking the Table tag.
To select the next element higher in the element hierarchy with the Select Upper Block
command
❖ With text or an element selected in the Layout Editor, Source Code Editor, or Outline Editor, choose Advanced >
Select Upper Block. GoLive selects the element in the next higher level in the hierarchy.
Highlighting items in the source code or Layout Editor
The Highlight tab in the View panel lets you highlight particular items, warnings, and errors in the Layout Editor,
markup tree bar, Source Code Editor, or Outline Editor. For example, you can highlight all elements that contain a
URL, all text that has a particular CSS definition, or all syntax and link errors. After highlighting the items, you can
use the Highlight tab to select each highlighted item, one at a time.
The Highlight Colors section of the Highlight tab lets you set the highlighting properties (such as colors and borders)
of classes of items, such as making all link warnings blue.
Use the Highlight tab to highlight all elements that have JavaScript actions attached.
B
A
C
D
Using the Highlight tab in the View panel
A. Select the elements and items in your document you want to highlight B. Number of items highlighted C. Click these buttons to select the
previous and next highlighted items D. Number of syntax errors and warning
ADOBE GOLIVE 9 317
User Guide
To highlight elements and other items
1 In the Layout Editor, Source Code Editor, or Outline Editor, choose Window > View to open the View panel.
2 Click the Highlight tab, and do any of the following:
• To highlight all broken links and invalid file references, click the Link Warnings button
. (You can also show
link warnings by clicking the Link Warnings button on the Control panel.)
• To select the previous or next highlighted item, click the Previous button
or the Next button
.
• To highlight one or more particular elements, choose the element(s) from the Elements menu.
• To highlight text that has a particular CSS definition, choose the definition from the CSS menu.
• To highlight all elements that have JavaScript actions attached, choose JavaScript Actions from the Special menu.
• To highlight all items that have a URL, choose Items With URLs from the Special menu.
• To highlight all text items, choose Text Items from the Special menu.
• To highlight all comments, choose Comment Items from the Special menu.
• To highlight all generic items, choose Special Items from the Special menu.
• To clear all highlighting in the document and all settings in the Highlight tab, click Clear.
• To rescan after adding new items to the document, click Rescan.
See also
“Validating the syntax of source code” on page 313
“To add a generic item with the Outline Editor” on page 310
To set highlight colors and appearance of items
1 Choose View > Highlight > Edit Highlight Colors.
2 Do any of the following:
• To set the color of a category of items (such as all Link Warnings), either click a color field next to a category to
select a color in the Color panel, or click the lower right corner of the color field and choose a color from the
swatches that appear.
• To set the color opacity that is applied to a category, drag the color slider next to the category.
• To set the style of highlighting for each category, click the button to the right of the category to toggle between
colored borders or colored background shading.
Note: The settings for Editable Regions in the Highlight tab apply to editable regions in page templates. The settings for
Locked Regions apply to locked regions in a document based on a page template.
ADOBE GOLIVE 9 318
User Guide
Locating source code
Locating elements with the Find Code Elements dialog box
Use the Find Code Elements command to find and manipulate elements in a document or throughout an entire site.
This feature offers several advantages over the Source Search Mode feature of the Find Text dialog box, which
searches for literal text strings. For example, if you use Find Code Elements to search for <body bgcolor=“red”>, you
will find perfect matches as well as instances of the element that lack the quotation marks or have other attributes
included. In addition, the Find Code Elements command lets you quickly add, delete, or modify attributes of existing
elements; delete the content of elements; or replace the plain text contents of elements.
The Find Code Elements dialog box includes three sections:
Find options Let you select search criteria, including elements and attributes.
Change options Let you specify changes or actions that you want to be carried out on any elements or attributes
found during a search.
Work On options Let you specify the scope of a search: one file, several files, an entire site or collection, or a list of
previous results. You can also preview and modify the list of files that you want changed by the specified actions,
before you have GoLive carry out the actions.
A
not working yet
B
C
The Find Code Elements dialog box
A. Search section B. Action section C. Work On section
By default, the Find Code Elements dialog box appears in structured mode, which enables you to perform a structured search without any coding knowledge. If you want to enter complex search criteria, click Advanced.
To search for elements
1 Choose Edit > Find > Find Code Elements.
2 In the Find section, specify Element options as follows:
• From the Element menu, choose Is or Matches.
• In the Element text box, type the name of the element you’re searching for or choose an element from the menu.
ADOBE GOLIVE 9 319
User Guide
3 For a structured search, choose the attribute in the Attribute menu in the Find section, and choose an operator
and attribute value in the menus that follow. To add another attribute to the search, click the Add button , and
then specify another attribute, operator, and attribute value.
4 (Optional) For an Advanced search, click Advanced and do the following in the Find section:
• To search for attributes and attribute values, type them in the text box, or select attributes and operators from the
Attribute and Operator menus.
• To search for elements by comparing attribute values, type two attributes and an operator. For example, to search
for elements that have a width greater than the height, type the following: height > width.
• To search for the plain text contents of an element, enter the keyword content, an equal sign operator, and the text
contents in quotes. For example, to search for all occurrences of “June” (no style applied) in the element you
specified, type the following: content = “June”.
After specifying the search criteria for plain text, you can specify the text you want to use as a replacement. For
example, you can replace all occurrences of “June” in a specified element with “July.” To replace the text contents of
an element, use the Replace Content action. (See “Editing elements in multiple files with the Find Code Elements dialog
box” on page 320.)
5 Click the Work On menu and do one of the following:
• To search a currently open site, choose [site name] > The Whole Site.
• To search the files in a specific tab of a currently open site, choose [site name] > [site tab].
• To search a file that is selected in the site window, choose The Site Selection. You can also drag a file from the site
window to the Find Text dialog box.
• To search files in unopen sites, choose Add Files. Navigate to and select the files that you want to search, then click
Open. GoLive adds the selected files to the search list.
• To search within a previous result set (an open list of matches that resulted from a previous search), choose Result
List from the Search In menu.
6 To exclude items from the search, deselect them by clicking in the corresponding box to remove the check.
7 Click Find All. GoLive displays the hits in the Result window.
To save Find Code Elements search results for use in another search
In the Result window, do one of the following:
• To search for another element within the result set, click Use Result. You can remove files from the result set by
selecting them and clicking Remove.
• To save the results as a collection in the currently open site, click Save Collection, type a name for the collection
in the Create A New Collection dialog box, and then click OK (a site must be open for the Save Collection option
to be available). Saved collections are displayed in the Collections area of the site window.
See also
“Collections” on page 281
ADOBE GOLIVE 9 320
User Guide
Editing elements in multiple files with the Find Code Elements dialog box
In addition to simply finding elements, you can manipulate elements in a variety of ways by using these commands
on the pop-up menu in the middle Change section:
Keep Keeps the element and sets, updates, or deletes its attribute.
Rename Renames the element, but keeps the element’s contents. You can keep the element’s attributes or change
them with an Attribute action.
Delete With Content Deletes the element completely, including its start and end tags as well as its contents.
Replace By Its Content Deletes only the element’s start and end tags, leaving its contents untouched.
Delete Content Only Deletes only the contents of the element, leaving its start and end tags in place.
Replace Content Replaces only the contents of the element, leaving its start and end tags in place. This command
works on plain text contents only—for example, text that has a style applied to it, such as bold, is not affected by this
command.
To modify an existing element
1 Define the search criteria and scope of the search. (See “Locating elements with the Find Code Elements dialog
box” on page 318.)
2 In the Change section of the Find Code Elements dialog box, choose Keep from the Element menu.
3 In the Change section, choose an attribute from the Attribute menu, or type an attribute in the text box.
4 Choose one of the following options from the pop-up menu to the right of the Attribute menu:
Set To Sets the specified attribute and value for the element whether or not the attribute already exists.
Update To Updates the attribute only if it already exists in the specified element. It does not add the attribute.
Remove Removes the attribute and its value wherever it appears.
5 Choose an attribute value or type a value in the third Attribute text box.
6 To add another change attribute, click the Add Attribute button
and then specify another attribute, operator,
and attribute value.
7 Click Apply To All to begin the search and carry out the specified action.
You can also create multiple Attribute actions to be performed during a Keep Element action. Click the Add Attribute
and follow the steps outlined here before you click Apply To All. GoLive performs each Attribute action
button
defined in the Change section. You can remove an Attribute action by selecting it in the list and clicking the Remove
Attribute button.
To rename, delete, or replace an existing element
1 Define the search criteria and scope of the search. (See “Locating elements with the Find Code Elements dialog
box” on page 318.)
2 In the Change section of the Find Code Elements dialog box, do one of the following:
• Choose Rename from the Element menu. Then type a new element name in the New Name text box. (You can
create Attribute actions for a Rename Element action, if desired.)
• Choose Delete With Content from the Element menu.
• Choose Replace By Its Content from the Element menu.
ADOBE GOLIVE 9 321
User Guide
3 Click Apply To All to begin the search and carry out the specified action.
To replace the plain text contents of an element
1 Define the search criteria and scope of the search. (See “Locating elements with the Find Code Elements dialog
box” on page 318.)
2 In the Change section of the Find Code Elements dialog box, choose Replace Content from the Element menu.
Then type the replacement text in the Content text box. It is not necessary to use quotes around the text.
3 Click Apply To All to begin the search and carry out the specified action.
To delete the contents of an element
1 Define the search criteria and scope of the search. (See “Locating elements with the Find Code Elements dialog
box” on page 318.)
2 In the Change section of the Find Code Elements dialog box, choose Delete Content Only from the Element menu.
3 Click Apply To All to begin the search and carry out the specified action.
Saving and reusing a search task
After you specify the settings for a search task, you can save the settings for later use.
1 Choose Save Search from the Find Code Elements window menu.
2 Type a name and click Save.
3 To reapply a saved task, choose Load Search from the Find Code Elements window menu.
4 Select the desired task, and then click Open.
5 Select the files you want to apply the task to in the Search In section.
6 Click Find All.
To reapply a recently saved task, choose the task from the Find Code Elements window menu.
Navigating through source code
Navigating source code by function
The Navigate Through Code menu
in the Source Code Editor, JavaScript Editor, and CSS Source Code Editor
lets you navigate through code by function. In addition, you can add custom markers to the source code and Navigate
Through Code menu for navigating.
If you’re using the JavaScript Editor, navigate using functions of languages such as JavaScript, VBScript, ASP, Perl,
and Java. If you’re using HTML, you navigate through HTML code using tags that contain the name attribute. If
you’re using CSS, you can navigate through the code using CSS definitions in the CSS Editor.
To navigate through source code
❖ Choose a function from the Navigate Through Code menu.
ADOBE GOLIVE 9 322
User Guide
The Navigate Through Code menu lists functions in the order they appear in the code. If you want to view the list of
functions alphabetically, Control-click (Windows) or Alt-click (Mac OS) the Function menu.
To add or remove markers in the source code
1 In the Source Code Editor, JavaScript Editor, or CSS Source Code Editor, click to place an insertion point in the
line of code you want to mark.
2 Choose New Marker from the Navigate Through Code menu.
3 Type a name for the marker in the Add Marker dialog box and click OK.
Inserting or rewriting source code automatically
To rewrite source code automatically
You can use GoLive to automatically rewrite source code that you manually entered yourself. GoLive rewrites the
code with indents and line breaks, changes the case of tags and attributes, and sets quotes for attribute values as
specified in the Rewrite Source Code dialog box.
1 Open a page in which you want to rewrite source code.
2 Choose Advanced > Source Code > Rewrite Source Code.
3 Specify options as desired. Click No Change to revert any unwanted changes you’ve made.
4 Click OK.
Inserting text code by using text macros
Text macros can save you time if you frequently use the Source Code Editor and the JavaScript Editor. They eliminate
typing lengthy strings of source code for often-used tags and script elements.
The text macros are stored in an editable file, Default.macro, that resides in a special Code folder within the Settings
folder in the GoLive program folder.
The Default.macro file can hold any combination of text, HTML or CSS elements and JavaScript strings. Where you
can use a given macro definition depends on its type attribute. If the type is set to “all,” the macro will be available in
all editors, including a simple text document window. If the macro has one of the other type attributes, it is only
available in the corresponding editor.
The Default.macro file is loaded when GoLive starts up to make it available throughout the application.
See also
“To insert text macros into the source code” on page 322
To insert text macros into the source code
Text macros are case-sensitive, which means that you must type them exactly as the name was defined in the macro file.
❖ To insert automated source code, type the macro name and press Shift+Ctrl+M (Windows) or
Shift+Command+M (Mac OS). This inserts the text macro identified by the word behind or below the text cursor,
provided it exists in the default source macro file.
ADOBE GOLIVE 9 323
User Guide
Defining text macros
You define text macros by opening the Default.macro file with GoLive or a text editor and then typing, copying and
pasting, or dragging the appropriate code. You can also create your own macro files. Macro files are read in order
and the first definition encountered is used where more than one macro definition shares the same name and syntax
context. Text macro definitions must have the following basic format:
<macro name="XY" type="Syntax-Context"><![CDATA[macro-content\]\]></macro>
The first element in a macro definition is the macro name and type, which defines the syntax context. The value of
type may be "all", "html", "css", "javascript", "php", or the exact value of the name attribute of a syntax element defined
in the Default.syntax settings file or any other installed *.syntax files. With the exception of spaces and tabs, you can
use any combination of characters for a macro name, but you should restrict yourself to using letters and digits to
avoid using characters which have special meaning in a given syntax context.
The second element specifies the content of the macro—that is, the CDATA tag specifies the replacement text. The
selection in the replaced text is defined by the percent character (%). If you require a different selection character,
you can add the attribute, "selchar=(character)".
For example, an image element macro with basic attributes could look like this:
<macro name="image" type="html"><![CDATA[<img
"src=../GIFS/%???%.GIF" width="20" height="20">\]\]></macro>
You can also use a text macro to insert a string of formatted text. Here is an example:
<macro name="webdesign" type="html"><![CDATA[This
Web Site was designed using <b>GoLive.</b>\]\]></macro>
Automating insertion point placement and text selection in text macros
You can place the insertion point or select text for overtyping anywhere in the insert.
Placing the insertion point in an insert is accomplished by adding an empty selection at the point you wish the cursor
to appear. Here is an example:
<macro name="image" type="html"><![CDATA[<img
"src=%%" width="20" height="20">\]\]></macro>
This places the insertion point so that you can enter the attribute value without having to move the cursor to the
desired location.
Selecting text for overtyping is accomplished by enclosing a placeholder word or string within selection characters.
Here is an example:
<macro name="image" type="html"
[CDATA[<img "src=../GIFS/%???%.GIF " width="20" height="20">"\]\]></macro>
The three question marks enclosed in quotes will be selected when you insert this example macro, allowing them to
be overtyped.
Using keywords as substitutes for control characters in text macros
As already noted, you can use three control characters to specify what happens when a text macro is inserted:
• Single quotes (‘’) mark out a selection.
• The vertical bar places the insertion point.
• Dollar signs are used to reference another text macro.
ADOBE GOLIVE 9 324
User Guide
Now and then, syntax rules may require that you insert a macro with any of those characters in it. For example,
JavaScript syntax requires that text strings be enclosed in single quotation marks. This conflict is solved by substituting percent signs (or any other suitable character) for single quotation marks. The GoLive Text Macro tool has
three built-in keywords that allow you to redefine control characters:
• Selection lets you redefine the selection markers if single quotes are not allowed. Here is an example:
Selection = %
• Caret lets you redefine the insertion point marker if the vertical bar is not allowed—for example, because it is used
to express a bitwise OR operation in JavaScript.
CARET = %
• Macro lets you redefine the dollar signs enclosing a macro name.
MACRO = %
JavaScript
Using JavaScript
The GoLive built-in support for JavaScript and JScript lets you add interactivity to your documents, verify form
input, enhance visual displays, and dynamically control the browser. The JavaScript Editor lets you build scripts in
the application, embed them in your document, and test them immediately by launching the targeted browser.
Note: Not all browsers implement JavaScript in the same way. Test all JavaScripts on all of your target browsers.
To make it easy for you to add JavaScript, GoLive provides a complete inventory of building blocks for all major
from the Objects panel to the head section
JavaScript dialects and versions. Whenever you drag a Script icon
panel, specify the targeted application in the Inspector, which then configures the JavaScript Editor accordingly.
Combined with the ability of JavaScript to identify browsers, this feature makes it easy for you to build documents
with multiplatform support.
You can become familiar with the JavaScript environment in GoLive by entering JavaScript expressions into the
JavaScript Debugger accessed from the Special menu. This window provides a command line you can use to communicate interactively with the JavaScript engine built into GoLive. For more information on using the JavaScript Debugger,
see the SDK documentation.
See also
“Source preferences” on page 303
To set up a JavaScript
You can add JavaScripts to your document. You can also insert JavaScripts in the head section panel of the document
window to allow a script to be executed while the visible section of the document is still being loaded.
1 Do any of the following:
• To add a JavaScript to the body section of a page, drag the JavaScript icon
from the Basic set
of the Objects
panel to your document window.
• To add a JavaScript to the head section of a page, drag the Script icon
to the document window or the head section panel.
from the Head set
of the Objects panel
ADOBE GOLIVE 9 325
User Guide
2 If it’s not already selected, select the JavaScript icon in the document window, or the Script icon
section panel.
in the head
3 In the Inspector, enter a descriptive name in the Name text box. Choose a target browser from the Language menu.
The language version corresponding to your browser selection appears in the text box below the menu.
4 To reference an external script file (which must have the .js extension), select Source and do one of the following:
• Enter a resource locator for your script file.
• Click the Browse button to select a script.
• Drag from the pick whip in the Inspector to a script in the site window.
JavaScript Editor menu bar items
When using the JavaScript Editor, you can use the following items on the JavaScript Editor menu bar:
Shows and hides a panel in the top section of the JavaScript Editor. After you check
the syntax of your code, any errors are listed in the error display panel. You can move the cursor where an error is
located in your code by clicking the error in the error display panel.
Toggle Error Display button
Check Syntax button
Checks the syntax of your code. If any errors are found, the error display panel opens (if
it’s not already open) and the cursor is placed where the first error is located in your code.
Shows the number of errors to the right of the button.
Show Errors button
Show Warnings button
Word Wrap button
Numbers button
Colorize Code button
Shows the number of warnings to the right of the button.
Toggles the wrapping of source code at the margin of the JavaScript Editor on and off.
Shows the code line numbers.
Turns off the color for all items.
Theme menu Enables you to choose a theme for the current document.
Navigate Through Code menu
Enables you to navigate through code.
See also
“Navigating source code by function” on page 321
“Source preferences” on page 303
To edit an existing JavaScript
1 To open the JavaScript Editor, do one of the following:
• Double-click the JavaScript icon
in the document window.
• Select the JavaScript icon in the document window, and then click the Edit button in the Inspector.
2 If the icons on the menu bar in the JavaScript Editor are inactive, choose a script name from the list at the left side
of the JavaScript Editor.
ADOBE GOLIVE 9 326
User Guide
Create event definitions by entering event codes in the Event Code text box.
3 Choose an option from the View menu in the Script Inspector, and then drag an object from the Object list to the
JavaScript Editor window. For example, choose Events from the View menu to display a list of JavaScript events that
you can insert in your JavaScript.
4 In the Script Inspector, enter event code in the Event Code text box to create event definitions.
Choose a function declaration from the Navigate Through Code pop-up menu in the JavaScript Editor menu bar to
navigate directly to that location in the script. (See “Navigating source code by function” on page 321.)
5 Close the JavaScript Editor to save your work.
6 To open your web page in the browser you selected for previewing and testing in the Preferences dialog box,
choose File > Preview In > Default Browser
Sample JavaScript code
The following sample JavaScript code shows how to use a simple JavaScript to display the time and date obtained
from the viewer’s operating system.
JavaScript sample code and result
• The document.write() method on the “Your Local Time” line writes an H1-formatted text string from the
document to the screen of the browser.
• The new Date() method creates a new date object containing the long version of the current date from the viewer’s
operating system. This object is assigned to currtime.
• The last line is output to the browser’s screen using a document.write() method, with the embedded currtime
variable set to the current time and date.
ADOBE GOLIVE 9 327
User Guide
JavaScript libraries
Shifting code to an external library
GoLive can automatically create an external JavaScript library file that stores shared code from JavaScript actions,
rollovers, dynamic components, and animated scenes created in the DHTML Timeline Editor. At the same time, it
replaces the shared code in the page with a reference to the library file, leaving only page-specific declarations and
parameters in place. The library is then uploaded to the web server to make it available for every page in the site that
needs the script.
Benefits of using external JavaScript libraries
Apart from streamlining the code in your pages, this library offers two advantages:
• It remedies a problem associated with the structure of dynamic GoLive components: GoLive invariably places
common code for DHTML items and actions in the head section of a page. While this structure works well with
“straight” pages, problems could occur in earlier versions when a dynamic component contained DHTML items
and scripted actions. As the browser loads only the body section of a dynamic component, it ignores any script
code contained in the head section. This problem can be solved by using the external JavaScript library, making
JavaScript code in dynamic components work as expected.
• The browser caches the JavaScript library file and less code is written into every page, making the pages load faster.
The JavaScript library
You can choose the external JavaScript library feature on a per-page basis, as a site-wide setting, or as an applicationwide preference. If you choose the option in the application preferences or site settings, all new pages and existing
pages without preexisting JavaScript will use the new preference setting. Pages that already had actions and other
JavaScript added to them will retain their existing JavaScript Functions setting. You must change the setting for these
pages in the HTML tab of the Page Inspector.
To set the JavaScript library preference
1 Do one of the following:
• To affect all new pages, set the application JavaScript library preference: Choose Edit > Preferences, and select
Script Library from the list on the left.
• To affect all new pages in a site window, set the JavaScript library preference in the site settings: Choose Site >
Settings, select Script Library from the list on the left, and select Site Specific Settings on the right.
• To set the preference for a single page, open the HTML tab of the Page Inspector.
2 Use the JavaScript options as follows:
• To have GoLive write any required JavaScript code into the pages, select Write Code Into Page.
• To shift all shared JavaScript to an external JavaScript file, select Import GoLive Script Library. The file is saved to
a folder named Generated Items by default.
If you select the Import GoLive Script Library option, GoLive reacts in one of two ways, depending on whether or
not you have a site document open:
• If the site document is open, it will create a library file in a new folder named Generated Items at the root level of
the site folder when you save the page.
ADOBE GOLIVE 9 328
User Guide
• If you don’t have a site document open in the background when you save the page, GoLive writes the code to a
default library file, which can be found in the Modules/JScripts/GlobalScripts subfolder of the GoLive application
folder.
Note: Selecting the Import GoLive Script Library option in the Preferences or Site Settings dialog boxes does not modify
the Script Library settings for pages that contained preexisting JavaScript. To move code from those pages to the library,
select Import GoLive Script Library in the HTML tab of the Page Inspector for each page.
3 To rebuild the JavaScript library if it is damaged, click Rebuild in the application JavaScript preferences or in the
Site Settings dialog box.
4 Type a folder name for the JavaScript library and a library name with the suffix .js.
Flattening the script library
The external JavaScript library file contains the entire GoLive JavaScript library even if your pages don’t use all of the
functions within it. You can flatten the file to remove any JavaScript that is not used in the site. Flattening reduces
the library’s file size and decreases its download time. You can manually flatten the library file of a single site, set a
site’s Site Upload or Export preferences to automatically flatten the library file, or set the application preferences to
flatten the library file of all sites before upload or during export.
To manually flatten the JavaScript library of a single site
❖ Open a site window and choose Site > Update > Flatten Script Library.
To set a site to flatten the JavaScript library upon upload or export
1 In the Site Settings dialog box, select Upload/Export.
2 Select Site Specific settings and Edit Strip Options.
3 In the dialog box that appears, select Flatten Script Library and click OK.
4 Click OK on the Settings dialog box.
To set all sites to flatten the JavaScript library upon upload or export
1 Choose Edit > Preferences.
2 Expand Site and select Upload / Export.
3 Select Edit Strip Options and Flatten Script Library, and then click OK.
4 Click OK on the Preferences dialog box.
329
Chapter 19: Using actions
Actions overview
About actions
Adobe GoLive provides a complete set of pre-built actions—scripts triggered by events. These events may be
browser-triggered, such as loading a page, or user-triggered, such as moving the pointer over an image. Actions also
can be triggered by a point in time in a timeline sequence. To facilitate setting up actions, the Actions tab in the
Actions panel displays the selected item at the bottom (to ensure that you’re working with the right tag), and the
Action pop-up menu from the Actions button displays recently applied actions at the top (for quick selection).
You should always preview actions in a variety of web browsers and platforms to determine potential browser differences or incompatibilities. The earliest browser versions that support each action are displayed next to the selected
action name in the Actions panel.
To highlight actions in the document window
❖ From the Actions panel, choose the Highlight tab.
User-triggered actions are highlighted in the Layout Editor, Source Code Editor, Outline Editor, and markup tree bar.
Browser- and timeline-triggered actions highlight the body section of the page.
Note: You can change the highlight settings for actions in the View panel.
To filter actions based on browser compatibility
To ensure that particular versions of Internet Explorer and Netscape Navigator support the actions you choose, set
an action filter. If an action is not supported by the browsers selected in the action filter, the action will appear
dimmed in the Action menu.
1 From the Actions panel menu
, choose Set Action Filter.
2 Select the earliest Netscape Navigator version and Internet Explorer version that you want to support.
To remove recent actions from the Action pop-up menu
The upper part of the Action pop-up menu lists recently used actions. You can clear this list if it becomes too long.
❖ From the Actions panel menu
, choose Reset Action Menu.
Browser-triggered actions
Browser-triggered actions
Browser-triggered actions take place automatically as the result of browser activity or when the action is “called”
(triggered) by another action. You can set up a browser-triggered action to take place as a page loads, when the page
is finished loading, when the browser loads a specific line of code in the body or head section of a page, or when
another action triggers the action.
ADOBE GOLIVE 9 330
User Guide
To set up a head action
1 Drag the Head Action icon
from the Smart Objects set of the Objects panel to the page or choose Insert
Object > Smart > Head Action from the context menu in the head section of the page.
2 In the Actions panel, select a trigger option from the Events list to specify how and when the action executes:
OnLoad Triggers the action after the browser has loaded the page.
OnUnload Triggers the action when the browser leaves the page.
OnParse Triggers the action when the browser reads that section of the source code. This triggers the action before
any user interaction occurs.
OnCall Triggers the action later in the browser session by using the Call Action action.
3 Choose an action from the Action menu, and set the action’s properties.
To set up a body action
1 To set up a body action, do one of the following:
• Drag the Body Action icon
from the SmartObjects set of the Objects panel to the document window.
• Choose Insert Object > Smart > Body Action from the context menu in the body section of the page.
• Choose Type > Insert > Smart > Body Action.
There are no trigger options to set up. The action triggers automatically when the browser loads the page section in
which the body action resides.
2 Choose an action from the Action pop-up menu, and set the action’s properties.
User-triggered actions
User-triggered actions
User-triggered actions occur when a user interacts with some item on the page such as an image, rollover, text, or
form element.
GoLive includes the following user triggers:
Mouse Click Triggers an action after a single mouse click on the linked item.
Note: If you apply a Mouse Click action to a rollover object, the rollover’s navigational link (the URL field in the
Inspector) is disabled. To set the rollover’s link, add Goto Link as the last action for the Mouse Click event. See “Goto
Link” on page 336.
Mouse Enter Triggers an action when the pointer is moved over the linked item.
Mouse Exit Triggers an action when the pointer is moved away from the linked item.
Double Click Triggers an action when the viewer double-clicks the linked item.
Mouse Down Triggers an action when the viewer presses the mouse button while the pointer is over the linked item.
Mouse Up Triggers an action when the viewer releases the mouse button while the pointer is over the linked item.
Key Down and Key Press Trigged an action when the viewer presses any key.
Key Up Triggers an action when the viewer releases any key.
ADOBE GOLIVE 9 331
User Guide
Key Focus (form fields only) Triggers an action when the field is selected, an insertion point is placed in the field, or
when the viewer tabs to it.
Text Change (form fields only) Triggers an action after text is entered into the field and another field is selected.
Key Blur (form fields only) Triggers an action when the viewer tabs out of the field.
To set up a user-triggered action
1 In the Layout Editor, select text or an object on the page.
2 In the Actions panel, select a trigger option from the Events list. (See “User-triggered actions” on page 330.)
3 Click the Create New Action button
.
4 Choose an action from the Action pop-up menu, and set the action’s properties.
To remove all actions from a trigger
❖ Select the user trigged action (linked text, linked objects, or form objects) in the page, and choose Delete All
Actions from the Actions panel menu
.
Timeline-triggered actions
Timeline-triggered actions
Timeline actions are triggered at the point in time they are located in the DHTML Timeline Editor. In this way, you
can initiate time-based actions or actions that interact with a given scene.
See also
“Using the DHTML Timeline Editor” on page 127
To set up a timeline-triggered action
1 Choose Advanced > DHTML Timeline > Open Editor.
2 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the DHTML Timeline Editor to insert
an action placeholder.
3 In the Actions panel, click the New Item button
.
4 Choose an action from the Action pop-up menu, and set the action’s properties.
To delete a timeline-triggered action
❖ Select the action in the Actions Track of the DHTML Timeline Editor, and press Delete.
ADOBE GOLIVE 9 332
User Guide
Getters actions
About Getters actions
The Getters menu in the Actions panel contains actions that work with web page forms and layers.
Field Validator
The Field Validator action validates an entry in a form text, text area, or password field. If the action is applied to a
text field, the action is triggered when the viewer tabs out of the field, or enters text in the field and then selects a
different field. The action uses one of seven validation criteria.
Select a form text, text area, or password field. In the Actions panel, select a trigger option: Select the Key Blur event
for validating entries when the viewer tabs out of the field or the Text Change event for validating entries when the
viewer enters text and then selects another field. Choose Action > Getters > Field Validator.
Type the name of the form that contains the text field, and the name of the text field to validate. Select a validation
criterion from the Validation to Perform pop-up menu. If you choose the Field Has This Many Characters option,
define a numerical value in the # Of Characters text box. If you choose the Field = Exact Text String option, type the
text viewers must enter in the field in the Exact Text String text box.
Type an alert message to display if the field entry is not valid.
Note: If there are adjacent fields with Field Validator actions assigned to Key Blur events, separate the fields with a field
that doesn’t have a Key Blur event. Or separate the fields with a label, and assign a tabbing order to the field and labels.
(A label must contain at least one character, but you can make it appear blank by entering a space character.)
Get Layer Position
The Get Layer Position action reads the current position of a layer. You can process this information using, for
example, an Idle action that moves a second layer to the current position of that layer. This creates the impression
that the second object trails the first.
Trigger the action with a browser-triggered event set to OnCall in the head section of the page. In the Actions panel,
choose Action > Getters > Get Layer Pos. Select OnCall from the Events list and give the action a unique alphanumeric name.
Set up a timeline-triggered action to retrieve the layer coordinates from the Get Layer Position action. Some actions
you can consider using include Move By and Move To. Either of these actions can be used alone or in combination
adjacent
with a Condition or Idle action. When setting up a Move By or Move To action, click the red “C” icon
to the Position property twice until it changes to a green question mark icon , and choose the Get Layer Position
action name from the menu.
See also
“Move By” on page 344
“Move To” on page 344
“Condition” on page 351
“Idle” on page 351
ADOBE GOLIVE 9 333
User Guide
Get Form Value
The Get Form Value action reads the content of a form text, text area, or password field in the current page. This
action depends on input from the viewer in the form text field.
Trigger the action with a browser-triggered event set to OnUnload (or OnCall if you attach it to a form image that
serves as a Submit button). In the Actions panel, choose Action > Getters > Get Form Value. Enter the name of the
form in the Form text box and the name of text field in the Element text box.
If your form contains more fields you want to have read, insert more Get Form Value actions and set them up as
required. Set up companion actions that process the result—for example, a Set Cookie action that stores the contents
of various Get Form Value actions on the viewer’s hard disk.
See also
“WriteCookie” on page 356
Image actions
About Image actions
The Image menu in the Actions panel contains actions that enable you to preload images, set an image to automatically change based on certain criteria, and create remote rollovers.
DailyImageURL
DailyImageURL lets you display a different image for each day of the week, according to the date in the viewer’s
computer. For example, you can create a banner that changes daily when the page is loaded, or you can create an
image viewers can click to replace with the picture of the day.
In the page, select the image you want to replace based on the day of the week. In the Basic tab of the Image Inspector,
enter a unique alphanumeric name in the Name text box.
Normally, all images will display with the dimensions of the placeholder image. To enable the images to display with
different dimensions, change the placeholder image’s Width and Height values from Pixel to Image in the Image
Inspector.
Trigger the action with a browser-triggered event set to OnLoad, or a user-triggered event. Choose Action > Image >
DailyImageURL. Choose the placeholder image’s name from the Image menu. (This is the image that is replaced with
another image for that day.) For each day, reference the image you want to replace the base image.
Preload Image
The Preload Image action forces the browser to cache specified images before the page displays. This is useful if there
are images that don’t display until after a user interacts with the page, such as a rollover image, or until a certain point
in time. Although the page may take longer to load initially, preloaded images are immediately available when
loading is complete. Preloading images enables rollover images to display faster when the viewer interacts with them,
and DHTML animations and actions can immediately swap images.
Note: The rollover images referenced in a GoLive Rollover object are automatically preloaded. An additional Preload
Image action is not required for it. An Image object with rollover states has a Preload option that can be selected in the
Image Inspector.
ADOBE GOLIVE 9 334
User Guide
Trigger the action with a browser-triggered event set to OnLoad. In the Actions panel, choose Action >
Image >Preload Image. Reference an image file you want to preload.
If you need to preload multiple images rather than adding a new Head Action icon for each image, set up one Head
Action icon with the Action Group action and add each Preload Image action to it. (See “Action Group” on page 350.)
RandomImage
The RandomImage action randomly swaps the contents of an image placeholder with one of three images each time
the page is loaded.
In the page, select the image you want to replace, and in the Basic tab of the Image Inspector, enter a unique alphanumeric name in the Name text box.
Normally, all images will display with the dimensions of the placeholder image. To enable the images to display with
different dimensions, change the placeholder image’s Width and Height values from Pixel to Image in the Image
Inspector.
Trigger the action with a browser-triggered event set to OnLoad, or a user-triggered event. Choose Action > Image >
RandomImage. In the Base Image pop-up menu, choose the base image you want to have replaced. Reference each
of the alternate image files.
Important: You must reference all three images to replace the placeholder image; otherwise the image will randomly
appear as an empty reference.
Set Image URL
The Set Image URL action lets you create remote rollovers, also known as secondary or disjointed rollovers, which
swap the content of a placeholder image when the viewer interacts with other content on the page. You can also set
up multiple timeline-based Set Image URL actions to create a slide show.
In the page, select the image placeholder you want to replace, and in the Basic tab of the Image Inspector, enter a
unique alphanumeric name in the Name text box.
Normally, all images will display with the dimensions of the placeholder image. To enable the images to display with
different dimensions, change the placeholder image’s Width and Height values from Pixel to Image in the Image
Inspector.
Trigger the action with a user- or timeline-triggered event. Choose Action > Image > Set Image URL. Choose the
image you want to replace from the Image pop-up menu and reference the image that will replace the base image.
To restore the base image to its original image, trigger a second mouse event (such as Mouse Exit), key event, or
timeline event, and set up a Set Image URL action that specifies the same placeholder image and references the
original base image.
Link actions
About Link actions
The Link menu in the Actions panel contains a wide variety of actions that link to new pages or files, redirect a
browser depending on certain criteria, or work within a frame set.
ADOBE GOLIVE 9 335
User Guide
CSS Redirect
The CSS Redirect action applies a particular external cascading style sheet to the web page if the action detects a
specified platform and browser.
Trigger the action with a browser-triggered event set to OnParse in the head section of the page. In the Actions panel,
choose Action > Link > CSS Redirect. Choose a platform and browser from the pop-up menu, and reference the
external style sheet that will be used if the selected platform and browser are detected. Add additional Head Action
icons, and repeat for any additional platform and browser-specific external cascading style sheets.
Close Window
The Close Window action closes the current window. Some browsers will prompt the user to approve or cancel the
window closure.
Trigger the action with a user- or timeline-triggered event. Choose Action > Link > Close Window.
ConfirmLink
ConfirmLink displays a confirmation dialog box before loading the linked page. This enables the viewer to confirm
whether they want to go to the link or remain on the current page.
Trigger the action with a user-triggered event. In the Actions panel, choose Action > Link > ConfirmLink. Enter the
confirmation message in the Message text box. You can force a line break within the message by typing \n. Reference
the page you want to link to in the Go To This URL on OK text box. If the current page is in a frame set, enter the
frame name you want the linked page to appear within in the Target Frame Name text box. Or leave it blank to
replace the entire frame set with the linked page.
DailyRedirect
DailyRedirect lets you display a different web page for each day of the week, based on the date set in the viewer’s
computer.
Trigger the action with a user-triggered event, browser-triggered event set to OnLoad, or timeline-triggered event.
Alternatively, to trigger the action when the viewer leaves the current page, use a browser-triggered event set to
OnUnload. Choose Action > Link > DailyRedirect. For each day of the week, reference a page in your site or an
external URL you want to display.
ForceFrame
ForceFrame prevents a page that appears within a frame set from being viewed outside of the frame set. For example,
a search engine might link directly to a web page that is supposed to appear in a frame of a frame set page. With
ForceFrame, a browser that loads the search engine’s link to your page would load the entire frame set page instead
of just the single page. This action is particularly useful if the other frames in your page contain elements such as
banner logos that identify your site, or buttons for navigating through the site.
Trigger the action with a browser-triggered event set to OnLoad. The trigger can be applied to all pages that appear
within the frame set, but not to the frame set document. In the Actions panel, choose Action > Link > ForceFrame.
For the frame set link destination, reference the frame set page in which you want to contain the current page. For
Frame, enter the name of the frame in which you want the content page to appear.
Go Last Page
The Go Last Page action forces the browser to jump to the last page visited.
ADOBE GOLIVE 9 336
User Guide
Trigger the action with a user- or timeline-triggered event. Alternatively, to trigger the action when the viewer leaves the
set to OnUnload. Choose Action > Link > Go Last Page.
current page, trigger the action with a Head Action icon
Goto Link
The Goto Link action links to a page in your site or an external URL. If applied as a timeline-triggered action, the
Goto Link action can be used to link to a new page at a certain point in time. If applied as a browser-triggered action
set to OnCall, this action can be used to make it easier to maintain links that reference the same URL. In this example,
you would apply the Call Action to the links to trigger the Goto Link.
Trigger the action with a user-triggered event, browser-triggered event set to OnCall, or timeline-triggered event.
Alternatively, to trigger the action when the viewer leaves the current page, use a browser-triggered action set to
OnUnload. Choose Action > Link > Goto Link. In the Link text box, reference a page or URL. If the current page is
located in a frame set, enter the frame name you want to target in the Target text box, or leave it blank to have the
link replace the current frame.
To link to a URL that you retrieve from a variable, click the small red “C” icon
adjacent to the pick whip to change
it to a blue circle icon , and choose a variable from the pop-up menu. To link to a URL that you retrieve from a
browser-triggered action set to OnCall in the head section, click the icon again to change it to a question mark
,
and select an action from the pop-up menu.
See also
“Call Action” on page 350
Key Press
The Key Press action triggers another action when the viewer presses a specified key. You can set one to four keys to
trigger different actions.
Before you add the Key Press action, create up to four browser-triggered actions that will be triggered by a key press
event and set each to execute OnCall. Enter an alphanumeric name for each action in the Name text box of the Actions
panel. Trigger the Key Press action with a browser-triggered event set to OnLoad. Choose Action > Link > Key Press.
Enter a single number or lowercase letter in a Key text box and choose an action name from the pop-up menu.
Note: There can only be one Key Press action in a page. If a second Key Press action is added, the first Key Press action
will not function.
KillFrame
KillFrame prevents pages from being loaded into a frame of a frame set. You can use this action to prevent a different
website from displaying your page in a frame, and their logo or advertising in another frame on their web page.
Trigger the action with a browser-triggered event set to OnLoad. Choose Action > Link > KillFrame.
Navigate History
The Navigate History action makes the browser jump backward or forward through the browser’s history of links by
a specified number of pages.
Trigger the action with a user- or timeline-triggered event. Choose Action > Link > Navigate History. To go
backward in the history of links, enter a negative integer in the Go Where text box. To go forward, enter a positive
integer.
ADOBE GOLIVE 9 337
User Guide
Open Window
The Open Window action lets you open a link in a new browser window on top of the current window.
Trigger the action with a browser-triggered event set to OnLoad or a user-triggered event. Alternatively, to trigger
the action when the viewer leaves the current page, use a browser-triggered action set to OnUnload. Choose
Action > Link > Open Window. Reference a page or external URL for the link destination.
If you plan to use multiple Open Window actions in the current page, and want each link to open in a new window,
rather than share a single new window, leave the Target text box blank for each action. To open all links triggered by
an Open Window action in the same new window, enter the same alphanumeric name in the Target text box for each
action.
Enter the pixel width of the new window in the first Size text box, and the pixel height in the second Size text box.
Select any of the remaining options to define the new window properties. Resize and Scroll enable the viewer to
resize the browser window and if necessary scroll in the window. The other options will show or hide a browser
feature.
Open Window Prompt
The Open Window Prompt action prompts the viewer to enter width and height pixel values, and then opens the
current page in a new window sized to those dimensions.
Trigger the action with a user-triggered event, browser-triggered event set to OnLoad, or timeline-triggered event.
Choose Action > Link > Open Window Prompt. Select any of the remaining options to define the new window
properties. Resize and Scroll enable the viewer to resize the browser window and if necessary scroll in the window.
The other options will show or hide a browser feature.
PDF Redirect
The PDF Redirect action detects the Adobe Portable Document Format (PDF) browser plug-in and sends the
browser to a specified PDF file or web page if the plug-in is installed. If the plug-in is not installed, the browser
displays the page in which the PDF Redirect action resides.
Create a page designed for browsers that don’t have the PDF plug-in. For example, you can provide the PDF content
in HTML format, or include a link to a web page where viewers can download the plug-in.
In the page you designed for browsers that don’t have the plug-in, trigger the action with a browser-triggered event
set to OnParse in the head section of the page. Choose Action > Link > PDF Redirect. For the PDF Page text box,
reference the PDF file or page that viewers will see if their browser has the plug-in installed.
Random Links
The Random Links action redirects a browser to six random links, and hides the browser window’s toolbar and
address bar.
Trigger the action with a user-triggered event, browser-triggered event set to OnLoad, or timeline-triggered event.
set to
Alternatively, to trigger the action when the viewer leaves the current page, use a Head Action icon
OnUnload. Set Target to one of the following:
• To replace the current page or frame with the link, leave the text box blank or enter_self.
• To open the link in a new window every time the action is triggered, enter_blank.
• To open the link and each subsequent trigger of the action in the same new window, enter a unique alphanumeric name.
• To open the link in a frame, enter the frame name. The page must be in a frame set to target a frame.
ADOBE GOLIVE 9 338
User Guide
Redirect Prompt
The Redirect Prompt action prompts the viewer for one of up to five answers and redirects them to a specific page
according to their answer.
Trigger the action with a browser-triggered event set to OnLoad, a user-triggered event, or a timeline-triggered
event. Choose Action > Link > Redirect Prompt. In the Question text box, enter a question that prompts the viewer
for one of up to five answers. Optionally, in the Display Possible Answers text box, enter a message that contains the
possible answers. (This message will be the default text in the text box that the viewer uses to enter an answer.) In the
Alert If Invalid Answer text box, enter a message that will prompt viewers if they enter an invalid answer.
If you want to redirect the viewer to the same page each time they visit the current page, select the Remember Choice
And Auto-redirect Next Time option. (If a viewer’s browser is set to disable cookies, this option will not function.)
Enter a name for the cookie.
SVG Redirect
The SVG Redirect action detects an SVG-related plug-in and sends the browser to a page with SVG content if a plugin is installed. If a plug-in is not installed, the browser redirects to a page from which a plug-in can be downloaded.
To set up the SVG Redirect action, create a page designed for browsers that don’t have the SVG plug-in. (For example,
you can provide the SVG content in a different format, or add a link to a web page where viewers can download the
plug-in.)
Trigger the action with a browser-triggered event set to OnParse in the head section of the page. In the Actions panel,
choose Action > Link > SVG Redirect. For the SVG Page link destination, specify the web page with SVG content
that viewers will see if their browser has the plug-in installed.
SWF Redirect
The SWF Redirect action detects the SWF (Flash™) browser plug-in, and sends the browser to a page with SWF
content if the plug-in is installed. If the plug-in is not installed, the browser displays the page in which the action
resides.
To set up the SWF Redirect action, create a page designed for browsers that don’t have the SWF plug-in. (For
example, you can provide the SWF content in a different format, or add a link to a web page where viewers can
download the plug-in.)
Trigger the action with a browser-triggered event set to OnParse in the head section of the page. In the Actions panel,
choose Action > Link > SWF Redirect. For the SWF Page link destination, specify the web page with SWF content
that viewers will see if their browser has the plug-in installed. To display a custom message for viewers without the
plug-in, select Display Alert if No Plug-in Found, and enter a message in the Alert text box.
Slide New Window
The Slide New Window action opens a new browser window and slides it to the center of the screen.
Trigger the action with a browser-triggered event set to OnLoad, a user-triggered event, or a timeline-triggered
event. Choose Action > Link > Slide New Window. Reference the document that will open in the new window. In
the Target text box, enter a unique alphanumeric name, without spaces. (If the target is left blank, some browsers will
display a new window each time the page containing the action is visited.)
ADOBE GOLIVE 9 339
User Guide
Enter the pixel width of the new window in the first Size text box, and the pixel height in the second Size text box.
Select any of the remaining options to define the new window properties. Resize and Scroll enable the viewer to
resize the browser window and if necessary scroll in the window. The other options will show or hide a browser
feature.
Target2Frames
Target2Frames lets you target two frames of a frame set with links to two different web pages from a single link.
Trigger the action with a user-triggered event on a page that resides in a frame of a frame set. Choose Action > Link >
Target2Frames. In Frame 1, enter the name of the frame in which you want the first link to appear when the action
is triggered. Reference the link destination in the Link text box, or enter an external URL. In Frame 2, enter the name
of the frame in which you want the second link to appear when the action is triggered. Reference the link destination
in the Link text box, or enter an external URL.
TargetRemote
The TargetRemote action opens a link in a window that is already open. The TargetRemote action is applied within
a page that has been opened with the Open Window action from another page. For example, you can use Target
Remote to set up a small hyperlinked menu outside the main browser window so that when a viewer clicks an item
in the menu window, the target URL opens in the main browser window.
Set up an Open Window action in one page to open another page in a new window.
Important: If remote windows are resized in Netscape Navigator, they cannot target the original window. For this
reason, the OpenWindow action should not have the Resize option selected.
In the page that is opened by the Open Window action, trigger the TargetRemote action with a user-triggered event.
In the Actions panel, choose Action > Link > TargetRemote. For the URL Link, reference the page or external URL
that you want to load in the original window when the link is clicked. If the original window contains a frame set
and you want the linked page to open in one of the frames, enter the name of the frame in the Optional Target Frame
Name text box. Add additional user-triggered events to the page as needed and repeat.
See also
“Open Window” on page 337
TextSwap
The TextSwap (ID) action can replace text on a page or the contents in either a layer or a table cell with new text. Any
content within the layer or table cell will be replaced by the new text. If the item to be replaced is text or the contents
of a table cell, either must use an ID style. The new text can either display for a set number of seconds before reverting
to the original content or it can disappear without restoring the original content.
Important: This action works on Internet Explorer 5+ and Netscape 6+ browsers.
Trigger this action with a user- or timeline-triggered event. Choose Action > Link > TextSwap (ID). If the content to
be replaced is inside a layer, choose the layer name from the Layer pop-up menu. If the content to be replaced is text
or the contents of a table cell, enter the ID style name used without its # symbol in the Element ID text box. Enter
the new text.
ADOBE GOLIVE 9 340
User Guide
Enter the number of seconds the new text will display before it reverts to the original content or simply disappears.
If you don’t want the original text or content to return to the page when the new text disappears, select Disappear
Instead Of Revert. If you want to customize the formatting of the new text, enter an HTML start tag with attributes
in the <open> text box and enter its closing tag in the </close> text box. For example, if you want the new text to
display in green at size 5, you can enter
<font color="#00FF00" size="5">
in the <open> text box and
</font>
in the </close> text box.
See also
“ID styles” on page 194
“Applying styles” on page 204
TimeRedirect
TimeRedirect lets you display a different web page, based on the time set in the viewer’s computer. When a viewer
loads the page or clicks an item, the browser is redirected to one page if the current time is before the specified time
and redirects to a different page if the current time is at or after the specified time.
Trigger the action with a user- or a browser-triggered event. Choose Action > Link > TimeRedirect. For Time, enter
the hour before or after you want the redirection to occur as an integer between 1 and 12. Select PM to set the hour
as PM; leave it unselected to set the hour as AM. Select Before, and specify a page or URL to display before that time;
leave this option unselected if you don’t want to redirect the page before the specified time. Select At/After, and
reference a page or external URL to display at or after the specified time; leave this option unselected if you don’t
want to redirect the page at or after the specified time.
Message actions
About Message actions
The Message menu in the Actions panel contains actions that write text on a page, display the date a page was last
uploaded to the server, open an alert message, request a password from the viewer, and display text in the browser
window’s status bar.
Document Write
The Document Write action is applied with a browser-triggered body action. When the browser gets to the action’s
code in the page, the Document Write action replaces the body action with text or code you specify, the current value
retrieved by an action, or the value of a variable.
Trigger the action with a browser-triggered event at a convenient location in the body section of the page. Choose
Action > Message > Document Write. Enter the text or code that you want to be written. To retrieve and write text
adjacent to the HTML text box to change it to a blue circle icon ,
from a variable, click the small red “C” icon
and choose a variable from the pop-up menu. To retrieve text from a browser-triggered action set to OnCall in the
head section, click the icon again to change it to a question mark icon , and select an action from the pop-up menu.
ADOBE GOLIVE 9 341
User Guide
Last Modified (ID)
The Last Modified (ID) action displays the date the page was last uploaded to the server. The date can replace placeholder text on the page, or display in either a layer or a table cell. All content within the layer or table cell will be
replaced by the last modified date. If the action is applied to placeholder text or to the contents of a table cell, either
must use an ID style.
Important: This action works on Internet Explorer 5+ and Netscape 6+ browsers.
Trigger the action with a browser-triggered event set to Onload or a user-triggered event. Choose Action >
Message > Last Modified (ID). If you want the date to appear inside a layer, choose the layer name from the Layer
pop-up menu. If the date will appear in place of text on the page or the contents of a table cell, enter the ID style name
used without the # symbol in the Element ID text box.
Choose a numerical Date Format from the menu. To display the day of the week preceding the numerical date, select
Include Day Of Week. In the Lead In Text text box, enter the text you want to precede the date. If you want to customize
the text formatting of the date, enter an HTML start tag with attributes in the <open> text box and enter its closing tag
in the </close> text box. For example, if you want the new text to display in green at size 5, you could enter
<font color="#00FF00” size="5">
in the <open> text box and
</font>
in the </close> text box.
See also
“ID styles” on page 194
“Applying styles” on page 204
Last Modified (form)
The Last Modified (form) action displays the date the page was last uploaded to the server. The date displays in a
form field and has the option to also display in a browser alert message.
Trigger the action with a browser-triggered event set to OnLoad. Choose Action > Message > Last Modified (form).
Enter the form name in the Form text box. (For Internet Explorer viewers, the form name cannot be “form”.) Enter
the text field name in the Field text box. Choose a numerical Date Format from the menu. To display the day of the
week as a word preceding the numerical date, select Include Day Of Week. An alert message that displays the date
appears by default. Select Disable Alert to not display this alert.
Open Alert Window
The Open Alert Window action lets you open an alert dialog box with a custom text message.
Trigger the action with a user-triggered event, browser-triggered event set to OnLoad, or with a timeline-triggered
event. Choose Action > Message > Open Alert Window. Enter the message that will appear in the Alert dialog box.
adjacent to the Message text box to change it to a
Or to retrieve text from a variable, click the small red “C” icon
blue circle icon , and choose a variable from the pop-up menu. To retrieve text from a browser-triggered action
set to OnCall in the head section, click the icon again to change it to a question mark icon , and select an action
from the pop-up menu.
ADOBE GOLIVE 9 342
User Guide
Password
The Password action lets you protect pages with a reasonable level of security without any server-side scripting.
Unlike other JavaScript password-protection scripts, this action uses an encrypted password and cannot be bypassed
by turning off JavaScript in the browser or viewing the source code. Creating the Password action consists of three
parts: using a provided HTML file to generate an encrypted password, naming the password-protected page appropriately, and applying a Password action to a page that refers to the password-protected page.
Although the Password action provides a reasonable level of security, it is still possible to bypass the password. It is
therefore not recommended for sites that require a high level of security. Also, the password-protected file must be
placed in a directory that contains a default root page such as index.html (depending on your ISP), so that the
contents of the directory cannot be viewed by entering the directory location into the browser.
Use your browser to open the file makepassword.html located in the GoLive 9/Modules/JScript/Actions/Message
folder. The password you choose is case-sensitive and should not contain any spaces. Click the link on the
makepassword.html page. Enter the password you want to use in the dialog box that appears and click OK. Write
down the encrypted version of the password that follows “The encrypted password is” in the alert message.
Name the page that will be password-protected using the nonencrypted version of your password plus the suffix
.html. For example, if your password is Sommer, the password-protected page name must be Sommer.html.
Trigger the action with a user-triggered event in a page other than the page that will be password-protected. (Do not
link to the password-protected page or to anything else with the trigger link.) Choose Action > Message > Password.
In the Encrypted Password text box, enter the encrypted password you wrote down. For Alert On Correct Login,
enter any message you want to display when viewers enter the correct, nonencrypted password. Make sure the
password-protected page and the page that links to it are located in the same directory.
Set Status
The Set Status action allows you to display a custom message in the status line at the bottom of the browser window.
Trigger the action with a browser-triggered event set to OnLoad, user-triggered event, or timeline-triggered event.
Choose Action > Message > Set Status from the Message. Enter a message in the text box.
Multimedia actions
About Multimedia actions
The Multimedia menu in the Actions panel contains actions that interact with layers, sound, or images on a page.
Drag Layer
The Drag layer action allows viewers to drag a layer around the page in their browser window. Make sure that your
page has a layer with content within it or visible properties before you create the action. Trigger the action with a
browser-triggered event set to OnLoad. Choose Action > Multimedia > Drag Layer. Choose the layer you want to
make draggable from the Layer pop-up menu.
See also
“To add a layer to a page” on page 122
ADOBE GOLIVE 9 343
User Guide
Flip Move
When triggered for the first time, the Flip Move action moves a layer to a new specified position. When triggered for
the second time, it moves the layer to a second specified position that can be the original starting location or a new
location. For example, you can attach this action to a button to let the viewer flip an object into view that is initially
hidden beyond the edge of the browser window and flip it back out of sight again.
Make sure your page has a layer with content within it or visible properties before you create the action. Trigger the
action with a user- or timeline-triggered event. Choose Action > Multimedia > Flip Move. Choose the layer you want
to move from the Layer pop-up menu. The text boxes adjacent to Position 1 represent the location (Left and Top
values) the layer will be moved to when the action is first triggered. Either enter the left and top values in the text
boxes, or move the layer to the desired location and click Get to retrieve its current Left and Top coordinates. Position
2 represents the location the layer will be moved to when the action is triggered a second time. Enter the values, or
move the layer to the desired location and click Get.
To make the layer slide to each location, select the Animation option, and enter a positive integer in the Ticks text
box to specify the animation speed. One tick equals 1/60 of a second. The higher the number of ticks, the slower the
movement. If Animation is not selected, the layer instantly appears in each specified location when the action is
triggered.
Float Layer
The Float Layer action locks a layer’s position relative to the browser window as the viewer scrolls the page.
Make sure your page has a layer with content within it or visible properties before you create the action.
Important: Internet Explorer 4.5 and earlier will not see the layer in the specified position unless a Move To action is set
up for the layer before the Float Layer action. The Float Layer action will work in other browsers whether or not there
is a Move To action in the page.
Trigger the action with a browser-triggered action set to OnLoad, user-triggered or timeline-triggered event. Choose
Action > Multimedia > Float Layer. Select the layer name from the pop-up menu. Enter the desired position to lock
the layer in the Page Position text boxes. (The values use pixel units.)
See also
“Move To” on page 344
“To add a layer to a page” on page 122
“To convert a layer into a table-based layout grid” on page 126
Mouse Follow
The Mouse Follow action makes a layer follow the viewer’s pointer inside the browser window. (The layer appears
below and to the right of the pointer.) If the pointer moves off the window, the layer remains near where the pointer
last appeared.
Make sure that your page has a layer with content within it or visible properties before you create the action. Trigger
the action with a browser-triggered event set to OnLoad, user- or timeline-triggered event. Choose Action >
Multimedia > Mouse Follow. Choose the layer from the Layer pop-up menu.
ADOBE GOLIVE 9 344
User Guide
See also
“To add a layer to a page” on page 122
“To add content to a layer” on page 122
Move By
The Move By action moves a layer horizontally, vertically, or both by a specified distance.
Make sure your page has a layer with content within it or visible properties before you create the action. Trigger the
action with a user- or timeline-triggered event. Choose Action > Multimedia > Move By. Choose the layer you want
to move from the Layer pop-up menu. Enter values in the DeltaX and DeltaY text boxes. (DeltaX represents the
distance in pixels to move the layer to the right, and DeltaY is the distance to move the layer down.) Or to retrieve
adjacent to the DeltaX and DeltaY text boxes to change it to
values from a variable, click the small red “C” icon
a blue circle icon , and choose a variable from the pop-up menu. To retrieve text from a browser-triggered action
set to OnCall in the head section, click the icon again to change it to a question mark , and select an action from
the pop-up menu.
See also
“To add a layer to a page” on page 122
“To add content to a layer” on page 122
Move To
The Move To action moves a layer to a new position on the page.
Make sure that your page has a layer with content within it or visible properties before you create the action. Trigger
the action with a user- or timeline-triggered event. Choose Action > Multimedia > Move To. Choose the layer you
want to move from the Layer pop-up menu.
Enter values in the Position text boxes (the first text box represents the distance in pixels to move the layer to the
right, and the right text box is the distance to move the layer down), or move the layer to the desired location and
adjacent to the Position text box to
click Get. Or, to retrieve values from a variable, click the small red “C” icon
change it to a blue circle icon , and choose a variable from the pop-up menu. To retrieve text from a browsertriggered action set to OnCall in the head section, click the icon again to change it to a question mark icon , and
select an action from the pop-up menu.
To make the layer slide to the new location, select the Animated option, and enter a positive integer in the Ticks text
box to define the animation speed. One tick equals 1/60 of a second. The higher the number of ticks, the slower the
movement. If Animated is not selected, the layer instantly appears in the new location when the action is triggered.
See also
“To add a layer to a page” on page 122
“To add content to a layer” on page 122
ADOBE GOLIVE 9 345
User Guide
Play Scene and Stop Scene
The Play Scene and Stop Scene actions let you manage the playback of single-scene or multiple scene animations
created in the DHTML Timeline Editor. You can control multiple-scene animations dynamically by creating
timeline-triggered Play Scene and Stop Scene actions or let the viewer control scene playback when they click
buttons on the page.
Make sure the page has one or more scenes in it before you create the Play Scene or Stop Scene action. Trigger the
action with a user- or timeline-triggered event. Choose Action > Multimedia > Play Scene or Stop Scene. Inserting
a Stop Scene action is a good practice before inserting a Play Scene action; it stops any other animation that may still
be playing when the viewer clicks the Play button. To set up a Stop Scene action or Play Scene action, choose the
scene you want the browser to stop or play back from the Scene pop-up menu.
Play Sound and Stop Sound
The Play Sound and Stop Sound actions let you manage the playback of an audio plug-in on a page. You can control
sounds dynamically by creating timeline-triggered Play Sound and Stop Sound actions or let the viewer control
sound playback when they click buttons on the page.
Note: The Play Sound action requires a cross-platform, cross-browser audio plug-in that can be controlled by JavaScript,
such as the LiveAudio plug-in.
Make sure you have an audio plug-in on the page and that it is named in the Basic tab of the Inspector. Trigger the
action with a user- or timeline-triggered event. Choose Action > Multimedia > Play Sound or Stop Sound. Inserting
a Stop Sound action is good practice before inserting a Play Sound action; it stops any other sound track that may
still be playing when the viewer clicks the Play button. To set up a Play Sound or Stop Sound action, choose the sound
you want to start playing back or the sound you want to stop from the Name pop-up menu.
ShowHide
The Show Hide action lets you show or hide the content of a layer in the page. For example, you can use this action
to create drop-down menus that appear when the viewer clicks on a menu item and hide when the pointer rolls off
the item. Alternatively, you can show or hide objects dynamically by inserting two keyframes in the DHTML
Timeline Editor and adding Show Hide actions to the time track of the layer.
Make sure that your page has a layer with content within it or visible properties before you create the action. If you
want a layer to not appear on the page until it is targeted to show by a ShowHide action, deselect Visible in the Layer
Inspector. Trigger the ShowHide action with a user- or timeline-triggered event. Choose Action > Multimedia >
ShowHide. In the Layer menu, choose a layer. In the Mode menu, choose what should happen to the layer:
• Hide hides the layer until a Show action that targets it is triggered.
• Show displays the layer until a Hide action that targets it is triggered.
• Toggle shows or hides the layer, depending on its current visibility status.
SlideShow and SlideShowAuto
SlideShow and SlideShowAuto let you manage the playback of a series of images. SlideShow lets viewers cycle
through a series of images by clicking a link. Each click displays the next image in the series. SlideShowAuto displays
a series of images automatically with a specified time interval between images (similar to an animated GIF).
The following rules apply to images used for the SlideShow and SlideShowAuto actions:
• They must be in the same folder as the first image placed on the page.
ADOBE GOLIVE 9 346
User Guide
• They can be either GIF or JPEG images, but you cannot mix GIF and JPEG images in the same slide show.
• They must be named in sequence, ending with 01 and the .gif or .jpg extension. For example, the starting GIF
image could be named poster01.gif, and the others would be named poster02.gif, poster03.gif, and so on. Alternatively, you could name the images simply 01.gif, 02.gif, 03.gif, and so on.
• You cannot have more than one SlideShow action and SlideShowAuto action on the same page.
Place the slide show’s first image in the page, and enter a unique alphanumeric name in the Basic tab of the Image
Inspector. Trigger the SlideShow action with a user- or timeline-triggered event, or trigger the SlideShowAuto action
with a user- or timeline-triggered event, or with a browser-triggered event set to OnLoad. Choose Action >
Multimedia > SlideShow or SlideShowAuto. From the Base Image menu, choose the starting image. For # of Images,
enter the total number of images in the slide show.
Playback options for the SlideShow action
Loop Repeats the slide show after the final image is shown.
Play Backwards Displays the images from the last to the first. This option lets you create forward and backward links
for the slide show.
Palindrome Plays the slide show forward and then backward continuously. To use this option, you must select Loop
as well.
Leaving all three options unselected plays the slide show a single time.
Playback options for the SlideShowAuto action
Interval (in Secs.) Specifies the number of seconds to wait between displaying images.
Stop At End Of Slideshow Plays the slide show a single time only. Otherwise, the slideshow will play continuously.
Normally, all images display with the dimensions of the base image. To enable each image to display with its own
dimensions, change the base image’s Width and Height values from Pixel to Image in the Image Inspector.
SlideShowAutoStop
SlideShowAutoStop is a companion action to SlideShowAuto and lets viewers pause or continue an automatic, timed
slide show. For example, to create a “pause” button, you can apply this action to a button on the same page as the
automatic slide show. This action can only be used on a page where the SlideShowAuto action is applied.
Trigger the action with a user-triggered event. Choose Action > Multimedia > SlideShowAutoStop.
Stop Complete
The Stop Complete action stops all animation in the browser’s window. As a courtesy to viewers with slow connections, include a Stop Complete button in any animated page you create.
Trigger the action with a user-triggered event. Choose Action > Multimedia > Stop Complete.
Wipe Transition
The Wipe Transition action uses a sliding mask effect to gradually reveal or conceal the content in a layer.
ADOBE GOLIVE 9 347
User Guide
Make sure that your page has a layer with content within it or visible properties before you create the action. Trigger
the action with a user- or timeline-triggered event. Choose Action > Multimedia > Wipe Transition. Choose a layer
in the Layer menu. Select an option from the Transition menu to determine the way the layer will be wiped in
(revealed) or out (concealed). Enter a positive integer in the Steps text box to determine the number of steps for the
transition. The higher the number of steps, the smoother the transition appears.
Others actions
About Others actions
The Others menu in the Actions panel contains actions that display clocks, set browser window properties, print a
page, set the page background color, display search engine results, or fix a Netscape CSS and layer-related problem.
Clock Date (ID)
The Clock Date (ID) action displays a live text-based clock that can display the local date, local time, or both. The
clock uses the viewer’s system clock to determine the local date and time. The clock can replace placeholder text on
the page, or display in a layer or a table cell. If the action is applied to placeholder text or the content in a table cell,
either must use an ID style.
Important: This action works on Internet Explorer 5+ and Netscape 6+ browsers.
Trigger the action with a browser-triggered event set to OnLoad. Choose Action > Others > Clock Date (ID). If you
want the clock to appear inside a layer, choose the layer name from the Layer pop-up menu. (All content within the
layer will be replaced by the clock.) If the date will appear in place of text on the page or the contents of a table cell,
enter the ID style name used without the # symbol in the Element ID text box.
Select Show Local Time if you want to display the time. Select Use 24-hour Time to display 24-hour time, or leave it
unselected to display 12-hour A.M. and P.M. time. To display the local date, select Show Date and choose a numerical
date format from the pop-up menu. To display the day of the week as a word preceding the numerical date, select
Include Day Of Week. In the Lead In Text text box, enter the text you want to precede the date. If you want to
customize the text formatting, enter an HTML start tag with attributes in the <open> text box and enter the HTML
closing tag in the </close> text box. For example, if you want the new text to display in green with a size of 5, you
could enter
<font color="green" size="5">
in the <open> text box and
</font>
in the </close> text box.
See also
“ID styles” on page 194
“Applying styles” on page 204
Digital Clock
The Digital Clock action displays a live clock that displays the local time using images that you provide. The clock
uses the viewer’s system clock to determine the local time.
ADOBE GOLIVE 9 348
User Guide
Create ten different images to represent the numbers 0 through 9 and place them in the same folder. The images must
all be either GIFs or JPEGs, and cannot be a combination of both. The images must be named either 0.gif, 1.gif, 2.gif,
and so on, or 0.jpg, 1.jpg, 2.jpg, and so on. Place any four of the images on your page to serve as placeholders for the
clock digits. In the Basic tab of the Image Inspector, enter a unique name for each image placeholder.
Normally, all images will display with the dimensions of the base image. To enable the images to display with
different dimensions, change the base image’s Width and Height values from Pixel to Image in the Image Inspector.
Trigger the action with a browser-triggered event set to OnLoad. Choose Action > Others > Digital Clock. Choose
an image name from each of the Digit pull-down menus to associate each clock digit with one of the placeholder
images. Select Use 24-hour Time to display 24-hour time, or leave it unselected to display 12-hour A.M. and P.M.
time. To identify the clock’s image directory, reference any of the ten images that represent the clock numbers.
IE PNG Fix
The IE PNG Fix action is a fix that allows Internet Explorer 5 to render the alpha channel of PNG images. Trigger
the action with a browser-triggered event set to OnLoad in the head section of the page. Choose Action > Others >
IE PNG Fix.
Netscape CSS Fix
The Netscape CSS Fix action is a workaround for a program error in Netscape Navigator 4.x that causes web pages
to lose cascading style sheet information when the viewer resizes the browser window. Use this action on any pages
that contain layers because layers are built with cascading style sheets.
Trigger the action with a browser-triggered event set to OnLoad in the head section of the page. Choose Action >
Others > Netscape CSS Fix. Test your animations or actions in Netscape Navigator 4.0.
Note: With frame sets, be sure to use the action in the head section of the pages that appear within the frames and not
the frame set.
Print Document
The Print Document action displays the browser’s print dialog box to print the current web page or frame of a frame
set. The action must reside within the page or frame you want to print and cannot target a different page or frame.
In the page that you want to print, trigger the action with a user- or browser-triggered event. If the page you want to
print is part of a frame set, enter the page’s frame name.
ResizeWindow
The ResizeWindow action resizes the browser window. Trigger the action with a user- or timeline-triggered event.
Choose Action > Others > ResizeWindow. Enter pixel values for the Width and Height text boxes.
Scroll Down, Left, Right, Up
The Scroll Down, Scroll Left, Scroll Right, and Scroll Up actions let you dynamically scroll the browser window. For
example, you can use these actions to let the viewer follow the path of a layer traveling beyond the margin of the
window.
ADOBE GOLIVE 9 349
User Guide
Trigger the action with a user- or timeline-triggered event. Choose Action > Others > Scroll Down, Left, Right, or
Up. Enter a pixel value in the Scroll Pixels text box to specify the distance that you want the window to scroll. Enter
a pixel value in the Scroll Speed text box to specify how fast you want the window to scroll. The higher the value you
enter, the faster the speed.
Scroll Status
The Scroll Status action displays a text message that scrolls horizontally in the status bar at the bottom of the
browser’s window.
Trigger the action with a user-triggered event, browser-triggered event set to OnLoad, or timeline-triggered event.
Choose Action > Others > Scroll Status. Enter a message in the message field. Enter a value between 1 and 1000 for
the scrolling speed (1 represents the fastest speed, and 1000 the slowest). Select Scroll Reverse (Left To Right) to have
the text scroll from the left side of the window to the right and repeat when the text first reaches the right side of the
window. Deselect this option to have the text scroll from the right to the left and off the page in a seamless loop.
Search Engine
The Search Engine action uses input from a predefined search string or viewer input from a form, and opens a new
browser window that contains the search engine results.
Trigger the action with a browser-triggered event set to OnLoad, a user-triggered event, or a timeline-triggered
event. User-triggered events can be attached to form objects, a submit button, or a form event. (If your action is using
viewer input from a form, first create a form and name it, and then choose the trigger.) If the action is attached to a
text field, trigger the action with the Key Blur event. If the action is attached to a Text Area field, trigger the action
with the Text Change event. Choose Action > Others > Search Engine, and do one of the following:
• To use input from a predefined search string, leave the Form Name and Field Name blank. Select Define Your Own
Search String, and enter a text string with a plus sign (+) between each word.
• To use viewer input from a form, enter the name of the form, and the name of the field that will gather the search
string. Make sure that Define Your Own Search String is not selected.
Choose a search engine from the Use This Search Engine menu. If you want the search engine results to display in
an existing window or frame, enter the window or frame name.
To display search results from multiple search engines, add a new Search Engine action for each desired search
engine. If you triggered the first Search Engine action with a user-triggered event, use the same trigger.
Set BackColor
The Set BackColor action lets you change the background color of the browser window. Trigger the action with a
user- or timeline-triggered event. Choose Action > Others > Set BackColor. Click the Background Color field and
select a color from the Color panel.
World Clock
The World Clock action displays a live clock showing the time of a specified world time zone. The clock displays in
the browser's status bar, in an existing form field on the page, or both.
Important: To create an accurate clock, the local time zone on your computer must be set to the correct time.
ADOBE GOLIVE 9 350
User Guide
Trigger the action with a browser-triggered event set to OnLoad or a user-triggered event. Choose Action > Others >
World Clock. To display a message to the left of the clock, enter the message in the Clock Message text box. Select
the Use 24-hour Time option to display 24-hour time, or leave it unselected to display 12-hour A.M. and P.M. time.
In the GMT Offset text box, enter the number of hours between your desired location and Greenwich mean time
next to the GMT offset text field to look
(GMT) as a value between -12 and +12. You can click the Globe icon
up a city’s GMT offset. The button launches the default browser, which opens a time zone chart at
http://www.timeanddate.com/worldclock/. Click on a city to look up its GMT offset. (GMT is zero; time zones west
of GMT have a negative offset value, and time zones east of GMT have a positive offset value. For example, U.S.
eastern standard time (EST) is five time zones to the west of GMT and has a GMT offset of –5; central Europe time
(CET) is one time zone to the east of GMT and has a GMT offset of +1.)
Select the Daylight Savings Time option if daylight savings time (DST) occurs in the selected time zone. Select the
Status Bar option to display the clock in the browser’s status bar, and select the Form Field option to display the clock
in an existing form on the page. If you selected Form Field, enter the form name and field name for the text field in
which the clock will display.
Specials actions
About Specials actions
The Specials menu in the Actions panel contains actions that manage or interact with other actions in a page, or call
upon other values in a page.
Action Group
The Action Group action lets you group other actions and trigger them together. This action is most useful on the
Actions Track of the Timeline Editor, but can also be used with buttons or a text link if you want to let the viewer
decide whether to run the grouped actions or not.
Trigger the action with a user-, timeline-, or browser-triggered action. In the Actions panel, choose Action >
, choose an action from the Action pop-up menu,
Specials > Action Group. Click the Create New Item button
and set its options. Continue to add and choose actions to the Actions List until you have added all the desired
actions to the Action Group.
Call Action
The Call Action triggers another action on the page. For Call Action to work, the action it triggers must be set to
OnCall. The Call Action action can be used to make your actions modular and easier to maintain. For example, if
your page contains a button and a text link that jump to the same URL, you can add a GoToLink action set to OnCall
in the header and trigger it with the Call Action applied to the button and the text link. If you decide to change the
URL referenced by the two controls, you will only need to change the GoToLink action.
Make sure there are one or more actions set to OnCall on the page. Trigger the CallAction with a user- or timelinetriggered event. Choose Action > Specials > Call Action. Choose an action from the pop-up menu.
Call Function
The Call Function action calls a function from the head section of the page.
ADOBE GOLIVE 9 351
User Guide
Make sure there are one or more functions defined in the head section of the page. Trigger the action with a browsertriggered event set to OnLoad. Choose Action > Specials > Call Function. Choose a function from the Function popup menu, and enter a comma-separated list of function arguments in the Argument text box.
Note: Action-based JavaScript calls will make it easier for JavaScript-savvy developers to create new actions.
Condition
The Condition action monitors the browser window for the occurrence or nonoccurrence of an event and triggers
one of two other actions if the specified condition is true or false. You can choose among four actions to be the
condition: Intersection, KeyCompare, Timeout, and Test Variable. To monitor multiple occurrences of an event in a
session, set up an Idle action.
Trigger the action with a browser-triggered event set to OnLoad or a user-triggered event. Choose Action >
Specials > Conditions. In the Condition tab of the Actions panel, choose one of the four conditions from the
Action > Specials or Action > Variables menu. In the True tab, specify an action to be executed when the specified
condition evaluates to true. In the False tab, specify an action to be executed when the specified condition evaluates
to false. For example, if you have an image on your page, you can use the Set Image URL action to swap the image
content based on the result of the condition action.
See also
“Intersection” on page 351
“KeyCompare” on page 352
“Timeout” on page 352
“Test Variable” on page 355
“Set Image URL” on page 334
Idle
The Idle action inserts a script that monitors the browser window for a specified condition and triggers other actions,
depending on whether the condition is true or false. You can choose among four actions to be the condition: Intersection, KeyCompare, Timeout, and Test Variable. These are best used in the head section of the page because the
conditions are monitored automatically.
See also
“Intersection” on page 351
“KeyCompare” on page 352
“Timeout” on page 352
“Test Variable” on page 355
Intersection
The Intersection action is designed for use with the Idle or Condition action, which must reside in the head section
as a browser-triggered event. The Intersection condition monitors the browser window for the physical intersection
of two layers. It is true when the layers overlap in the browser window and false while they don’t. You can use the
result of this action to trigger two further actions.
ADOBE GOLIVE 9 352
User Guide
This action supplements the Drag Layer action. An intersection occurs when the paths of two layers cross. The Intersection action may be connected, for example, with a Set BackColor action.
To set up an Intersection action, trigger the action with a browser-triggered event set to OnLoad. Choose Action >
Specials > Idle or Condition. In the Condition tab of the Actions panel, choose Action > Specials > Intersection. If
you chose Idle and want the action to terminate the first time the Timeout Intersection condition is true, select the
Exit Idle If Condition Returns True option. By activating this option, you instruct the script to monitor the browser
window for a single event.
Select the layers you want to monitor for the intersection from the two Layer pop-up menus. In the True tab, choose
the action you want to have triggered when an intersection occurs. In the False tab, choose the action to be executed
while the layers don’t overlap.
See also
“Drag Layer” on page 342
KeyCompare
The KeyCompare action launches an action when the viewer presses a selected key. This action is designed for use
with the Idle action, which must reside in the head section of the page as a browser-triggered event. You can use the
KeyCompare action, for example, to simulate Windows-style access keys for objects on your page.
To set up a KeyCompare action, trigger the action with a browser-triggered action set to OnLoad. Choose Action >
Specials > Idle. In the Condition tab of the Actions panel, choose Action > Specials > KeyCompare. Enter the ASCII
character code that corresponds to the desired keystroke in the CharCode text box. In the True tab, choose the action
you want the keystroke to trigger. Return to the page and add a visual hint for the viewer—for example, an
instruction such as “Press K”.
Important: Do not specify an action in the False tab. If an action is specified in the False tab, it will be triggered before
the user has a chance to press a key to trigger the True condition.
Timeout
The Timeout action is a timer and switch combination that lets you specify a time span after which the browser
should switch between two states. This action is designed for use with the Idle action, which must go into the head
section of the page as a browser-triggered event. The condition it monitors is false while the timeout period still lasts
and true when the timeout period has elapsed. Either state has its own action. You can use this action to implement
a timed switch in the browser window—for example, to switch the content of a banner image.
To set up a Timeout action, trigger the action with a browser-triggered event set to OnLoad. In the Actions panel,
choose Action > Specials > Idle. In the Condition tab of the Actions panel, choose Action > Specials > Timeout. If
you want to have the action stop the first time the Timeout condition is true, select Exit Idle If Condition Returns
True. By activating this option, you instruct the browser to switch states once only.
Enter a time span in seconds in the Timeout (secs.) text box. In the True tab, choose the action to be triggered when
the Timeout limit has elapsed. For example, set the Timeout action to trigger a Set Image URL action, causing the
browser to change the content of an image. In the False tab, choose the action to be executed while the Timeout
period still lasts. In the example above, you would use a second Set Image URL action that supplies an alternative
image.
ADOBE GOLIVE 9 353
User Guide
See also
“Set Image URL” on page 334
Variables actions
About Variables actions
GoLive features a set of actions in the Actions panel that allows you to use variables. You can use variables as input
for other scripted actions, replacing settings you would make in the Inspector.
There are two major uses for assigning values to variables at runtime, which you define with the Set Variable action:
• You can use variables as pseudo-constants to specify a fixed value for another action.
• You can dynamically store object properties in variables at runtime and set a cookie to write them to the viewer’s
hard disk. This is possible for selected properties of the browser window, such as background color.
To use a variable in a page, you must declare it with the Declare Variable action first. After declaring a variable, you
may want to initialize it with the Init Variable action.
Declare Variable
To use a variable in a page, you must declare it with the Declare Variable action first.
Trigger the action with a browser-triggered event set to onParse in the head section of the page. Choose Action >
Variables > Declare Variable.
Enter a unique name in the Name text box. Choose an appropriate data type from the Type menu:
Boolean Any on/off state.
Integer Any integer value.
Float Any floating point value.
String Any string value.
Layer Any layer in the current page.
Layer Position Location of a layer in the current page.
Image Any image in the current page.
URL Any URL in the current page.
Color Any color in the current page.
Scene Any scene in the current page.
OnCall Action Any action from the head section of the page whose trigger is set to OnCall.
Function Any function declared in the head section of the page.
Use the Cookie text box to enter the name of the cookie in which you want to store the value of the variable on the
viewer’s hard disk. Then use the Write Cookie and Read Cookie actions to set the cookie and read its content, respectively.
ADOBE GOLIVE 9 354
User Guide
DeleteCookie
DeleteCookie is a companion action to VisitorCookie. It lets you delete an existing cookie by entering the cookie’s
name. This is useful for testing the VisitorCookie action. For example, you might be sent to one page the first time
you test the VisitorCookie action, and then to another page on subsequent visits. By using the DeleteCookie action,
you can change the original page and still be able to revisit it.
Trigger the action with a user-triggered event, or a browser-triggered event set to OnLoad in the head section of the
page. Choose Action > Variables > DeleteCookie. For Cookie Name, enter the name of the cookie you want to delete.
Init Variable
After declaring a variable, you may want to initialize it with the Init Variable action. Trigger the action with a
browser-triggered event set to onParse in the head section of the page. Choose Action > Variables > Init Variable.
Choose the variable you want to initialize from the Variable menu. (You must declare your variable beforehand for
it to appear in the pop-up menu.)
The Value item changes automatically with the type of the variable. Use the appropriate control to supply an initial
value:
Boolean A check box (selected is true, unselected is false).
Integer A text box that accepts whole numbers only.
Float A text box that accepts numbers with decimal points.
String A text box that accepts any string of text.
Layer A pop-up menu showing all layers in the page.
LayerPos Two x and y text boxes for the position of a layer and a Get button that reads the current position.
Image A pop-up menu listing the named images in the current page.
URL A typical text box, Browse button, and pick whip combination for specifying URLs.
Color A color field that brings up the Color panel when clicked.
Scenes A pop-up menu that lists all scenes in the current page.
OnCall Action A pop-up menu listing all actions from the head section that have their trigger set to OnCall.
Functions A pop-up menu that lists all function declarations from the head section of the current page.
Read Cookie
The Read Cookie action retrieves information stored in a cookie at runtime and writes a cookie value into all variables
assigned to that cookie. A cookie can be read when the page loads, or when a viewer clicks an item in the page.
To have the browser read the cookie when the page loads, trigger the action with a browser-triggered event set to
OnLoad in the head section of the page. To have the browser read a cookie when a viewer clicks a specific item in
your page, trigger the action with a user-triggered event. Choose Action > Variables > Read Cookie. Enter the name
of the cookie specified in the Write Cookie action in the Name text box.
Set Variable
You may want to assign a certain value to a variable at runtime.Trigger the action with a browser-triggered event set
to OnLoad in the head section of the page or a user-triggered event. Choose Action > Variables > Set Variable.
ADOBE GOLIVE 9 355
User Guide
Choose the variable whose value you want to set from the Variables pop-up menu. The Value item changes automatically with the type of the variable. Use the appropriate control to supply an initial value with the Init Variable action.
See also
“Init Variable” on page 354
Test Variable
Test Variable is an extension to the Idle action that allows you to read the current value of a variable at runtime and
compare it with a value you specify. This comparison evaluates either as true or false, and the result can be used to
trigger two alternative actions.
Trigger the action with a browser-triggered event set to OnLoad in the head section of the page. In the Actions panel,
choose Action > Special > Idle. In the Condition tab of the Actions panel, choose Action > Variables > Test Variable.
Choose the variable whose value you want to compare from the Variable menu. The Value item changes automatically with the type of the variable. Use the appropriate control to supply a value you want to test the variable against
by using the Init Variable action. Choose the type of comparison from the Operation menu.
Note: Not all comparison operators work with all types of variables. For example, using “Greater than” with a string
variable will result in a JavaScript error in the browser because the browser expects a number.
See also
“Init Variable” on page 354
Times Visited
The Times Visited action displays messages that are customized according to the number of times a viewer visits the
web page. (This action uses cookies. If a viewer’s browser is set to disable cookies, the action will not function.)
Trigger the action with a browser-triggered event set to OnLoad, a user-triggered event, or a timeline-triggered
event. Choose Action > Variables > Times Visited. Enter a message in the 1st Time Visitor Message text box. To
display a different message when the viewer revisits the page, select the Show This Message + Total Visits option, and
enter a message. (The number of times the viewer has visited the page will appear next to the message in the browser
alert window.) To have an additional message appear after the viewer has visited the page a specified number of
times, select the Optional Message option, enter a message, and enter the number of visits criterion. Enter a name
for the cookie.
When you preview the action multiple times in a browser, you can simulate the browser’s behavior when viewers visit
the page for the first time by renaming the cookie before previewing the page.
VisitorCookie
VisitorCookie lets you create a custom page for first-time visitors. The first time a viewer visits the page or performs
a specific mouse event, the VisitorCookie action creates a cookie. The cookie is stored on the viewer’s computer if
they have not set up their browser to deny cookies. On subsequent visits or mouse events, the viewer is redirected to
a different page. For example, you might want first-time visitors to go to a special page with a “Welcome” message,
but to the main page on subsequent visits.
Trigger the action with a user-triggered event, or a browser-triggered event set to OnLoad. Choose Action >
Variables > VisitorCookie. Enter a name in the Give Your Cookie A Unique Name text box. For Redirect After 1st
Visit link destination, reference a page to display the next time the viewer triggers the action.
ADOBE GOLIVE 9 356
User Guide
WriteCookie
The WriteCookie action allows you to store the value of a variable temporarily on the viewer’s hard disk. This
function enables you to make viewer-customizable pages, because it allows the viewer to change the properties of the
browser window and reload their own personalized version of the page later on.
Trigger the action with a browser-triggered event set to OnLoad in the head section of the page. Choose Action >
Special > WriteCookie. Enter a name for the cookie in the Name text box. This name will be used when the Write
Cookie action sets the cookie at runtime. In the Expires After text box, enter an expiration date (in hours) to
determine how long the cookie will last after it has been set. Set optional attributes:
Path Specifies the subset of URLs in a domain for which the cookie is valid. If a cookie has already passed domain
matching, then the path name component of the URL is compared with the path attribute, and if there is a match,
the cookie is considered valid and is sent along with the URL request.
Domain Specifies a valid Internet domain name. When searching the cookie list for valid cookies, the attribute you
specify here for the current cookie is compared with the Internet domain name of the host from which the URL will
be fetched. If the tails of both domain names match, then the cookie will go through path matching to see if it should
be sent.
Secure Ensures that the cookie will be transmitted only if the communications channel with the host is a secure one.
If secure is not specified, a cookie is considered safe to be sent in the clear over unsecured channels.
357
Chapter 20: Configuring Web Settings
Web Settings
About GoLive Web Settings
Web Settings is an essential component of GoLive that makes sure your web documents are written with valid source
code. It comes with a complete inventory of HTML elements, special character codes, file mappings, and browser
display profiles. The Web Settings window contains several different tabs that you can edit to accommodate new or
modified elements as standards evolve. Web Settings also serves as a reference manual, assisting web authors in
choosing the proper elements and attributes for their web pages.
Important: Errors made while editing Web Settings can cause serious damage to your documents. Before making any
changes, check the current HTML specifications defined by the World Wide Web Consortium (W3C) at www.w3.org.
To access Web Settings
❖ Choose Edit > Web Settings (Windows) or GoLive > Web Settings (Mac OS).
Methods of restoring default Web Settings
If you’ve made changes to Web Settings that you’d like to remove, you have several options. You can prevent the
window from saving the changes when you close it, you can restore the default settings of selected items or all settings
in a Web Settings tab, or you can restore the entire set of Web Settings to the default settings.
To close Web Settings without saving changes
1 In the Web Settings window, press Alt (Windows) or Option (Mac OS) and close the Web Settings window.
2 Click No when asked if you want to save Web Settings.
3 Quit GoLive, and restart the application.
Web Settings is restored to the settings it contained before you last opened it.
To restore default settings of selected items or delete new items
1 In the Markup Language, Characters, or File Mappings tab, select any element, attribute, character, or suffix that
is labeled “change”, “new”, or “x” under the User column.
2 Press Delete on the keyboard.
3 Click Yes when prompted to confirm the change.
To restore the Web Settings defaults
1 Quit GoLive.
2 Locate the Settings folder:
• (Windows) Documents and Settings/[username]/Application Data/Adobe/Adobe GoLive/Settings
• (Mac OS) Mac OS X/Users/[username]/Library/Preferences/Adobe/GoLive/Settings
ADOBE GOLIVE 9 358
User Guide
3 Delete the Main, FileMappings, MarkupGlue, and UserAgentProfiles folders that are inside the Settings folder.
4 Restart GoLive.
A default set of Web Settings is created.
To restore a particular tab to its default settings
1 Locate the Settings folder:
• (Windows) Documents and Settings/[username]/Application Data/Adobe/Adobe GoLive/Settings
• (Mac OS) Mac OS X/Users/[username]/Library/Preferences/Adobe/GoLive/Settings
2 Do one of the following:
• To restore only the Markup Language tab, delete the MarkupGlue folder.
• To restore only a specific panel of the Markup Language tab, delete a folder in the MarkupGlue folder.
• To restore only the Characters tab, delete the “user_entities.aglmga” file in the MarkupGlue/html folder.
• To restore only the File Mappings tab, delete the FileMappings folder.
Markup Language options in Web Settings
Markup Language options
The Markup Language tab
of Web Settings contains the entire range of HTML, SMIL, SVG, WML, and GoLive
proprietary elements that GoLive can read and write. The information stored in the Markup Language tab is used by
GoLive’s Syntax Checker. HTML-standard elements include all those specified by the HTML 2.0 and 3.2 standard
publications, plus HTML 4.0 forms tags. You can add elements to the list and edit existing elements as the current
HTML standard evolves. In addition, you can import an XML Document Type Definition (DTD) file and bind it to
file extensions and mime types.
To view elements in the Markup Language tab
You can use Web Settings to look up the proper use of an HTML, SMIL, SVG, or WML element and its attributes.
The panes can be organized into sections, or you can view all the elements alphabetically. Element and attribute
information is displayed in the Inspector.
1 In the Markup Language tab of Web Settings, expand a section and select a markup language.
2 To show or hide columns, right-click (Windows) or Control-click (Mac OS) a column head, and choose a column
name or an option.
3 Scroll through the list on the right (if the view is set to Structured, expand a section), and select an element. The
Web Settings Element Inspector displays the structural information for that element.
4 To see an element’s attributes in the Markup Language tab, expand the tag, and select the attribute (some tags do
not have attributes). To see an attribute’s enumeration, expand the attribute, and select the enumeration (some
attributes do not have enumerations).
ADOBE GOLIVE 9 359
User Guide
See also
“To edit an element attribute in the Markup Language tab” on page 361
“To edit an enumeration in the Markup Language tab” on page 362
“To edit an element in the Markup Language tab” on page 359
To add a new item to the Markup Language tab
1 In the Markup Language tab of the Web Settings window, select a markup language on the left, click in the right
side of the tab, and do one of the following:
• To add an element, click the New Element button
in the Control panel or choose Add Element from the
context menu.
• To add an attribute to an element, select an element or an existing attribute of the element, and click the New
Attribute button
in the Control panel or from the context menu.
• To add an enumeration to an attribute, select the attribute. In the Inspector, choose Enumeration from the Value
Type pop-up menu, and click the New Enumeration button
in the Control panel.
• To duplicate an element, attribute, or enumeration, select it and click the Duplicate button
in the Control
panel.
2 With the new item selected, edit the properties in the Inspector.
Note: To add new Web Settings elements to a document, you must hand-code them in the document’s Source Code
Editor. To add new element attributes or enumerations to a document, you must hand-code them in the Source Code
Editor, or select them from the attribute or enumeration pop-up menus in the Outline Editor.
See also
“To edit an element attribute in the Markup Language tab” on page 361
“To edit an enumeration in the Markup Language tab” on page 362
“Methods of restoring default Web Settings” on page 357
“To edit an element in the Markup Language tab” on page 359
To delete custom items from the Markup Language tab
❖ Select the item, and press Delete.
Note: You cannot delete any elements that are installed by default.
See also
“Methods of restoring default Web Settings” on page 357
To edit an element in the Markup Language tab
1 Select the element in the Markup Language tab of Web Settings, and in the Basic tab of the Inspector enter the
element name in the Name box.
2 Enter a description in the Comment box.
ADOBE GOLIVE 9 360
User Guide
3 Choose one of the following from the Structure pop-up menu:
Block Creates a block-level container element that can contain other elements (for example, the <BODY> tag).
Inline Visible Creates an element that has visible content. This element can only exist within a container element,
such as the <IMG> tag.
Inline Invisible Creates an element that can only exist within a container element, has visible content, but isn’t visible
itself (although it influences a visual property of the content), such as the <BOLD> tag.
Inline Container Creates a container element that can only exist within another container element. It can have both
non-HTML content and visible HTML content, such as the <APPLET> tag.
Inline Killer Is reserved for use with the <BR> tag.
4 Choose one of the following options from the Content pop-up menu to define how the content of an element is
treated:
Normal Treats the content as specified by the Structure property.
Get All Spaces Keeps all extra white space when reading the tags. For example, this option enables GoLive to display
all spaces between the start and end <PRE></PRE> tags.
Core Text Preserves the content of a tag without adding or deleting anything.
5 Choose an option from the End Tag pop-up menu:
Required Specifies that the element needs an end tag.
Optional (do not write) Indicates that the element does not need an end tag and that GoLive is not supposed to read
or write one.
Optional (write) Indicates that the element does not require an end tag but GoLive adds it anyway.
Attribute Indicates that GoLive will not change the current end tag setting when rewriting source code.
6 Choose one of the following:
Can Be Stripped Indicates that the element can be removed from the source code before publishing the page.
Can Have Any Attribute Indicates that the element can have any attribute.
Write as Comment Writes HTML comments that surround the element.
See also
“Methods of restoring default Web Settings” on page 357
To set basic formatting for an element in the Markup Language tab
For any element within Web Settings, you can control some basic formatting options in the Output tab of the Web
Settings Element Inspector.
1 Select the element in the Markup Language tab of Web Settings.
2 In the Output tab of the Web Settings Element Inspector, choose a property for the following separation options:
Outside Controls the vertical spacing between the start and end tags, and elements above and below them.
Inside Controls the vertical spacing between the start and end tags, and their content.
3 Select the Indent Content option to indent content between start and end tags.
ADOBE GOLIVE 9 361
User Guide
4 From the Group menu, select a Key Set option to format the element with attributes specified in the Source
Themes preferences.
See also
“Methods of restoring default Web Settings” on page 357
To edit an element attribute in the Markup Language tab
You can use the Web Settings Attribute Inspector to set an attribute’s function, value type, and default value. You can
edit attributes or define new attributes.
1 Enter the attribute’s name in the Attr Name box.
2 Enter a description in the Comment box.
3 The Attribute Is value is used by the GoLive Syntax Checker to report code errors, but does not determine whether
the attribute is written by GoLive. Choose a property from the Attribute Is pop-up menu:
Optional Specifies that the attribute is not necessary.
Required Specifies that the attribute is required in order for the tag to be read correctly.
Alternate Specifies that Optional, Required, or not defined are acceptable.
Fixed Specifies that the property has a permanent default value.
4 Choose a property from the Value Type pop-up menu:
Text Allows any Western-encoded alphanumeric character string. Use this option if you are not sure about the usage.
Encoded Text Allows any alphanumeric character string in any encoding.
Number Allows a numerical value only.
Enumeration Indicates that a fixed set of properties are available.
Color Permits an RGB color code only.
URL Allows a Uniform Resource Locator only.
JavaScript Allows JavaScript code only.
ID Allows a unique string.
IDRef Allows a link to an ID.
IDRefs Allows a link to a group of IDs.
Entity Allows any special character entity.
Entities Allows a group of special character entities.
Nmtoken, Nmtokens, and Notation Specify valid names and are used in XML.
5 Select Create This Attribute, and choose a property from the pop-up menu (if one is available), or enter a value in
the text box.
Note: When Create This Attribute is selected and a value is entered in the text box, some attributes are automatically
inserted in the source code when the tag is added to a page. If the attribute is not inserted by GoLive, you can insert it
from the tag’s attribute pop-up menu in the Outline Editor or enter it manually in the Source Code Editor.
ADOBE GOLIVE 9 362
User Guide
See also
“Methods of restoring default Web Settings” on page 357
To edit an enumeration in the Markup Language tab
1 Enter the enumeration name in the Enum Name box of the Web Settings Enum Inspector.
2 Enter a description in the Comment box.
All enumerations appear in the Value pop-up menu of the Web Settings Attribute Inspector and in the attribute’s
Enumeration pop-up menu in the Outline Editor.
See also
“Methods of restoring default Web Settings” on page 357
To import an XML DTD file
1 In the Markup Language tab of Web Settings, choose Import XML-DTD from the context menu of the left pane.
2 Open a DTD file.
The DTD file appears within a folder named Imported in the Markup Language tab. Elements, entities, and notations
contained in the DTD are listed in the right pane.
See also
“Methods of restoring default Web Settings” on page 357
“To edit an XML DTD file” on page 362
To edit an XML DTD file
An imported Document Type Definition (DTD) file can be bound to file extensions and mime types. This enables
GoLive to open any file of that extension and associate it with the imported DTD for syntax checking, and element
placement in the Outline Editor.
1 In the Markup Language tab of Web Settings, select the DTD file name on the left.
2 In the XML DTD Inspector, enter an extension, or multiple extensions separated by commas, in the Extensions box.
3 Edit the elements, attributes, and enumerations as needed.
See also
“To import an XML DTD file” on page 362
“To edit an element in the Markup Language tab” on page 359
“To edit an element attribute in the Markup Language tab” on page 361
“Methods of restoring default Web Settings” on page 357
ADOBE GOLIVE 9 363
User Guide
Characters options in Web Settings
Characters options
The Characters tab
of Web Settings includes all the special characters specified by ISO 8859-1 and the HTML
3.2 standard. HTML uses a specific notation for encoding special characters to ensure a uniform display across
multiple computer platforms. GoLive uses the content of the Characters tab to map special characters added to your
HTML documents to their web-specific character entity references.
To view special characters in the Characters tab
You can view the characters sorted by category (Structured), or you can view them alphabetically (Flat). If a character
can’t be displayed in the system font, a small box (Windows) or an x (Mac OS) appears in the Char column of the
Characters tab of Web Settings instead of the character.
1 Open the Characters tab of Web Settings, and in the View panel select one of the following options:
• To view the characters alphabetically, select Flat.
• To view the characters grouped by category, select Structured.
2 Scroll through the list of characters (if the view is set to Structured, then expand a category), and select a character
under the Name column. The Web Settings Entity Inspector displays the following information for the character:
• The left Name box displays the character’s HTML name, and the right box shows the HTML code that is inserted
by default into the source code.
• Comment describes the character.
• The left Unicode box (Windows and Mac OS) displays the character code, the middle (Windows) or right
(Mac OS) box displays the byte code, and the right box (Windows only) displays the character’s visual representation. You can select and copy the character in the right Unicode box, and paste it into the Layout Editor of a
document.
• Select Write to write the related text box into the document rather than the left Name box. Enter the character
entity reference without the starting ampersand and closing semicolon. GoLive will insert the new character entity
instead of the default entity. This option might be used when you want GoLive to insert a character’s numeric
HTML entity rather than the named HTML entity.
To show or hide columns in the Characters tab
❖ From the context menu of any of the column heads, Right-click (Windows) or Control-click (Mac OS), and
choose a column name or an option. You can show or hide all of the columns, or show a selection of columns.
To add a special character to a document
1 In the Characters tab of Web Settings
, select the character.
2 In the Web Settings Entity Inspector, select the character in the third Unicode Code box (Windows) or the third
Mac box (Mac OS), and choose Copy from the context menu.
ADOBE GOLIVE 9 364
User Guide
Copying a character entity in the Web Settings Entity Inspector
3 In the document Layout Editor, choose Edit > Paste in the desired insertion point.
Guidelines for adding and editing special characters
Use the following guidelines when adding new characters:
• New characters must be W3C-specified characters that are supported by browsers.
• GoLive for Mac OS doesn’t display all characters. To preview such characters, you may have to launch a browser.
• Characters specific to Mac OS can be added, but they won’t display in browsers.
See also
“Methods of restoring default Web Settings” on page 357
To create a special character
1 In the Characters tab of the Web Settings window, select an existing character or a category to which you want to
add a character.
2 Do one of the following:
• To add a new character, click the New Entity button
on the Control panel or choose Add Entity from the
context menu.
• To duplicate a selected character, click the Duplicate button
.
3 Select the new character, or copy and edit its properties in the Web Settings Entity Inspector:
• Enter the HTML name of the new character in the Name box.
• Enter a description in the Comment box.
• Enter the Unicode mnemonic code and its equivalent byte code in the Unicode Code boxes.
• If there is a Mac OS equivalent, select Mac, and enter the mnemonic code and its equivalent byte code. Mac OS
characters are displayed in the preview pane.
• Select Write to write the adjacent text box into the document rather than the Name box. Enter the character entity
reference without the starting ampersand and closing semicolon.
ADOBE GOLIVE 9 365
User Guide
See also
“Methods of restoring default Web Settings” on page 357
Browser Profiles options in Web Settings
Browser Profiles options
The Browser Profiles tab
in Web Settings contains display profiles of popular browsers on Windows and Mac OS.
You can select any listed browser and platform to serve as the default profile for viewing documents in the Layout
Editor. The alternate profiles can be used for previewing pages with the View panel.
The profiles let you simulate how fonts and other design elements display on Windows and Mac OS. They do not
affect how GoLive writes HTML code, or what the viewer sees when visiting your site. The profiles are made with
cascading stylesheets that use element selector styles. If you know how to build cascading stylesheets, you can
duplicate an existing profile and edit it to create a new browser profile.
Note: The stylesheets that you create in the CSS Editor are not affected by or related to the stylesheet-based profiles in
the Browser Profiles tab of Web Settings.
See also
“To set view options for page layout” on page 77
To view browser profiles
The browser profiles in the Browser Profiles tab of Web Settings are write-protected. You can only inspect their
properties.
1 In the Browser Profiles tab of the Web Settings window, select a profile from the list.
2 In the Root Style Sheet Inspector, click the Basic tab to view the profiled system and comments.
3 Select the Settings tab to view the screen resolution and other options.
To create a new browser profile
You can create a new browser profile if you want more Profile options in the View panel.
1 In the Browser Profiles tab of the Web Settings window, select the profile that best resembles your target browser,
and choose Duplicate from the context menu.
2 Select the new duplicate profile, and in the Basic tab of the Root Style Sheet Inspector, enter a name, system information, and comments.
3 In the Settings tab of the Inspector, enter a screen resolution (96 is typical for Windows, 72 for Mac OS) in the DPI
box, and select Can Handle Style Sheets.
4 The new profile appears in the Profile pop-up menu of the View panel.
See also
“Methods of restoring default Web Settings” on page 357
ADOBE GOLIVE 9 366
User Guide
Simulating the effects of different browsers and platforms
The Root profile in the Browser Profiles tab of Web Settings determines the default profile used to display your
documents in the Layout Editor. You can use the Basic Profiles and User Profiles menus in the View panel to simulate
your document’s appearance in different browsers and platforms.
To set a default browser profile for the Layout Editor
❖ In the Browser Profiles tab of Web Settings, select the Root Radio button adjacent to the browser profile under the
Root column.
See also
“Methods of restoring default Web Settings” on page 357
File Mappings and Global options in Web Settings
File Mappings options
The File Mappings tab
shows the MIME type for various file extensions and the application that is assigned to
open each of them. If the Application column in the Web Settings window is set to Default, the application that will
be launched is the same as that mapped in the operating system. You can modify the existing mappings or add new
ones.
To change the display of file mappings
You can view all of the file name suffixes defined in Web Settings, and also the type of file, MIME type, and the application mapped to each.
1 Open the File Mappings tab of the Web Settings window.
2 In the View panel, select a View property.
3 To show or hide columns, right-click (Windows) or Control-click (Mac OS) and choose a column name.
To edit file mappings
❖ In the File Mappings tab of Web Settings, do any of the following:
• To add a mapping, select By MIME Type in the View panel. Select a Mime type category in the Web Settings
window, and click the New Extension button
Extension Inspector.
in the Control panel. Edit the new mapping in the File Info
• To delete a new mapping, select the suffix, and choose Delete from the context menu or press Delete on the
keyboard.
• To set the FTP method, select the mapping suffix, and choose a Transfer property in the File Info Extension
Inspector.
• (Mac OS) To change the application that is launched when the file is double-clicked in GoLive, specify the Mac
File Type and File Creator in the File Info Extension Inspector. Alternatively, click the Browse button next to the
Application box, and browse to the application.
ADOBE GOLIVE 9 367
User Guide
• (Windows) To change the application that is launched when the file is double-clicked in GoLive, click the Browse
button next to the Application box in the File Info Extension Inspector, and browse to the application.
See also
“Methods of restoring default Web Settings” on page 357
Global options
The Global tab
of the Web Settings window contains options for formatting the source code, such as indentation,
and lowercase and uppercase usage. You can preview most changes you make to these options in the Source Code
panel.
For information about global XHTML options, see “To convert the doctype of a document from HTML to XHTML”
on page 80. Global HTML, CSS, and White Space options appear below:
Tag case, Attribute case Specifies how HTML tags or attributes are written:
• Upper Case Uses only uppercase characters in the tag or attribute name.
• Lower Case Uses only lowercase characters in tags or attributes.
• Capital Capitalizes the first letter of each tag or attribute name.
Quote attribute values Determines whether values for HTML tag attributes are enclosed in straight quotation
marks:
• Always Inserts quotation marks around all attribute values, for example, <IMG SRC="logo.gif ">.
• Except Numbers Encloses all attribute values, except for numerals, for example, <IMG SRC="logo.gif "
width=50>.
• Only if Necessary Inserts quotation marks if there is a risk of ambiguity.
Color name translation Determines whether color values are written using color names:
• Do Not Uses hexadecimal RGB values, for example, “#000000” for “Black”.
• 16 Basics Uses the color names for sixteen basic colors, such as “purple” for the hexadecimal value “#800080”, and
uses the hexadecimal value for all other colors.
• Netscapes Uses the Netscape-specific color names for certain RGB color values, such as “Lime” for the RGB value
“0, 255, 0,” and uses the hexadecimal value for all other colors.
Default Unit Specifies the default unit used in Cascading Style Sheets (CSS).
Output Determines the spatial format used to arrange CSS source code.
Indent with (CSS) Specifies whether CSS source code is indented.
Indent with (White Space) Sets the indentation value and the type of indentation between sets of container tags in
the source code.
Line break character Specifies how line breaks are written for your web server platform:
• Macintosh (CR) Inserts a carriage return character only.
• Unix (LF) Inserts a line feed character only.
• Windows (CR/LF) Inserts a carriage return and line feed character combination.
368
Chapter 21: Color management
A color management system reconciles color differences among devices so that you can be reasonably certain of the
colors your system ultimately produces. Viewing color accurately allows you to make sound color decisions
throughout your workflow, from digital capture through final output. Color management also allows you to create
output based on ISO, SWOP, and Japan Color print production standards.
Understanding color management
Why colors sometimes don’t match
No device in a publishing system is capable of reproducing the full range of colors viewable to the human eye. Each
device operates within a specific color space that can produce a certain range, or gamut, of colors.
A color model determines the relationship between values, and the color space defines the absolute meaning of those
values as colors. Some color models (such as CIE L*a*b) have a fixed color space because they relate directly to the
way humans perceive color. These models are described as being device-independent. Other color models (RGB,
HSL, HSB, CMYK, and so forth) can have many different color spaces. Because these models vary with each
associated color space or device, they are described as being device-dependent.
Because of these varying color spaces, colors can shift in appearance as you transfer documents between different
devices. Color variations can result from differences in image sources; the way software applications define color;
print media (newsprint paper reproduces a smaller gamut than magazine-quality paper); and other natural variations, such as manufacturing differences in monitors or monitor age.
RGB
CMYK
A
B
C
Color gamuts of various devices and documents
A. Lab color space B. Documents (working space) C. Devices
What is a color management system?
Color-matching problems result from various devices and software using different color spaces. One solution is to
have a system that interprets and translates color accurately between devices. A color management system (CMS)
compares the color space in which a color was created to the color space in which the same color will be output, and
makes the necessary adjustments to represent the color as consistently as possible among different devices.
ADOBE GOLIVE 9 369
User Guide
A color management system translates colors with the help of color profiles. A profile is a mathematical description
of a device’s color space. For example, a scanner profile tells a color management system how your scanner “sees”
colors. Adobe color management uses ICC profiles, a format defined by the International Color Consortium (ICC)
as a cross-platform standard.
Because no single color-translation method is ideal for all types of graphics, a color management system provides a
choice of rendering intents, or translation methods, so that you can apply a method appropriate to a particular
graphics element. For example, a color translation method that preserves correct relationships among colors in a
wildlife photograph may alter the colors in a logo containing flat tints of color.
Note: Don’t confuse color management with color correction. A color management system won’t correct an image that
was saved with tonal or color balance problems. It provides an environment where you can evaluate images reliably in
the context of your final output.
See also
“About color profiles” on page 380
“About rendering intents” on page 388
Do you need color management?
Without a color management system, your color specifications are device-dependent. You might not need color
management if your production process is tightly controlled for one medium only. For example, you or your print
service provider can tailor CMYK images and specify color values for a known, specific set of printing conditions.
The value of color management increases when you have more variables in your production process. Color
management is recommended if you anticipate reusing color graphics for print and online media, using various
kinds of devices within a single medium (such as different printing presses), or if you manage multiple workstations.
You will benefit from a color management system if you need to accomplish any of the following:
• Get predictable and consistent color output on multiple output devices including color separations, your desktop
printer, and your monitor. Color management is especially useful for adjusting color for devices with a relatively
limited gamut, such as a four-color process printing press.
• Accurately soft-proof (preview) a color document on your monitor by making it simulate a specific output device.
(Soft-proofing is subject to the limitations of monitor display, and other factors such as room lighting conditions.)
• Accurately evaluate and consistently incorporate color graphics from many different sources if they also use color
management, and even in some cases if they don’t.
• Send color documents to different output devices and media without having to manually adjust colors in
documents or original graphics. This is valuable when creating images that will eventually be used both in print
and online.
• Print color correctly to an unknown color output device; for example, you could store a document online for
consistently reproducible on-demand color printing anywhere in the world.
ADOBE GOLIVE 9 370
User Guide
Creating a viewing environment for color management
Your work environment influences how you see color on your monitor and on printed output. For best results,
control the colors and light in your work environment by doing the following:
• View your documents in an environment that provides a consistent light level and color temperature. For example,
the color characteristics of sunlight change throughout the day and alter the way colors appear on your screen, so
keep shades closed or work in a windowless room. To eliminate the blue-green cast from fluorescent lighting, you
can install D50 (5000˚ Kelvin) lighting. You can also view printed documents using a D50 lightbox.
• View your document in a room with neutral-colored walls and ceiling. A room’s color can affect the perception of
both monitor color and printed color. The best color for a viewing room is neutral gray. Also, the color of your
clothing reflecting off the glass of your monitor may affect the appearance of colors on-screen.
• Remove colorful background patterns on your monitor desktop. Busy or bright patterns surrounding a document
interfere with accurate color perception. Set your desktop to display neutral grays only.
• View document proofs in the real-world conditions under which your audience will see the final piece. For
example, you might want to see how a housewares catalog looks under the incandescent light bulbs used in homes,
or view an office furniture catalog under the fluorescent lighting used in offices. However, always make final color
judgements under the lighting conditions specified by the legal requirements for contract proofs in your country.
Keeping colors consistent
About color management in Adobe applications
Adobe color management helps you maintain the appearance of colors as you bring images in from external sources,
edit documents and transfer them between Adobe applications, and output your finished compositions. This system
is based on conventions developed by the International Color Consortium, a group responsible for standardizing
profile formats and procedures so that consistent and accurate color can be achieved throughout a workflow.
By default, color management is turned on in color-managed Adobe applications. If you purchased the Adobe
Creative Suite, color settings are synchronized across applications to provide consistent display for RGB and CMYK
colors. This means that colors look the same no matter which application you view them in.
ADOBE GOLIVE 9 371
User Guide
Color settings for Adobe Creative Suite are synchronized in a central location through Adobe Bridge.
If you decide to change the default settings, easy-to-use presets let you configure Adobe color management to match
common output conditions. You can also customize color settings to meet the demands of your particular color
workflow.
Keep in mind that the kinds of images you work with and your output requirements influence how you use color
management. For example, there are different color-consistency issues for an RGB photo printing workflow, a
CMYK commercial printing workflow, a mixed RGB/CMYK digital printing workflow, and an Internet publishing
workflow.
Basic steps for producing consistent color
1. Consult with your production partners (if you have any) to ensure that all aspects of your color
management workflow integrate seamlessly with theirs.
Discuss how the color workflow will be integrated with your workgroups and service providers, how software and
hardware will be configured for integration into the color management system, and at what level color management
will be implemented. (See “Do you need color management?” on page 369.)
2. Calibrate and profile your monitor.
A monitor profile is the first profile you should create. Seeing accurate color is essential if you are making creative
decisions involving the color you specify in your document. (See “Calibrate and profile your monitor” on page 382.)
3. Add color profiles to your system for any input and output devices you plan to use, such as scanners and
printers.
The color management system uses profiles to know how a device produces color and what the actual colors in a
document are. Device profiles are often installed when a device is added to your system. You can also use third-party
software and hardware to create more accurate profiles for specific devices and conditions. If your document will be
commercially printed, contact your service provider to determine the profile for the printing device or press
condition. (See “About color profiles” on page 380 and “Install a color profile” on page 382.)
ADOBE GOLIVE 9 372
User Guide
4. Set up color management in Adobe applications.
The default color settings are sufficient for most users. However, you can change the color settings by doing one of
the following:
• If you use multiple Adobe applications, use Adobe® Bridge CS3 to choose a standard color management configuration and synchronize color settings across applications before working with documents. (See “Synchronize color
settings across Adobe applications” on page 372.)
• If you use only one Adobe application, or if you want to customize advanced color management options, you can
change color settings for a specific application. (See “Set up color management” on page 372.)
5. (Optional) Preview colors using a soft proof.
After you create a document, you can use a soft proof to preview how colors will look when printed or viewed on a
specific device. (See “Soft-proofing colors” on page 377.)
Note: A soft proof alone doesn’t let you preview how overprinting will look when printed on an offset press. If you work
with documents that contain overprinting, turn on Overprint Preview to accurately preview overprints in a soft proof.
6. Use color management when printing and saving files.
Keeping the appearance of colors consistent across all of the devices in your workflow is the goal of color
management. Leave color management options enabled when printing documents, saving files, and preparing files
for online viewing. (See “Printing with color management” on page 378 and “Color-managing documents for online
viewing” on page 376.)
Synchronize color settings across Adobe applications
If you use Adobe Creative Suite, you can use Adobe Bridge to automatically synchronize color settings across applications. This synchronization ensures that colors look the same in all color-managed Adobe applications.
If color settings are not synchronized, a warning message appears at the top of the Color Settings dialog box in each
application. Adobe recommends that you synchronize color settings before you work with new or existing
documents.
1 Open Bridge.
To open Bridge from a Creative Suite application, choose File > Browse. To open Bridge directly, either choose Adobe
Bridge from the Start menu (Windows) or double-click the Adobe Bridge icon (Mac OS).
2 Choose Edit > Creative Suite Color Settings.
3 Select a color setting from the list, and click Apply.
If none of the default settings meet your requirements, select Show Expanded List Of Color Setting Files to view
additional settings. To install a custom settings file, such as a file you received from a print service provider, click
Show Saved Color Settings Files.
Set up color management
1 Do one of the following:
• (Illustrator, InDesign, Photoshop) Choose Edit > Color Settings.
• (Acrobat) Select the Color Management category of the Preferences dialog box.
2 Select a color setting from the Settings menu, and click OK.
ADOBE GOLIVE 9 373
User Guide
The setting you select determines which color working spaces are used by the application, what happens when you
open and import files with embedded profiles, and how the color management system converts colors. To view a
description of a setting, select the setting and then position the pointer over the setting name. The description
appears at the bottom of the dialog box.
Note: Acrobat color settings are a subset of those used in InDesign, Illustrator, and Photoshop.
In certain situations, such as if your service provider supplies you with a custom output profile, you may need to
customize specific options in the Color Settings dialog box. However, customizing is recommended for advanced
users only.
Note: If you work with more than one Adobe application, it is highly recommended that you synchronize your color
settings across applications. (See “Synchronize color settings across Adobe applications” on page 372.)
See also
“Customize color settings” on page 384
Change the appearance of CMYK black (Illustrator, InDesign)
Pure CMYK black (K=100) appears jet black (or rich black) when viewed on-screen, printed to a non-PostScript
desktop printer, or exported to an RGB file format. If you prefer to see the difference between pure black and rich
black as it will appear when printed on a commercial press, you can change the Appearance Of Black preferences.
These preferences do not change the color values in a document.
1 Choose Edit > Preferences > Appearance Of Black (Windows) or application name > Preferences > Appearance
Of Black (Mac OS).
2 Choose an option for On Screen:
Display All Blacks Accurately Displays pure CMYK black as dark gray. This setting allows you to see the difference
between pure black and rich black.
Display All Blacks As Rich Black Displays pure CMYK black as jet black (RGB=000). This setting makes pure black
and rich black appear the same on-screen.
3 Choose an option for Printing/Exporting:
Output All Blacks Accurately When printing to a non-PostScript desktop printer or exporting to an RGB file format,
outputs pure CMYK black using the color numbers in the document. This setting allows you to see the difference
between pure black and rich black.
Output All Blacks As Rich Black When printing to a non-PostScript desktop printer or exporting to an RGB file
format, outputs pure CMYK black as jet black (RGB=000). This setting makes pure black and rich black appear the
same.
Managing process and spot colors
When color management is on, any color you apply or create within a color-managed Adobe application automatically uses a color profile that corresponds to the document. If you switch color modes, the color management system
uses the appropriate profiles to translate the color to the new color model you choose.
Keep in mind the following guidelines for working with process and spot colors:
• Choose a CMYK working space that matches your CMYK output conditions to ensure that you can accurately
define and view process colors.
ADOBE GOLIVE 9 374
User Guide
• Select colors from a color library. Adobe applications come with several standard color libraries, which you can
load using the Swatches panel menu.
• (Acrobat, Illustrator, and InDesign) Turn on Overprint Preview to get an accurate and consistent preview of spot
colors.
• (Acrobat, Illustrator, and InDesign) Use Lab values (the default) to display predefined spot colors (such as colors
from the TOYO, PANTONE, DIC, and HKS libraries) and convert these colors to process colors. Using Lab values
provides the greatest accuracy and guarantees the consistent display of colors across Creative Suite applications. If
you want the display and output of these colors to match earlier versions of Illustrator or InDesign, use CMYK
equivalent values instead. For instructions on switching between Lab values and CMYK values for spot colors,
search Illustrator or InDesign Help.
Note: Color-managing spot colors provides a close approximation of a spot color on your proofing device and monitor.
However, it is difficult to exactly reproduce a spot color on a monitor or proofing device because many spot color inks
exist outside the gamuts of many of those devices.
Color-managing imported images
Color-managing imported images (Illustrator, InDesign)
How imported images are integrated into a document’s color space depends on whether or not the image has an
embedded profile:
• When you import an image that contains no profile, the Adobe application uses the current document profile to
define the colors in the image.
• When you import an image that contains an embedded profile, color policies in the Color Settings dialog box
determine how the Adobe application handles the profile.
See also
“Color management policy options” on page 387
Using a safe CMYK workflow
A safe CMYK workflow ensures that CMYK color numbers are preserved all the way to the final output device, as
opposed to being converted by your color management system. This workflow is beneficial if you want to incrementally adopt color management practices. For example, you can use CMYK profiles to soft-proof and hard-proof
documents without the possibility of unintended color conversions occurring during final output.
Illustrator and InDesign support a safe CMYK workflow by default. As a result, when you open or import a CMYK
image with an embedded profile, the application ignores the profile and preserves the raw color numbers. If you want
your application to adjust color numbers based on an embedded profile, change the CMYK color policy to Preserve
Embedded Profiles in the Color Settings dialog box. You can easily restore the safe CMYK workflow by changing the
CMYK color policy back to Preserve Numbers (Ignore Linked Profiles).
You can override safe CMYK settings when you print a document or save it to PDF. However, doing so may cause
colors to be reseparated. For example, pure CMYK black objects may be reseparated as rich black. For more information on color management options for printing and saving PDFs, search in Help.
ADOBE GOLIVE 9 375
User Guide
See also
“Color management policy options” on page 387
Preparing imported graphics for color management
Use the following general guidelines to prepare graphics for being color-managed in Adobe applications:
• Embed an ICC-compliant profile when you save the file. The file formats that support embedded profiles are
JPEG, PDF, PSD (Photoshop), AI (Illustrator), INDD (InDesign), Photoshop EPS, Large Document Format, and
TIFF.
• If you plan to reuse a color graphic for multiple final output devices or media, such as for print, video, and the web,
prepare the graphic using RGB or Lab colors whenever possible. If you must save in a color model other than RGB
or Lab, keep a copy of the original graphic. RGB and Lab color models represent larger color gamuts than most
output devices can reproduce, retaining as much color information as possible before being translated to a smaller
output color gamut.
See also
“Embed a color profile” on page 382
View or change profiles for imported bitmap images (InDesign)
InDesign allows you to view, override, or disable profiles for imported bitmap images. This may be necessary when
you are importing an image containing no profile or an incorrectly embedded profile. For example, if the scanner
manufacturer’s default profile was embedded but you have since generated a custom profile, you can assign the newer
profile.
1 Do one of the following:
• If the graphic is already in layout, select it and choose Object > Image Color Settings.
• If you’re about to import the graphic, choose File > Place, select Show Import Options, select and open the file,
and then select the Color tab.
2 For Profile, choose the source profile to apply to the graphic in your document. If a profile is currently embedded,
the profile name appears at the top of the Profile menu.
3 (Optional) Choose a rendering intent, and then click OK. In most cases, it’s best to use the default rendering
intent.
Note: You can also view or change profiles for objects in Acrobat.
See also
“Convert document colors to another profile (Photoshop)” on page 384
ADOBE GOLIVE 9 376
User Guide
Color-managing documents for online viewing
Color-managing documents for online viewing
Color management for online viewing is very different from color management for printed media. With printed
media, you have far more control over the appearance of the final document. With online media, your document
will appear on a wide range of possibly uncalibrated monitors and video display systems, significantly limiting your
control over color consistency.
When you color-manage documents that will be viewed exclusively on the web, Adobe recommends that you use the
sRGB color space. sRGB is the default working space for most Adobe color settings, but you can verify that sRGB is
selected in the Color Settings dialog box (Photoshop, Illustrator, InDesign) or the Color Management preferences
(Acrobat). With the working space set to sRGB, any RGB graphics you create will use sRGB as the color space.
When working with images that have an embedded color profile other than sRGB, you should convert the image’s
colors to sRGB before you save the image for use on the web. If you want the application to automatically convert the
colors to sRGB when you open the image, select Convert To Working Space as the RGB color management policy.
(Make sure that your RGB working space is set to sRGB.) In Photoshop and InDesign, you can also manually convert
the colors to sRGB using the Edit > Convert To Profile command.
Note: In InDesign, the Convert To Profile command only converts colors for native, not placed, objects in the document.
See also
“About color working spaces” on page 385
“Color management policy options” on page 387
Color-managing PDFs for online viewing
When you export PDFs, you can choose to embed profiles. PDFs with embedded profiles reproduce color consistently in Acrobat 4.0 or later running under a properly configured color management system.
Keep in mind that embedding color profiles increases the size of PDFs. RGB profiles are usually small (around 3 KB);
however, CMYK profiles can range from .5 to 2 MB.
See also
“Printing with color management” on page 378
Color-managing HTML documents for online viewing
Many web browsers do not support color management. Of the browsers that do support color management, not all
instances can be considered color-managed because they may be running on systems where the monitors are not
calibrated. In addition, few web pages contain images with embedded profiles. If you manage a highly controlled
environment, such as the intranet of a design studio, you may be able to achieve some degree of HTML color
management for images by equipping everyone with a browser that supports color management and calibrating all
monitors.
You can approximate how colors will look on non-calibrated monitors by using the sRGB color space. However,
because color reproduction varies among uncalibrated monitors, you still won’t be able to anticipate the true range
of potential display variations.
ADOBE GOLIVE 9 377
User Guide
Proofing colors
Soft-proofing colors
In a traditional publishing workflow, you print a hard proof of your document to preview how its colors will look
when reproduced on a specific output device. In a color-managed workflow, you can use the precision of color
profiles to soft-proof your document directly on the monitor. You can display an on-screen preview of how your
document’s colors will look when reproduced on a particular output device.
Keep in mind that the reliability of the soft proof depends upon the quality of your monitor, the profiles of your
monitor and output devices, and the ambient lighting conditions of your work environment.
Note: A soft proof alone doesn’t let you preview how overprinting will look when printed on an offset press. If you work
with documents that contain overprinting, turn on Overprint Preview to accurately preview overprints in a soft proof.
A
B
C
Using a soft proof to preview the final output of a document on your monitor
A. Document in the working space B. Document’s color values are translated to color space of chosen proof profile (usually the output device’s
profile). C. Monitor displays proof profile’s interpretation of document’s color values.
Soft-proof colors
1 Choose View > Proof Setup, and do one of the following:
• Choose a preset that corresponds to the output condition you want to simulate.
• Choose Custom (Photoshop and InDesign) or Customize (Illustrator) to create a custom proof setup for a specific
output condition. This option is recommended for the most accurate preview of your final printed piece.
2 Choose View > Proof Colors to toggle the soft-proof display on and off. When soft proofing is on, a check mark
appears next to the Proof Colors command, and the name of the proof preset or profile appears at the top of the
document window.
To compare the colors in the original image and the colors in the soft proof, open the document in a new window
before you set up the soft proof.
Soft-proof presets
Working CMYK Creates a soft proof of colors using the current CMYK working space as defined in the Color Settings
dialog box.
Document CMYK (InDesign) Creates a soft proof of colors using the document’s CMYK profile.
Working Cyan Plate, Working Magenta Plate, Working Yellow Plate, Working Black Plate, or Working CMY Plates
(Photoshop) Creates a soft proof of specific CMYK ink colors using the current CMYK working space.
Macintosh RGB or Windows RGB (Photoshop and Illustrator) Creates a soft proof of colors in an image using either a
standard Mac OS or Windows monitor as the proof profile space to simulate. Both options assume that the simulated
device will display your document without using color management. Neither option is available for Lab or CMYK
documents.
ADOBE GOLIVE 9 378
User Guide
Monitor RGB (Photoshop and Illustrator) Creates a soft proof of colors in an RGB document using your current
monitor color space as the proof profile space. This option assumes that the simulated device will display your
document without using color management. This option is unavailable for Lab and CMYK documents.
Custom soft-proof options
Device To Simulate Specifies the color profile of the device for which you want to create the proof. The usefulness of
the chosen profile depends on how accurately it describes the device’s behavior. Often, custom profiles for specific
paper and printer combinations create the most accurate soft proof.
Preserve CMYK Numbers or Preserve RGB Numbers Simulates how the colors will appear without being converted to
the color space of the output device. This option is most useful when you are following a safe CMYK workflow.
Rendering Intent (Photoshop and Illustrator) When the Preserve Numbers option is deselected, specifies a
rendering intent for converting colors to the device you are trying to simulate.
Use Black Point Compensation (Photoshop) Ensures that the shadow detail in the image is preserved by simulating
the full dynamic range of the output device. Select this option if you plan to use black point compensation when
printing (which is recommended in most situations).
Simulate Paper Color Simulates the dingy white of real paper, according to the proof profile. Not all profiles support
this option.
Simulate Black Ink Simulates the dark gray you really get instead of a solid black on many printers, according to the
proof profile. Not all profiles support this option.
In Photoshop, if you want the custom proof setup to be the default proof setup for documents, close all document
windows before choosing the View > Proof Setup > Custom command.
Save or load a custom proof setup
1 Choose View > Proof Setup > Custom.
2 Do either of the following:
• To save a custom proof setup, click Save. To ensure that the new preset appears in the View > Proof Setup menu,
save the preset in the default location.
• To load a custom proof setup, click Load.
Color-managing documents when printing
Printing with color management
Color management options for printing let you specify how you want Adobe applications to handle the outgoing
image data so the printer will print colors consistent with what you see on your monitor. Your options for printing
color-managed documents depend on the Adobe application you use, as well as the output device you select. In
general, you have the following choices for handling colors during printing:
• Let the printer determine colors.
• Let the application determine colors.
• (Photoshop and InDesign) Do not use color management. In this workflow, no color conversion occurs. You may
also need to turn off color management in your printer driver. This method is useful primarily for printing test
targets or generating custom profiles.
ADOBE GOLIVE 9 379
User Guide
Letting the printer determine colors when printing
In this workflow, the application does no color conversion, but sends all necessary conversion information to the
output device. This method is especially convenient when printing to inkjet photo printers, because each combination of paper type, printing resolution, and additional printing parameters (such as high-speed printing) requires
a different profile. Most new inkjet photo printers come with fairly accurate profiles built into the driver, so letting
the printer select the right profile saves time and alleviates mistakes. This method is also recommended if you are
not familiar with color management.
If you choose this method, it is very important that you set up printing options and turn on color management in
your printer driver. Search Help for additional instructions.
If you select a PostScript printer, you can take advantage of PostScript color management. PostScript color
management makes it possible to perform color composite output or color separations at the raster image processor
(RIP)—a process called in-RIP separations—so that a program need only specify parameters for separation and let
the device calculate the final color values. PostScript color-managed output workflows require an output device that
supports PostScript color management using PostScript level 2 version 2017 or later, or PostScript 3.
Letting the application determine colors when printing
In this workflow, the application does all the color conversion, generating color data specific to one output device.
The application uses the assigned color profiles to convert colors to the output device’s gamut, and sends the resulting
values to the output device. The accuracy of this method depends on the accuracy of the printer profile you select.
Use this workflow when you have custom ICC profiles for each specific printer, ink, and paper combination.
If you choose this option, it is very important that you disable color management in your printer driver. Letting the
application and the printer driver simultaneously manage colors during printing results in unpredictable color.
Search Help for additional instructions.
Obtaining custom profiles for desktop printers
If the output profiles that come with your printer don’t produce satisfactory results, you obtain custom profiles in the
following ways:
• Purchase a profile for your type of printer and paper. This is usually the easiest and least expensive method.
• Purchase a profile for your specific printer and paper. This method involves printing a profiling target on your
printer and paper, and providing that target to a company that will create a specific profile. This is more expensive
than purchasing a standard profile, but can provide better results because it compensates for any manufacturing
variations in printers.
• Create your own profile using a scanner-based system. This method involves using profile-creation software and
your own flatbed scanner to scan the profiling target. It can provide excellent results for matte surface papers, but
not glossy papers. (Glossy papers tend to have fluorescent brighteners in them that look different to a scanner than
they do in room light.)
• Create your own profile using a hardware profile-creation tool. This method is expensive but can provide the best
results. A good hardware tool can create an accurate profile even with glossy papers.
• Tweak a profile created using one of the previous methods with profile-editing software. This software can be
complex to use, but it lets you correct problems with a profile or simply adjust a profile to produce results more to
your taste.
ADOBE GOLIVE 9 380
User Guide
See also
“Install a color profile” on page 382
Working with color profiles
About color profiles
Precise, consistent color management requires accurate ICC-compliant profiles of all of your color devices. For
example, without an accurate scanner profile, a perfectly scanned image may appear incorrect in another program,
simply due to any difference between the scanner and the program displaying the image. This misleading representation may cause you to make unnecessary, time-wasting, and potentially damaging “corrections” to an already satisfactory image. With an accurate profile, a program importing the image can correct for any device differences and
display a scan’s actual colors.
A color management system uses the following kinds of profiles:
Monitor profiles Describe how the monitor is currently reproducing color. This is the first profile you should create
because viewing color accurately on your monitor allows for critical color decisions in the design process. If what
you see on your monitor is not representative of the actual colors in your document, you will not be able to maintain
color consistency.
Input device profiles Describe what colors an input device is capable of capturing or scanning. If your digital camera
offers a choice of profiles, Adobe recommends that you select Adobe RGB. Otherwise, use sRGB (which is the default
for most cameras). Advanced users may also consider using different profiles for different light sources. For scanner
profiles, some photographers create separate profiles for each type or brand of film scanned on a scanner.
Output device profiles Describe the color space of output devices like desktop printers or a printing press. The color
management system uses output device profiles to properly map the colors in a document to the colors within the
gamut of an output device’s color space. The output profile should also take into consideration specific printing
conditions, such as the type of paper and ink. For example, glossy paper is capable of displaying a different range of
colors than matte paper.
Most printer drivers come with built-in color profiles. It’s a good idea to try these profiles before you invest in custom
profiles.
Document profiles Define the specific RGB or CMYK color space of a document. By assigning, or tagging, a
document with a profile, the application provides a definition of actual color appearances in the document. For
example, R=127, G=12, B=107 is just a set of numbers that different devices will display differently. But when tagged
with the AdobeRGB color space, these numbers specify an actual color or wavelength of light; in this case, a specific
color of purple.
When color management is on, Adobe applications automatically assign new documents a profile based on Working
Space options in the Color Settings dialog box. Documents without assigned profiles are known as untagged and
contain only raw color numbers. When working with untagged documents, Adobe applications use the current
working space profile to display and edit colors.
ADOBE GOLIVE 9 381
User Guide
A
B
C
D
Managing color with profiles
A. Profiles describe the color spaces of the input device and the document. B. Using the profiles’ descriptions, the color management system
identifies the document’s actual colors. C. The monitor’s profile tells the color management system how to translate the document’s numeric
values to the monitor’s color space. D. Using the output device’s profile, the color management system translates the document’s numeric values
to the color values of the output device so the correct appearance of colors is printed.
See also
“Calibrate and profile your monitor” on page 382
“Letting the printer determine colors when printing” on page 379
“Obtaining custom profiles for desktop printers” on page 379
“About color working spaces” on page 385
About monitor calibration and characterization
Profiling software can both calibrate and characterize your monitor. Calibrating your monitor brings it into
compliance with a predefined standard—for example, adjusting your monitor so that it displays color using the
graphics arts standard white point color temperature of 5000 K (Kelvin). Characterizing your monitor simply creates
a profile that describes how the monitor is currently reproducing color.
Monitor calibration involves adjusting the following video settings:
Brightness and contrast The overall level and range, respectively, of display intensity. These parameters work just as
they do on a television. A monitor calibration utility helps you set an optimum brightness and contrast range for
calibration.
Gamma The brightness of the midtone values. The values produced by a monitor from black to white are
nonlinear—if you graph the values, they form a curve, not a straight line. Gamma defines the value of that curve
halfway between black and white.
Phosphors The substances that CRT monitors use to emit light. Different phosphors have different color character-
istics.
White point The color and intensity of the brightest white the monitor can reproduce.
ADOBE GOLIVE 9 382
User Guide
Calibrate and profile your monitor
When you calibrate your monitor, you are adjusting it so it conforms to a known specification. Once your monitor
is calibrated, the profiling utility lets you save a color profile. The profile describes the color behavior of the
monitor—what colors can or cannot be displayed on the monitor and how the numeric color values in an image must
be converted so that colors are displayed accurately.
1 Make sure your monitor has been turned on for at least a half hour. This gives it sufficient time to warm up and
produce more consistent output.
2 Make sure your monitor is displaying thousands of colors or more. Ideally, make sure it is displaying millions of
colors or 24-bit or higher.
3 Remove colorful background patterns on your monitor desktop and set your desktop to display neutral grays.
Busy patterns or bright colors surrounding a document interfere with accurate color perception.
4 Do one of the following to calibrate and profile your monitor:
• In Windows, install and use a monitor calibration utility.
• In Mac OS, use the Calibrate utility, located on the System Preferences/Displays/Color tab.
• For the best results, use third-party software and measuring devices. In general, using a measuring device such as
a colorimeter along with software can create more accurate profiles because an instrument can measure the colors
displayed on a monitor far more accurately than the human eye.
Note: Monitor performance changes and declines over time; recalibrate and profile your monitor every month or so. If
you find it difficult or impossible to calibrate your monitor to a standard, it may be too old and faded.
Most profiling software automatically assigns the new profile as the default monitor profile. For instructions on how
to manually assign the monitor profile, refer to the Help system for your operating system.
Install a color profile
Color profiles are often installed when a device is added to your system. The accuracy of these profiles (often called
generic profiles or canned profiles) varies from manufacturer to manufacturer. You can also obtain device profiles
from your service provider, download profiles from the web, or create custom profiles using professional profiling
equipment.
• In Windows, right-click a profile and select Install Profile. Alternatively, copy the profiles into the
WINDOWS\system32\spool\drivers\color folder.
• In Mac OS, copy profiles into the /Library/ColorSync/Profiles folder or the
/Users/username/Library/ColorSync/Profiles folder.
After installing color profiles, be sure to restart Adobe applications.
See also
“Obtaining custom profiles for desktop printers” on page 379
Embed a color profile
To embed a color profile in a document you created in Illustrator, InDesign, or Photoshop, you must save or export
the document in a format that supports ICC profiles.
1 Save or export the document in one of the following file formats: Adobe PDF, PSD (Photoshop), AI (Illustrator),
INDD (InDesign), JPEG, Photoshop EPS, Large Document Format, or TIFF.
ADOBE GOLIVE 9 383
User Guide
2 Select the option for embedding ICC profiles. The exact name and location of this option varies between applications. Search Adobe Help for additional instructions.
Embed a color profile (Acrobat)
You can embed a color profile in an object or an entire PDF. Acrobat attaches the appropriate profile, as specified in
the Destination Space area of the Convert Colors dialog box, to the selected color space in the PDF. For more information, see the color conversion topics in Complete Acrobat Help.
Changing the color profile for a document
There are very few situations that require you to change the color profile for a document. This is because your application automatically assigns the color profile based on the settings you select in the Color Settings dialog box. The
only times you should manually change a color profile are when preparing a document for a different output destination or correcting a policy behavior that you no longer want implemented in the document. Changing the profile
is recommended for advanced users only.
You can change the color profile for a document in the following ways:
• Assign a new profile. The color numbers in the document remain the same, but the new profile may dramatically
change the appearance of the colors as displayed on your monitor.
• Remove the profile so that the document is no longer color-managed.
• (Acrobat, Photoshop and InDesign) Convert the colors in the document to the color space of a different profile.
The color numbers are shifted in an effort to preserve the original color appearances.
Assign or remove a color profile (Illustrator, Photoshop)
1 Choose Edit > Assign Profile.
2 Select an option, and click OK:
Don’t Color Manage This Document Removes the existing profile from the document. Select this option only if you
are sure that you do not want to color-manage the document. After you remove the profile from a document, the
appearance of colors is defined by the application’s working space profiles.
Working [color model: working space] Assigns the working space profile to the document.
Profile Lets you select a different profile. The application assigns the new profile to the document without
converting colors to the profile space. This may dramatically change the appearance of the colors as displayed on
your monitor.
See also
“Changing the color profile for a document” on page 383
Assign or remove a color profile (InDesign)
1 Choose Edit > Assign Profiles.
2 For RGB Profile and CMYK Profile, select one of the following:
Discard (Use Current Working Space) Removes the existing profile from the document. Select this option only if you
are sure that you do not want to color-manage the document. After you remove the profile from a document, the
ADOBE GOLIVE 9 384
User Guide
appearance of colors is defined by the application’s working space profiles, and you can no longer embed a profile in
the document.
Assign Current Working Space [working space] Assigns the working space profile to the document.
Assign Profile Lets you select a different profile. The application assigns the new profile to the document without
converting colors to the profile space. This may dramatically change the appearance of the colors as displayed on
your monitor.
3 Choose a rendering intent for each type of graphic in your document. For each graphic type, you can choose one
of the four standard intents, or the Use Color Settings Intent, which uses the rendering intent currently specified in
the Color Settings dialog box. For more information on rendering intents, search in Help.
The graphic types include the following:
Solid Color Intent Sets the rendering intent for all vector art (solid areas of color) in InDesign native objects.
Default Image Intent Sets the default rendering intent for bitmap images placed in InDesign. You can still override
this setting on an image-by-image basis.
After-Blending Intent Sets the rendering intent to the proofing or final color space for colors that result from trans-
parency interactions on the page. Use this option when your document includes transparent objects.
4 To preview the effects of the new profile assignment in the document, select Preview, and then click OK.
See also
“Changing the color profile for a document” on page 383
“View or change profiles for imported bitmap images (InDesign)” on page 375
Convert document colors to another profile (Photoshop)
1 Choose Edit > Convert To Profile.
2 Under Destination Space, choose the color profile to which you want to convert the document’s colors. The
document will be converted to and tagged with this new profile.
3 Under Conversion Options, specify a color management engine, a rendering intent, and black point and dither
options (if available). (See “Color conversion options” on page 387.)
4 To flatten all layers of the document onto a single layer upon conversion, select Flatten Image.
5 To preview the effects of the conversion in the document, select Preview.
See also
“Changing the color profile for a document” on page 383
Color settings
Customize color settings
For most color-managed workflows, it is best to use a preset color setting that has been tested by Adobe Systems.
Changing specific options is recommended only if you are knowledgeable about color management and very
confident about the changes you make.
ADOBE GOLIVE 9 385
User Guide
After you customize options, you can save them as a preset. Saving color settings ensures that you can reuse them
and share them with other users or applications.
• To save color settings as a preset, click Save in the Color Settings dialog box. To ensure that the application displays
the setting name in the Color Settings dialog box, save the file in the default location. If you save the file to a
different location, you must load the file before you can select the setting.
• To load a color settings preset that’s not saved in the standard location, click Load in the Color Settings dialog box,
select the file you want to load, and click Open.
Note: In Acrobat, you cannot save customized color settings. To share customized color settings with Acrobat, you must
create the file in InDesign, Illustrator, or Photoshop, and then save it in the default Settings folder. It will then be available
in the Color Management category of the Preferences dialog box. You can also add settings manually to the default
Settings folder.
About color working spaces
A working space is an intermediate color space used to define and edit color in Adobe applications. Each color model
has a working space profile associated with it. You can choose working space profiles in the Color Settings dialog box.
A working space profile acts as the source profile for newly created documents that use the associated color model.
For example, if Adobe RGB (1998) is the current RGB working space profile, each new RGB document that you
create will use colors within the Adobe RGB (1998) gamut. Working spaces also determine the appearance of colors
in untagged documents.
If you open a document embedded with a color profile that doesn’t match the working space profile, the application
uses a color management policy to determine how to handle the color data. In most cases, the default policy is to
preserve the embedded profile.
See also
“About missing and mismatched color profiles” on page 386
“Color management policy options” on page 387
Working Space options
To display working space options in Photoshop, Illustrator and InDesign, choose Edit > Color Settings. In Acrobat,
select the Color Management category of the Preferences dialog box.
To view a description of any profile, select the profile and then position the pointer over the profile name. The
description appears at the bottom of the dialog box.
RGB Determines the RGB color space of the application. In general, it’s best to choose Adobe RGB or sRGB, rather
than the profile for a specific device (such as a monitor profile).
sRGB is recommended when you prepare images for the web, because it defines the color space of the standard
monitor used to view images on the web. sRGB is also a good choice when you work with images from consumerlevel digital cameras, because most of these cameras use sRGB as their default color space.
Adobe RGB is recommended when you prepare documents for print, because Adobe RGB’s gamut includes some
printable colors (cyans and blues in particular) that can't be defined using sRGB. Adobe RGB is also a good choice
when working with images from professional-level digital cameras, because most of these cameras use Adobe RGB
as their default color space.
ADOBE GOLIVE 9 386
User Guide
CMYK Determines the CMYK color space of the application. All CMYK working spaces are device-dependent,
meaning that they are based on actual ink and paper combinations. The CMYK working spaces Adobe supplies are
based on standard commercial print conditions.
Gray (Photoshop) or Grayscale (Acrobat) Determines the grayscale color space of the application.
Spot (Photoshop) Specifies the dot gain to use when displaying spot color channels and duotones.
Note: In Acrobat, you can use the color space in an embedded output intent instead of a document color space for
viewing and printing. Select Output Intent Overrides Working Spaces. For more information on output intents, see
Complete Acrobat Help.
Adobe applications ship with a standard set of working space profiles that have been recommended and tested by
Adobe Systems for most color management workflows. By default, only these profiles appear in the working space
menus. To display additional color profiles that you have installed on your system, select Advanced Mode (Illustrator
and InDesign) or More Options (Photoshop). A color profile must be bi-directional, that is, contain specifications
for translating both into and out of color spaces, in order to appear in the working space menus.
Note: In Photoshop, you can create custom working space profiles. However, Adobe recommends that you use a standard
working space profile rather than create a custom profile. For more information, see the Photoshop support knowledgebase at www.adobe.com/support/products/photoshop.html.
About missing and mismatched color profiles
For a newly created document, the color workflow usually operates seamlessly: unless specified otherwise, the
document uses the working space profile associated with its color mode for creating and editing colors.
However, some existing documents may not use the working space profile that you have specified, and some existing
documents may not be color-managed. It is common to encounter the following exceptions to your color-managed
workflow:
• You might open a document or import color data (for example, by copying and pasting or dragging and dropping)
from a document that is not tagged with a profile. This is often the case when you open a document created in an
application that either does not support color management or has color management turned off.
• You might open a document or import color data from a document that is tagged with a profile different from the
current working space. This may be the case when you open a document that was created using different color
management settings, or scanned and tagged with a scanner profile.
In either case, the application uses a color management policy to decide how to handle the color data in the document.
If the profile is missing or does not match the working space, the application may display a warning message,
depending on options you set in the Color Settings dialog box. Profile warnings are turned off by default, but you
can turn them on to ensure the appropriate color management of documents on a case-by-case basis. The warning
messages vary between applications, but in general you have the following options:
• (Recommended) Leave the document or imported color data as it is. For example, you can choose to use the
embedded profile (if one exists), leave the document without a color profile (if one doesn’t exist), or preserve the
numbers in pasted color data.
• Adjust the document or imported color data. For example, when opening a document with a missing color profile,
you can choose to assign the current working space profile or a different profile. When opening a document with
a mismatched color profile, you can choose to discard the profile or convert the colors to the current working
space. When importing color data, you can choose to convert the colors to the current working space in order to
preserve their appearance.
ADOBE GOLIVE 9 387
User Guide
Color management policy options
A color management policy determines how the application handles color data when you open a document or import
an image. You can choose different policies for RGB and CMYK images, and you can specify when you want warning
messages to appear. To display color management policy options, choose Edit > Color Settings.
To view a description of a policy, select the policy and then position the pointer over the policy name. The description
appears at the bottom of the dialog box.
RGB, CMYK, and Gray Specifies a policy to follow when bringing colors into the current working space (either by
opening files or importing images into the current document). (The Grayscale option is available for Photoshop
only.) Choose from the following options:
• Preserve Embedded Profiles Always preserves embedded color profiles when opening files. This is the recommended option for most workflows because it provides consistent color management. One exception is if you’re
concerned about preserving CMYK numbers, in which case you should select Preserve Numbers (Ignore Linked
Profiles) instead.
• Convert To Working Space Converts colors to the current working space profile when opening files and
importing images. Select this option if you want to force all colors to use a single profile (the current working space
profile).
• Preserve Numbers (Ignore Linked Profiles) This option is available in InDesign and Illustrator for CMYK.
Preserves color numbers when opening files and importing images, but still allows you to use color management to
view colors accurately in Adobe applications. Select this option if you want to use a safe CMYK workflow. In
InDesign, you can override this policy on a per-object basis by choosing Object > Image Color Settings.
• Off Ignores embedded color profiles when opening files and importing images, and does not assign the working
space profile to new documents. Select this option if you want to discard any color metadata provided by the original
document creator.
Profile Mismatches: Ask When Opening Displays a message whenever you open a document tagged with a profile
other than the current working space. You will be given the option to override the policy’s default behavior. Select
this option if you want to ensure the appropriate color management of documents on a case-by-case basis.
Profile Mismatches: Ask When Pasting Displays a message whenever color profile mismatches occur as colors are
imported into a document through pasting or dragging-and-dropping. You will be given the option to override the
policy’s default behavior. Select this option if you want to ensure the appropriate color management of pasted colors
on a case-by-case basis.
Missing Profiles: Ask When Opening Displays a message whenever you open an untagged document. You will be
given the option to override the policy’s default behavior. Select this option if you want to ensure the appropriate
color management of documents on a case-by-case basis.
Color conversion options
Color conversion options let you control how the application handles the colors in a document as it moves from one
color space to another. Changing these options is recommended only if you are knowledgeable about color
management and very confident about the changes you make. To display conversion options, choose Edit > Color
Settings, and select Advanced Mode (Illustrator and InDesign) or More Options (Photoshop). In Acrobat, select the
Color Management category of the Preferences dialog box.
Engine Specifies the Color Management Module (CMM) used to map the gamut of one color space to the gamut of
another. For most users, the default Adobe (ACE) engine fulfills all conversion needs.
ADOBE GOLIVE 9 388
User Guide
To view a description of an engine or intent option, select the option and then position the pointer over the option
name. The description appears at the bottom of the dialog box.
Intent (Photoshop, Illustrator, InDesign) Specifies the rendering intent used to translate one color space to another.
Differences between rendering intents are apparent only when you print a document or convert it to a different
working space.
Use Black Point Compensation Ensures that the shadow detail in the image is preserved by simulating the full
dynamic range of the output device. Select this option if you plan to use black point compensation when printing
(which is recommended in most situations).
Use Dither (Photoshop) Controls whether to dither colors when converting 8-bit-per-channel images between color
spaces. When the Use Dither option is selected, Photoshop mixes colors in the destination color space to simulate a
missing color that existed in the source space. Although dithering helps to reduce the blocky or banded appearance
of an image, it may also result in larger file sizes when images are compressed for web use.
About rendering intents
A rendering intent determines how a color management system handles color conversion from one color space to
another. Different rendering intents use different rules to determine how the source colors are adjusted; for example,
colors that fall inside the destination gamut may remain unchanged, or they may be adjusted to preserve the original
range of visual relationships when translated to a smaller destination gamut. The result of choosing a rendering
intent depends on the graphical content of documents and on the profiles used to specify color spaces. Some profiles
produce identical results for different rendering intents.
In general, it is best to use the default rendering intent for the selected color setting, which has been tested by Adobe
Systems to meet industry standards. For example, if you choose a color setting for North America or Europe, the
default rendering intent is Relative Colorimetric. If you choose a color setting for Japan, the default rendering intent is
Perceptual.
You can select a rendering intent when you set color conversion options for the color management system, soft-proof
colors, and print artwork:
Perceptual Aims to preserve the visual relationship between colors so it’s perceived as natural to the human eye, even
though the color values themselves may change. This intent is suitable for photographic images with lots of out-ofgamut colors. This is the standard rendering intent for the Japanese printing industry.
Saturation Tries to produce vivid colors in an image at the expense of color accuracy. This rendering intent is
suitable for business graphics like graphs or charts, where bright saturated colors are more important than the exact
relationship between colors.
Relative Colorimetric Compares the extreme highlight of the source color space to that of the destination color space
and shifts all colors accordingly. Out-of-gamut colors are shifted to the closest reproducible color in the destination
color space. Relative Colorimetric preserves more of the original colors in an image than Perceptual. This is the
standard rendering intent for printing in North America and Europe.
Absolute Colorimetric Leaves colors that fall inside the destination gamut unchanged. Out-of-gamut colors are
clipped. No scaling of colors to destination white point is performed. This intent aims to maintain color accuracy at
the expense of preserving relationships between colors and is suitable for proofing to simulate the output of a
particular device. This intent is particularly useful for previewing how paper color affects printed colors.
ADOBE GOLIVE 9 389
User Guide
Advanced controls in Photoshop
In Photoshop you display advanced controls for managing color by choosing Edit > Color Settings and selecting
More Options.
Desaturate Monitor Colors By Determines whether to desaturate colors by the specified amount when displayed on
the monitor. When selected, this option can aid in visualizing the full range of color spaces with gamuts larger than
that of the monitor. However, this causes a mismatch between the monitor display and the output. When the option
is deselected, distinct colors in the image may display as a single color.
Blend RGB Colors Using Gamma Controls how RGB colors blend together to produce composite data (for example,
when you blend or paint layers using Normal mode). When the option is selected, RGB colors are blended in the
color space corresponding to the specified gamma. A gamma of 1.00 is considered “colorimetrically correct” and
should result in the fewest edge artifacts. When the option is deselected, RGB colors are blended directly in the
document’s color space.
Note: When you select Blend RGB Colors Using Gamma, layered documents will look different when displayed in other
applications than they do in Photoshop.
390
Chapter 22: Keyboard shortcuts
Customizing keyboard shortcuts
Customizing keyboard shortcuts
GoLive provides a shortcut editor in which you can view a list of all shortcuts, and edit or create shortcuts. The shortcut
editor includes all commands that support shortcuts, some of which aren’t addressed in the default shortcut set.
If the default shortcut set is insufficient, you can create additional custom sets. For example, you can create separate
sets for different workspaces chosen from the Window > Workspace menu.
See also
“Keys for configuring the workspace” on page 391
To change the active shortcut set
1 Choose Edit > Keyboard Shortcuts.
2 Select a shortcut set from the Selected Set menu, and click OK.
To create a new shortcut set
1 Choose Edit > Keyboard Shortcuts.
2 Click New Set.
3 Type a name in the Set Name box, and select a shortcut set from the Copy From menu. Then click OK.
To create or redefine a shortcut
1 Choose Edit > Keyboard Shortcuts (Windows) or GoLive > Keyboard Shortcuts (Mac OS).
2 Select an existing shortcut set from the Selected Set menu, or click New Set.
Note: Avoid editing the default shortcut set. Instead, click New Set and select the default set from the Copy From menu.
3 In the list box, expand the menu category containing the desired command, and then select the command.
4 In the Press New Shortcut box, press the keys for your new keyboard shortcut. (If the shortcut is already used by
another command, that command appears in the Currently Assigned To area. Either try a different key sequence, or
change the shortcut for the other command.)
5 Do one of the following:
• Click Assign to create a new shortcut.
• Click Replace to replace an existing shortcut.
6 Repeat steps 3-5 for all shortcuts you want to change, and then click OK.
ADOBE GOLIVE 9 391
User Guide
Default keyboard shortcuts
Keys for configuring the workspace
This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
Result
Windows
Open documents
that were open
when you last
closed GoLive
Mac OS
Shift-close
Welcome dialog
box
Show next window Ctrl+Tab
in workspace
Show previous
window in workspace
Shift+Ctrl+Tab
Change focus to
Text Inspector Link
field
With cursor in
document window,
Command+,
(comma)
Change focus to
document window
With cursor in Text
Inspector,
Command+; (semicolon)
Deselect all user
profiles in the
Options tab of the
View panel
Alt-click an option
in the User Profile
menu
Option-click an
option in the User
Profile menu
Replace a previous Alt-click the
selection in the
Elements, CSS, or
Highlight tab of the Special menu
View panel
Option-click the
Elements, CSS, or
Special menu
Deselect media
files and images in
the Options tab of
the View panel
Option-deselect
Display Images
Alt-deselect
Display Images
See also
“Customizing keyboard shortcuts” on page 390
Keys for using the document window
This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
ADOBE GOLIVE 9 392
User Guide
Result
Windows
Mac OS
Change the position of the Split
Source View
Alt-click the
Show/Hide Split
Source button
Option-click the
Show/Hide Split
Source button
Display the Select
Encoding dialog
box
Alt-open a document
Option-open a
document
Pan the page with
the Hand tool
Ctrl+Alt-drag
Ctrl+Option-drag
Quickly show or
hide rulers and
suppress sound
Cntrl-choose View Control-choose
> Show/Hide Rulers View > Show/Hide
Rulers
Display the source
code for an object
as a tool tip
Alt+Shift-move the
pointer over an
object
Option+Shift-move
the pointer over an
object
Retain styles in
pasted text from
Microsoft Word
Shift-choose Edit >
Paste
Shift-choose Edit >
Paste
Set the default
state of the Show
Link Warnings
button
Alt-click the Show
Link Warnings
button
Option-click the
Show Link Warnings button
Select the <body>
element in Split
Source View
Shift-click the Page
Properties icon
Shift-click the Page
Properties icon
Set zoom to 400%
Shift-click the
Zoom menu
Shift-click the
Zoom menu
See also
“Customizing keyboard shortcuts” on page 390
Keys for using the site window
This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
Result
Windows
Mac OS
Locate file in
Windows Explorer
or Mac OS Finder
Right-click file, and
choose Open >
Reveal In Explorer
Ctrl-click file, and
choose Open >
Reveal in Finder
Show properties for Right-click file, and
object
choose
Open/Show Properties
Delete a file
without GoLive
prompting for
confirmation
Control-click file,
and choose
Open/Show Properties
Ctrl-click the Delete Option-click the
icon
Delete icon
ADOBE GOLIVE 9 393
User Guide
Result
Windows
Mac OS
Force save a site
Shift+Ctrl
Shift+Ctrl
Access the pick
whip in the Errors
tab
Ctrl-click a file
Command-click a
file
Open the Edit URL
dialog box
Alt-click the folder
icon in the URL
Mappings area of
site settings
Option-click the
folder icon in the
URL Mappings area
of site settings
Update or generate Alt+Shift-choose
thumbnails
Site > Update >
Refresh All
Option+Shiftchoose Site >
Update > Refresh
All
Open a site without Shift-open the .site
checking links or
file
verifying files
Shift-open the .site
file
Move to the next
screen
Ctrl-click a radio
button in the Site
Creation Wizard
Ctrl-click a radio
button in the Site
Creation Wizard
Make the site name
unique if you enter
a name or location
that already exists
Ctrl-click the Next
button in the Site
Creation Wizard
Reformat details in
the log window
Shift-click an item
Shift-click an item
Scroll to the top of
details in the log
window
Alt-click an item
Option-click an
item
See also
“Customizing keyboard shortcuts” on page 390
Keys for using site Navigation or Links views
This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
Result
Windows
Mac OS
Select next file in x- Left Arrow, Right
Left Arrow, Right
direction
Arrow, Up Arrow, or Arrow, Up Arrow, or
Down Arrow
Down Arrow
Start a partial tree
from selection
Ctrl+Up Arrow
Command+Up
Arrow
Toggle expand
button (hide/show
children)
Ctrl+Down Arrow
Command+Down
Arrow
Add parent to
selection
Shift+Up Arrow
Shift+Up Arrow
ADOBE GOLIVE 9 394
User Guide
Result
Windows
Mac OS
Add children to
selection
Shift+Down Arrow
Shift+Down Arrow
Select previous
sibling or jump to
nearest item to the
left of selection
Ctrl+Left Arrow
Option+Left Arrow
Select next sibling
or jump to nearest
item to the right of
selection
Ctrl+Right Arrow
Option+Right
Arrow
Select the closest
item above selection
Ctrl+Up Arrow
Option+Up Arrow
Select the closest
item below selection
Ctrl+Down Arrow
Option+Down
Arrow
Toggle partial tree
from selection and
move to center
Esc
Esc
Select top-level
references
Ctrl+Home
Command+Home
Select first sibling
Home
Home
Select last sibling
End
End
Open the selected
references
Enter or doubleclick
Return or doubleclick
Hand tool for
scrolling
Spacebar
Spacebar
Select the reference with
matching text
Type any characters Type any characters
Toggle zoom
Shift-click
between 100% and
200%
Option-click
Zoom in on
selected area
Option-drag
Shift-drag
See also
“Customizing keyboard shortcuts” on page 390
Keys for creating page templates
This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
ADOBE GOLIVE 9 395
User Guide
Result
Windows
Mac OS
Undefine all editable regions
Shift-choose
Special > Template
> Undefine Editable Region
Shift-choose
Special > Template
> Undefine Editable Region
Retain all editable
regions when
detaching a page
from a template
Shift-choose
Special > Template
> Detach From
Template
Shift-choose
Special > Template
> Detach From
Template
See also
“Customizing keyboard shortcuts” on page 390
Keys for using tables in the Layout Editor
This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
Result
Windows
Mac OS
Change height and Alt-resize
width of a row or
column
Option-resize
Select cells
Click cell border
Click cell border
Select multiple
adjacent cells
Click-drag
Click-drag
Select multiple
nonadjacent cells
Shift-click additional cells
Shift-click additional cells
Select all cells in
column
Click top edge of
column
Click top edge of
column
Select all cells in
row
Click left edge of
row
Click left edge of
row
Add row above
* (asterisk)
* (asterisk)
Add columns to the + (plus
left
symbol/sign)
+ (plus
symbol/sign)
Add columns to the - (hyphen)
right
- (hyphen)
Interactively add
cells and rows
Ctrl+Shift-drag
bottom/right edge
of table
Command-drag
bottom/right edge
of table
Delete current
column
Ctrl+Delete
Control+Delete
Delete current row
Shift+Ctrl+Delete
Shift+Delete
Span columns,
joining current cell
with cell to the
right
Shift+Right Arrow
Shift+Right Arrow
ADOBE GOLIVE 9 396
User Guide
Result
Windows
Mac OS
Reduce column
span, splitting the
current cell
Shift+Left Arrow
Shift+Left Arrow
Span rows, joining
current cell with
cell below
Shift+Down Arrow
Shift+Down Arrow
Reduce row span,
splitting the
current cell
Shift+Up Arrow
Shift+Up Arrow
Move text cursor to Tab
next cell to the
right
Tab
Move text cursor to Shift+Tab
next cell to the left
Shift+Tab
Switch from text
entry to cell selection mode
Ctrl+Enter
Ctrl+Return
Switch from cell
selection to text
entry mode
Enter
Return
Create customsized table
Ctrl-drag table icon Command-drag
in objects toolbox table icon in
objects toolbox
Select parent table
in Table & Boxes
panel
Alt-click
Option-click
See also
“Customizing keyboard shortcuts” on page 390
Keys for working with layout grids and layers
This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
Result
Windows
Mac OS
Optimize only the
height of a layout
grid
Alt-click the Optimize Size button in
the Layout Grid
Inspector
Option-click the
Optimize button in
the Layout Grid
Inspector
Optimize only the
width of a layout
grid
Shift-click the Optimize Size button in
the Layout Grid
Inspector
Shift-click the Optimize button in the
Layout Grid
Inspector
Move boxes on
layout grid in
one-pixel increments
Ctrl+Alt+Arrow
keys
Option+Arrow keys
ADOBE GOLIVE 9 397
User Guide
Result
Windows
Mac OS
Move boxes based
on Snap-To-Grid
setting
Arrow keys
Arrow keys
Move a layer only
horizontally or
vertically
Shift-drag the layer Shift-drag the layer
Resize a layer
Shift+Arrow keys
Shift+ Arrow keys
Apply Hide or Llock Ctrl-click a hide or
commands to all
lock icon in the
layers
Layers panel
Command-click a
Hide or Lock icon in
the Layers panel
Duplicate selected
object
Option-drag
Ctrl-drag
See also
“Customizing keyboard shortcuts” on page 390
Keys for using the DHTML timeline
This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
Result
Windows
Mac OS
Select next
keyframe
Right Arrow
Right Arrow
Select previous
keyframe
Left Arrow
Left Arrow
Select next track
Down Arrow
Down Arrow
Select previous
track
Up Arrow
Up Arrow
Play a scene beginning at the current
time cursor location
Enter (numerical
keypad)
Enter (numerical
keypad)
Stop scene playback
0 (numerical
keypad)
0 (numerical
keypad)
Create a new
keyframe
Ctrl-click a time
track
Command-click a
time track
ADOBE GOLIVE 9 398
User Guide
Result
Windows
Mac OS
Duplicate a
keyframe
Alt-drag keyframe
Option-drag
keyframe
Create an action
placeholder
Ctrl-click action on
action track
Command-click
action on action
track
Scale an animation
while maintaining
the relative time
positions of all
keyframes on the
same time track
Ctrl+Shift-drag
Ctrl-drag
See also
“Customizing keyboard shortcuts” on page 390
Keys for working with type
This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
Result
Windows
Mac OS
Cursor to beginning of current
word
Ctrl+Left Arrow
Ctrl+Left Arrow
Cursor to next word Ctrl+Right Arrow
Ctrl+Right Arrow
Cursor to beginning/end of line
Home
Command+Left
Arrow
Cursor to end of
line
End
Command+Right
Arrow
Select a word
Double-click
Double-click
Select a line
Triple-click
Triple-click
Select a paragraph
Quadruple-click
Quadruple-click
Increase selection
Shift+Arrow keys
Shift+Arrow keys
Select to beginning Shift+Home
of line
Command+Shift+L
eft Arrow
Select to end of line Shift+End
Command+Shift+R
ight Arrow
New line instead of
paragraph
Shift+Return
Shift+Enter
Nonbreaking space Shift+Spacebar
Option+Spacebar
ADOBE GOLIVE 9 399
User Guide
Result
Windows
Mac OS
Insert word break
Ctrl+dash
tag <WBR>,
enabling the
browser to
hyphenate the
work at the point of
insertion
Show font names
rather than font
families in menus
Alt-access menu
Option-access
menu
Show font families
and font names in
menus
Alt+Shift
Option+Shift
Replace existing
Alt-click Create
fonts with new
New Font button
ones in the Font Set
Inspector
Option-click Create
New Font button
Add a new font to
Shift
the top of the list in
the Font Set
Inspector
Shift
Edit a style in the
HTML Style panel
Command-click the
style
Ctrl-click the style
See also
“Customizing keyboard shortcuts” on page 390
Keys for working with links
This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
Result
Windows
Mac OS
Create new link
Alt-drag selected
item to desired
destination until
the object highlights
Command-drag
selected item to
desired destination
until the object
highlights
Open the Edit URL
dialog box
Alt-click the Browse Option-click the
button in the
Browse button in
Inspector
the Inspector
Prepend http:// to
URL
Click in the URL box
in the Inspector
and press
Option+Return
Link frame with
Ctrl-drag to desired Command-drag to
desired content file page in site
desired page in site
window
window
ADOBE GOLIVE 9 400
User Guide
See also
“Customizing keyboard shortcuts” on page 390
Keys for using cascading stylesheets
This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
Result
Windows
Mac OS
Replace existing
fonts with new
ones
Alt-click the Create
New Font Family
button in the CSS
Editor
Option-click the
Create New Font
Family button in
the CSS Editor
Add new fonts to
the beginning of
the list
Shift-click the
Create New Font
button in the CSS
Editor
Shift-click the
Create New Font
button in the CSS
Editor
Toggle !important
state of property
value
Shift-click value
Shift-click value
Open or close all
folders in the Style
Info tab of the CSS
panel
Alt-click a folder in Option-click a
the Style Info tab of folder in the Style
the CSS panel
Info tab of the CSS
panel
Toggle Apply Infor- Alt-click the menu
mation, Cascaded
item
Preview, and
Cascaded Properties on or off in the
CSS panel window
menu
Option-click the
menu item
See also
“Customizing keyboard shortcuts” on page 390
Keys for working with images and Smart Objects
This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
Result
Windows
Mac OS
Suppress Save For Alt-select
Web dialog box
when you select a
new source file for a
Smart Object
Option-select
Cancel a crop for a
Smart Object
Command+.
(period)
Move a cropping or Ctrl+Arrow keys
tracing rectangle
by 10 pixels
Ctrl+Arrow keys
ADOBE GOLIVE 9 401
User Guide
Result
Windows
Mac OS
Assign a low source Alt+Shift-drag from
image to an image the object to the
object in the
low source image
Layout Editor
Command-drag
from the object to
the low source
image
Retain proportions
when resizing
Shift-drag
Shift-drag
Move an imagemap hotspot one
level higher or
lower
Alt-click Send To
Front or Send To
Back button in
Control panel
Option-click Send
To Front or Send To
Back button in
Control panel
Move a hotspot by
10 pixels
Link a hotspot to a
file
Option+Arrow keys
Alt-drag from the
hotspot
Command-drag
from the hotspot
Resize a hotspot by Shift+Arrow keys
one pixel
Shift+Arrow keys
Resize a hotspot by Shift+Ctrl+Alt+Arr
10 pixels
ow keys
Shift+Option+Arro
w keys
Add SVG object
instead of Smart
Object
Ctrl-drag SVG file to Command-drag
Layout Editor
SVG file to Layout
Editor
Convert lowest
Photoshop layer
into page background
Save or cancel optimization for all
imported
Photoshop layers
Option-choose File
> Import >
Photoshop Layers
Ctrl-click Save All or
Cancel All in the
Save For Web
dialog box
Ctrl-click Save All or
Cancel All in the
Save For Web
dialog box
See also
“Customizing keyboard shortcuts” on page 390
Keys for working with PDF files
Note: This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
Result
Windows
Mac OS
Move PDF link
region by 10 pixels
Ctrl+Arrow keys
Ctrl+Arrow keys
Avoid parsing
secure PDF files
when opening a
site
Shift+Ctrl
Shift+Command
ADOBE GOLIVE 9 402
User Guide
See also
“Customizing keyboard shortcuts” on page 390
Keys for editing source code
This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
Result
Windows
Mac OS
Rewrite source
code using default
web settings
Shift-choose
Special > Source
Code > Rewrite
Source Code
Shift-choose
Special > Source
Code > Rewrite
Source Code
Cursor to next word Ctrl+Right Arrow
Option+Right
Arrow
Cursor to
preceding word
Ctrl+Left Arrow
Option+Left Arrow
Cursor to beginning of line
Home
Command+Left
Arrow
Cursor to end of
line
End
Command+Right
Arrow
Select a word
Double-click
Double-click
Select a line
Triple-click
Triple-click
Decrease selection
one character
Shift+Left Arrow
Shift+Left Arrow
Increase selection
one character
Shift+Right Arrow
Shift+Right Arrow
Decrease selection
one word
Ctrl+Shift+Left
Arrow
Option+Shift+Left
Arrow
Increase selection
one word
Ctrl+Shift+Right
Arrow
Option+Shift+Righ
t Arrow
Decrease selection
one line
Shift+Up Arrow
Shift+Up Arrow
Increase selection
one line
Shift+Down Arrow
Shift+Down Arrow
Decrease selection
to beginning of
source code
Home+Shift+Up
Arrow
Command+
Shift+Up Arrow
Decrease selection
to end of source
code
Home+Shift+Dow
n Arrow
Command+Shift+
Down Arrow
Increase selection
to beginning of
source code
End+Shift+Up
Arrow
Command+
Shift+Up Arrow
Increase selection
to end of source
code
End+Shift+Down
Arrow
Command
+Shift+Down
Arrow
ADOBE GOLIVE 9 403
User Guide
Result
Windows
Redo an active
syntax check with
the same parameters
Alt-click Syntax in
Option-click Syntax
the Highlight tab of in the Highlight tab
the View panel
of the View panel
Perform a syntax
check without
opening the Syntax
Check window
Shift-click the
Syntax Check icon
in the Highlight tab
of the View panel
Deselect all additionally allowed
element sets in the
Syntax Check
window
Mac OS
Shift-click the
Syntax Check icon
in the Highlight tab
of the View panel
Option-deselect an
additionally
allowed element
set
Sort functions
alphabetically
Alt-click the Navigate Through Code
icon in the Source
Code Editor
Option-click the
Navigate Through
Code icon in the
Source Code Editor
Display child
elements in
markup tree bar
Alt-click an
element in the
markup tree bar
Option-click an
element in the
markup tree bar
Write URL into
doctype
Alt-click OK in the
Change Encoding
dialog box
Option-click OK in
the Change
Encoding dialog
box
Display the Select
Alt-click Open in
Encoding dialog
the Open Docubox when you open ment dialog box
a file
Option-click Open
in the Open Document dialog box
Close Result dialog Alt-click Use Result
box when you add
files with found
code elements to
the Find Text dialog
box
Option-click Use
Result
See also
“Customizing keyboard shortcuts” on page 390
Keys for using the Outline Editor
This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
ADOBE GOLIVE 9 404
User Guide
Result
Windows
Mac OS
Expand or collapse
the selected tag
Enter (numerical
keypad)
Return
Recursively expand Shift+Enter
Option+Return
or collapse the
(numerical keypad)
selected tag
Show or hide the
tag attribute list
Enter (numerical
keypad)
Enter
Recursively show or Shift+Enter
Option+Enter
hide the tag
(numerical keypad)
attribute list
Activate the next
text box
Tab
Tab
Activate the
preceding text box
Shift+Tab
Shift+Tab
Activate the tag
selection pop-up
menu
Ctrl-click tag name
Command-click tag
name
Display a pop-up
menu listing all
elements allowed
by doctype
Ctrl-click an
element
Command-click an
element
Open the Colors
window
Option-click the
color icon
See also
“Customizing keyboard shortcuts” on page 390
Keys for working with web settings
This isn’t a complete list of shortcuts. This table lists only shortcuts that GoLive doesn’t display in menu commands
or tool tips.
Result
Suppress confirmation dialog box
when deleting
items
Windows
Mac OS
Option
ADOBE GOLIVE 9 405
User Guide
Result
Windows
Mac OS
Close Web Settings Alt
window without
saving changes
Option
Change names in
the Attribute
Inspector without
converting to
lowercase
Option
Alt
Copy items on the Alt-drag
Markup Languages
and Characters tabs
Option-drag
See also
“Customizing keyboard shortcuts” on page 390
Keys for selecting in Version Cue
This isn’t a complete list of keyboard shortcuts. These tables list only those shortcuts that aren’t displayed in menu
commands or tool tips.
Result
Windows
Mac OS
Select all
Ctrl+A
Command+A
Select entries (selective)
Ctrl-click
Command-click
Select entries (range)
Shift-click
Shift-click
Select next entry
Down Arrow
Down Arrow
Select previous entry
Up Arrow
Up Arrow
Select next entry (additive)
Shift+Down Arrow
Shift+Down Arrow
Select previous entry (additive)
Shif+Up Arrow
Shift+Up Arrow
Select first entry
Page Up or Home
Page Up or