Chapter 16: Using Dynamic Link

Chapter 16: Using Dynamic Link
© 2000 Adobe Systems Incorporated. All rights reserved.
Adobe® GoLive™ 5.0 User Guide for Windows® and Macintosh
This manual, 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. The content of this manual 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 this documentation. Except as permitted by such license, no part of this publication 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 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, Acrobat Reader, Distiller, FrameMaker, GoLive, Illustrator, ImageReady, LiveMotion, Photoshop, PostScript
and 360Code are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
ActiveX, Microsoft, Windows and Windows NT are either registered trademarks or trademarks of Microsoft Corporation in the United States
and/or other countries. Apple, AppleScript, ColorSync, Mac, Macintosh, Power Macintosh, QuickTime, and TrueType are trademarks of
Apple Computer, Inc. registered in the U.S. and other countries. QuickTime and the QuickTime logo are trademarks used under license.
Pentium is a registered trademark of Intel Corporation. Java, Java Applet, and JavaScript and are trademarks or registered trademarks of Sun
Microsystems, Inc. in the United States and other countries. Flash is a trademark or registered trademark of Macromedia, Inc. in the United
States and/or other countries. All other trademarks are the property of their respective owners.
Apple Information Access Toolkit software included. This software is based in part on the work of the Independent JPEG Group. The Proximity/Franklin Database ©1994 Franklin Electronic Publishers, Inc., ©1990 All Rights Reserved. Proximity Technology, Inc. The Proximity/Merriam-Webster Database ©1990 Merriam-Webster Inc., ©1990 All Rights Reserved. Proximity Technology, Inc. The Proximity/Collins
Databases ©1990 William Collins Sons & Co. Ltd., ©1990 All Rights Reserved. Proximity Technology Inc. The Proximity/ Munksgaard
Database ©1990 Munksgaard International Publishers Ltd., ©1990 All Rights Reserved. Proximity Technology Inc. The Proximity/Van Dale
Databases ©1990, 1995 Van Dale Lexicografie bv., ©1990, 1996 All Rights Reserved. Proximity Technology Inc. The Proximity/IDE Databases ©1990 IDE a.s., ©1990 All Rights Reserved. Proximity Technology Inc. The Proximity/Hachette Database ©1992 Hachette, ©1992 All
Rights Reserved. Proximity Technology Inc. The Proximity/Bertelsmann Database ©1997 Bertelsmann Lexikon Verlag, ©1997 All Rights
Reserved. Proximity Technology Inc. The Proximity/Text & Satz Database ©1991 Text & Satz Datentechnik, ©1991 All Rights Reserved.
Proximity Technology Inc.
Contains an implementation of the LZW algorithm licensed under U.S. Patent 4,558,302.
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 set
forth in the Adobe standard commercial agreement for this software. Unpublished rights reserved under the copyright laws of the
United States.
i
Contents
Introduction
Using Web resources
Looking at the Work Area
Chapter 1
Using the toolbar
.................................1
....................................5
Using the document window
...........................5
Using site and site design windows
Switching between windows
Using palettes
......................................8
Using context menus
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Setting preferences
Linking files
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Customizing keyboard shortcuts
. . . . . . . . . . . . . . . . . . . . . . . . 16
Working with nonroman character sets
Web Site Basics
. . . . . . . . . . . . . . . . . . . 17
Chapter 2
Creating a new site
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
About site windows
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Working with site windows
About table-style tabs
About site views
Viewing a site
. . . . . . . . . . . . . . . . . . . . . . . . . . . 26
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Building a hierarchy of pages
. . . . . . . . . . . . . . . . . . . . . . . . . . 34
Using inspectors with files and folders
Opening page files
. . . . . . . . . . . . . . . . . . . 38
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Unlocking locally locked files
Setting Up Pages
......................7
...........................8
. . . . . . . . . . . . . . . . . . . . . . . . . . 41
Chapter 3
Creating pages
Saving pages
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Selecting window sizes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Selecting text and background colors
. . . . . . . . . . . . . . . . . . . . 46
ii CONTENTS
Applying background images
. . . . . . . . . . . . . . . . . . . . . . . . . . 47
Specifying page margins
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Selecting viewing options
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Using layout rulers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Adding head tags
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Adding head scripts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Adding browser switch scripts
Page Layout Basics
. . . . . . . . . . . . . . . . . . . . . . . . . 56
Chapter 4
About page layout
Creating text
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Formatting text using physical and structural styles
Formatting paragraphs
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
About font sizes across platforms
Applying relative font sizes
. . . . . . . . . . . . . . . . . . . . . . . 64
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Applying font sets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Spellchecking text
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Adding spacers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Using the layout grid
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Using layout text boxes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Adding horizontal lines
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Repositioning, resizing, and grouping objects
Aligning and distributing objects
Working with color
. . . . . . . . . . . . . . 73
. . . . . . . . . . . . . . . . . . . . . . . 75
Working with frequently used objects
. . . . . . . . . . . . . . . . . . . . 77
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Adding hypertext links
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Adding date and time stamps
. . . . . . . . . . . . . . . . . . . . . . . . . . 83
Creating URL pop-up menus
. . . . . . . . . . . . . . . . . . . . . . . . . . 83
Reverting and restoring changes to pages
Previewing pages
. . . . . . . . . . . . . . . . 84
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Viewing document information
Working with Tables
. . . . . . . . . . 60
. . . . . . . . . . . . . . . . . . . . . . . . . 87
Chapter 5
Creating tables
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Adding text to tables
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Converting tables to layout grids
. . . . . . . . . . . . . . . . . . . . . . . 95
Making selections within tables
. . . . . . . . . . . . . . . . . . . . . . . . 95
iii CONTENTS
Cutting, copying, and pasting table selections
Sorting table content
Formatting tables using predefined styles
Images and Page Design
. . . . . . . . . . . . . . 98
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
. . . . . . . . . . . . . . . . 101
Chapter 6
About Smart Objects
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Adding a Smart Object to a Web page
Using Smart Link
. . . . . . . . . . . . . . . . . . 105
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Resizing Smart Objects
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Linking to Photoshop files
. . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Viewing images during optimization
. . . . . . . . . . . . . . . . . . . . 110
Choosing options in the Save For Web dialog box
. . . . . . . . . . 111
Working with the color table in Photoshop images
. . . . . . . . . 117
Making transparent and matted Photoshop images
. . . . . . . . 121
Previewing and controlling dithering in Photoshop images
Adding file information to Smart Photoshop objects
Linking to Illustrator files
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Linking to LiveMotion files
. . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Adding Web-format images
. . . . . . . . . . . . . . . . . . . . . . . . . . 130
Importing images for previewing
. . . . . . . . . . . . . . . . . . . . . . 131
Simulating Windows gamma in Mac OS
Adjusting image size
. . . . . . . . . . . . . . . . . 131
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Additional image options
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Setting image preferences
. . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Creating image maps
Tracing images
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Working with Photoshop layered files
About image formats
Floating Boxes
. . . 124
. . . . . . . . 127
. . . . . . . . . . . . . . . . . . . 137
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Chapter 7
About floating boxes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Setting up floating boxes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Positioning floating boxes
. . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Converting floating boxes to layout text boxes
. . . . . . . . . . . . 146
About Web page animation with floating boxes
. . . . . . . . . . . 147
Creating objects to animate
Animating floating boxes
. . . . . . . . . . . . . . . . . . . . . . . . . . 149
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
iv CONTENTS
Managing multiple floating boxes
. . . . . . . . . . . . . . . . . . . . . 153
Using stacking order to simulate relative motion
Controlling the visibility of floating boxes
Inserting actions in animations
Creating multiple scenes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Using stationery
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Using GoLive components
. . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Chapter 9
Creating mouse rollovers
Using JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Setting up Java applets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Adding audio and video clips
Searching
. . . . . . . . . . . . . . . . . . . . . 159
Chapter 8
Using frames
Adding Interactivity
. . . . . . . . . . . . . . . . 157
. . . . . . . . . . . . . . . . . . . . . . . . 158
Controlling the playback of scenes
Advanced Page Layout
. . . . . . . . . . . . . . . . . . . . . . . . . 177
Using W3CObject controls
. . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Adding scrolling marquees
. . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Chapter 10
Searching within a document and within a site
Finding HTML code elements
Finding files
. . . . . . . . . . . . 187
. . . . . . . . . . . . . . . . . . . . . . . . . 196
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Using site reports
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Setting Find preferences
Using Cascading Style
Sheets
. . . . . . . . . . . 155
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Chapter 11
About page design with cascading style sheets
Creating a style sheet
Defining style properties
Managing styles
. . . . . . . . . . . . 205
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Applying styles and referencing style sheets
Exporting and importing style sheets
Previewing with cascading style sheets
About cascading style sheets
. . . . . . . . . . . . . . 218
. . . . . . . . . . . . . . . . . . . 222
. . . . . . . . . . . . . . . . . . 222
. . . . . . . . . . . . . . . . . . . . . . . . . 223
v CONTENTS
Creating Forms
Chapter 12
About Forms
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Setting up forms
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Adding form elements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Providing form navigation
. . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Setting up read-only form elements
Setting up inactive form elements
Using universal buttons
Adding labels
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Grouping form elements
Using Actions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Chapter 13
Setting up actions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Using Adobe GoLive actions
Using Actions Plus actions
. . . . . . . . . . . . . . . . . . . . . . . . . . 249
. . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Shifting Code to an External Library
Editing QuickTime Movies
. . . . . . . . . . . . . . . . . . . . 241
. . . . . . . . . . . . . . . . . . . . . . 241
. . . . . . . . . . . . . . . . . . . . 281
Chapter 14
About the interactive QuickTime editing tools
Using the Layout Editing view
Opening QuickTime movies
Using Video tracks
. . . . . . . . . . . . . . . . . . . . . . . . . . 290
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Adding Picture tracks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Using Sprite tracks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Using SWF tracks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Using Streaming tracks
Adding 3D tracks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Adding Sound and Music tracks
. . . . . . . . . . . . . . . . . . . . . . . 308
Using HREF tracks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Using Folder tracks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Adding Chapter tracks
Working in HTML
. . . . . . . . . . . . . 283
. . . . . . . . . . . . . . . . . . . . . . . . 288
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Using Text tracks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Using Filter tracks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Chapter 15
Editing HTML code in Source view
Using the Source Code palette
. . . . . . . . . . . . . . . . . . . . . 325
. . . . . . . . . . . . . . . . . . . . . . . . 331
vi CONTENTS
Editing HTML code in Outline view
Using the Markup Tree palette
Adding unknown elements
. . . . . . . . . . . . . . . . . . . . . 331
. . . . . . . . . . . . . . . . . . . . . . . . 337
. . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Using text macros with source code editors
Saving HTML fragments
Using Dynamic Link
Chapter 16
Server requirements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
Compatible sources of dynamic content
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
Troubleshooting
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Configuring a new site
. . . . . . . . . . . . . . . . . . . . . . . . . . . 344
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Adding dynamic content to pages
Creating an e-commerce site
. . . . . . . . . . . . . . . . . . . . . 350
. . . . . . . . . . . . . . . . . . . . . . . . . 358
Creating a Web-based database front end
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
The Global tab
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
The HTML tab
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
The Characters tab
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
The CSS tab
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
The XML tab
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
The File Mappings tab
The WebObjects tab
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Chapter 18
About views
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
Using peripheral panes
Controlling the view
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
Using the View Controller
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Using the In & Out Links palette
Managing Web Sites
. . . . . . . . . . . . . . . 365
Chapter 17
About Web Settings
Viewing Web Sites
. . . . . . . . . . . . . . . . . 343
About security
The Dynamic Link interface
Web Settings
. . . . . . . . . . . . . . 338
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
. . . . . . . . . . . . . . . . . . . . . . . 390
Chapter 19
Maintaining a site and its resources
. . . . . . . . . . . . . . . . . . . . 393
Providing names and paths for files
. . . . . . . . . . . . . . . . . . . . 400
vii CONTENTS
Providing page status information
Establishing site settings
Streamlining Site Building
. . . . . . . . . . . . . . . . . . . . . 403
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
Chapter 20
Using site templates
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
About site resources
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Working with site-resource tabs
. . . . . . . . . . . . . . . . . . . . . . . 410
Using site URLs and e-mail addresses
Using site colors
Using site font sets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
Using custom snippets
Using site extras
. . . . . . . . . . . . . . . . . . . 411
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
Editing links and references sitewide
Applying styles sitewide
Publishing Web Sites
. . . . . . . . . . . . . . . . . . . 421
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Chapter 21
Publishing a site
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
Preparing a site for publication
Connecting to a Web server
. . . . . . . . . . . . . . . . . . . . . . . . 423
. . . . . . . . . . . . . . . . . . . . . . . . . . 427
Uploading and downloading sites
. . . . . . . . . . . . . . . . . . . . . 430
Transferring files with the FTP Browser
Setting up Internet access
. . . . . . . . . . . . . . . . . . 433
. . . . . . . . . . . . . . . . . . . . . . . . . . . 434
Adapting sites to special server conditions
Using WebDAV
Chapter 22
Getting started with WebDAV
. . . . . . . . . . . . . . . . . . . . . . . . . 439
Managing a Web site with WebDAV
. . . . . . . . . . . . . . . . . . . . 441
Enhancing WebDAV with Workgroup Support
Designing Web Sites
. . . . . . . . . . . . . . . 434
. . . . . . . . . . . . . 448
Chapter 23
About site designs
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453
Setting up a site design
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454
Developing a site design
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
Annotating a site design
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Using a developed site design
Viewing a site design
. . . . . . . . . . . . . . . . . . . . . . . . 465
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
viii CONTENTS
Web Technology Support
Appendix A
Adobe GoLive and XML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Adobe GoLive and ASP
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
Visual indicators for foreign code
Creating Actions
. . . . . . . . . . . . . . . . . . . . . . 473
Appendix B
Adobe GoLive action types
. . . . . . . . . . . . . . . . . . . . . . . . . . . 475
Creating your own actions
. . . . . . . . . . . . . . . . . . . . . . . . . . . 475
Action tutorials
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482
Differentiating between actions and scripts
Automating Operations
Using AppleScript
. . . . . . . . . . . . . . . 486
Appendix C
Containers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487
Lines, characters, and selections
Cursor positioning
Core elements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
General text handling elements
HTML extensions
. . . . . . . . . . . . . . . . . . . . . . . 487
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488
. . . . . . . . . . . . . . . . . . . . . . . 490
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494
Adobe GoLive Actions Plus Credits
. . . . . . . . . . . . . . . . . . . . . 519
1
Introduction
W
elcome to Adobe® GoLive™, the complete solution for HTML layout, design, and Web site management. Product gives users unprecedented creative control and flexibility when designing Web sites.
It lets graphic designers and publishers design and manage professional-quality Web sites containing
the latest multimedia features, without requiring any HTML programming. Yet at the same time, it includes
HTML source-code and JavaScript tools to help Web designers and programmers integrate interactivity into
their sites. Designed with the future in mind, Product supports cascading style sheets (CSS), Dynamic HTML,
and QuickTime—three proven technologies that give Web designers a wealth of creative opportunities and
tools. It also provides a consistent work environment with other Adobe applications including Adobe Photoshop®, Adobe Illustrator®, and Adobe LiveMotion™.
Using Web resources
If you have an Internet connection and a Web browser installed on your system, you can use the Adobe Online
feature to access additional resources for learning GoLive located on the Adobe Systems home page on the World
Wide Web. These resources are continually updated and include
the following:
How To’s and Backgrounders Provide access to procedures for performing tasks in GoLive and to detailed reference information on a variety of topics.
Tutorials and Techniques Provide step-by-step instructions on using Adobe GoLive 5.0 features or help on performing advanced techniques. These tutorials can help you go beyond the reference information contained in
the user guide and show you how to use GoLive with other applications.
Quicktips Provide short, time-saving procedures to help you use GoLive more effectively. Tips can be shortcuts
for using new features, or instructions on using existing features more effectively.
Troubleshooting Provides access to solutions to problems you may encounter using GoLive.
You should check out troubleshooting information available through Adobe Online and t
he Adobe Web site before you call customer support.
To access the Adobe home page for your region:
1 Open the Adobe U.S. home page at www.adobe.com.
2 From the Adobe Sites menu, choose your geographical region. The Adobe home page is customized for 20
different geographical regions.
2
Introduction
About Adobe Online
Adobe Online provides access to the latest tutorials, quicktips, and other Web content for GoLive and other
Adobe products. Using Adobe Online, you can also download and view the current version of the GoLive Top
Issues document containing the latest GoLive technical support solutions. Bookmarks are also included to take
you quickly to noteworthy Adobe- and GoLive-related sites.
Using Adobe Online
Adobe Online is constantly changing, so you should refresh before you use it. Refreshing through Adobe Online
updates bookmarks and buttons so you can quickly access the most current content available. You can use preferences to automatically refresh Adobe Online daily, weekly, or monthly.
When you set up Adobe Online to connect to your Web browser, Adobe can either notify you whenever new
information is available through the Downloadables feature or automatically download that information to
your hard disk. If you choose not to use the Adobe automatic download feature, you can still view and download
new files whenever they are available using the Downloadables command in the Help menu.
To use Adobe Online:
1 In GoLive, choose Help > Adobe Online, or click the icon at the top of the toolbox.
Note: You must have an Internet connection and an Internet browser installed. Adobe Online will launch your
browser using your default Internet configuration.
2 Do any of the following:
• Click Refresh to make sure you have the latest version of the Adobe Online window and its buttons, as well as
the latest bookmarks. It is important to refresh the screen so that the current options are available for you to
choose from.
• Click Preferences to specify connection options. General preferences affect how Adobe Online interacts with
all Adobe products installed on your system, and Application preferences affect how Adobe Online interacts
with GoLive. To see an explanation of each preference option, click Setup and follow the prompts. You also can
set up an automatic refresh using the Update Options.
Note: You can also set Adobe Online preferences by choosing Edit > Preferences > Online Settings.
• Click any button in the Adobe Online window to open the Web page to which the button is linked.
• Click the bookmark button(
) to view Adobe-suggested Web sites related to GoLive and Adobe. These bookmarks are automatically updated as new Web sites become available.
ADOBE GOLIVE 5.0 3
User Guide
• Click Close to return to GoLive.
Accessing Adobe Online through the Help menu
The Help menu includes options to view and download information from the Adobe Web site.
To view updated articles or documents:
Click Help and choose the topic you want to view.
To view and download information from the Adobe Web site using the Help menu:
1 In GoLive, choose Help > Downloadables.
2 Select a View Option:
• Select Show Only New Files to view only the files that are new since the last time you viewed downloadable
files or were notified of them.
• Select Show All Files to view all the files on the Adobe Web site that are currently available
for download.
3 Select Download Options:
• Select Auto Install Downloaded Components if you want Adobe to start the component’s installer (if avail-
able) as soon as the download is complete. You can then follow the prompts to install the files.
• Select Download in Background if you want to continue working in GoLive and other applications while the
file downloads.
• Select Notify When Download Complete if you want Adobe to display a message when the files have been
transferred to your computer.
4 To view a list of files, open the Downloadables folder and any other folder listed.
5 To see a description of a file, position the mouse cursor over a filename and view its description in the Item
Description section.
6 To see the location where a file will be installed if downloaded, select a file and view its location in the Download Directory section. To change the location, click the Folder button ( ).
7 To download a file, select it and click Download.
8 To close the Downloadables dialog box, click Done.
4
Introduction
5
Chapter 1: Looking at the Work Area
Using the toolbar
When you first start Adobe GoLive, a context-sensitive toolbar appears below the command menus at the
top of your screen. The toolbar contains buttons and pop-up menus which change depending on what you
have selected in the work area. You can use the toolbar to modify selected text and objects in the document
window, such as choosing a paragraph format for selected text or resizing a layout text box. You can also
use the toolbar to perform general tasks that affect your document or Web site, such as turning on link
warnings or viewing your document directly in a Web browser.
To show or hide the toolbar:
Choose Window > Toolbar. You can also hide the toolbar by clicking the close box in its upper right
(Windows) or upper left (Mac OS) corner.
To move the toolbar:
Drag the toolbar from its title bar (Windows) or lower left corner (Mac OS).
Using the document window
When you first start Adobe GoLive, an untitled document window appears on your screen. You use the document window to create a new Web page. The document window features a variety of editing environments, so that you can design your page in a way that meets your particular needs, whether you prefer to
work with palettes or an HTML text editor. By default, the document window appears in Layout view. You
can change the document view to work in another editing environment or to preview the results of your
work instantly, without launching a Web browser.
A
B
C
D
E
F
A. Click to show or hide head section pane of document window. B. Click to open JavaScript
Editor. C. Click to open TimeLine Editor. D. Click to create or view style sheet. E. Click to
show or hide layout rulers. F. Use pop-up menu to set size of document window.
6 CHAPTER 1
Looking at the Work Area
To open a new document window:
Choose File > New.
To change the document view:
Click one of the following tabs in the document window:
• The Layout Editor tab (
) to view the document in Layout view. You use the Layout view to add text
and objects to your page, and set their attributes using a variety of palettes.
) to view the document in Frames view. You use the Frames view to divide your
• The Frame Editor tab (
page into a frame set, so that you can display a different document in each frame.
) to view the document in Source view. You use the Source view to
• The HTML Source Editor tab (
design your page using an HTML text editor.
• The HTML Outline Editor tab (
) to view the document in Outline view. You use the Outline view to
view the structure of your page in a hierarchical format and set attributes for your page using this format.
• In Mac OS, the Frame Preview tab (
) to view the document in Frame Preview. You use the Frame
Preview to preview the pages that you have created in Frames view.
• The Layout Preview tab (
) to view the document in Preview. In Windows, you use the Preview to
preview all pages that you have created. In Mac OS, you use the Preview to preview the pages that you have
created in Layout, Source, or Outline view.
• For systems with the WebObjects module installed, the WebObjects Editor tab (
) to view the document in WebObjects view. You use the WebObjects view to edit declaration files for dynamic pages for use
with the WebObjects Server. For more information, see the Using WebObjects manual.
To resize a document window:
Do one of the following:
• Drag the lower right corner of the document window (Windows) or drag the size box at the lower right
corner of the document window (Mac OS).
• Choose a window size from the Window Size pop-up menu in the lower right corner of the document
window. For more information on setting the document window size, see “Selecting window sizes” on
page 45.
To collapse a document window to a tab at the bottom of the screen (Mac OS):
In Mac OS, Control-click the title bar of the document window or drag the title bar to the bottom of the
screen. To expand the document window, click the tab at the bottom of the screen.
To close a document window:
Choose File > Close, or click the close box in the upper right (Windows) or upper left (Mac OS) corner of
the document window.
ADOBE GOLIVE 5.0 7
User Guide
Using site and site design windows
When you create a new Web site, Adobe GoLive creates a file with a .site extension that stores information
about the structure of your site. When you open this file, a primary site window appears on your screen.
This site window contains a variety of tabs that you can use to manage the resources for your site, including
files, e-mail addresses, URLs, a custom color palette, and custom font sets.
Click double arrow below scroll bar to open right pane of primary site window.
You can display a secondary site window by choosing Design > Navigation View or Design > Links View.
This site window contains two tabs that you can use to view graphical representations of your site. To rearrange your desktop, you can move tabs between site windows, or you can move a tab away from a site window so that it appears in a new, separate site window. For more information on using site windows, see
“About site windows” on page 25.
You can also display a site design window by choosing Design > New Site Design. A site design window
contains three tabs that you can use to develop the design of a site for presentation purposes, before you
actually create the site. You can develop multiple designs for a site using multiple site design windows. For
more information on using site design windows, see “About site design windows” on page 454.
To resize a site or site design window:
Drag the lower right corner of the window (Windows) or drag the size box at the lower right corner of the
window (Mac OS).
To close a site or site design window:
Do one of the following:
• Select the desired window, and choose File > Close.
• Click the close box in the upper right (Windows) or upper left (Mac OS) corner of the window.
• To close a site window containing the Navigation tab or Links tab, choose Design > Navigation View or
Design > Links View respectively.
8 CHAPTER 1
Looking at the Work Area
Switching between windows
Using Adobe GoLive, you can have several document, site, and site design windows open on your desktop.
To switch between open windows, you can choose from several options in Adobe GoLive.
To switch to an open document, site, or site design window:
Do one of the following:
• Click the desired window to select it.
• Choose the desired window from the Window menu. (You can’t switch to an open secondary site window
from the Window menu.)
• To toggle between the frontmost document window and the primary site window, click the Select
Window button (
) on the toolbar.
• Click the arrow next to the Select Window button on the toolbar to display a pop-up menu, and choose
the desired window. (You can’t switch to an open site design window from the pop-up menu.)
A
BC
A. Click to return to document window.
B. Click to return to primary site window.
C. Click to list open document and site windows.
Using palettes
Adobe GoLive features several palettes that you can use to perform a variety of tasks, including adding
objects to your Web pages, setting attributes for those objects, and coloring objects. When you first start
Adobe GoLive, several palettes are displayed by default in several groups. You can choose to hide and display palettes as you work. You can also move palettes between groups, move palettes to their own windows,
or resize palettes to make better use of your work area.
To show a palette and any palettes in its group:
Choose the palette’s name from the Window menu.
To hide a palette and any palettes in its group:
Do one of the following:
• Click the close box in the upper right (Windows) or upper left (Mac OS) corner of the group window.
ADOBE GOLIVE 5.0 9
User Guide
• If needed, bring the palette to the front of its group by clicking its name in the group or choosing its name
from the Window menu. (A check mark next to the palette’s name in the Window menu indicates that the
palette is at the front of its group.) Then choose the palette’s name from the Window menu.
To bring a palette to the front of its group:
Do one of the following:
• Click the palette’s name in the group.
• Choose the palette’s name from the Window menu.
To bring a tab (or button) to the front of a palette:
Do one of the following:
• Click the desired tab (or button) in the palette.
• For the Objects palette or Color palette, click the triangle in the upper right corner of the palette to
display the palette menu, and choose the desired tab or button.
To move a palette between groups:
Drag the palette’s name in a group to another group.
To move a palette so that it appears in its own window:
Drag the palette’s name in a group to the desktop.
To move a group of palettes:
Drag its title bar.
To resize a palette:
Drag the lower right corner of the palette (Windows) or drag the size box at the lower right corner of
the palette (Mac OS).
To collapse a group of palettes to a tab at the right of the screen:
Ctrl-click the title bar of the group window. To expand the group window, click the tab at the right of
the screen.
To display all palettes, and return the palettes to their default sizes and locations in their respective groups:
Choose Window > Reset Palettes.
10 CHAPTER 1
Looking at the Work Area
Using the Objects palette
The Objects palette lets you quickly and easily add various objects to your Web pages, including floating
boxes, tables, images, rollover buttons, form elements, and more. The Objects palette contains several tabs,
which vary depending on which modules that you have installed or activated in the Modules Preferences
dialog box. Each tab contains a group of related icons, which represent HTML tags, structural page elements, or generic site objects. You use these icons to add the objects to your pages.
To show the Objects palette and any palettes in its group:
Choose Window > Objects.
To show or hide tabs in the Objects palette:
Click the triangle in the upper right corner of the Objects palette to display the Objects palette menu, and
choose Show Tabs.
To view the icons for a particular tab in the Objects palette:
Click the triangle in the upper right corner of the Objects palette to display the Objects palette menu, and
choose the desired tab. Or, click one of the following tabs in the Objects palette:
• Basic tab (
) to view icons that represent HTML tags that you can add to the body section of a page.
• Smart tab ( ) to view icons that represent HTML tags, JavaScript code, and Smart Objects that you can
add to the head or body section of a page.
• Forms tab (
of a page.
• Head tab (
of a page.
) to view icons that represent HTML form tags that you can add to the body section
) to view icons that represent HTML head tags that you can add to the head section
• Frames tab ( ) to view icons that represent HTML frame set tags that you can add to the Frames view
of a document window.
• Site tab ( ) to view icons that represent generic site objects that you can add to a site or
site design window.
• Site Extras tab (
) to view icons that represent stationery pages, components, or custom snippets.
• QuickTime tab ( ) to view icons that represent elements that you can add to the TimeLine Editor to
edit QuickTime movies.
ADOBE GOLIVE 5.0 11
User Guide
) to view icons that represent WebObjects-specific HTML tags that you can add to
• WebObjects tab (
the body section of a page.
Note: By default, the WebObjects module isn’t installed with Adobe GoLive. Therefore, the WebObjects tab
doesn’t appear in the Objects palette by default.
• Custom tab (
of a page.
) to view icons that represent custom objects that you can add to the body section
To view the name of an icon in the Objects palette:
Position the pointer on top of the icon. The name of the icon appears at the bottom of the Objects palette.
To add an object from the Objects palette to your page:
Drag the icon from the Objects palette to your document window, or double-click the icon in
the Objects palette.
Using the Color palette
The Color palette lets you quickly and easily color text and objects in your Web pages. The Color palette
actually contains several individual palettes which you can use to find a color that meets your particular
needs. Similar to tabs in the Objects palette, the Color palette contains buttons which you click to display
the desired individual palettes. The Color palette also features a palette menu, which you can use to show
or hide buttons, as well as select options to display color values in percentages or the 256 numerical scale.
For instructions on using the Color palette, see “Working with color” on page 77.
To show the Color palette and any palettes in its group:
Do one of the following:
• Choose Window > Color.
• Click any color field in the Inspector.
To show or hide buttons in the Color palette:
Click the triangle in the upper right corner of the Color palette to display the Color palette menu, and
choose Show Buttons.
To display color values in the Color palette using percentages or the 256 numerical scale:
Click the triangle in the upper right corner of the Color palette to display the Color palette menu, and
choose Percent Values. (A check mark next to the Percent Values option indicates that the color values are
shown in percentages.)
12 CHAPTER 1
Looking at the Work Area
Using the Inspector
The context-sensitive Inspector lets you set attributes for text and objects in the document window, as well
as files and other elements in a site window. The contents of the Inspector changes depending on what you
have selected in the work area. The Inspector can contain tabs, text boxes, Enter buttons, Point and Shoot
buttons, Browse buttons, pop-up menus, check boxes, radio buttons, and color fields.
A
B
C
D
E
F
A. Check box B. Pop-up menu C. Color field
D. Radio button E. Point and Shoot button
F. Text Box
When you make a selection in the document window or a site window, the name of the Inspector changes
and appears at the bottom of the Inspector. For example, when you select an image placeholder in the document window, the word Image appears at the bottom of the Inspector, indicating that the Inspector has
changed to the Image Inspector.
To show the Inspector and any palettes in its group:
Choose Window > Inspector.
To use the Inspector to set attributes for a selection in the document window or a site window:
1 Make your selection in the document window or a site window.
ADOBE GOLIVE 5.0 13
User Guide
2 In the Inspector, do any of the following:
• Use a text box to enter information, such as a title, measurement, or the path of a file to be used as a link
destination. To enter text into a text box, click in the text box and type the desired text. By default, the text
is applied as soon as the text box loses its focus (for example, a text box loses its focus when you click outside
of it).
Note: If you don’t want the text to be applied as soon as a text box loses its focus, you can set an option to display
an Enter button ( ) to the right of each text box in the Inspector. If an Enter button is present, you need to click
the button to apply the text, or press Enter on your keyboard. To display Enter buttons, choose Edit > Preferences, click the symbol next to General to expand the list and click User Interface, deselect Direct Input for Textfields, and click OK.
• Use a Point and Shoot button ( ) or Browse button to select a file to be used as a link destination. For
example, you can create a hypertext link by selecting text in the document window, clicking the New Link
button on the toolbar, and then selecting a file using the Point and Shoot button, or the Browse button in
the Inspector. For more information on selecting a file to be used as a link destination, see “Linking files”
on page 15.
• Use a pop-up menu to choose from a set of options. To display the set of options, click the pop-up menu.
To choose an option, drag to the desired option and release the mouse button to make your selection.
• Use a check box to select or deselect an option by clicking inside the check box. A check mark in the check
box indicates that the option is selected.
• Use a radio button to select one of a group of options by clicking inside the radio button. A black bullet
in the radio button indicates that the option is selected.
• Use a color field to color your current selection. Click inside the color field to select it, and then select a
color in the Color palette. Adobe GoLive automatically applies the color to the color field in the Inspector,
activates the color option for the color field, and applies the color to your current selection in the work area.
For instructions on using the Color palette, see “Working with color” on page 77.
Using context menus
In addition to the menus that appear at the top of your screen, Adobe GoLive contains a number of contextsensitive menus. These menus display commands that relate to the active window or selection. You can use
context menus as a quick way to choose commonly used commands.
To display context menus:
1 Position the pointer over the active window or selection.
2 Do one of the following:
• In Windows, click with the right mouse button.
14 CHAPTER 1
Looking at the Work Area
• In Mac OS, press Control and hold down the mouse button.
Right-click (Windows) or Control-click (Mac OS)
to bring up context menus.
Setting preferences
Numerous program settings are stored in the Adobe GoLive preference file, located inside the GoLive directory (Windows) and the Preferences folder in your System folder (Mac OS). The settings stored in this file
include display options, options for importing images, options for activating modules, options for selecting default Web browsers that you can launch from Adobe GoLive, spelling checker options, and more.
Most of these options are set in the Preferences dialog box.
To set options in the Preferences dialog box:
1 Choose Edit > Preferences.
2 Click to select an icon or name in the left pane of the Preferences dialog box. If needed, first click a
symbol next to an icon to display a list of names below the icon.
3 Select options in the right pane of the Preferences dialog box. To find an explanation of a particular preferences option or set of options, refer to the index.
4 Click OK.
Managing modules by setting preferences
The Modules Preferences dialog box lets you streamline Adobe GoLive to shorten its launch time, improve
its responsiveness, and reduce overall memory requirements. For example, if you don’t create dynamic Web
pages using the WebObjects development environment, you may choose to deactivate the WebObjects
module. By disabling unused modules, you can reduce the program’s memory requirements to the minimum recommended 24 MB.
ADOBE GOLIVE 5.0 15
User Guide
With the exception of the Modules Manager, modules may be activated or deactivated. For specific
information about each module, choose Edit > Preferences, click the Modules icon in the left pane of the
Preferences dialog box, click to select a module, and click the symbol next to Show Item Information.
To activate or deactivate program modules:
1 Choose Edit > Preferences.
2 Click the Modules icon in the left pane of the Preferences dialog box. Program modules that are currently
installed are checked.
3 Click to select or deselect modules to activate or deactivate them.
4 Click OK.
5 Restart Adobe GoLive.
Linking files
When you design your Web pages, you can create links to add images and other media, navigational links,
and more to your pages. In Adobe GoLive, you can create links using the Inspector or keyboard shortcuts.
When you use the Inspector to create a link, you can specify a file to be used as the link destination by using
a URL or Source text box, Point and Shoot button, or Browse button.
To create a link using the Inspector or a keyboard shortcut:
1 Create a source for the link in the document window. If you are adding a navigational link, add text or
an object from which you can link to the document window. If you are adding an image or other media to
the page, add a placeholder to the document window.
2 Select the source of the link. To select text, drag. To select an object or placeholder, click it.
3 Choose Window > Inspector, and click the appropriate tab in the Inspector for creating the link.
4 Click the New Link button (
) in the Inspector or on the toolbar.
5 Select a file to be used as the link destination by doing one of the following:
• Drag from the Point and Shoot button (
) in the Inspector to a file in a site window or on your desktop.
16 CHAPTER 1
Looking at the Work Area
When the link has been successfully created, the connecting line blinks, and the path to the file appears in
the URL or Source text box in the Inspector. If the line recoils, you have released the mouse button too soon
or the link can’t be created.
Drag from Point and Shoot button in Inspector to file in site window.
• Click the Browse button (
) in the Inspector. In the Open dialog box, select a file, and click Open.
• In the URL or Source text box in the Inspector, enter the URL of a file.
• Alt-drag (Windows) or Command-drag (Mac OS) from the source of the link to a file in a site window
or on your desktop. Release the mouse button when the file is highlighted.
Customizing keyboard shortcuts
Adobe GoLive lets you choose between two different sets of keyboard shortcuts: the standard set included
with previous versions of Adobe GoLive and the common set typically included with most Adobe products.
You can also create your own set of keyboard shortcuts by editing a copy of one of these sets.
To choose a set of keyboard shortcuts:
1 Choose Edit > Keyboard Shortcuts.
2 Do one of the following:
• To choose an existing set of keyboard shortcuts, choose an option from the Selected Set pop-up menu.
Choose My Settings if you want to edit the standard set included with previous versions of Adobe GoLive.
(If you choose GoLive Standard Set or Adobe Common Set, you won’t be able to edit or delete the set.)
• To create a new set, click New Set. In the New Set dialog box, enter a name for the new set, choose an
existing set that you want to use as the basis for your new set, and click OK.
The Keyboard Shortcuts dialog box lists the menus and commands in Adobe GoLive in one column, and
the keyboard shortcuts for those commands in another column.
ADOBE GOLIVE 5.0 17
User Guide
3 To change a keyboard shortcut in an editable set, click the symbol next to a menu name to list the menu’s
commands. If necessary, click a symbol next to the name of a submenu to list its commands. Click to select
a command. For Press New Shortcut, enter a new keyboard shortcut for the selected command. If the
keyboard shortcut that you entered is currently assigned to another command, the name of the command
appears next to Currently Assigned To. To reassign the keyboard shortcut to the selected command,
click Replace.
4 To delete the selected set of keyboard shortcuts, click Delete Set.
5 Click OK.
Working with nonroman character sets
Your ability to switch between roman and nonroman character sets depends on your operating system.
In Windows versions earlier than 2000, you can’t directly create nonroman (double-byte) Web pages using
a roman (single-byte) operating system. However, you can import double-byte HTML files created with
another operating system. You can then view the HTML source code in Adobe GoLive, although the double-byte text doesn’t display correctly in Layout view or Preview. Microsoft Internet Explorer 4.0 and later
is able to display double-byte scripts, so that you can preview double-byte files using the Show in Browser
command in Adobe GoLive.
The Windows 2000 operating system with Microsoft Internet Explorer 6.0 lets you view and create doublebyte content without the entire native script operating system. Custom install the Language Pack for the
script you need. See your system documentation for further information.
Mac OS 8.5 and later operating systems include Multilingual Internet Access as an optional installation.
This software lets Adobe GoLive display double-byte scripts, even without the native operating system. You
need to install the appropriate Language Kit. With Mac OS 9.0 and later, you can custom install the Language Kit of your choice. With the appropriate kit installed, you can create and edit nonroman text. See
your system documentation for further information.
Using double-byte text in Adobe GoLive (Windows 2000 and Mac OS only)
When you install the English version of Adobe GoLive, any page that you create defaults to the Western
(Latin 1) encoding in Windows and the GL-Western encoding in Mac OS. If the text on your page will
be created using any Western language, such as U.S. or British English, German, French, Spanish, or
Swedish, you don’t need to change this selection. You can type text directly in the document window.
But to create content in a language with a different script system, you need the appropriate system resources
and fonts. The Encodings module must be installed and active. You must also change the General Encodings preference setting to the encoding that you want to use so that the double-byte encoding appears in
the File > Document Encoding submenu. The supported document encodings are determined by the
system software.
18 CHAPTER 1
Looking at the Work Area
Setting language and font preferences
The Encodings and Fonts preferences settings let you select a default language script, customize the
Document Encoding submenu, and set default fonts.
To activate encodings:
1 Choose Edit > Preferences, and click the Modules icon in the left pane of the Preferences dialog box.
Check to see if the Encodings module is selected. If it isn’t selected, you must select it, and restart Adobe
GoLive to initialize it.
2 Choose Edit > Preferences, and click the Encodings icon.
3 Select the desired encoding option. Encodings that are not activated and supported by the system software don’t appear in the File > Document Encoding submenu.
4 To make an encoding option the default, select the name of the option, and then select Default Encoding,
or simply double-click the option name. The name of the default selection appears in boldface and
underlined.
5 Select Use Charset Info to include the encoding and character set information in the Content attribute
of the Meta tag. When this option is selected, Adobe GoLive tries to recognize the encoding based on the
characters used. Deselect this option to eliminate language information from the HTML page header.
6 The Scanning Limit Characters text box defines the number of bytes that you want Adobe GoLive to
search in order to find encoding and character set information when it opens a file. Deselect Use Charset
Info to turn off this option automatically.
To select default fonts for an encoding system:
1 Choose Edit > Preferences, and click the Fonts icon in the left pane of the Preferences dialog box.
2 Expand the encoding that you want to use.
3 For each option, choose a font and size from the Font and Size pop-up menus.
ADOBE GOLIVE 5.0 19
User Guide
To preview your selection, click the Font Sample triangle (Mac OS).
A
B
A. Click this icon to view fonts for encoding system.
B. Click this triangle to show and hide font sample (Mac OS).
4 Click OK, and restart Adobe GoLive.
Note: Only installed double-byte fonts appear in the Font menu. See your operating system
documentation for information on installing fonts.
To create double-byte language pages:
1 If you are creating text in a non-Western language, make sure that you have installed the
appropriate double-byte script system software and fonts.
2 Open a new document window.
3 Choose File > Document Encoding, and choose the appropriate language encoding option.
Be sure that it is equivalent to the internal operating system encoding—for example, Japanese (Shift JIS)—
to add that meta information to the header section.
4 Proceed to design your page in Adobe GoLive.
20 CHAPTER 1
Looking at the Work Area
Using text files containing different scripts and encodings
Before importing foreign-language files or text files from other platforms, you need to know what encoding
with which they were written. If the text was saved in 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 Adobe GoLive document in Source view, and paste the double-byte text into it.
To import foreign encoded text files:
1 Open a new document window.
2 Choose File > Document Encoding, and choose the language encoding used to create the file that you
want to import.
This inserts the encoding information in the head.
3 Copy the text from the file that you want to import.
4 Return to Adobe GoLive, and display your Adobe GoLive document in Source view.
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, Adobe GoLive
interprets them as HTML tags when it reads the text-only file.
You now have an Adobe GoLive HTML file with the proper encoding in the head, and the text that you
want to use.
6 Choose File > Save As to save the page with the .html extension after the filename.
7 Proceed to lay out your page.
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.
Note: Switching encodings while in Source view in the document window changes the character set information, not the encoding information, for the current page.
21
Chapter 2: Web Site Basics
Creating a new site
You start the process of building a Web site by creating the site—that is, creating a site document (site file)
that controls its contents and two folders that will hold these contents. If you name your site Mysite, the site
document is named Mysite.site. Whether you create the site in Windows or Mac OS, the site document you
create can be opened and used on both platforms.
If you have used a previous version of Adobe GoLive to create a site, you don’t have to recreate it in Adobe
GoLive 5.0. Just opening the site document will automatically update it to an Adobe GoLive 5.0 site,
creating a 5.0 site document. (The earlier site document will be backed up. If you want to archive the entire
previous site, not just its site document, copy it, archive the copy, and then open the site document of the
original.)
About site folders
A site’s two folders are its root folder and data folder. If you name your site Mysite, the root and data folders
are named Mysite and Mysite.data respectively. After the site has been developed, Mysite will contain the
pages and media that are uploaded when the site is published. Mysite.data will contain auxiliary material
needed to build and maintain the site. It will not be uploaded.
When you create a new site, you get the opportunity to create a third “umbrella” folder to contain the root
and data folders and the site document.
A
B
C
D
A. Umbrella folder B. Root folder
C. Site Folder D. Site document
The umbrella folder is recommended.
If you name your site Mysite and create an umbrella folder, you should name the umbrella folder something else, for example, Mysite Folder, to distinguish it from the root folder named Mysite it will contain.
22 CHAPTER 2
Web Site Basics
Creating a blank site
When you create a blank site, the root folder contains only a generic home page and the data folder contains
only empty subfolders for the data.
To create a blank site:
1 Choose File > New Site > Blank.
2 Type a name for the site.
3 Click Browse, navigate to the folder that will contain the site, and click OK to select the folder. The folder
you select will contain either the site document and two site folders or a single umbrella folder that contains
them. If you name the site Mysite, the umbrella folder will automatically be named Mysite Folder.
4 If you want to create the umbrella folder, select Create Folder.
5 Click OK.
The site document for the new site automatically opens in a site window.
Creating a site from a site template
When you create a site named Mysite by copying a site template, you copy its root and data folders. For
information on the contents of these folders, see “About site templates” on page 407.
To create a site by copying a site template:
1 Choose File > New Site > Copy from Template.
2 Select a site template from the list. You can use the layout and structure thumbnails provided with each
template listed for help in making the selection.
3 Type a name for the new site.
4 Click Browse, navigate to the folder that will contain the site, and click OK to select the folder. The site
template that will be copied to the folder already has an umbrella folder; you don’t have to create it.
5 Click OK.
The new site automatically opens in a site window. For more information, see “Using site templates” on
page 407.
Creating a site by importing
You can create an Adobe GoLive site by importing an existing site. The site can be located either in a local
folder or in a folder on an FTP server. If either case, the import process creates a new site document and a
new site data folder. With a local import, the root folder of the site being imported is used, as is, as the root
folder of the new site. With an import from an FTP server, the root folder of the site is downloaded to
become the root folder of the new site.
ADOBE GOLIVE 5.0 23
User Guide
In either case, links on the pages imported are retained as is, and the site’s logical structure (navigational
hierarchy) is built. For information on this structure, see “About navigation views” on page 31.
When you import from an FTP server, you can have the imported files copied to an umbrella folder for the
site. When you import from a local folder, however, the imported files stay in the folder. If you want the
imported site to have an umbrella folder, you need to create a folder set for the site before you import.
To create a folder set for a site imported from a local folder:
1 Create an umbrella folder. If you plan to name the new site Mysite, name the folder Mysite Folder.
2 Copy the folder you plan to import to the umbrella folder. (You will import the copy instead.)
3 Rename the copied folder if necessary, giving it the name of the new site you are creating.
To import a site from a local folder:
1 In Adobe GoLive, choose File > New Site > Import from Folder.
2 Do one of the following:
• Click the upper Browse button, navigate to the root folder (not the umbrella folder, if you have created
one), and click OK to select the folder. This will probably display the paths to both the folder and the home
page within it in the text boxes.
• Click the lower Browse button, navigate to the home page within the root folder, and click OK to select
it. This will probably display the paths to both the home page and the folder containing it in the text boxes.
You can also perform this step by dragging the root folder or home page to the appropriate text box.
3 If the path to a home page does not appear, do one of the following:
• Click the lower Browse button, navigate to the desired home page, and click OK to select it.
• Select Create Generic Home Page.
4 Click Import.
5 If necessary, navigate to the folder where you will save the site document—the umbrella folder if you
have created one.
6 Click Save to save the site document.
The site document for the new site automatically opens in a site window. If the site contains any orphans,
broken links, or missing items, you are alerted by error indicators appearing in the window. For information, see “Checking the site for pages with errors” on page 426.
To import a site from an FTP server:
1 Choose File > New Site > Import from FTP Server.
24 CHAPTER 2
Web Site Basics
2 Specify the FTP server address. If you have set the address in FTP preferences, you can choose it from the
pop-up menu. (For information on FTP preferences, see “Setting up FTP access” on page 429.)
3 Type the directory path (if necessary) and the username.
4 If the Password text box is empty, do one of the following:
• In Windows, type the password.
• In Mac OS, type the password unless Keychain use is enabled in Adobe GoLive and the Keychain already
has this password. (For Keychain information, see “Setting up FTP access” on page 429.)
5 If you typed a password, select Save if you want to save the password for future use from the site you are
creating. (Mac OS Keychain users: Don’t select Save. The password you typed will be added to the Keychain
automatically.)
6 If you need to specify a port number or passive mode use, click Advanced, provide the number or select
Use Passive Mode, and click OK. For information on FTP ports and passive mode, see “Setting up FTP
access” on page 429.
7 Click Browse to initiate the server connection.
8 Navigate to the home page and Click OK to select it.
9 Click Import.
10 Type a name for the site.
11 Do one of the following:
• In Windows, click Browse, navigate to the folder that will contain the site, and click OK to select the
folder.
• In Mac OS, select the folder that will contain the site.
The folder you select will contain either the site document and two site folders or a single umbrella folder
that contains them. If you name the site Mysite, the umbrella folder will automatically be named Mysite
Folder.
12 If you want to create an umbrella folder, select Create Folder.
13 Click OK.
The site document for the new site automatically opens in a site window. If the site contains any orphans,
broken links, or missing items, you are alerted by error indicators appearing in the window. For information, see “Checking the site for pages with errors” on page 426.
ADOBE GOLIVE 5.0 25
User Guide
About site windows
When you open a site document (a *.site file) for the first time, its contents are displayed in the tabs of the
primary site window. The window has ten tabs in two panes, with six tabs in the left pane and four tabs in
the right pane.
C
A
B
Primary site window with right pane showing (A. One level up B. Show/hide right pane C. Pane menu)
Initially only the left pane is shown.
You can display tabs in a secondary site window by choosing the Navigation View or Links View command
from the Design menu. These commands correspond to the Navigation and Links tabs, the eleventh and
twelfth site-window tabs.
Except for the Files and Extras tabs in the primary site window, site-window tabs behave like palettes. You
can drag any tab out of either window, to the other window or out on its own. If you drag it out on its own,
a new secondary site window appears to contain it. When a secondary site window becomes empty, it disappears.
Whatever arrangement of tabs and site windows you create for a site is maintained the next time you open
its site document. You can have more than one site document open at the same time. When you do this,
Adobe GoLive won’t let you drag tabs from one site into a site window for another site.
The first ten site-window tabs are tables, with rows of files or other objects and columns with information
about the objects. The other two are graphical views of the site. Both panes of the site window have a menu
in the upper right corner. The two view tabs have similar menus.
26 CHAPTER 2
Web Site Basics
Working with site windows
You can freely adapt Adobe GoLive’s site windows, arranging the windows and the tabs in them to suit your
own site-building purposes.
To open a site document (*.site file) in a primary site window:
Do one of the following:
• Choose File > Open, browse to the document, select it, and click Open. This opens the site document.
• Double-click the file on your system desktop. This launches Adobe GoLive with the site document open.
Note: Opening a site document automatically creates a backup of the document. The backup is deleted when
you save and close the document. You can turn this feature off in Site preferences.
To open a site whose site document was open during a crash:
Open the regular site file, not the backup site file. If it is necessary to use the backup, Adobe GoLive will
inform you while you are opening the regular file.
To show or hide the right pane of a primary site window:
Click the icon (
) in the scroll bar at the bottom of the window.
To open a graphical view of the site in a secondary site window:
1 Click the site window displaying the site document.
2 Do one of the following:
• Click the Navigation View button (
) on the toolbar.
• Choose Design > Navigation View or Design > Links View.
• Choose Navigation or Links from one of the pane menus of the site window.
To display the contents of a tab in a site window:
Do one of the following:
• Click the tab to bring it to the front.
• Choose Site > View and select the tab from the View submenu. If the tab has been closed, it is displayed
in a new secondary site window.
ADOBE GOLIVE 5.0 27
User Guide
To move a tab in or out of a site window or site window pane:
Drag the tab into or out of the window or pane. You can drag a tab into either pane of the primary site window, either from another site window or from the other pane of the primary site window.
If you move two tabs to two separate windows, you can sometimes use them in conjunction. For
example, if the Navigation and Links tabs are in separate windows, you can use the navigation view
as a key to the links view, selecting a page in the one as a way of locating it in the other.
To restore the original configuration of the primary site window:
Choose Default Configuration from the menu for either pane of the window. This restores the original ten
tabs in their original positions and removes any other tabs.
To work with table-style tabs:
Do any of the following:
• To change the sort order of the column the table is currently being sorted by, click its column head. In
Mac OS, you can also click the icon ( ) above the scroll bar.
• To sort the table by another column, click its column head.
• To show or hide a column, choose the column from the context menu for the row of column heads in the
pane containing the column. (Alternatively, use the Show Columns menu in the View Controller. For information, see “Using the View Controller” on page 387.)
To display a context menu, right-click (Windows) or Control-click (Mac OS) the context. In the procedure
above, the context is the row of column heads.
• To resize a column in a tab, drag the right border of the column head to the left or right.
• To change the position of a column in the tab, Control-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 icon (
top of the tab.
• To show or hide the anchors in a page, click the icon ( ) or ( ) to the left of the page.
) at the
28 CHAPTER 2
Web Site Basics
About table-style tabs
A site window contains ten tabs that list site resources in table format. For information on managing these
resources, see “Managing Web Sites” on page 393.
The Files tab
If you have named your site Mysite, the Files tab lists the page and media files in the folder Mysite. If a page
contain anchors, the tab lists them under the page. If you have imported a site that groups its pages and
media in folders, the tab retains that folder structure.
You can use the Files tab as you would use the Windows Explorer or MacOS Finder, both to navigate the
files in your site and to perform basic file-management operations. You can drag files to other folders in the
tab and to other tabs, copy files to the Clipboard, delete files, spell check files, and open files in appropriate
windows. HTML files open in Adobe GoLive document windows.
For each file, the tab lists particulars such as name, size, and date modified by column.
• In the Status column, a checkmark ( ) indicates that the file is error-free—that all files referenced in it
have been found. For information about the meaning of other status icons, see “Checking the site for pages
with errors” on page 426.
In the Filename Status column, an “error” symbol ( ) indicates that the name of the file violates some
filename constraint. For information, see “About filenames” on page 39. The Filename Status column is
ordinarily hidden.
• In the Locked column, a padlock ( ) indicates a locked file in Mac OS or a read-only file in Windows.
For information, see “Unlocking locally locked files” on page 41. A pencil ( ) indicates a locked workgroup file. For information, see “Enhancing WebDAV with Workgroup Support” on page 448.
• In the Used column, a number indicates the number of links to the file from other files at the site. The
links can be hyperlinks or references. For information about hyperlinks and references, see “About links in
site views” on page 31.
The Designs and Extras tabs
If you have named your site Mysite, the Designs and Extras tabs list files in the Mysite.data folder.
Designs lists prototype designs you have created for the site. As an alternative to building an actual site a
page at a time, you can build one or more site prototypes and then convert the prototype you like to an
actual site. For information, see “Designing Web Sites” on page 453.
Extras lists four folders:
• The Components folder contains GoLive component files—source files for components of pages that
update when the source file is edited. You can open a component file in a document window by doubleclicking it. For more information, see “Using GoLive components” on page 168.
ADOBE GOLIVE 5.0 29
User Guide
The Designs folder contains site designs—working prototypes of a site or site subtree. For information, see
Chapter 23, “Designing Web Sites.”
• The Stationery folder contains stationery files—HTML pages usable as templates. You can open a stationery file in a document window by double-clicking it. For more information, see “Using stationery” on
page 167.
• The Site Trash folder contains files deleted in Adobe GoLive but not deleted on your hard disk—that is,
not moved to the Recycle Bin (Windows) or Trash (Mac OS).
The External, Colors, Fontsets, and Custom tabs
If you have named your site Mysite, the External, Colors, Fontsets, and Custom tabs list items stored in the
Mysite.site file. In each tab, the items can be listed separately or collected in groups. (A group is a type of
folder stored within the site file rather than within another folder.)
External lists URLs and e-mail addresses available for use on site pages. You point and shoot to insert one
of the URLs or addresses listed on a page in a document window. For more information, see “Using site
URLs and e-mail addresses” on page 411.
Colors lists colors available for use on site pages. You drag a color from the tab onto selected text or a
selected object on a page in a document window. For more information, see “Using site colors” on
page 414.
Fontsets lists font sets available for use on site pages. Font sets listed appear on a menu in the document
window, or you can drag a font set onto selected text on a page in the window. For more information, see
“Using site font sets” on page 416.
Custom lists custom HTML and media snippets available for use on site pages. You drag a snippet from the
tab into position on a page in a document window. For more information, see “Using custom snippets” on
page 417.
The Errors, FTP, and WebDAV tabs
The Errors, FTP, and WebDAV tabs list files not stored at the site.
Errors lists missing and orphaned files—files referred to in a link that can’t be found or that can be found
but outside the local root folder. For information on the Errors tab, see “Checking the site for missing or
orphan files” on page 426.
FTP and WebDAV are used for uploading the site to a Web server and synchronizing the local and published site. The usual method of connecting with the server is FTP. WebDAV connection uses file locking
to facilitate collaborative site development. For information on the FTP tab, see “About the FTP clients” on
page 428. For information on the WebDAV tab, see “Using WebDAV” on page 439.
30 CHAPTER 2
Web Site Basics
About site views
You use the graphical view tabs of site windows to visualize the relationships between the pages that make
up your site. You can take two views: a view of the web of actual hyperlinks (links view) and a view of the
tree-like hierarchy of pages that underlies the web of links (navigation view). In either view, there are a central pane and (optionally) peripheral panes that provide specialized views: the panorama pane, pending
pane, reference pane, and scratch pane. For information, see “Using peripheral panes” on page 381.
Both views are coordinated with the Files tab. The pages shown in the view are listed in the Files tab, and
selecting a page in a view selects it in the Files tab.
About links views
When you open a links view of a site, it shows the site’s home page file (index.). If the site contains pages
hyperlinked to the home page, pages hyperlinked to these pages, and so on, you can view them by expanding the view, first from the home page and then from other pages that come into view. Each expansion displays files linked to the expanded file. Expansions in one direction show incoming links—links with their
source in other files and the expanded file as their destination. Expansions in the opposite direction show
outgoing links—links to other files with their source in the expanded file. An individual file can appear several times in the view—for example, as an incoming link to the left of an expanded file and as an outgoing
link to its right.
A
B
C
D
A. Incoming link B. Home page C. Outgoing link D. File not expanded
You can also display incoming links only, outgoing links only, no links, or only the link path you are currently exploring. For information, see “Varying the view of links” on page 388.
ADOBE GOLIVE 5.0 31
User Guide
About navigation views
With a new imported site, the navigation view shows the structure of the site as a tree-like hierarchy
descending from the home page. With a new blank site, the navigation view shows a single home page, and
you build the structure of the site by adding empty pages to the home page in the same sort of hierarchy.
You also use this method to add pages and substructures to an imported site.
In either case, the hierarchy is built up of logical pair relationships between pages in which a page is either
a child, a parent, a previous sibling, or a next sibling. A typical parent-child relationship is between a home
page and pages it links to.
A
B
A. Home page B. Children of home page
A typical sibling relationship is between the first (previous) and second (next) pages in book-like sequence
of pages.
With the structure established, you can fill the empty pages with content and hyperlink them together in a
way that reflects the structure. Alternatively, you can rebuild the hierarchy with different settings to establish a different structure before you reflect the structure with hyperlinks. For information, see “Rebuilding
a hierarchy” on page 38.
About links in site views
Files shown in Adobe GoLive site views are linked in four ways:
• Hyperlinks are “jumps” or “goto’s” on HTML pages that lead to other HTML pages or documents. They
consist of the address (URL) of the other page and an instruction to display the page when the hyperlink is
clicked. Hyperlinks appear in the central pane of links views.
32 CHAPTER 2
Web Site Basics
Logical links are family relationships between pairs of pages (parent-child, sibling-sibling). Taken as a
whole, these family relationships form the hierarchical structure of the site. You build the site by creating
the relationships and then using them as guides to hyperlinking pages in the site. Logical links appear in
the central pane of navigation views.
• Pending links are reminders that pairs of pages, usually pages linked logically, should be hyperlinked. Like
hyperlinks, pending links are directional. For example, a pending parent-child link can be either parentto-child or parent-to-and-from child. If a hyperlink has been created between pages to complete a pending
link between them, the pending link is resolved. Unresolved pending links have no hyperlink equivalent. In
navigation views, any pages that are the targets of unresolved pending links for a page selected in the central
pane appear in the pending pane.
You can also display a page’s pending links in the Page Inspector for the page. You display the Page
Inspector for the page by displaying the Inspector, displaying the page in a document window, and clicking
the Page icon ( ) in the upper left corner of the window. The pending links are shown in the Pending tab. All
pages that are targets of the page’s pending links are listed in the tab, with the unresolved links checked.
• References are source links—addresses of media files on HTML pages that cause the media file to be
embedded in the HTML page, usually as an image. In navigation views and links views, any files that are
referenced on a page selected in the central pane appear in the reference pane.
Viewing a site
You can move the two site views into several useful window configurations, and vary the views within these
windows in many ways that help you survey the site.
Expanding and collapsing views
When you expand or collapse a file in one of the site views, you show or hide the files linked to it. The
feature works in much the same way that expanding and collapsing folders work in Windows Explorer or
Mac OS Finder.
When you expand a file, it stays expanded until you collapse it explicitly. For example, if you collapse a
file that governs a long path of files, the entire path disappears. And if you then expand the same file, the
entire path reappears, not just the files linked directly to the expanded file.
You expand files from the home page file to view a whole site. Since most sites contain too many files to
view all at once and scrolling the view can be awkward, you sometimes need to collapse files to view another
portion of the site. However, there are a number of more precise techniques for moving and limiting the
view. For information, see “Viewing Web Sites” on page 381.
To expand the view of a site completely:
Click the Unfold All button (
) on the toolbar.
ADOBE GOLIVE 5.0 33
User Guide
To expand the view of a site incrementally:
1 Do either of the following:
• In a navigation view, click the expand button (
) next to a page to view its child page or pages.
• In a links view, click an expand button ( ) next to a page to view its incoming or outgoing links. The
direction of the button from the page determines whether the links are incoming or outgoing. For information, see “About orientation and direction” on page 33.
2 Continue clicking expand buttons until the view is expanded in the way that you want.
To collapse the view of a site incrementally:
1 Do either of the following:
• In a navigation view, click the collapse button (
• In a links view, click the collapse button (
) next to a page to hide its child page or pages.
) next to a page to hide its incoming or outgoing links.
2 Continue clicking collapse buttons until the view is collapsed in the way that you want.
To get advance information about an expansion:
Pause the pointer over the expand button before clicking. A tooltip provides the number of children,
incoming links, or outgoing links the expansion will contain.
About orientation and direction
Both navigation views and links views can appear in both wide and tall orientation.
A navigation view in wide and tall orientations
34 CHAPTER 2
Web Site Basics
Both views use the four directions to indicate types of links. For example, in a wide navigation view a page’s
parent page is above the page.
In wide orientation, a navigation view uses the four directions as follows: Above is the parent page, below
is the child page, left is the previous page, and right is the next page. In tall orientation, the parent page is
left and the previous page above.
In tall orientation, a links view uses two directions as follows: Left is the incoming link, and right is the outgoing link. In wide orientation, the incoming link is above.
Changing the orientation of a view
When you first view a site, its navigation view has a wide orientation and its links view has a tall orientation.
To change the orientation of a view:
Click the Toggle Orientation button (
) on the toolbar.
Note: You can also change orientation with the View Controller. For information, see “Using the View
Controller” on page 387.
Building a hierarchy of pages
If you start with a blank site, it’s a good idea to begin building the site in a navigation view. You begin by
building its structure, arranging empty pages in a hierarchy of unresolved pending links starting with links
from and to the home page. At a later stage of site-building, when the pages have content, you can resolve
these pending links by creating hyperlinks that reflect them.
This structural approach is also useful for adding new groups of pages to developed sites. You simply
anchor the structure of empty pages to an “away” page—a page at the site other than the home page.
Adding empty pages and pending links to a hierarchy
The generic pages you add to a navigation view are blank HTML pages. They appear in the view with an
empty-page alert ( ). Such pages have the filename Page. or Pagen. For information on renaming them,
see“Naming files and folders” on page 39.
Note: Generic pages are blank but contain the basic HTML tags required to form an HTML page.
Pages added are either pages with unresolved pending links or scratch pages. A scratch page has no pending
links of any kind. You would add scratch pages to a navigation hierarchy simply to make it easier to link
them to the hierarchy as a later step. For information, see “Rearranging the parts of a hierarchy” on page 36.
ADOBE GOLIVE 5.0 35
User Guide
To add a single empty page with pending links:
1 Open a navigation view of the site.
2 Select a page in the view.
3 Do one of the following:
• Click the New Parent Page button (
) on the toolbar or choose Design > New Parent Page to insert a
page between the selected page and its former parent page. The new page is the child of the former parent
page and the parent of the selected page. The three pages are connected by “to child and back” links—that
is, pending links from parent pages to child pages and from child pages to parent pages.
• Click the New Child Page button (
) on the toolbar or choose Design > New Page to insert a child
page with “to child and back” links from the selected page.
• Click the New Next Page button (
) on the toolbar or choose Design > New Next Page to insert a next
sibling page with “to adjacent siblings” links from the selected page—that is, a pending link from the
selected page to the new sibling page and a pending link from the new sibling page to the selected page.
• Click the New Previous Page button (
) on the toolbar or choose Design > New Previous Page to
insert a previous sibling page with “to adjacent siblings” links from the selected page—that is, a pending
link from the selected page to the new sibling page and a pending link from the new sibling page to the
selected page.
Note: If the page you selected is the home page, the only choice available is the New Child Page button (
or Design > New Page.
)
To add a group of child pages with pending links:
1 Open a navigation view of the site.
2 Select a page in the view.
3 Choose Design > New Pages.
4 Type the number of pages to create.
5 If you want to name the pages something other than Pagen., type a filename.
6 If you want to use a stationery page, choose it from the menu. (For information, see “Using stationery”
on page 167.)
7 Choose from the Parent menu to create pending links as follows:
• Choose To Each Child to create links from the parent page to each child page being created.
• Choose To Child and Back to create bidirectional links between the parent page and each child page being
created.
• Choose To First Child Only to create a link from the parent page to the first child page being created only.
• Choose None to create a no links to the child pages being created.
36 CHAPTER 2
Web Site Basics
8 Choose from the Sibling menu to create pending links as follows:
• Choose To Next Sibling to create previous-to-next links between any child pages you are creating. (A
previous-to-next link is also created between the first sibling you create and the last of any of its siblings
already created.)
Choose To Adjacent Siblings to create bidirectional links between any child pages you are creating. (A bidirectional link is also created between the first sibling you create and the last of any of its siblings already
created.)
• Choose None to create no sibling links in either direction from any child pages you are creating.
9 Click Create. This creates new pages and new unresolved pending links. You resolve a pending link
between two pages by adding a hyperlink from the source page to the target page that reflects it.
To add an empty scratch page:
Select a folder in the Files tab and choose Site > New > Page. Scratch pages are also displayed in the scratch
pane of the site’s navigation view. For information, see “Using peripheral panes” on page 381.
To add a pending link from one page to another:
1 Move the point to the source page.
2 Hold down Control-Shift (Windows) or Command (Mac OS). The pointer shows a point-and-shoot
icon ( ).
3 Drag to the target page. A new pending link is created.
The source and target page can be any two pages. They do not need to have a family relationship.
To remove a page from a navigation view:
1 Select the page. (If the page you select has descendents, they will be moved to the scratch pane after you
remove the selected page. For information, see “Using peripheral panes” on page 381.)
2 Do one of the following:
• To delete the page, click Delete Selected Item button (
the Delete key.
) on the toolbar, choose Edit > Delete, or press
• To move the page to the scratch pane without deleting it, choose Design > Move to Scratch.
Rearranging the parts of a hierarchy
It’s easy to move a page from one position in the navigation view to another. You drag the page to another
page—its target page—and position it so that it becomes the parent, child, or sibling of the target page. If
the page you’re moving has children or descendents, they move with it automatically. And the page’s own
family position—its pending links to a parent and siblings—is updated. Because of this feature, you can
make major revisions to the structure of a site by moving a few pages.
ADOBE GOLIVE 5.0 37
User Guide
You can also drag pages in the scratch pane to positions in the hierarchy or drag pages out of the hierarchy
to the scratch pane.
To move a pending-link page and its descendents to another position in the site:
Drag the page to its target page as follows:
• In wide orientation, drag to the top of the target page to make the page you’re dragging its parent, to the
bottom to make the page its child, to the left to make it the previous sibling, and to the right to make it the
next sibling. A line at the top, bottom, left, or right of the target page appears to show you where to drop
the page.
• In tall orientation, drag to the left of the target page to make the page you’re dragging its parent, to the
right to make the page its child, to the bottom to make it the next sibling, and to the top to make it the
previous sibling. A line at the left, right, bottom, or top of the target page appears to shows you where to
drop the page.
A
B
C
D
A page being moved to a new parent (left); its resulting position next to new siblings (right)
To move a scratch page into position in the hierarchy:
1 Open the scratch pane. (For information, see “Using peripheral panes” on page 381.)
2 Drag a page from the pane into position just as you would a page in the hierarchy.
38 CHAPTER 2
Web Site Basics
Rebuilding a hierarchy
When you import a site, you build its hierarchical structure automatically. This initial structure is based on
both the pattern of hyperlinks present on site pages and the hierarchy of the root folder’s subfolders. It also
contains pending links as well as actual hyperlinks; that is, it contains a record of every parent-child or sibling-sibling relationships possible given the actual hierarchy.
You should rebuild this hierarchy if you have made changes in your site outside Adobe GoLive, or if you
want to base its navigational structure on different principles. For example, if you have provided your site
with all the hyperlinks it needs, you may wish to eliminate pending links from the hierarchy. Or if the hierarchy of the root folder’s subfolders has nothing to do with the site’s navigational logic, you may wish to
base the structure entirely on hyperlinks.
To rebuild the logical structure of a site:
1 Open the site in its site window.
2 Click the Navigation View button (
) on the toolbar, or choose Design > Navigation View. For information on this view, see “About navigation views” on page 31.
3 Choose Design > Rebuild Hierarchy.
4 Select options as necessary:
• Links extrapolates the hierarchy from the pattern of hyperlinks in the site’s pages.
• Folder Hierarchy bases the hierarchy on the hierarchy of the root folder’s subfolders.
Use Folder Hierarchy if the actual folder hierarchy was designed to reflect the hierarchy of the site’s pages.
• Deselect Add Pending Links if the site’s hyperlinks are operational and complete. Keep it selected if you
will be using the hierarchy to guide you in providing hyperlinks for the site. For information, see “Adding
empty pages and pending links to a hierarchy” on page 34.
5 Click OK.
Using inspectors with files and folders
The File Inspector for any file has a File tab with basic file information and a Content tab with a thumbnail
of the file. For HTML files, the File Inspector has additional Page and Style tabs. For files that violate a filename rule, it has an additional Filename Constraints tab. The Folder Inspector has basic folder information.
You can also use the File Inspector and Folder Inspector to rename files and folders, change their “publish”
status, and relabel them. In the File Inspector, you can also retitle an HTML page file or add, remove, and
change styles associated with the file. For information on publish status, see “Publishing a site” on
page 423. On labeling, see “Assigning status labels” on page 403. On styles, see “Using Cascading Style
Sheets” on page 205.
ADOBE GOLIVE 5.0 39
User Guide
To inspect a file or folder:
1 Display the Inspector palette.
2 Do one of the following:
• Click the file in the Files or Extras tab of the primary site window or in either site view.
• Click the folder in the Files or Extras tab.
3 If you clicked a file, click the File, Page, Content, or Style tab in the File Inspector as appropriate.
About filenames
Adobe GoLive comes with a set of filenaming rules that ensure cross-platform compatibility. When a filename violates one of the rules, the site window and the File Inspector indicate the fact. In addition, the File
Inspector lists the rule itself.
You can examine, modify, delete, and add filenaming rules. For information, see “Changing filename constraints” on page 400.
Naming files and folders
When you create a new empty file in Adobe GoLive, it is automatically given a name. If you know what content that file will contain, you will probably want to rename it.
When you rename a file that is referenced by other files, you can update the other files with the new filename at the same time. For information on updating an entire URL being referenced, see “Editing links
and references sitewide” on page 421.
To rename a file:
Type the new name in the File tab of the File Inspector.
To update files referencing a file you are renaming:
1 Rename the file.
2 If any file in the update list should not be updated, deselect it.
3 Click OK.
To check for filename constraint violations:
Do one of the following:
• List the file in the Files tab of the primary site window, and examine the Filename Constraint column.
• Look for the Filename Constraint tab in the File Inspector when you are inspecting the file. If the tab is
absent, the filename is OK.
40 CHAPTER 2
Web Site Basics
• Look for the group Filename Warnings in the Errors tab of the site window. If it is present, it will include
a list of all files with filenaming errors.
To rename a folder:
Type the new name in the Folder Inspector.
Retitling HTML pages
When you create a new blank page (a new document), it is automatically given a title—“Welcome to Adobe
GoLive 5” unless you have established a custom new document with a different title. If you know what content the page will contain, you will probably want to retitle it.
You can display HTML pages by either page title or filename in the site views. For information, see “Changing the display of the view” on page 388. For information on creating a custom new document, see “Setting
preferences” on page 14.
To retitle an HTML page:
1 Click the Page tab of the File Inspector.
2 Type a new page title.
3 Press Return (Mac OS) or Enter (Windows).
Opening page files
You lay out and develop the HTML pages for a site in Adobe GoLive document windows, opening the pages
from the Files tab of the primary site window or a site view. You can keep several document windows open
at once, in that way also maintaining the broad view of the site that the site window and site views offer
you. For information on working in document windows, start with “Setting Up Pages” on page 43 and
“Page Layout Basics” on page 59.
For information on opening other types of files, see “The File Mappings tab” on page 378.
To open an HTML file in a document window:
Do one of the following:
• Double-click the file in the primary site window or in one of the site views.
• Select the file in the primary site window and click the Open button (
) on the toolbar.
• Select the file in the primary site window and choose Site > Explorer > Launch File (Windows) or Site >
Finder > Launch File (Mac OS).
To open an HTML file in a document window with a particular tab showing:
1 Select the file in the primary site window or in one of the site views.
ADOBE GOLIVE 5.0 41
User Guide
2 Display its context menu.
3 Choose an item from the Open in Mode submenu. The submenu lists all the tabs in a document window.
Unlocking locally locked files
Locally locked files are files locked in Mac OS or given a Read Only attribute in Windows. You can unlock
these files in Adobe GoLive as well as going to your system desktop to do so. If you import a site with locked
files, you’ll need to unlock them before you can edit them.
Local 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.
To unlock a locked or read-only file:
1 Select the file in the primary site window.
Note: You can unlock a file with this method only if it shows a padlock ( ) in the Locked column of the Files
tab. The padlock indicates that it been locked in Mac OS or made read-only in Windows.
2 Click the button (
) on the toolbar. (The button is labeled Show Properties in Windows and Show
Information in Finder in Mac OS.)
3 Do one of the following:
• In Windows, deselect Read-only and click OK.
• In Mac OS, unlock the file and close the Get Info window.
4 Click the Update button (
) on the toolbar.
43
Chapter 3: Setting Up Pages
Creating pages
When you start Adobe GoLive, the program opens a new Web page by default. You can also create a new
page using the File menu. After creating a new page, it’s important to change the title of the page. The page
title appears in the title bar of the Web browser when the page is viewed. It’s also used by Internet search
engines to index the page.
Before creating a page, you should think about the page’s content and appearance. If you plan on adding
images or media to the page, you should begin by creating a Web site in Adobe GoLive and adding the necessary files to your site window. The site window makes it easy to keep track of resources, no matter how
large your site grows. For information on creating a site in Adobe GoLive, see “Creating a new site” on
page 21.
To create a new page:
Choose File > New.
To change the page title:
Do one of the following:
• Select the default page title Welcome to Adobe GoLive 5 next to the Page icon (
of the document window, and type your new title.
) in the upper left corner
• Choose Window > Inspector. Click the Page icon ( ) in the upper left corner of the document window.
In the Page Inspector, click the Page tab. For Title, enter your new page title.
If you want the same page title to appear on all of your pages, you can create a page with the desired
title and then set General preferences to have Adobe GoLive create new documents using that page as
a template.
44 CHAPTER 3
Setting Up Pages
To set General preferences for launching Adobe GoLive and opening new document windows:
1 Choose Edit > Preferences.
2 Click the General icon in the left pane of the Preferences dialog box.
3 In the right pane of the Preferences dialog box, choose one of the following options from the At Launch
pop-up menu to customize the behavior of Adobe GoLive when it’s launched:
• Create New Document to have Adobe GoLive create and open a new document.
• Show Open Dialog to have Adobe GoLive prompt you to select an existing file.
• Do Nothing to have Adobe GoLive launch without creating a new document or prompting you to select
an existing file.
4 To choose the default view of document windows that you open in Adobe GoLive, choose an option
from the Default Section (Windows) or Default Mode (Mac OS) pop-up menu. For information on the
different document views, see “Using the document window” on page 5.
5 To select a file to be used as a template for new documents that you create in Adobe GoLive, select New
Document. Then click the Select button, and select the file that you want to use as a template.
If you also choose Create New Document from the At Launch pop-up menu, Adobe GoLive creates a new
document based on your selected file when you launch the application.
6 To add the meta information tag <meta name="generator" content="Adobe GoLive 5"> to each file that
you create or save, select Write “Generator Adobe GoLive.”
7 Click OK.
Saving pages
Using the Save dialog box, you can save your Web page directly to the folder that stores the pages and media
for your Web site. You can also specify a filename for your page.
To save a page:
1 Choose File > Save.
2 Select a folder for the file.
ADOBE GOLIVE 5.0 45
User Guide
If you have a site window open, a pop-up menu appears in the Save dialog box. You can use this pop-up
menu to quickly select the folder that stores the pages and media for your site (Root), or one of its subfolders.
3 Name the page using the appropriate filenaming conventions. Make sure that you add the .htm or .html
suffix to the name to ensure that Adobe GoLive and Web browsers recognize the file as a Web page. For
more information on filenaming conventions, see “About filenames” on page 39.
4 Click Save.
Selecting window sizes
Once you have a Web page open, you can select a size for the document window. The window size is only
valid in Adobe GoLive, not Web browsers. However, it can help you limit the design of your page to fit
within a desired window size. Although many monitors have a visible display area greater than 640 pixels,
you may want to set the window size to 580 pixels or less to accommodate viewers with 14-inch monitors,
or viewers that don’t like the browser to fill the entire screen.
To select a size for the document window:
1 Choose a size from the pop-up menu in the lower right corner of the document window.
2 To make this size the default size for document windows, choose Window Settings from the pop-up
menu. Select HTML Windows. (If you have a site window open, you can also select Site Windows to set the
default size for site windows to be that of the open site window.) Click OK.
46 CHAPTER 3
Setting Up Pages
Selecting text and background colors
You can select colors for the text that appears on your Web page, including the body text and links. You can
also select a background color to visually enhance your page. The colors that you choose override the
default colors used by most Web browsers.
As an alternative to selecting a background color, you may want to apply a background image. For more
information on background images, see “Applying background images” on page 47.
To select a text or background color:
1 Choose Window > Inspector.
2 Click the Page icon (
) in the upper left corner of the document window.
3 In the Page Inspector, click the Page tab, and select one of the following options:
• Text to select a color for the body text.
• Link to select a color for standard link text.
• Active Link to select a color for active links. The color that you choose appears temporarily when a viewer
clicks a link.
• Visited Link to select a color for visited links.
• Background Color to select a background color.
4 Click inside the desired color field in the Page Inspector to select it.
5 Select a color in the Color palette. For instructions on using the Color palette, see “Working with color”
on page 77.
Adobe GoLive automatically applies the color to the color field in the Page Inspector, and applies the color
to the text or background color of the page.
A
B
A. Click inside color field to select it. B. Select color in Color palette.
ADOBE GOLIVE 5.0 47
User Guide
Applying background images
You can apply a background image to your Web page to visually enhance it. When choosing a background
image, keep in mind that Adobe GoLive and Web browsers treat the image as a tile that they repeat to cover
the page.
To apply a background image:
1 Choose Window > Inspector.
2 Click the Page icon (
) in the upper left corner of the document window.
3 In the Page Inspector, click the Page tab.
4 Under Background, select Image. Then select an image file using the Point and Shoot button (
the Browse button.
), or
Specifying page margins
You can offset the contents of a Web page by specifying page margins. Using the Page Inspector, you can
specify the margin width (the space between the page’s content and the left edge of the Web browser window) and the margin height (the space between the page’s content and the top edge of the browser window). Adobe GoLive automatically adds attributes to the page’s source code that are necessary for the margins to appear in both Netscape Navigator and Microsoft Internet Explorer.
To specify page margins:
1 Choose Window > Inspector.
2 Click the Page icon (
) in the upper left corner of the document window.
3 In the Page Inspector, click the Page tab.
4 For Margin Width and Margin Height, enter values in pixels. (If you don’t enter any values, the browser
automatically applies both a margin width and margin height of 8 pixels.)
Selecting viewing options
You can select viewing options for your Web page using the View Controller and General User Interface
preferences. The options that you select in the View Controller are only applied to the open page. General
User Interface preferences are applied to every page that you open until you change them.
To select viewing options using the View Controller:
1 Choose Window > View Controller.
2 Select Invisible Items to display line breaks, icons indicating comments or forms, and other invisible
items. (Selecting this option is equivalent to choosing Edit > Show Invisible Items.)
48 CHAPTER 3
Setting Up Pages
3 Select Link Warnings to highlight text or outline images that contain broken links. (Selecting this option
is equivalent to clicking the Link Warnings button (
) on the toolbar or choosing Edit > Show Link
Warnings.)
4 Select Images to show images in Layout view.
5 With Images selected, select Low Source to display low-resolution images in Layout view.
6 With Images selected, select Background to display background images in Layout view.
7 Choose an option from the Root CSS pop-up menu to view a simulated preview of your page in a Web
browser for Windows or Mac OS.
8 Select Allow Overlapping Paragraphs to preview how elements with negative margin values grow into
adjacent elements. This option only affects elements on your page that have CSS formatting applied to
them. Selecting this option enables Adobe GoLive to provide the most accurate preview of CSS styles.
9 To specify which fonts are displayed in Adobe GoLive, choose one of the following options from the
Fonts menu (or any other option provided):
• All to display all fonts.
• Ignore Web Fonts to display all fonts except standard Web fonts. This option is useful because it draws
your attention to any text which is formatted using nonstandard Web fonts, or fonts that your viewers may
not have on their computers. If desired, you can then reformat the text using standard Web fonts.
• Times only to simulate how your page displays if only Times is available.
10 To preview the colors that have been chosen for links, choose an option from the Links menu. Choose
Normal to preview the color that has been chosen for standard link text. Choose Active to preview the color
that has been chosen to appear temporarily when viewers click links.
11 Choose an option from the Mark Style menu to highlight elements on the page formatted with a
specific class or ID.
12 Choose an option from the Mark Element menu to highlight elements on the page formatted with a
specific tag.
13 Click the Hide button to remove highlighting from elements on the page formatted with a specific class,
ID, or tag.
To select viewing options using General User Interface preferences:
1 Choose Edit > Preferences.
2 Click the symbol next to General to expand the list, and click User Interface.
3 In Mac OS, select Appearance Theme Savvy and Use Navigation Services to use these customized display
features of Mac OS 8.5 and higher. Select Appearance Theme Savvy to allow Adobe GoLive to support the
Appearance Manager. Select Navigation Services to allow Navigation Services in Open and Save dialog
boxes. For more information on these features, see your Mac OS documentation.
ADOBE GOLIVE 5.0 49
User Guide
4 Select Launch Other Programs to Edit Media Files to launch a chosen editing application when you
double-click an object on your page that’s linked to a media file, or when you double-click a media file in
the Files tab of a site window.
5 Select Direct Input for Textfields to have Adobe GoLive apply a value that you enter in a text box as soon
as the text box loses its focus (for example, a text box loses its focus when you click outside of it). Deselect
this option to have Adobe GoLive display an Enter button ( ) after each text box. When an Enter button
is displayed, you need to click it, or press the Enter key on the keyboard to apply the value in the text box.
6 To select a custom color to be used when highlighting elements on the page formatted with a specific
class, ID, or tag, click the Styles color field. In the Color dialog box, select a color and click OK.
Using the View Controller, you can highlight elements on the page formatted with a specific class, ID, or
tag by selecting an option from the Mark Style or Mark Element menu.
7 To select a custom color to be used when displaying broken links, click the Link Warnings color field. In
the Color dialog box, select a color and click OK.
To display broken links, you can do one of the following: select Link Warnings in the View Controller, click
the Link Warnings button (
) on the toolbar, or choose Edit > Show Link Warnings.
8 Choose an option from the Frame Border menu to select a weight for the border to be used when
displaying broken links, or when highlighting elements on the page formatted with a specific class, ID,
or tag.
9 Choose display options for the resize handles (Sizeknobs) that appear on objects when they are selected:
• To select a custom color for the resize handles, click the color field. In the Color dialog box, select a color
and click OK.
• To select a size for the resize handles, choose an option from the menu.
10 Click OK.
Using layout rulers
You can display horizontal and vertical rulers to help you place and resize objects with precision. When you
place an object, white areas on the rulers indicate the current position and size of the selected object. When
you move the pointer in the document window, lines in the rulers move along to indicate the current position of the pointer.
50 CHAPTER 3
Setting Up Pages
To turn rulers on and off:
Click the ruler icon (
) above the vertical scroll bar in the document window.
B
A
A. White area on either ruler indicates position and size of selected object.
B. Click ruler icon to turn rulers on and off.
Adding head tags
An HTML page consists of two major sections: a head and body. Adobe GoLive’s Layout view mirrors this
structure by providing a head section pane as part of its document window. You can use the head section
pane to store information about your Web page, including the page title and keywords. The head section
pane of each page already contains a Title tag, which you can edit directly by editing the page title in the
upper left corner of the document window. Adobe GoLive makes it easy to add other head tags to the page
using the Head tab of the Objects palette.
To add a head tag:
1 Click the triangle ( ) next to the Page icon (
open the head section pane.
) in the upper left corner of the document window to
A
B
A. Closed head section pane B. Opened head section pane
2 Choose Window > Objects.
3 In the Objects palette, click the Head tab (
).
4 Drag the desired icon from the Objects palette to the head section pane.
ADOBE GOLIVE 5.0 51
User Guide
If the head section pane is closed, you can drag an icon directly to the triangle. When the head section pane
opens, drag the icon into it.
Adding Base tags
You can use the Base tag 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.
Note: We don’t recommend using the Base tag, because it’s obsolete.
To add a Base tag:
1 Drag the Base icon from the Head tab of the Objects palette to the head section pane of your document
window.
2 Choose Window > Inspector.
3 In the Base Inspector, select Base. Then select a file to be used as the base URL using the Point and Shoot
button ( ), or the Browse button.
4 Select Write Base Always Absolute to ensure that all references are written back to the root of the site.
5 To select the destination frame in a frame set, choose a value from the Target pop-up menu.
Adding Comment tags
You can use the Comment tag to add hidden comments to your Web page, such as publishing information
for future reference. To view the comments, you need to use Adobe GoLive or another Web page editor.
To add a Comment tag:
1 Drag the Comment icon from the Head tab of the Objects palette to the head section pane of your document window.
2 Choose Window > Inspector.
3 In the Comment Inspector, click inside the scrolling text box, and enter your comments.
52 CHAPTER 3
Setting Up Pages
Adding IsIndex tags
You can use the IsIndex tag to both inform Web browsers that your Web page can be examined using a keyword search and instruct the browsers to display a search text box for keywords when displaying your page.
Note: We don’t recommend using the IsIndex tag, because it’s obsolete.
To add an IsIndex tag:
1 Drag the IsIndex icon from the Head tab of the Objects palette to the head section pane of your document window.
2 Choose Window > Inspector.
3 In the IsIndex Inspector, for Prompt, enter the string that you want browsers to display with the search
text box.
Adding Keywords tags
You can use the Keywords tag to specify keywords for your Web page. Internet search engines use the information in the Keywords tag when constructing their indexes.
To add a Keywords tag:
1 Drag the Keywords icon from the Head tab of the Objects palette to the head section pane of your document window.
2 Choose Window > Inspector, and choose from the following options in the Keywords Inspector:
• To add a keyword, type in a keyword in the text box below the scrolling text box. Then click Add or
press Enter.
• To edit a keyword, select an existing keyword in the scrolling text box, edit the keyword in the text box
below the scrolling text box, and click Update to apply your edits.
• To delete a keyword, select an existing keyword in the scrolling text box, and click Delete.
• To change the order of keywords, select an existing keyword in the scrolling text box. To move the word
up in the list of keywords, click the up arrow. To move the word down in the list of keywords, click the
down arrow.
3 Select a word in your document that you want to use as a keyword. Choose Special > Add Keywords.
This command lets you add a keyword to the first Keywords tag in the head section pane of your
document window.
ADOBE GOLIVE 5.0 53
User Guide
Adding Link tags
You can use the Link tag to define relationships between your current Web page and other pages in your
Web site, or on the Internet. You can use the information in this tag to keep track of links between pages in
a large site.
Note: If you manage the pages in your site using the Adobe GoLive site window, you don’t need to use the
Link tag.
To add a Link tag:
1 Drag the Link icon from the Head tab of the Objects palette to the head section pane of your
document window.
2 Choose Window > Inspector.
3 In the Link Inspector, select a page that is referenced by the current page using the Point and Shoot
button ( ), or the Browse button.
4 For Title, enter the title of the referenced page.
5 For Name, enter the name of the link or anchor for the referenced page.
6 For URN, enter a Uniform Resource Number for the referenced page.
Note: Most Web browsers don’t use or support URNs.
7 For Methods, enter a list of HTTP methods supported by the referenced page.
Note: Most Web browsers don’t use or support the Methods attribute.
8 For REL, enter a description of the relationship between the current page, and the source or destination
URL. For example, if the current page references the home page, enter “follows.”
9 For REV, enter a description of the relationship between the source or destination URL, and the current
page. For example, if the home page is referenced by the current page, enter “precedes.”
54 CHAPTER 3
Setting Up Pages
Adding Meta tags
You can use the Meta tag to include information about your Web page in its head section, such as a description of the page content. For each page, Adobe GoLive automatically includes the following information
using Meta tags: file format (for example, text/HTML), character set used (for example, ISO-8859-1), and
file creator (for example, Adobe GoLive).
To add a Meta tag:
1 Drag the Meta icon from the Head tab of the Objects palette to the head section pane of your
document window.
2 Choose Window > Inspector.
3 From the pop-up menu in the Meta Inspector, choose one of the following:
• HTTP-Equivalent to simulate header information that accompanies the page when it’s sent by an HTTP
server to a browser.
• Name to define a non-HTTP Meta tag.
4 In the text box below the pop-up menu, enter the Meta tag’s title, such as “description.”
5 In the Content scrolling text box, enter the contents of the tag, such as a description of the page content.
Adding Refresh tags
You can use the Refresh tag 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 tag if your page contains
live material or if it’s part of a slide show that you are presenting to viewers.
You can easily create a slide show by adding a Refresh tag to each page that’s part of the slide show. For
example, you can add a Refresh tag to the first page of the slide show that replaces the first page with the
second page, and so on.
To add a Refresh tag:
1 Drag the Refresh icon from the Head tab of the Objects palette to the head section pane of your document window.
2 Choose Window > Inspector.
3 In the Refresh Inspector, for Delay, enter a value in seconds to specify an interval before the page is
refreshed or replaced with another page.
4 Do one of the following:
• Select Target This Document to refresh the current page.
• Select Target URL to replace the page with another page. Then select a replacement page using the Point
and Shoot button ( ), or the Browse button.
ADOBE GOLIVE 5.0 55
User Guide
Adding start and end tags for unknown elements
You can add start and end tags for unknown elements to the head section of your Web page to ensure compatibility with future versions of HTML and the Web browsers that support these versions.
To add a start and end tag for an unknown element:
1 Drag the Tag icon from the Head tab of the Objects palette to the head section pane of your
document window.
2 Choose Window > Inspector.
3 In the Tag Inspector, click the Tag tab.
4 For Tagname, enter the name of the new tag.
5 Click New to add a new attribute.
6 Enter the name of the new attribute in the left text box below the scrolling list.
7 Enter a value for the new attribute in the right text box below the scrolling list.
8 To remove an attribute, select the desired attribute in the scrolling list, and click Delete.
Adding head scripts
You can use the Script tag to add a 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. For information on JavaScript and the JavaScript Editor, see “Using JavaScript” on page 172.
To add a head script:
1 Click the triangle ( ) next to the Page icon ( ) in the upper left corner of the document window to
open the head section pane of your document window.
2 Choose Window > Objects.
3 In the Objects palette, click the Head tab (
).
4 Drag the Script icon from the Objects palette to the head section pane of your document window.
5 Choose Window > Inspector.
6 In the Head Script Inspector, for Name, enter a name for the script.
56 CHAPTER 3
Setting Up Pages
7 Select a browser from the Language pop-up menu. The JavaScript dialect for the browser appears in the
text box below the pop-up menu.
Select from Language pop-up menu.
8 Select Source. Then select a script file using the Point and Shoot button (
), or the Browse button.
9 Click Edit to open the JavaScript Editor and edit the script file.
Adding browser switch scripts
You can add a browser switch script to the head section of your Web page that detects the Web browser
loading the page and automatically redirects viewers to an alternate page based on their browser. For example, you can use this feature to have version 3.0 browsers switch to another page if the current page contains
features (such as actions, animations, and cascading style sheets) that can only be interpreted by version
4.0 browsers and higher.
Note: The browser switch script is ignored by version 2.0 browsers and Microsoft Internet Explorer 3.01
for Mac OS.
To add a browser switch script:
1 Click the triangle ( ) next to the Page icon ( ) in the upper left corner of the document window to
open the head section pane of your document window.
2 Choose Window > Objects.
3 In the Objects palette, click the Smart tab (
).
4 Drag the Browser Switch icon from the Objects palette to the head section pane.
5 Choose Window > Inspector.
ADOBE GOLIVE 5.0 57
User Guide
6 In the Browser Switch Inspector, select the browsers that support the features on your page:
• Select Auto to have Adobe GoLive determine browser compatibility. For example, if your page contains
features that can only be interpreted by version 4.0 browsers and higher, Adobe 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 Platform
menu, and select the supported browsers.
• If different browsers are supported in Windows and Mac OS, choose Windows from the Platform menu
and select the supported browsers for Windows. Then choose Mac OS from the 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 higher than version 5.0.
7 Select an alternate page using the Point and Shoot button (
), or the Browse button.
In the alternate page, make sure that you include a browser incompatibility message, such as “Please
download a newer browser version to view the original page.”
8 When you have finished, try viewing your page with an incompatible browser and check whether the
request is correctly rerouted.
59
Chapter 4: Page Layout Basics
About page layout
Adobe GoLive features a variety of basic tools for laying out Web pages, including a plain page, a layout grid
with layout text boxes, tables, and floating boxes. It’s important that you decide which tool to use before
you get started designing your page. With a plain page, you can add text and objects directly to the page,
and then position the text and objects by choosing alignment options. Using a layout grid and layout text
boxes, you can place text and objects precisely on the page with 1-pixel accuracy. With tables, you can control how text wraps on the page, or present spreadsheet data or other information in rows and columns.
Floating boxes let you overlap objects on the page in layers and create animations using the Adobe GoLive
Timeline Editor.
Adobe GoLive also features advanced page layout tools, including frames, stationery, and components.
Frames let you divide a page into multiple frames and display a different document in each frame. With
stationery, you can design a page, save the page as stationery, and create a new fully-editable page based on
the stationery. Using components, you can create page content that is frequently used in your site, such as
a navigation bar, save it as a component, and quickly add the component to your pages. To update all
instances of the component, you only need to edit a single source file. For information on using frames, see
“Using frames” on page 161. For information on using stationery, see “Using stationery” on page 167. For
information on using components, see “Using GoLive components” on page 168.
Creating text
Working with text in Adobe GoLive can be similar to working with text in most popular word-processing
applications. You can type directly in the document window, copy text from another application and paste
it into an Adobe GoLive document, import text from another application into a table, and make use of traditional formatting, spellchecking, and searching tools.
You can also add text to the page using layout text boxes on a layout grid and floating boxes. With layout
text boxes, you can easily rearrange the location of text on the page by moving or aligning the boxes. With
floating boxes, you can overlap text with other text or objects on the page, and create an animation of the
text. For more information on using layout text boxes, see “Using layout text boxes” on page 71. For information on using floating boxes, see “Setting up floating boxes” on page 142.
To add text directly to the page, a layout text box, table cell, or floating box:
Do one of the following:
• Click inside the document window, layout text box, table cell, or floating box to insert a cursor. Then type
the desired text.
60 CHAPTER 4
Page Layout Basics
• Select text in any application, and copy the text. Then paste it into the Adobe GoLive document window,
layout text box, table cell, or floating box.
Formatting text using physical and structural styles
Adobe GoLive provides a variety of ways to format text, including the use of physical and structural styles.
Using physical styles, you can make text stand out by formatting it as bold, italic, monospaced teletype, or
another common character style. With structural styles, you can classify text as a quotation, variable, keyboard entry, or other classification. Text with a structural style applied to it is formatted using the conventions of a cascading style sheet or Web browser.
To apply a physical style:
1 Drag to select the text that you want to format.
2 Do one of the following:
• Choose a style from the Type > Style menu. Choose Plain Text to remove all existing physical styles from
the selected text. Choose Blink to make the selected text flash. To preview text formatted with the Blink
style, you need to use Netscape Navigator.
• Click the Bold (
to the selected text.
), Italic (
), or Teletype button (
) on the toolbar to apply the respective style
Note: Older browsers may not support physical styles other than the basic set, such as plain, boldface, and
italic.
To apply a structural style:
1 Drag to select the text that you want to format.
2 Choose a style from the Type > Structure menu:
• Plain Structure to remove all existing structural styles from the selected text.
• Emphasis to italicize the selected text.
• Strong to make the selected text bold.
• Quotation to identify the selected text as content taken from another source. Most browsers display
quotations using a smaller font size and italics.
• Sample to identify the selected text as content taken from another source used as a sample to demonstrate
a given property. Most browsers display samples using a monospaced font.
• Definition to identify the selected text as a definition. Most browsers display definitions using plain text.
• Variable to identify the selected text as a variable name within a block of computer programming code.
Most browsers display variables using italics.
ADOBE GOLIVE 5.0 61
User Guide
• Code to identify the selected text as computer programming code. Most browsers display code using a
monospaced font.
• Keyboard to identify the selected text as text to be entered using the keyboard. Most browsers display
keyboard entries using a monospaced font.
Formatting paragraphs
Adobe GoLive provides a variety of ways to format paragraphs. Using paragraph styles, you can quickly format paragraphs as headings and subheadings. By clicking one of several buttons on the toolbar, you can
align paragraphs, indent paragraphs, 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.
To apply a paragraph style:
1 Click anywhere in the paragraph that you want to format.
2 Choose a format from the Type > Header menu or the Paragraph Format pop-up menu on the toolbar:
• Header 1 through Header 6 to apply one of the six hierarchical levels of headings to the paragraph.
• Address to apply the default HTML style for the author’s e-mail address to the paragraph.
• Preformatted to apply the default HTML style for code to the paragraph.
• None to reset the current paragraph to the default format selected in the browser’s preferences.
To align or indent a paragraph:
1 Click anywhere in the paragraph that you want to align or indent.
2 Do one of the following:
• Choose an alignment from the Type > Alignment menu. Choose Default Alignment to remove any
existing alignment from the paragraph. Choose Increase Block Indent or Decrease Block Indent to incrementally increase or decrease the space between the paragraph and its right and left margins.
62 CHAPTER 4
Page Layout Basics
• Click the Align Left (
), Align Center (
respective alignment to the paragraph.
), or Align Right button (
) on the toolbar to apply the
Unindented paragraph
Block indented paragraph
To format a nonhierarchical list:
1 Drag to select multiple paragraphs that you want to format as a nonhierarchical list.
2 Choose a list option from the Type > List menu:
• Default Numbered List to create a numbered list using Arabic numerals.
• Default Unnumbered List to create a bulleted list.
• Term to align the paragraphs to the left margin.
• Definition to indent the paragraphs.
You can also click the Numbered List (
) or Unnumbered List button (
create a default numbered or unnumbered list.
A
B
C
D
Buttons on the toolbar: A. Numbered List
B. Unnumbered List C. Increase List Level
D. Decrease List Level
) on the toolbar to quickly
ADOBE GOLIVE 5.0 63
User Guide
To format an item in a hierarchical list:
1 Click anywhere in the paragraph that you want to format as part of a hierarchical list.
2 Do one of the following:
• Choose a list level option from the Type > List menu. Choose Increase List Level or Decrease List Level
to move the paragraph one level down or up in the hierarchy, and assign a different leading character to the
paragraph. When you choose Decrease List Level for a paragraph that’s at the first level in the hierarchy,
Adobe GoLive resets the paragraph to a plain style.
• Click the Increase List Level (
) or Decrease List Level button (
respective list level option to the paragraph.
) on the toolbar to apply the
To suppress text wrapping:
1 Select the words in the paragraph that you want to keep on the same line.
2 Choose Type > Nobreak.
To insert a forced line break:
1 Do one of the following:
• Click in a paragraph at the location where you want the line to break, and press Shift+Enter.
• Choose Window > Objects. In the Objects palette, click the Basic tab ( ). Drag the Line Break icon from
the Objects palette to the location in the paragraph where you want the line to break.
2 To control how text breaks around an adjacent object, choose Window > Inspector. In the Line Break
Inspector, select Clear and choose an option from the pop-up menu:
• All to move the line after the break below the bottom of a right-aligned or left-aligned object spanning
the current line.
• Left or Right to move the line after the break below the bottom of a left-aligned or right-aligned object.
Note: The floating object must be left-aligned or right-aligned for the Clear attribute to work as expected in
an HTML text flow.
64 CHAPTER 4
Page Layout Basics
About font sizes across platforms
Adobe GoLive lets you apply a relative font size to text on your Web page. Text formatted with a relative
font size appears at a size related to the size set in the Web browser’s preferences. Most viewers have their
browsers configured to display text at 12 points. By applying a relative font size to text, you can have the
text appear at the same size as the size set in the browser’s preferences, or a smaller or larger size. For information on applying relative font sizes, see “Applying relative font sizes” on page 65.
In addition to the font size being relative to the browser’s preferences, fonts in Windows are about one step
larger than in Mac OS because of a difference in pixel resolution between platforms. Before publishing your
page on the Web, you should view your page at a variety of font sizes. Most browsers make it easy for you
to change font sizes when viewing your page. To make sure that your page can handle a range of font sizes,
you should follow these guidelines when designing your page:
• Set the default font size for displaying text in Adobe GoLive to 10 points. This reduces the chance of your
page being viewed using a smaller font size than what you used for the page layout. To set the default font
size in Adobe GoLive, choose Edit > Preferences, click the Encodings icon in the left pane of the Preferences
dialog box, click to select the default encoding, and click OK. Then choose Edit > Preferences, click the
Fonts icon in the left pane of the Preferences dialog box, click the symbol to the left of Western to expand
the list, select Proportional Font under Western, choose a size from the Size pop-up menu, and click OK.
• Don’t create a heading by formatting text using a paragraph style (such as Header 1 or Header 2) and a
relative font size. The relative font size can cause the heading to wrap and adversely affect your page layout.
• Keep in mind that a layout text box doesn’t decrease in size when the text appears at a smaller font size
than what you used for the page layout. As a result, extra space can appear between the text in the box and
objects below the box.
• Keep in mind that a layout text box increases 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 downwards on the page.
• To control the amount of space that appears between text and an image, place the text and image inside
a layout text box. (To have more control over the placement of the image, you can add a layout grid to the
box and then add the image to the grid.) 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.
• To control how text and an image are aligned on the page at any displayed font size, you can use a table.
Put the text in one table cell and the image in another cell. You can use a table by itself or on a layout grid.
• When specifying the font size for a style in a cascading style sheet, use pixels to have browsers for
Windows and Mac OS display the font size more consistently. If you are using the Fonts tab of the CSS
Selector Inspector to specify a font size for a style, choose Pixel in the Size pop-up menu.
ADOBE GOLIVE 5.0 65
User Guide
Applying relative font sizes
You can apply a relative font size to text on your Web page to set the size of the text in relation to the size
set in the Web browser’s preferences. For more information on relative font sizes, see “About font sizes
across platforms” on page 64.
To apply a relative font size to text:
1 Drag to select the text that you want to format.
2 Choose a relative font size from the Type > Size menu or the Font Size pop-up menu on the toolbar:
• When choosing a size between 1 and 7, choose size 1 to have the browser display text two font sizes
smaller than the size set in the browser’s preferences, size 2 to have the browser display text one font size
smaller, size 3 to have the browser display text at the same font size, size 4 to have the browser display text
one font size larger, and so on.
• When choosing a size between +1 and +7, choose size +1 to have the browser display text one font size
larger than the size of the surrounding text, size +2 to have the browser display text two font sizes larger,
and so on.
• When choosing a size between -1 and -7, choose size -1 to have the browser display text one font size
smaller than the size of the surrounding text, size -2 to have the browser display text two font sizes smaller,
and so on.
Applying font sets
You can apply a font set to text on your Web page. A font set consists of a list of one or more fonts. When
displaying text formatted with a font set, the viewer’s Web browser attempts to display the text in the first
font in the set, second in the second font in the set, and so on. If none of the fonts in the set are installed
on the viewer’s computer, the browser displays the text using its default font.
The Type > Font menu lists all font sets available for the current session. Global font sets appear in the
menu by default, while font sets used in individual pages or stored in the site window appear only when
their parent windows are open.
To apply a font set to text:
1 Drag to select the text that you want to format.
2 Choose a font set from the Type > Font menu.
In the Type > Font menu, global font sets and font sets from open pages are listed below the first separator.
Font sets from open site windows are listed below the second separator.
To add or edit a font set:
1 Choose Type > Font > Edit Font Sets.
66 CHAPTER 4
Page Layout Basics
2 Do one of the following:
• To add a global font set that you can use in any page, choose Default Font Sets from the pop-up menu in
the upper left corner of the Font Sets dialog box (Windows) or click the Default icon in the leftmost pane
of the Font Set Editor dialog box (Mac OS).
• To add a font set to use on the current page only, choose Page Font Sets from the pop-up menu in the
upper left corner of the Font Sets dialog box (Windows) or click the Page icon in the leftmost pane of the
Font Set Editor dialog box (Mac OS).
3 Click New below the Font Sets list to add a new font set to the list.
4 Do one of the following to add a new font to the font set that you’ve just created:
• If you know the font isn’t installed on your system, enter the name of the font in the Font Names list.
• If the font is installed on your system, click New below the Font Names list, and choose a font from the
pop-up menu below the list.
Adobe GoLive names the font set using the name of the first font in the set. To change the name of the font
set, you need to first add the font to the Fontsets tab of a site window and then change the name of the font
using the Font Set Inspector. For information on using the Font Set Inspector, see “Using site font sets” on
page 416.
5 To add another font to the font set, click New below the Font Names list. Then enter the name of the font
in the Font Names list, or choose a font from the pop-up menu below the list. Repeat this step until you
have added all desired fonts to the font set.
6 To change a font within a font set, select the font that you want to edit in the Font Names list. Then edit
the name of the font, or choose a new font from the pop-up menu below the list.
If you change the first font in a font set, the font set is renamed accordingly in the Font Sets list.
7 To delete a font from a font set, select the font that you want to delete in the Font Names list,
and click Delete.
8 Click OK.
ADOBE GOLIVE 5.0 67
User Guide
Spellchecking text
Spellchecking text using Adobe GoLive is similar to spellchecking text using a word-processing application.
Adobe GoLive checks each Web page for questionable words and provides suggestions for changes. You can
accept a suggestion, ignore the suggestions, or learn the word by adding it to your personal dictionary. In
addition, Adobe GoLive automatically ignores the HTML when spellchecking each page. It also makes it
easy for you to spellcheck a single page or an entire Web site.
To spellcheck a page or site:
1 Do one of the following:
• If you are spellchecking a single page, select the document window, and click the Layout Editor tab or
HTML Source Editor tab.
• If you are spellchecking all of the pages in a site, select the site window.
2 Choose Edit > Spellchecking (Windows) or Edit > Check Spelling (Mac OS).
3 Choose a set of spelling rules from the Language pop-up menu.
4 If you are spellchecking a single page, select From Top to start spellchecking the page at its beginning.
Otherwise, Adobe GoLive starts spellchecking the page at the text-insertion point.
5 Click the symbol to the left of More Options, and select the desired spellchecking options.
6 Click Start to start spellchecking the current page or the first page in your site.
Adobe GoLive displays the first questionable word, accompanied by a description of the problem and
suggestions for changes. If you are spellchecking a site, it opens the first page in the site that contains a
questionable word.
7 To change the questioned word, do one of the following:
• If you are satisfied with the first suggestion, click Change.
• If you aren’t satisfied with the first suggestion, click another suggestion in the Suggestions list box, or edit
the questioned word. Then click Change.
8 To accept the questioned word, do one of the following:
• Click Ignore to accept a single occurrence of the word. At the next occurrence of the word, Adobe GoLive
prompts you to change it again.
• Click Ignore All to accept the questioned word for the current session. Adobe GoLive ignores all occurrences of the word for the current session.
• Click Learn to add the questioned word to your personal dictionary. Adobe GoLive recognizes the word
as correct in the future. You can edit your personal dictionary in the Spell Checker preferences.
9 To delete the questioned word from the page, click Delete.
68 CHAPTER 4
Page Layout Basics
10 If you are spellchecking a site, click Next File to quit spellchecking the current page and start
spellchecking the next page in the site.
11 To stop spellchecking at any time, click Stop.
12 Click the close box to close the Check Spelling window.
Editing personal dictionaries
When Adobe GoLive questions a word during spellchecking, you can add the questionable word to your
personal dictionary and have Adobe GoLive recognize the word as correct in the future. You can use the
Spell Checker preferences to add words in advance to your personal dictionary, as well as edit and delete
words in the dictionary. In addition, the Spell Checker preferences lets you create a personal dictionary for
each language that you have installed. (To use additional languages, you must install them using the custom
install option on the Adobe GoLive CD.).
To edit a personal dictionary:
1 Choose Edit > Preferences.
2 Click Spell Checker in the left pane of the Preferences dialog box.
3 Choose a set of spelling rules in the Personal Dictionary pop-up menu in the Spell Checker Preferences
dialog box.
4 To edit a word in the personal dictionary, click to select the desired word. In the text box below the
scrolling window, enter a new word and press Enter.
5 To add a new word to the personal dictionary, click New, enter a new word in the text box below the
scrolling window, and press Enter.
ADOBE GOLIVE 5.0 69
User Guide
6 To delete a word from the personal dictionary, click to select the desired word, and click Delete.
7 Click OK.
Adding spacers
You can use spacers to create space between text and objects on your Web page. Spacers are useful when
you are laying out your page without the use of a layout grid, tables, or floating boxes. When you are only
using a plain page, spacers can give you more control over your page layout.
Important: Spacers are based on a Netscape-specific tag that is recognized by Netscape Navigator 3.0 and later.
They are ignored by Microsoft Internet Explorer.
Horizontal spacers used to position text
To insert a spacer:
1 Choose Window > Objects.
2 In the Objects palette, click the Basic tab (
).
3 Drag the Horizontal Spacer icon from the Objects palette to the desired location in your
document window.
4 Choose Window > Inspector.
5 In the Spacer Inspector, choose a spacer type:
• Horizontal to create a spacer that can be resized horizontally.
• Vertical to create a spacer that can be resized vertically.
• Block to create a spacer that can be resized both horizontally and vertically.
6 To resize the spacer, do one of the following:
• Enter the desired measurement for Width or Height in the Spacer Inspector, and press Enter.
• Select the spacer, and drag its handles.
Drag handle to resize spacer
7 If you have inserted a block spacer, select it and choose an option from the Alignment pop-up menu to
align the spacer with surrounding text.
70 CHAPTER 4
Page Layout Basics
Using the layout grid
When you add text and objects directly to your Web page, the page layout reflows according to your viewer’s
Web browser settings. To make sure that your page appears as you intended, you can place text and objects
on a layout grid. When you add a layout grid to a page, Adobe GoLive actually generates tables in the HTML
source code for the page. It uses these tables to place the text and objects on the page with 1-pixel accuracy.
Important: If you use a layout grid to design your page, your viewer’s browser must support tables to display
the page accurately. Most browsers now support tables. Obsolete browsers, such as Netscape Navigator 2.0, have
problems displaying some tables accurately.
To insert a layout grid:
1 Choose Window > Objects.
2 In the Objects palette, click the Basic tab (
).
3 Drag the Layout Grid icon from the Objects palette to your document window, or double-click the icon
in the Objects palette.
Note: Adobe GoLive inserts a <SPACER> tag in the HTML table that constitutes the layout grid. This tag
resolves a bug in Netscape browsers that causes a rounding of table widths. Microsoft Internet Explorer ignores
this tag. As a result, your HTML code is displayed properly by all browsers.
4 Choose Window > Inspector.
5 To resize the layout grid, do one of the following:
• Click the edge of the grid to display the resize handles, and drag its handles. The new width and height
of the grid appears in the Layout Grid Inspector.
To resize layout grid, select handle and drag in
desired direction.
• In the Layout Grid Inspector, enter the desired measurements for Width and Height.
ADOBE GOLIVE 5.0 71
User Guide
• 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 minimize page scrolling in a viewer’s browser, make sure that the final width of the layout grid is no
larger than 580 pixels, the width of a standard 14-inch monitor.
6 To further customize the layout grid, do any of the following in the Layout Grid Inspector:
• To change the spacing between the horizontal or vertical lines of the grid, enter values in pixels for Horizontal or Vertical.
• To make objects snap to the horizontal or vertical lines of the grid, select Snap for Horizontal or Vertical.
Deselect this option if you want to position objects freely horizontally or vertically on the grid.
To move a selected object in increments equivalent to the spacing between the grid lines, select Snap for
Horizontal and Vertical in the Layout Grid Inspector, and press the arrow keys. To move a selected object
pixel by pixel on the grid, deselect Snap for Horizontal and Vertical, and press the arrow keys.
• To display the horizontal or vertical lines of the grid, select Visible for Horizontal or Vertical. Deselect this
option to hide the horizontal or vertical grid lines.
To speed up the display when viewing your page layout in Layout view, hide the lines of the grid. The grid
is still active when its lines are hidden.
• To set the position of the grid in relation to the document window, choose an alignment from the Align
pop-up menu in the Layout Grid Inspector. Choose Default to use the settings of the surrounding HTML
container to align the grid.
Note: If you want to center the grid in relation to the document window, select the grid and click the Align
Center button (
) on the toolbar.
• To apply a background color to the grid, select Background Color. Click inside the color field for Background Color to select it. Then select a color in the Color palette. For instructions on using the Color
palette, see “Working with color” on page 77.
Using layout text boxes
When using a layout grid, you can position text on the grid using layout text boxes. Layout text boxes let
you easily arrange the location of text on the page by moving or aligning the boxes. As you enter text into
a layout text box, the box by default grows to accommodate the text as needed. This can result in objects
below the box being moved downward on the page.
72 CHAPTER 4
Page Layout Basics
To protect your page layout as you work within Adobe GoLive, you can lock the dimensions of a layout text
box, so that it doesn’t automatically adjust its size in relation to its content. When the dimensions of a
box are locked, the content overflows within the box. You need to increase the size of the box to view all
of its content. To resize a locked box, you can select it and drag its handles, as you would with a box
that isn’t locked.
Note: Locking the dimensions of a layout text box on your page doesn’t affect how the page appears in a Web
browser. In a browser, the layout text box automatically adjusts its size in relation to its content.
To add a layout text box to a layout grid:
1 Add a layout grid to the page, as described in “Using the layout grid” on page 70.
2 If necessary, choose Window > Objects, and click the Basic tab (
) of the Objects palette.
3 Drag the Layout Text Box icon from the Objects palette to the layout grid on the page, or select the grid
and double-click the Layout Text Box icon in the Objects palette.
4 To reposition the layout text box on the layout grid, select it and drag it. To resize the box, select it and
drag its handles. For more information on repositioning and resizing objects, see “Repositioning, resizing,
and grouping objects” on page 73.
5 Add text to the layout text box, as described in “Creating text” on page 59.
6 To further customize the layout text box, choose Window > Inspector, and do any of the following in the
Layout Text Box Inspector:
• To apply a background color to the box, select Color. Click inside the color field to select it. Then select
a color in the Color palette. For instructions on using the Color palette, see “Working with color” on
page 77.
Note: When you apply a background color to a layout text box and view the box in the Adobe GoLive Preview
or Netscape Navigator, the color only appears in a box that contains text or other content. To workaround this
problem, you can add a nonbreaking space to the empty box. To add a nonbreaking space, click inside the box
and press Shift+spacebar (Windows) or Option+spacebar (Mac OS).
• To lock the dimensions of the box, select Allow Content Overflow. Deselect this option if you want the
box to grow to accommodate the text as needed.
Adding horizontal lines
You can add horizontal lines, also called rules, to your Web page to visually separate content on your page.
For example, you may want to place a horizontal line between the title and body of your page.
To add a horizontal line:
1 Choose Window > Objects.
2 In the Objects palette, click the Basic tab (
).
ADOBE GOLIVE 5.0 73
User Guide
3 Drag the Line icon from the Objects palette to your document window, or double-click the icon in the
Objects palette.
4 Choose Window > Inspector.
5 To change the style of the line, click a button for Style in the Line Inspector: left button to apply a solid
style, or right button to apply a three-dimensional style.
6 To set the width of the line, choose a measurement for width from the Width pop-up menu in the Line
Inspector. Choose Full to set the width of the line to the width of the layout text box or document window.
Choose Percent to set the width of the line in relation to the layout text box or document window. If you
choose Percent or Pixels, enter the desired measurement for Width.
7 To set the height of the line, do one of the following:
• Select the line, and drag its handle to adjust its height as needed. The new height of the line appears in
the Line Inspector.
• In the Line Inspector, enter the desired measurement in pixels for Height.
Drag handle to resize line
8 To align the line in relation to the layout text box, layout grid, or document window, click a button for
Alignment in the Line Inspector: left button to apply a left alignment, center button to apply a center alignment, or right button to apply a right alignment. (The buttons are dimmed if the line is full width.)
Repositioning, resizing, and grouping objects
Adobe GoLive provides multiple ways for you to position objects precisely on your Web page and size them
to meet your page layout requirements. By dragging, you can reposition and resize objects. Using the toolbar, you can reposition, resize, and group objects. The Transform palette provides all of these options in
addition to allowing you to change the stacking order of hot spots on an image map or tracks in the QuickTime Movie Viewer that overlap each other.
You need to first place some objects on a layout grid before you can reposition them by dragging, entering
values on the toolbar, or using the Transform palette. In addition, you can only group objects that are
placed on a layout grid. A benefit to grouping objects is that you can then move them on the layout grid as
a single unit, thus ensuring that the spacing between them is kept intact.
74 CHAPTER 4
Page Layout Basics
To reposition an object:
1 Click to select the object that you want to reposition.
2 Do one of the following:
• Drag the object to the desired position.
• On the toolbar, enter values in pixels for Horizontal Position and Vertical Position.
• Choose Window > Transform. In the Transform palette, under Position, enter a value in pixels in the left
text box for the horizontal position. Enter a value in pixels in the right text box for the vertical position.
To resize an object:
1 Click to select the object that you want to resize.
2 Do one of the following:
• Drag one of the object’s handles.
Note: To resize the object proportionally, Shift-drag one of the object’s corner handles. To preview as you
resize, Ctrl-drag one of the object’s handles. To preview as you resize and resize the object proportionally,
Ctrl-Shift-drag one of the object’s corner handles.
Nonvisual and visual resizing
• On the toolbar, enter values in pixels for Width and Height.
• Choose Window > Transform. In the Transform palette, select Constrain Proportions if you want to
resize the object proportionally. Under Size, enter a value in pixels in the left text box for the width or in
the right text box for the height.
To group objects:
1 Select the objects on the layout grid that you want to group. Click to select the first object, and then Shiftclick to select each additional object. (You can’t group floating boxes.)
2 Do one of the following:
• Click the Group button on the toolbar.
• Choose Window > Transform. In the Transform palette, under Grouping, click the Group button (
on the left.
)
ADOBE GOLIVE 5.0 75
User Guide
To ungroup objects:
1 Click to select the group of objects that you want to ungroup.
2 Do one of the following:
• Click the Ungroup button on the toolbar.
• Choose Window > Transform. In the Transform palette, under Grouping, click the Ungroup button
(
) on the right.
To change the stacking order of objects:
1 Select the object that you want to change in stacking order. (You can change the stacking order of hot
spots on image maps or tracks in the QuickTime Movie Viewer that overlap each other. You can’t change
the stacking order of floating boxes.)
2 Choose Window > Transform.
3 In the Transform palette, under Z-Order, click the Bring to Front button (
) to bring the selected
object to the front, or click the Bring to Back button (
) to bring the selected object to the back.
Aligning and distributing objects
Adobe GoLive makes it easy for you to arrange objects precisely on your Web page. You can use the toolbar
or Align palette to align objects in relation to their parent, such as the document window or a layout grid.
In addition, you can use the Align palette to both align and distribute objects in relation to each other. You
need to first place some objects on a layout grid before you can align or distribute them in relation to each
other using the Align palette.
To align an object or group of objects to its parent:
1 Select the object or group of objects that you want to align.
2 Do one of the following:
• On the toolbar, click a horizontal alignment button: the Align Left (
), Align Center (
), or Align
Right (
) button. Or, click a vertical alignment button: Align Bottom (
), Align Center (
), or
Align Top (
) button.
• Choose Window > Align. In the Align palette, under Align to Parent, click a horizontal or vertical alignment button. (The buttons in the Align palette are the same as those on the toolbar.)
Note: Because Adobe GoLive does not move a selected object if another object is in the way, different alignment buttons are dimmed (inactive) depending on the objects selected.
To align objects in relation to each other:
1 Select the objects that you want to align in relation to each other. (Click to select the first object, and then
Shift-click to select each additional object.)
76 CHAPTER 4
Page Layout Basics
2 Choose Window > Align.
3 In the Align palette, under Align Objects, click a horizontal alignment button to align objects horizontally:
• Align Left button (
) to align the objects along the left vertical axis of the object furthest left.
• Align Center button (
)to align the objects along the vertical center axis between them.
• Align Right button (
) to align the objects along the right vertical axis of the object furthest right.
4 In the Align palette, under Align Objects, click a vertical alignment button to align objects vertically:
• Align Top button (
) to align the objects along the top horizontal axis of the highest object.
• Align Center button (
• Align Bottom button (
) to align the objects along the horizontal center axis between them.
) to align the objects along the bottom horizontal axis of the lowest object.
To distribute objects in relation to each other:
1 Select three or more objects that you want to distribute in relation to each other. (Click to select the first
object, and then Shift-click to select each additional object.)
2 Choose Window > Align.
3 In the Align palette, under Distribute Objects, click a horizontal distribution button to distribute objects
horizontally:
• Relative to Left Edges button (
) to distribute objects relative to their left vertical axes.
• Relative to Vertical Centers button (
• Relative to Right Edges button (
) to distribute objects relative to their vertical center axes.
) to distribute objects relative to their right vertical axes.
4 In the Align palette, under Distribute Objects, click a vertical distribution button to distribute
objects vertically:
• Relative to Tops button (
) to distribute objects relative to their top horizontal axes.
• Relative to Horizontal Centers button (
• Relative to Bottoms button (
) to distribute objects relative to their horizontal center axes.
) to distribute objects relative to their bottom horizontal axes.
5 In the Align palette, under Distribute Spacing, click a button to distribute objects so that they are equally
spaced in relation to each other:
• Distribute Spacing Horizontally button (
right vertical axes are equally spaced.
• Distribute Spacing Vertically button (
horizontal axes are equally spaced.
) to distribute objects horizontally so that their left and
) to distribute objects vertically so that their top and bottom
ADOBE GOLIVE 5.0 77
User Guide
Working with frequently used objects
Adobe GoLive makes it easy for you to place frequently used objects throughout your Web site. After creating the objects that you want to reuse, you can drag the objects to the Custom tab of the Objects palette.
To place the objects again on the same Web page or another page, you can drag a thumbnail representation
of the objects from the Objects palette to your document window. Examples of objects that you can drag
to the Custom tab of the Objects palette are layout text boxes, tables, and images.
Using the Custom tab of the Objects palette to place frequently used objects, you can freely edit the objects
on any page without affecting the objects on other pages. If you prefer to edit the objects only once and
have Adobe GoLive automatically update all instances of the objects in your Web site, you should use components instead. For more information on components, see “Using GoLive components” on page 168.
To store and place frequently used objects:
1 Choose Window > Objects.
2 In the Objects palette, click the Custom tab (
).
3 In your document window, click to select the objects that you want to store. (To select multiple objects,
click to select the first object, and then Shift-click to select each additional object.)
4 Drag the selected objects from the document window to the Objects palette.
5 To name the selected objects, double-click the thumbnail representation of the objects in the Objects
palette. In the Palette Item Editor, enter a name and click OK.
The name of the objects appears in the Objects palette.
6 To place the selected objects in the same document or another document, drag the thumbnail representation of the objects from the Objects palette to your document window.
7 To delete the objects from the Custom tab, select the thumbnail representation of the objects, and
press Delete.
Working with color
You can color text and objects in your Web pages using the Color palette. The Color palette actually contains several individual palettes, including RGB, CMYK, and Web-safe colors which appear properly in any
Web browser. First, you choose a color from the Color palette, and then you add the color to text and
objects on your page. To make it easy for you to match a color already used on your page, you can also
extract color from a region below the pointer, even from an image on your page. In addition, if you are
using Adobe GoLive for Mac OS, you can set options and preferences that allow you and your viewers to
view JPEG images without any artifacts.
78 CHAPTER 4
Page Layout Basics
To open the Color palette:
Do one of the following:
• Choose Window > Color.
• Click the Text Color field on the toolbar.
• Click any color field in the Inspector.
To choose a color from the Color palette:
1 Open the Color palette.
2 Click the triangle in the upper right corner of the Color palette to display the Color palette menu, and
choose the desired button. Or, click one of the following buttons in the Color palette:
• Gray Slider button (
desired shade of gray.
) to use a single slider control to adjust the percentage of black to create the
• RGB Sliders button (
) to use three slider controls to adjust the percentage of the red, green, and blue
portions of the spectrum.
• CMYK Sliders button (
) to use four slider controls to adjust the percentage of the cyan, magenta,
yellow, and black portions of the spectrum.
• HSB Wheel button ( ) to access the entire color spectrum currently supported by your video hardware.
To select a color, click a location in the color wheel, and then adjust the brightness using the brightness
slider control.
• HSV Picker button ( ) to set the hue, saturation, and value (brightness) independently. You set the hue
in the outer ring, the saturation on the horizontal axis of the square, and the value on the vertical axis of
the square.
• Palettes button ( ) to display various fixed system color spaces up to a maximum of 256 colors. To select
a color, choose a set of colors from the pop-up menu, and click a swatch. The pop-up menu lets you limit
your choice of colors, capture the current desktop colors, or build a custom color palette by copying colors
from objects on the desktop or document window.
• Web Color List button ( ) to display 216 Web-safe colors across platforms. By limiting the number of
colors to 216, you can ensure that your page looks good when viewed on systems set to 256 display colors,
such as standard PCs. The Value text box shows the Red, Green, and Blue hexadecimal value sent to the
browser. To select a color, click a swatch, or scroll through the list and click a color in the list.
• Web Name List button ( ) to display a choice of browser-callable colors. These colors are not all Websafe across platforms. The Name and Value text boxes show the clear-text name and the HTML control code
sent to the browser. To select a color, click a color in the list.
ADOBE GOLIVE 5.0 79
User Guide
• PMColorPickerModule button ( ) to display the colors that you have collected in the Colors tab of the
site window. (For more information on the Colors tab of the site window, see “The External, Colors, Fontsets, and Custom tabs” on page 29.) The colors are only available if the site window is open. To select a
color, click a color in the list.
3 To display color values using percentages in the Color palette, choose Percent Values from the Color
palette menu. Deselect this option if you want to display color values using the 256 numerical scale.
4 Select a color from the individual palette of your choice.
To color text or an object:
1 Select the text or object in the document window that you want to color.
2 If you are coloring selected text in the document window, click the Text Color field on the toolbar to
select it. Otherwise, click a color field in the Inspector to select it.
3 In the Color palette, select a color from the individual palette of your choice.
Adobe GoLive automatically applies the color to the Text Color field on the toolbar or the color field in the
Inspector, activates the color option for the color field in the Inspector if needed, and applies the color to
your current selection in the work area.
To color selected text or an object, you can also drag a color from the preview pane of the Color palette
to the selected text in the document window, the Text Color field on the toolbar, or a color field in
the Inspector.
To extract a color from a region below the pointer:
1 Choose Window > Color.
2 In the Color palette, click the Palettes (
) or Web Color List (
) button.
3 Move the pointer to any swatch in the Color palette, so that the pointer changes to an eyedropper. Then
drag to the color in the document window that you want to extract. The extracted color appears in the
preview pane of the Color palette.
4 To color text or an object using the extracted color, select the text or object that you want to color. Then
drag the color from the preview pane of the Color palette to the selected text in the document window, the
Text Color field on the toolbar, or a color field in the Inspector.
Using ColorSync 2.5 (Mac OS)
Adobe GoLive supports ColorSync™ 2.5 color matching technology from Apple Computer. ColorSync 2.5
reconciles the color spaces of JPEG images and computer monitors, allowing both you and your viewers to
view JPEG images without any artifacts (stray pixels). Using ColorSync, JPEG images are displayed using
ICC-compatible color profiles that are either embedded in the image itself or included as stand-alone files.
80 CHAPTER 4
Page Layout Basics
To choose ColorSync options:
1 For images, do one of the following:
• To set options for a single JPEG image, select the image in the document window. Choose Window >
Inspector. In the Image Inspector, click the Link tab.
• To set options for all JPEG images within the current document, click the Page icon ( ) in the upper
left corner of the document window. Choose Window > Inspector. In the Page Inspector, click
the ColorSync tab.
2 For profiles, do one of the following in the Image Inspector or Page Inspector:
• Click Default to use a standard RGB profile built into Adobe GoLive for the current image.
• Click Profile. Select the desired profile using the Point and Shoot button (
), or the Browse button.
Note: References to external color profiles are not monitored by the Adobe GoLive built-in link parser. After
uploading your site to your ISP’s FTP server, check that the stand-alone ICC color profile has been included in
the upload.
• Click None to deactivate ColorSync support for a selected image.
The Embedded text box displays the name of an embedded color profile in a selected JPEG image. Embedding color profiles in JPEG images is a feature supported by the most recent versions of popular imaging
applications, such as Adobe Photoshop.
Note: Currently, embedded color profiles in JPEG images are only supported by Microsoft Internet Explorer
version 4.01 and later.
To set ColorSync preferences:
1 Choose Edit > Preferences.
2 Click the ColorSync icon in the left panel of the Preferences dialog box.
3 Select any of the following options:
• Display Images with ColorSync to activate ColorSync support in Adobe GoLive.
• Use Default RGB Profile if Not Specified to use a built-in default color profile when ColorSync is activated
but no profile is specified for an image.
4 Click OK.
Adding hypertext links
After you’ve added content to your Web page, you need to provide viewers with a way to move from that
page to other locations in your Web site. With Adobe GoLive, you can easily create links that originate from
text on your page and take users to other pages in your site, locations on the same page as the link (called
anchors), other pages on the Internet, or non-Web resources such as FTP servers, newsgroups, and e-mail
addresses.
ADOBE GOLIVE 5.0 81
User Guide
As an alternative to creating hypertext links, you can create links that originate from images or parts of
images (called image maps). For information on creating links from images, see “Additional image
options” on page 132 and “Creating image maps” on page 135. You can also create dynamic events that are
triggered by mouse actions or create links that are triggered by actions other than mouse clicks. For information on creating dynamic events or links using actions, see “Setting up actions” on page 245.
To create a hypertext link:
1 Select the text that you want to use as the origin of the link.
2 Do one of the following:
• Choose Window > Inspector. In the Text Inspector, click the Link tab. Click the New Link button (
)
on the toolbar. To specify a link destination, select a file using the Point and Shoot button ( ), or the
Browse button. You can also enter a URL or e-mail address in the URL text box. When doing so, you need
to include “http://” at the beginning of the URL and “mailto:” at the beginning of the e-mail address in the
URL text box.
• Ctrl-drag (Windows) or Command-drag (Mac OS) from the selected text to the desired link destination
within the site window. The link destination can be an HTML file in the Files tab of the site window, or a
URL or e-mail address in the Externals tab of the site window. For information on storing URLs and e-mail
addresses in the Externals tab of the site window, see “Using site URLs and e-mail addresses” on page 411.
Select text that you want to link. Then Ctrl-drag (Windows) or
Command-drag (Mac OS) to link destination.
82 CHAPTER 4
Page Layout Basics
• In Mac OS, open the page to which you want the selected text to link. Drag the Page icon (
ment window of the link destination to the selected text.
) in the docu-
3 If you haven’t done so already, choose Window > Inspector, and click the Link tab of the Text Inspector.
4 If you want your link destination to appear in a frame or new Web browser window, choose an option
from the Target pop-up menu in the Text Inspector.
5 For Title, enter a description of the link for your own reference.
To remove a hypertext link:
Select the text that’s the origin of the link. Then click the Remove Link button (
) on the toolbar.
Using anchors
An anchor is a specified location on a Web page that serves as the destination of a link. Adobe GoLive provides you with two ways to create an anchor. You can begin by specifying the origin of the link and then the
location of the anchor. Or, you can begin by specifying the location of the anchor and then the origin of
the link. Either way, you should use these guidelines when creating anchors:
• You shouldn’t place anchors directly on a layout grid. Instead, place anchors in the flow of HTML text, a
layout text box, or a table cell. When you add an anchor to a layout text box or table cell, make sure that the
box or cell has other contents, otherwise the anchor will not be recognized by Netscape Navigator. To
workaround this problem, you can add a nonbreaking space to the empty box or cell. To add a nonbreaking
space, click inside the box or cell, and press Shift+spacebar (Windows) or Option+spacebar (Mac OS).
• You should place anchors near the left margin of the page, so that the anchors work more consistently
across browsers.
• You won’t be able to preview certain link and anchor combinations in the Adobe GoLive document
window’s Preview.
• You should test links to anchors extensively before publishing your Web site. Anchors don’t always work
the same way in Netscape Navigator and Microsoft Internet Explorer.
To create an anchor and a link to it:
Do one of the following:
• Choose File > Save to save your page. Select the text that you want to use as the origin of the link. Click
the New Link button (
) on the toolbar. Choose Window > Inspector. In the Text Inspector, click
the Link tab. Drag from the Point and Shoot button ( ) in the Text Inspector to the location on the
page where you want the anchor. Adobe GoLive creates an anchor at the location where you release the
mouse button.
ADOBE GOLIVE 5.0 83
User Guide
• Choose Window > Objects. In the Objects palette, click the Basic tab ( ). Drag the Anchor icon from
the Objects palette to the location on the page where you want the anchor. Choose Window > Inspector.
In the Anchor Inspector, enter a unique name for the anchor. In the document window, select the text that
you want to use as the origin of the link. Click the New Link button on the toolbar. In the Text Inspector,
click the Link tab. Drag from the Point and Shoot button in the Text Inspector to the anchor on the page.
Adding date and time stamps
You can add a date and time stamp to your Web page, so that viewers see when you last updated your page.
In Adobe GoLive, you can add a date and time stamp using the Modified Date icon in the Objects palette.
First, you use the icon to add a date stamp, and then you use the icon to add a time stamp. Adobe GoLive
reads the current date and time from your computer’s built-in, real-time clock and writes the result in a
custom tag. It then updates the date and time information dynamically whenever you save the page.
To insert a date or time stamp:
1 If you want descriptive text before the date or time stamp (for example, “Last revised:”), type the text in
your document window.
2 Choose Window > Objects.
3 In the Objects palette, click the Smart tab (
).
4 Drag the Modified Date icon from the Objects palette to the document window, or double-click the icon
in the Objects palette.
5 Choose Window > Inspector.
6 In the Modified Date Inspector, choose a country from the Format menu to view the date and time
formats for the specific country.
7 Select a format for the date or time stamp that you have added to your page.
8 Choose File > Save. The date or time stamp displays the exact date or time when you used
the Save command.
Creating URL pop-up menus
You can add a URL pop-up menu to your Web page to provide viewers with a menu of links to other locations within your own Web site or on the Internet. In Adobe GoLive, you use the URL Pop-up icon in the
Objects palette to add a URL pop-up menu, and then specify the menu items using the URL Pop-up
Inspector.
84 CHAPTER 4
Page Layout Basics
To insert a URL pop-up menu:
1 Choose Window > Objects.
2 In the Objects palette, click the Smart tab (
).
3 Drag the URL Popup icon from the Objects palette to your document window.
4 Choose Window > Inspector.
5 To create a new menu item, click New in the URL Popup Inspector. Enter a label for the menu item in
the Label text box. Specify a URL for the menu item by selecting a file using the Point and Shoot button
( ), or the Browse button. To make the URL appear in a frame set, choose a frame from the Target
pop-up menu.
6 To duplicate a menu item, select an item in the scrolling window in the URL Popup Inspector,
and click Duplicate.
7 To delete a menu item, select an item in the scrolling window in the URL Popup Inspector,
and click Delete.
8 To change the position of a menu item in the pop-up menu, select an item in the scrolling window in the
URL Popup Inspector. Click the up or down arrow button next to the horizontal scroll bar to move the item
to the desired position.
9 To verify that the links in the URL pop-up menu work properly, preview your page using a Web browser.
Reverting and restoring changes to pages
When designing your Web page, you can use the History palette to revert to a previous state of the page.
The History palette records the changes that you make to the page in Layout view or Source view. Each time
that you make a change to the page, the new state of the page is added to the History palette. You can revert
to a previous state of the page by selecting any state in the History palette. Once you’ve reverted to a previous
state, you can restore changes that you made to that state by choosing a newer state in the History palette.
The History palette lists up to 20 states of the page in Layout view or Source view. The content of the
History palette is cleared when you switch from the Layout view or Source view to another view in the same
document. However, the content is adjusted when you switch between open documents that are in the
same view, either Layout view or Source view.
As an alternative to using the History palette, you can undo a change that you’ve made to a page by
choosing Edit > Undo. To restore the change that you made to the page before choosing the Undo
command, you can choose Edit > Redo. Adobe GoLive lets you undo and restore multiple changes using the Edit
menu. At any time, you can also revert to the state of your page when you last saved it by choosing File > Revert
to Saved.
To revert to a previous state of a document:
1 Choose Window > History.
ADOBE GOLIVE 5.0 85
User Guide
The History palette lists the previous states of the document, the oldest state at the top of the list and the
newest state at the bottom.
2 In the History palette, click the state of the document to which you want to revert.
3 To restore the changes that you made to that document state, choose a newer state in the History palette.
(The newer states of the document are dimmed.)
In Mac OS, press Shift+Command+Z to restore the changes that you made to a document state incrementally. To discard all of the changes to the document listed in the History palette, press
Option+Command+Z, and then click Discard.
Previewing pages
You can preview your Web pages and test your links directly in Adobe GoLive. You can preview QuickTime
movies, animated GIFs, or any other plug-in media items that Adobe GoLive supports. The preview
approximates what your page looks like when it’s finally published on the Web.
In addition to previewing your page in Adobe 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, Macromedia Shockwave animations, or other items for which
Adobe GoLive doesn’t provide native support. If desired, you can launch a browser from within Adobe
GoLive by first adding browsers to the Show in Browser menu.
Note: If you are using Adobe GoLive for Windows, you need to install Microsoft Internet Explorer before you
can preview pages in Adobe GoLive.
To preview your page using Adobe GoLive:
1 Make sure that Preview Mode is activated in the Modules Preferences.
To activate the Preview Mode, choose Edit > Preferences, click Modules in the left pane of the Preferences
dialog box, select Preview Mode, and click OK.
2 Click the Layout Preview tab in the document window.
To check your page layout, scroll the document window. To test your links, click all of the hot spots on your
page. (In Mac OS, Adobe GoLive opens each referenced page in its own window.)
You can also preview your page in Layout view or Layout Preview using the Adobe GoLive View
Controller. Choose Window > View Controller. In the View Controller, choose an option from the Root
CSS pop-up menu to view a simulated preview of your page in a Web browser for Windows or Mac OS. For
more information on using the View Controller, see “Selecting viewing options” on page 47.
To add browsers to the Show in Browser menu:
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).
86 CHAPTER 4
Page Layout Basics
2 Choose Edit > Preferences, and click the Browsers icon in the left pane of the Preferences dialog box.
3 Do one of the following:
• To add all browsers on your hard disk to the browser list, click Find All.
• To add a single browser, click Add. Then select the browser, and click Open (Windows), or click Add and
then click Done (Mac OS).
4 Select one or more browsers in the scrolling window that you want to be launched when you click the
Show in Browser button (
) on the toolbar or choose Special > Show in Default Browser.
Note: Most browsers only allow you to open one version at a time. For example, you can open Netscape Navigator and Microsoft Internet Explorer at the same time, but not Netscape Navigator 3.0 and 4.0.
When two or more types of browsers are selected in the Browsers preferences, such as Navigator and
Internet Explorer, a generic browser icon appears on the toolbar. When only a single type of browser is
selected, such as Navigator 3.0 and 4.0, the program icon of that browser appears on the toolbar.
5 To delete a browser from the scrolling window, select it and click Remove.
6 Click OK.
To preview your page in a browser:
1 Add browsers to the Show in Browser menu.
2 Do one of the following:
• To preview the page in the browser or browsers that you have selected in the Browsers preferences, click
the Show in Browser button (
) on the toolbar, or choose Special > Show in Default Browser.
• To preview the page in a single browser, click the triangle in the lower right corner of the Show in Browser
button on the toolbar, and then choose the desired browser from the pop-up menu. Or, choose a browser
from the Special > Show in Browser menu.
Show in Browser button and pop-up menu
ADOBE GOLIVE 5.0 87
User Guide
Viewing document information
You can use the Adobe GoLive Document Statistics dialog box to view general information about your Web
page, including its byte size, word count, character count, and the approximate time it takes to download.
Note that the byte sizes listed don’t include media such as QuickTime or sound (because they may be set
to start playing before they are fully downloaded). In addition, the download times listed are only rough
estimates based on a well-defined set of circumstances. External conditions, such as heavy traffic on the
network and Web server overload, may substantially change the real time it takes to download the page.
To view information for the current page:
Choose Special > Document Statistics. When you have finished viewing the document information,
click OK.
89
Chapter 5: Working with Tables
Creating tables
You can use a table to lay out text and objects on the page, or to present spreadsheet data or other information in rows and columns. You can insert text and almost any object into a table cell, from an image to
another table to a QuickTime movie. While text directly on the page wraps at the window size of the
viewer’s browser, text inside a table cell wraps at the set width of the cell. Like most other objects in Adobe
GoLive, a table can be placed directly in the document window or on a layout grid for more control over
its precise position on the page.
Note: Positioning text and objects using tables can be a tedious process. To position text and objects more easily,
you can use a layout grid. For more information on using the layout grid, see “Using the layout grid” on page 70.
To set up a table:
1 Choose Window > Objects.
2 In the Objects palette, click the Basic tab (
).
3 Drag the Table icon from the Objects palette to your document window, or double-click the icon in the
Objects palette.
4 Choose Window > Inspector.
5 In the Table Inspector, click the Table tab.
6 To change the number of rows or columns in the table, do one of the following:
• Enter the desired number for Rows or Columns in the Table Inspector.
• Shift-click inside a cell to select it. Then click one of the following buttons in the Cell tab of the Table
Inspector: the Add Row button (
) to add an empty row above the cell, the Add Column button (
)
to add an empty column to the left of the cell, the Delete Row button (
) to delete the row that contains
the cell, or the Delete Column button (
) to delete the column that contains the cell.
• Shift-click inside a cell to select it. Then do one of the following: press * to add an empty row above the
cell, press + to add an empty column to the left of the cell, press Shift+Delete to delete the row that contains
the cell, or press Delete to delete the column that contains the cell.
7 To resize the table, do one of the following:
• Click the top or left edge of the table to select it. 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. Choose Auto to automatically adjust the width or height to its optimal size.
• Alt-click (Windows) or Option-click (Mac OS) the right or bottom border of the table. Then drag in the
desired direction. (Alt-clicking or Option-clicking sets the units for Width or Height from Auto to Pixel, so
that the width or height can be resized.)
90 CHAPTER 5
Working with Tables
8 To resize a row or column in the table, do one of the following:
• Alt-click (Windows) or Option-click (Mac OS) the right or bottom border of a cell in the row or column
that you want to resize. Then drag in the desired direction.
• Select a cell in the row or column that you want to resize. (Shift-click inside a cell to select it.) 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.
To customize the appearance of a table:
Note: In addition to setting options in the Table Inspector, you can customize the appearance of a table by
applying a predefined table style to it. For more information on applying predefined table styles, see “Formatting
tables using predefined styles” on page 101.
1 Click the top or left edge of the table to select it.
2 Choose Window > Inspector.
3 In the Table Inspector, click the Table tab.
4 Enter the desired width for Border in the Table Inspector.
If you set the border width to 0, the borders are dimmed in Adobe GoLive Layout view and hidden in the
browser. To hide the dimmed borders that appear in Layout view, choose Edit > Hide Invisible Items.
5 To change the vertical and horizontal spacing within table cells, enter a number for Cell Pad.
ADOBE GOLIVE 5.0 91
User Guide
6 To change the space between table cells, enter a number for Cell Space.
A
C
E
F
B
D
A. Border of 1 pixel B. Border of 15 pixels C. Cell pad of 0 pixels D. Cell pad of 10 pixels
E. Cell space of 2 pixels F. Cell space of 5 pixels
7 To apply a background color to the table, select Color. Click inside the color field to select it. Then select
a color in the Color palette. For instructions on using the Color palette, see “Working with color” on
page 77.
Note: When you apply a background color to a table and view the table in the Adobe GoLive Preview or
Netscape Navigator, the color only appears in table cells that contain text or other content. To workaround this
problem, you can add a nonbreaking space to each empty table cell. To add a nonbreaking space, click inside the
cell, and press Shift+spacebar (Windows) or Option+spacebar (Mac OS).
8 To align the table with respect to the document window, choose an option from the Alignment pop-up
menu. (You can’t use the Alignment pop-up menu to align a table on a layout grid.) Choose Default to align
the table automatically so that its alignment matches the alignment of surrounding text.
9 To add a caption to the table, select Caption, and choose a location for the caption from
the pop-up menu.
10 To apply a background image to the table, select BgImage. Then select an image file using the Point and
Shoot button (
), or the Browse button.
To customize a row:
1 Shift-click the left side of the row to select it.
To customize multiple rows, select the desired rows and then choose from the available options in the Row
tab of the Table Inspector.
2 Choose Window > Inspector.
3 In the Table Inspector, click the Row tab.
92 CHAPTER 5
Working with Tables
4 To vertically align the text in all of the table cells in the row, choose an option from the Vertical Alignment
pop-up menu in the Table Inspector. Choose Default to vertically align the text according to the browser’s
preferences. (In Adobe GoLive, choosing Default results in the text being vertically centered.)
5 To horizontally align the text in all of the table cells in the row, choose an option from the Horizontal
Alignment pop-up menu. Choose Default to horizontally align the text according to the browser’s preferences. (In Adobe GoLive, choosing Default results in the text being aligned with the left cell margin.)
6 To change the height of the row, choose an option from the pop-up menu for Height. Then enter the
desired measurement. Choose Auto to automatically adjust the height to its optimal size.
7 To apply a background color to the row, select Color. Click inside the color field to select it. Then select
a color in the Color palette. For instructions on using the Color palette, see “Working with color” on
page 77.
To customize a cell:
1 Shift-click inside a cell to select it.
To customize multiple cells, select the desired cells and then choose from the available options in the Cell
tab of the Table Inspector. To add cells to your selection, you can Shift-click inside each additional cell. For
more information on selecting multiple cells, see “Making selections within tables” on page 95.
2 Choose Window > Inspector.
3 In the Table Inspector, click the Cell tab.
4 To vertically align the text in the cell, choose an option from the Vertical Alignment pop-up menu in the
Table Inspector. Choose Default to vertically align the text according to the browser’s preferences. (In
Adobe GoLive, choosing Default results in the text being vertically centered.)
5 To horizontally align the text in the cell, choose an option from the Horizontal Alignment pop-up menu.
Choose Default to horizontally align the text according to the browser’s preferences. (In Adobe GoLive,
choosing Default results in the text being aligned with the left cell margin.)
ADOBE GOLIVE 5.0 93
User Guide
6 To extend the cell one or more rows downward, do one of the following:
• Enter the desired number of rows for Row Span.
Cell spanning three rows
• Press Shift+Down Arrow key to extend the cell one row downward at a time. (Press Shift+Up Arrow key
to shorten the cell one row upward at a time.)
7 To extend the cell one or more columns to the right, do one of the following:
• Enter the desired number of columns for Column Span.
• Press Shift+Right Arrow key to extend the cell one column to the right at a time. (Press Shift+Left Arrow
key to shorten the cell one column to the left at a time.)
8 To adjust the height or width of the cell, 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
its optimal size.
When you adjust the height or width of the cell, Adobe GoLive automatically adjusts the width or height
of the entire row or column that contains the cell.
9 To format the cell as a subheader, select Header Style.
10 To suppress automatic text wrapping in the cell, select No Text Wrap.
11 To apply a background image to the cell, select BgImage. Then select an image file using the Point and
Shoot button (
), or the Browse button.
12 To add an empty row above the cell, click the Add Row button (
).
13 To add an empty column to the left of the cell, click the Add Column button (
14 To delete the row or column that contains the cell, click the Delete Row (
or Delete Column (
) button.
)
).
94 CHAPTER 5
Working with Tables
Adding text to tables
Adobe GoLive provides a variety of ways to add text to a table. You can add text by typing in a table cell,
copying text from another application and pasting it into a cell, moving text between cells by dragging, and
importing data from a text-only file into a table.
When importing data into a table, you need to begin by formatting the data in the text-only file in a way
that Adobe GoLive accepts. For a single-celled table, you should simply format the data 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 applications can export data to a text-only file in one of these formats. For more information, see the documentation for your spreadsheet application.
To type text into a cell:
1 Click inside the cell to insert a cursor.
2 Type the desired text.
To copy text from another application and paste it into a cell:
1 Select text in any application, and copy the text.
2 Click inside the cell to insert a cursor.
3 Choose Edit > Paste to paste the text into the cell.
To move text between cells:
1 Drag to select the text that you want to move.
2 Drag the selected text to the destination cell.
To import data from a text-only file into a table:
1 Create a text-only file that contains data that you want to import into a table in Adobe GoLive.
2 In Adobe GoLive, add a table to the document window.
You don’t need to add rows and columns to the table to accommodate the imported data. When Adobe
GoLive imports the data into the table, it adds extra rows and columns to the table as necessary to accommodate the data.
3 Choose Window > Inspector.
4 In the Table Inspector, click the Table tab.
5 Click Browse next to Import Tab-Text.
6 Select the text-only file, choose an option from the Col. (Column) Separator pop-up menu to specify the
column separator used in the text-only file, and click Open.
7 If desired, customize the appearance of the table, its rows, or its cells. For instructions, see “Creating
tables” on page 89.
ADOBE GOLIVE 5.0 95
User Guide
Converting tables to layout grids
Once you have created a table and filled it with content, you may decide that you’d prefer to use a layout
grid for your page layout rather than a table. In Adobe GoLive Layout view, you can easily convert a table
to a layout grid. Each table cell that contains text or an object is converted to a layout text box with the same
content as the cell.
To convert a table to a layout grid with layout text boxes:
1 Click the top or left edge of the table to select it.
2 Choose Window > Inspector.
3 In the Table Inspector, click the Table tab.
4 Click Convert to convert the table to a layout grid with layout text boxes.
5 If desired, customize the appearance of the layout grid and layout text boxes. For instructions, see “Using
the layout grid” on page 70 and “Using layout text boxes” on page 71, respectively.
Making selections within tables
Adobe GoLive provides you with a variety of ways to make selections within a table. Once you make your
table selection, you can apply formatting options to the entire table, a row, a column, or individual cells.
You can make selections directly in the document window or in a preview of the table that appears in the
Select tab of the Table palette. Using either method, your selection is activated in both the document window and the Table palette, which features blue lines that indicate your selection. The types of formatting
options you can apply to your selection includes a font set, a relative font size, physical styles, structural
styles, and available options in the Table Inspector, such as a horizontal alignment, background color, or
background image.
To make a table selection within the document window:
Do one of the following:
• To select a table, click its top or left edge.
• To select a row, Shift-click its left edge. To add rows to your selection, Shift-click the left edge of each additional row.
• To select a column, Shift-click its top edge. To add columns to your selection, Shift-click the top edge of
each additional column.
• To invert the selection within a row, Shift-click the left edge of the row. (Adobe GoLive deselects previously active cells in the row and selects previously inactive cells.)
96 CHAPTER 5
Working with Tables
• To invert the selection within a column, Shift-click the top edge of the column. (Adobe GoLive deselects
previously active cells in the column and selects previously inactive cells.)
Shift-click top edge of column to invert selection.
• To select a cell, Shift-click inside of it. To add cells to your selection, Shift-click inside each additional cell.
To select a cell, you can also click its bottom or right edge. To add cells to your selection, you can also Shiftclick the bottom or right edges of each additional cell.
When a cursor is placed inside of a cell, you can select the cell by pressing Ctrl+Enter. Alternatively, when
you have a cell selected, you can place a cursor inside of it by pressing Enter.
• To select adjacent cells in the table, Shift-drag to select the desired cells.
• To select all cells within a table, Shift-click inside of any cell to select it, and choose Edit > Select All.
Note: Depending on your selection, Adobe GoLive deactivates some options in the Table Inspector. For example,
to extend a cell one or more rows downward, you must select a single cell and then enter the desired number of
rows for Row Span in the Cell tab of the Table Inspector. If you select more than one cell, the Row Span option
is deactivated.
To make a table selection within the Select tab of the Table Inspector:
1 Click the top or left edge of the table to select it.
2 Choose Window > Table.
3 In the Table palette, click the Select tab, and then do one of the following:
• To select a row, click its left edge. To add rows to your selection, Shift-click the left edge of each additional
row. (As an alternative, you can drag to select a row and adjacent rows.)
ADOBE GOLIVE 5.0 97
User Guide
• To select a column, click its top edge. To add columns to your selection, Shift-click the top edge of each
additional column. (As an alternative, you can drag to select a column and adjacent columns.)
• To invert the selection within a row, Shift-click the left edge of the row. (Adobe GoLive deselects previously active cells in the row and selects previously inactive cells.)
• To invert the selection within a column, Shift-click the top edge of the column. (Adobe GoLive deselects
previously active cells in the column and selects previously inactive cells.)
• To select a cell in the table, click inside of it. To add cells to your selection, Shift-click inside each additional cell.
• To select adjacent cells in the table, drag to select the desired cells.
• To select all cells in the table, drag to select all cells, or click inside of any cell and choose Edit > Select All.
Making selections within nested tables
You can nest a table by placing it inside of another table’s cell. Then you can nest a third table by placing it
inside one of the nested table’s cells, and so on. Depending on how deep you nest a table, it can be more
difficult to select the table and make selections within it. Adobe GoLive provides several shortcuts for you
to make your desired selection when working with nested tables.
To make a selection within a nested table:
1 Click inside of a cell within the innermost table.
2 Press Ctrl+Enter to select the cell.
3 Press Ctrl+Enter again to select the innermost table.
4 Press Ctrl+Enter again to select the cell that encloses the innermost table.
5 Continue pressing Ctrl+Enter to select the next parent table and cell until you’ve selected
the outermost table.
98 CHAPTER 5
Working with Tables
Cutting, copying, and pasting table selections
As long as your table selection consists of a single cell or a block of adjacent cells, Adobe GoLive lets you
cut, copy, and paste it using the Edit menu. Cutting your selection lets you remove one or more cells from
the table. Copying and pasting your selection lets you replace the contents of a similar block of cells in a
table, place your selection as a nested table inside of a cell, and place your selection as a new table inside of
a layout text box or floating box.
If you are copying and pasting to replace the contents of a similar block of cells, your target selection must
match your source selection. For example, if you copy four cells in a row as your source selection, you can
only use your selection to replace the contents of another four cells in a row (your target selection).
To cut a table selection:
1 Select a single cell or a block of adjacent cells, as described in “Making selections within tables” on
page 95.
2 Choose Edit > Cut.
To copy and paste a table selection:
1 Select a single cell or a block of adjacent cells, as described in “Making selections within tables” on
page 95.
2 To copy your selection, choose Edit > Copy.
3 Do one of the following:
• To replace the contents of a similar block of cells in a table, select the block of cells that you want to
replace, and choose Edit > Paste.
• To place your selection as a nested table inside of a cell, click inside of the cell in which you want to place
your selection, and choose Edit > Paste.
Note: You can only place your selection as a nested table if your selection contains more than one cell.
Otherwise, if your selection is a single cell, Adobe GoLive simply replaces the contents of the cell in which you
click.
A
B
C
A. Select and copy cells. B. Click inside another cell.
C. Paste cells to place selection as nested table.
ADOBE GOLIVE 5.0 99
User Guide
• To place your selection as a new table inside of a layout text box or floating box, click inside of the box in
which you want to place your selection, and choose Edit > Paste.
Sorting table content
Using the Select tab of the Table palette, you can sort the order of rows in a table so that the contents of one
or more columns appears in numerical and alphabetical order, or you can sort the order of columns in the
table so that the contents of one or more rows appears in numerical and alphabetical order. You can apply
the sort to an entire table, specific rows, specific columns, or specific cells. For example, if you are sorting
the order of rows in a table and the top row contains column headings, you can apply the sort to all rows
in the table except for the top row.
Adobe GoLive performs the sort primarily in numerical order and secondly in alphabetical order. It considers the case of characters when performing the sort. By default, Adobe GoLive performs the sort in
ascending order. If desired, you can specify for the sort to be done in descending order.
To sort the contents of a table:
1 Click the top or left edge of the table to select it.
2 Choose Window > Table.
3 In the Table palette, click the Select tab.
4 To indicate the area of the table that you want to sort, make a table selection within the document
window or the Select tab of the Table Inspector. If you want the sort to apply to the entire table, then select
the table. If you want the sort to apply to specific rows, columns, or cells in the table, then select that area
of the table only. For instructions, see “Making selections within tables” on page 95.
5 In the Table palette, choose an option from the Sort pop-up menu to indicate whether you want to sort
the order of the rows or columns in the table. 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.
100 CHAPTER 5
Working with Tables
6 In the leftmost pop-up menu above the Sort pop-up menu, do one of the following:
• If you chose Rows in step 5, choose the primary column in the table with contents that you want to appear
in numerical and alphabetical order. Choose 1 to select the first column in the table, choose 2 to select the
second column, and so on.
• If you chose Columns in step 5, choose the primary row in the table with contents that you want to appear
in numerical and alphabetical order. Choose 1 to select the first row in the table, choose 2 to select the
second row, and so on.
By default, the primary column or row that you choose is sorted in ascending order, as indicated by the
ascending order button ( ) next to the leftmost pop-up menu. To specify for the primary column or row
to be sorted in descending order, click the ascending order button, so that it changes to a descending order
button ( ).
7 In the center pop-up menu above the Sort 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 5, 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 5, choose the secondary row in the table with contents that you want to
appear in numerical and alphabetical order.
By default, the secondary column or row that you choose is sorted in ascending order, as indicated by the
ascending order button next to the center pop-up menu. To specify for the secondary column or row to be
sorted in descending order, click the ascending order button.
8 In the rightmost pop-up menu above the Sort 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 5, choose the tertiary column in the table with contents that you want to appear
in numerical and alphabetical order.
ADOBE GOLIVE 5.0 101
User Guide
• If you chose Columns in step 5, choose the tertiary row in the table with contents that you want to appear
in numerical and alphabetical order.
By default, the tertiary column or row that you choose is sorted in ascending order, as indicated by the
ascending order button next to the rightmost pop-up menu. To specify for the tertiary column or row to
be sorted in descending order, click the ascending order button.
9 Click Sort to sort the table using the sort criteria that you have specified.
Formatting tables using predefined styles
Adobe GoLive includes a variety of predefined table styles, which you can use to quickly format your table.
You can preview the various styles in the Style tab of the Table palette, as well as set options to customize
each style by changing which rows and columns contain styles to be repeated throughout the table. If you
want to view how a predefined style appears when applied to your table, you can easily apply the style and
remove it later if it doesn’t meet your particular needs. In addition to using the predefined table styles
included with Adobe GoLive, you can create your own table style, save it, and apply it to other tables on
your Web pages, allowing you to create a consistent appearance throughout your Web site.
To apply a predefined style to a table:
1 Click the top or left edge of the table to select it.
2 Choose Window > Table.
3 In the Table palette, click the Style tab.
4 Choose a predefined style from the pop-up menu in the upper left corner of the Style tab.
A preview of the style appears in the Style tab. Blue brackets mark which rows and columns contain styles
that are to be repeated throughout the table. For example, if a blue bracket marks the second and third
rows, the style in the first row is only applied to the first row of the table, while the styles of the second and
third rows are repeated for all other rows in the table.
To undo your table style selection in the Table palette, click the triangle in the upper right corner of the
Table palette to display the Table palette menu, and choose Undo Select TableStyle. To reselect the table
style, choose Redo Select TableStyle from the Table palette menu.
5 To change which rows or columns contain styles that are to be repeated throughout the table, resize the
blue bracket so that it marks the desired rows or columns. To resize a blue bracket, drag either end of it.
The resize area of the bracket is marked by blue lines at both ends of the bracket.
Note: Depending on the particular table style, you may not be able to change the rows or columns that
contain styles to be repeated throughout the table. 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.
102 CHAPTER 5
Working with Tables
6 Click Apply to apply the style to the table.
To remove a predefined style from a table:
1 Click the top or left edge of the table to select it.
2 Choose Window > Table.
3 In the Table palette, click the Style tab.
4 Click Clear to remove the predefined style from the table.
To add your own style to the Style tab of the Table palette:
1 Set up a table and customize its appearance, as described in “Creating tables” on page 89.
Note: When setting up your table to be used in creating your own table style, it makes a difference whether
or not you enter values of 0 for Border, Cell Pad, or Cell Space in the Table Tab of the Table Inspector. If you
enter values of 0 in these text boxes, then a table with this table style applied to it doesn’t have a border, cell
padding, or cell spacing. If you leave these text boxes empty, then a table with this table style applied to it
maintains the border, cell padding, or cell spacing values that it had previously.
2 Click the top or left edge of the table to select it.
3 Choose Window > Table.
4 In the Table palette, click the Style tab.
5 Click New to create a new table style.
6 In the text box above the New button, enter a name for the new table style.
7 Click Capture to capture the style of the selected table in the document window and save it as the new
table style.
8 To apply the new table style to another table, select the desired table in the document window, choose
the new table style from the pop-up menu in the upper left corner of the Style tab, and click Apply.
ADOBE GOLIVE 5.0 103
User Guide
To remove a style from the Style tab of the Table palette:
1 Choose Window > Table.
2 In the Table palette, click the Style tab.
3 Choose a predefined style from the pop-up menu in the upper left corner of the Style tab.
4 Click Delete to remove the style from the pop-up menu.
105
Chapter 6: Images and Page Design
About Smart Objects
Smart Objects offer a phenomenally more efficient way to add images to Web pages than the traditional
workflow. Multi-sourcing of the same images for use in diverse media such as print, CD-ROM, and online
use is made easier and more practical. Smart Objects let designers concentrate on layout and design rather
than on the mechanics of converting files between formats. Smart Objects do away with the arduous process of maintaining and editing source files in one format, keeping track of where the source file for optimized images is located, converting them to a Web-safe format in a separate program, importing the converted files into Adobe GoLive, and then keeping the two groups of files synchronized.
Adobe GoLive lets you import Photoshop (PSD, BMP, PICT for Mac OS only, PCX, Pixar, Amiga IFF, TIFF,
and TARGA), Illustrator, and LiveMotion files without engaging in such acrobatics. Adobe GoLive creates
a copy of the source file in a Web-safe format and maintains a link to the source file. The source file format
does not change, but the Web format settings you specify in Adobe GoLive are kept with the source file.
This sourced object is known as a Smart Object. When you double-click on the Smart Object in your document window, the source file opens in Photoshop, Illustrator, or LiveMotion depending on what type of
file it is. If you make changes to the source image or resize a Smart Object within Adobe GoLive, Adobe
GoLive automatically updates the Web-safe copy when you return to the Web page containing the image
using the same Web format settings you specified when you first created the Smart Object. For additional
information on Web-safe formats, see “About image formats” on page 138.
Adding a Smart Object to a Web page
Smart Objects provide an easy way to incorporate Adobe Photoshop, Illustrator, and LiveMotion images
on your Web pages. The general procedure for any kind of Smart Object is similar: drag a Smart Object
icon from the Smart tab of the Objects palette to your Web page and set the Smart Object’s source file.
To add a Smart Object to your Web page:
1 Click the Smart Object tab of the Objects palette.
2 Drag a Smart Object icon for the type of Smart Object you’re creating (Adobe Photoshop, Illustrator, or
LiveMotion) from the Smart tab of the Objects palette to your Web page.
3 Select the Smart Object placeholder, and click the Browse button (
Smart Image Inspector.
4 Select the desired image file and click Open.
) next to the Source text box in the
106 CHAPTER 6
Images and Page Design
For detailed instructions on the rest of the process, which differs for each image type, see “Linking to Photoshop files” on page 107, “Linking to Illustrator files” on page 127, and “Linking to LiveMotion files” on
page 129.
Note: The Smart tab of the Objects palette only displays Smart Object icons for programs you have installed on
your computer.
Using Smart Link
Graphic files imported into Adobe GoLive as Smart Objects from Adobe Photoshop, Illustrator, or LiveMotion have a Smart Link that lets you open the original source file in its native application, make edits,
and then have the Web-safe copy automatically updated to reflect the edits.
To open a Smart Object in its native application:
Double-click a Smart Object.
The Smart Object opens in its native application, letting you edit the image, and save your edits to file.
When you then return to the Web page in Adobe GoLive which contains the Web-safe copy, Adobe GoLive
updates the copy to reflect your edits.
Note: If the Smart Object’s application does not open, try the following. Choose Edit > Preferences, expand
General preferences icon in the left pane, and choose User Interface. Make sure the Launch other applications
to edit media files option displayed in the right pane is enabled.
Resizing Smart Objects
You can manually resize a Smart Object within Adobe GoLive simply by selecting it and dragging one of its
resizing handles. When you release the mouse button, Adobe GoLive regenerates the Web-safe copy on the
Web page using the last optimization settings applied without changing the original source file. Since the
Flash and SVG formats are vector-based, no updating of Smart LiveMotion objects (always created in the
Flash format) or Smart Illustrator objects in SVG or Flash format is required.
When you change the size of an image, Adobe 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 easily resize the image to the size of the original source file by clicking the Auto-resize to
original button to the right of the size settings on the Basic tab of the Smart Object Inspector.
ADOBE GOLIVE 5.0 107
User Guide
Linking to Photoshop files
Adobe GoLive lets you link to Adobe Photoshop files on a Web page. PSD files must be RGB 8-bit images
and can be sliced (any attached interactivity such as rollovers or image maps and frame-based animations
are ignored). The procedures for linking to simple and sliced Photoshop images differs somewhat, as noted
in this section.
Note: Images with attached interactivity or frame-based animations must be properly exported from within
Adobe ImageReady. See the Adobe ImageReady User Guide for details on exporting such images to an Adobe
GoLive-friendly format.
Adobe GoLive also supports BMP, PICT (Mac OS only), PCX, Pixar, Amiga IFF, TIFF, and TARGA. Adobe
GoLive creates a copy of the source file in a Web-safe format and maintains a link, called a Smart Link,
between the two files. If you later make changes to the source image or resize the Smart Photoshop object,
Adobe GoLive automatically updates the Web-safe copy when you return to the page containing the image.
You can also double-click a Smart Photoshop object in the document window to open the original source
image in Adobe Photoshop.
Note: Layered Photoshop files imported as Smart Objects are flattened into one image during the optimization
and conversion process. If you want to keep the layers as distinct images, see “Working with Photoshop layered
files” on page 137.
Adobe GoLive offers extensive control over the optimization of images linked to as Smart Photoshop
objects in the Save For Web dialog box that automatically appears when you first create a Smart Photoshop
object. The dialog lets you preview optimized images in different Web graphics file formats and with different file attributes. You can view multiple versions of an image simultaneously and modify optimization
settings as you preview the image, to select the best combination of settings for your needs. You can also
use predefined settings instead of selecting options yourself.
To add a simple Smart Photoshop object:
1 Drag the Smart Photoshop icon from the Smart tab (
window, or double-click the icon in the palette.
) of the Objects palette into your document
2 Select the Smart Photoshop placeholder, and click the Browse button (
in the Smart Image Inspector.
) next to the Source text box
Note: You can also select an image by dragging from the Point and Shoot button ( ) to an image file in
the site window or by dragging and dropping an image from the site window, the Finder (Mac OS), or
desktop.
3 Select the desired Photoshop file and click Open.
4 In the Save For Web dialog box, click a tab at the top of the image display to select a view:
• Original to view the image with no optimization.
• Optimized to view the image with the current optimization settings applied.
108 CHAPTER 6
Images and Page Design
• 2-Up to view two versions of the image side by side.
• 4-Up to view four versions of the image side by side.
Note: For additional details on optimization views, see “Viewing images during optimization” on page 110.
5 Select a predefined optimization setting from the Settings pop-up menu or create your own using the
available pop-up menus, and click OK.
6 Save the Web-safe copy of the source file to somewhere in the site folder (for example, the Images folder
within your site folder), and click Save. If you do not save to the site folder, the link will not be valid.
When the Smart Object links to a source image that contains slices, Adobe GoLive has to save each slice as
a separate image along with some HTML code. It first prompts you for a location where it automatically
creates a <source image name>.data folder for the images and HTML. The folder contains the Web-safe
slices as well as the HTML exported with the slices. Any interactivity attached to the slices in the original
file is ignored. For images that contain frame-based animations or JavaScript interactive sliced objects,
export the file from ImageReady to a Web-safe, Adobe GoLive-friendly format first and then import the
exported file into Adobe GoLive.
To add a sliced Smart Photoshop object:
1 Drag the Smart Photoshop icon from the Smart tab (
window, or double-click the icon in the palette.
) of the Objects palette into your document
ADOBE GOLIVE 5.0 109
User Guide
2 Select the Smart Photoshop placeholder, and click the Browse button (
in the Smart Image Inspector.
) next to the Source text box
Note: You can also select an image by dragging from the Point and Shoot button ( ) to an image file in
the site window or by dragging and dropping an image from the site window, the Finder (Mac OS), or
desktop.
3 Select the desired Photoshop file and click Open.
4 In the subsequent dialog, select a destination location where you want to save the target data,
and click Save.
5 In the Save For Web dialog box, click a tab at the top of the image display to select a view:
• Original to view the image with no optimization.
• Optimized to view the image with the current optimization settings applied.
• 2-Up to view two versions of the image side by side.
• 4-Up to view four versions of the image side by side.
Note: For additional details on optimization views, see “Viewing images during optimization” on page 110.
6 Select a predefined optimization setting from the Settings pop-up menu or create your own using the
available pop-up menus, and click OK. You can specify different settings for each slice. If the image was
auto-sliced, one setting applies to all the slices.
Changing optimization settings
Adobe GoLive lets you change the optimization settings for existing Smart Photoshop objects already on
your Web page at any time.
To change the optimization settings for a Smart Photoshop object:
1 Select the Smart Photoshop object on the Web page.
2 Click the Settings button in the Smart Object Inspector. (If the Smart Object Inspector is not already
visible, choose Window > Inspector.)
3 Select a predefined optimization setting from the Settings pop-up menu or create your own using the
available pop-up menus, and click OK.
4 Click Save.
Note: For additional information on all the optimization options available in the Save For Web dialog box,
see “Choosing options in the Save For Web dialog box” on page 111.
110 CHAPTER 6
Images and Page Design
Viewing images during optimization
View options in Adobe GoLive enable you to switch easily between optimized and original (non-optimized) versions of an image and view up to four versions of an optimized image simultaneously.
Adobe GoLive gives you full control over optimization of Photoshop images in non-Web formats that you
import using the Smart tab of the Objects palette. When you insert a Smart Photoshop object, and select a
file, Adobe GoLive displays a Save For Web dialog box.
In 2-Up and 4-Up view, an annotation area appears by default below each optimized image, showing its
optimization settings.
To select a view when optimizing images:
1 Import a Smart Photoshop object. (See “Linking to Photoshop files” on page 107 for details.)
2 In the Save For Web dialog box, click a tab at the top of the image display to select a view:
• Original to view the image with no optimization.
• Optimized to view the image with the current optimization settings applied.
• 2-Up to view two versions of the image side by side.
• 4-Up to view four versions of the image side by side.
Note: When you choose 2-Up or 4-Up view, Adobe GoLive determines a layout for the images, depending on
the aspect ratio (width/height ratio) of the image, and whether annotations or rules are shown. Images can
appear in vertical layout, horizontal layout, or 2 X 2 layout (two rows and two columns). 2 X 2 layout is available for 4-Up view only.
By default, 2-Up view displays the original image and the optimized image with current optimization settings, and 4-Up view displays the original image, the optimized image with current settings, and two
smaller, lower-quality versions of the image based on modifications of the current optimization settings.
You can select a version of the image in 2-Up or 4-Up view to apply new optimization settings. You can
automatically repopulate 2-Up and 4-Up views—generate new optimized versions of the image based on
the selected version. You can also revert an optimized version to the original version of the image.
To repopulate optimized versions of an image in 2-Up or 4-Up view:
1 Select an optimized version of the image in the 2-Up or 4-Up view.
2 In the Optimize panel of the Save For Web dialog box, select Repopulate Views from the Settings panel
pop-up menu.
ADOBE GOLIVE 5.0 111
User Guide
Adobe GoLive generates smaller optimized versions of the image based on the optimization settings of the
selected version. The selected version and the original version, if present, are not altered during repopulation. For this reason, the Repopulate Views option works with 2-Up view only if the original version of the
image is not present.
Repopulate Views option in Adobe GoLive
To restore an optimized version of an image to the original version:
1 Select an optimized version of the image in the 2-Up or 4-Up view.
2 In the Optimize panel of the Save For Web dialog box, choose Original from the Settings pop-up menu.
Choosing options in the Save For Web dialog box
You use the Optimize panel of the Save For Web dialog box to select the compression file format and other
optimization settings for a Smart Photoshop image. You can also optimize an image to a specified file size,
using current optimization settings or automatically generating a GIF or JPEG file.
To view the Save For Web dialog box:
Create a Smart Photoshop object and link it to a Photoshop source file as described in “Linking to Photoshop files” on page 107. The Save For Web dialog box automatically appears when you select a source file.
You can also select an existing Smart Photoshop object already linked to a source file and click Settings in
the Smart Object Inspector.
Note: By default, Adobe GoLive automatically regenerates the optimized image when you click the Optimized,
2-Up, or 4-Up tab at the top of the document (if you have modified the image since the last optimization), when
you change optimization settings with the optimized image displayed, or when you edit the original image.
Using named optimization settings
You can save optimization settings as a named set and apply the settings when working with other images.
Settings that you save appear in the Optimize menu in the Settings panel of the Save For Web dialog box.
Adobe GoLive also includes several predefined named settings.
112 CHAPTER 6
Images and Page Design
When you adjust optimization settings so that they no longer match a named set, the Settings menu displays the term “Unnamed.”
To save optimization settings:
1 With desired settings selected in the Optimize panel of the Save For Web dialog box, choose Save Settings
from the Optimize menu in the Settings panel.
2 Name the settings and choose a location where they will be saved. By default, named settings are saved
in the Optimize folder inside the Settings folder within the Adobe GoLive application folder.
3 Click Save.
To apply named optimization settings to an image:
With an optimized image displayed, select a named set of optimization settings from the Optimize menu
in the Settings panel.
To edit a named set of optimization settings:
1 Select the named set from the Settings pop-up menu.
2 Adjust settings in the Optimize panel of the Save For Web dialog box.
(The Settings menu displays the term “Unnamed,” since the settings no longer match a named set.)
3 Choose Save Settings from the Optimize menu in the Settings panel, and save the settings with the name
of the original set.
4 Click Save, and then click Replace.
To delete named optimization settings:
1 In the Optimize panel of the Save For Web dialog box, select a named set of optimization settings from
the Settings pop-up menu.
2 Choose Delete Settings from the Optimize menu in the Settings panel.
ADOBE GOLIVE 5.0 113
User Guide
Applying optimization settings
To optimize a file for the Web, you import a Smart Photoshop object and choose a format and options for
the format in the Save For Web dialog box. You can also optimize an image to match a specified file size.
This feature enables you to quickly achieve a desired file size without having to test different optimization
settings.
To optimize an image as a JPEG:
1 Choose a JPEG setting from the Settings menu of file formats in the Save For Web dialog box.
A
B
C
D
E
F
G
H
I
J
A. Settings menu B. File format C. Quality menu
D. Progressive checkbox E. ICC Profile checkbox
F. Optimize menu G. Optimized checkbox
H. Quality slider I. Blur slider J. Matte color
2 Choose an option for specifying image quality:
• Drag the Quality pop-up slider.
• Enter a value in the Quality box.
• Choose an option from the Quality menu.
A higher quality setting preserves more color information but results in larger file sizes. View the JPEG at
several quality settings to determine the best balance of quality and file size.
3 To create an enhanced JPEG with a slightly smaller file size, select the Optimized option.
Note: The Optimized JPEG format is recommended for maximum file compression. However, some older
browsers do not support this feature.
4 Select the Progressive option to create 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. Selecting
Progressive automatically selects Optimized.
Progressive JPEGs require more RAM for viewing, and are not supported by some browsers.
114 CHAPTER 6
Images and Page Design
5 To apply a blur to the image to smooth rough edges, enter a value for Blur or drag the pop-up slider.
This option blurs pattern artifacts created along sharp edges in the image and creates a smaller file size, but
may also reduce image detail. A setting of 0.1 to 0.5 is recommended.
The Blur option applies an effect identical to that of the Gaussian Blur filter in Photoshop.
6 To preserve the ICC profile of the image with the file, select ICC Profile.
Note: ICC profiles are used by some browsers for color correction. The ICC profile option preserves ICC
profiles embedded by Photoshop.
7 If the original image contains transparency, select a Matte color to simulate the appearance of background transparency. See “Making transparent and matted Photoshop images” on page 121.
8 Click OK and save the file with the .jpg extension.
To optimize an image as a GIF or PNG-8:
1 Open the original file, and then choose any GIF or PNG-8 format from the Settings menu of file formats
in the Save For Web dialog box.
A
B
C
D
E
F
G
H
I
J
K
L
A. Settings menu B. File format C. Color Palette menu
D. Dithering algorithm menu E. Transparency checkbox
F. Interlaced checkbox G. Optimize menu H. Lossy slider
I. Number of colors J. Dither slider K. Matte color
L. Web Snap slider
2 For GIF format only: Drag the Lossy slider or enter a value to allow the compression process to remove
pixels from the image (and reduce file size).
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. See “Previewing and controlling application
dither” on page 125.
Note: You cannot use the Lossy option with the Interlaced option, or with Noise or Pattern Dither algorithms.
3 Select a color palette, as described in “Selecting a color table option” on page 116.
ADOBE GOLIVE 5.0 115
User Guide
4 To choose a specific number of colors, select a number from the Colors pop-up menu, enter a value in
the number field, or use the arrows to change the number of colors.
This option specifies the maximum number of colors. If the image contains fewer colors than the number
specified, the color palette will contain only the number of colors in the image.
5 Select Interlaced to create an image that displays as low-resolution versions in a browser while the full
image file is downloading. Interlacing can make downloading time seem shorter and assures viewers that
downloading is in progress. However, interlacing also increases file size.
6 Select a Dither option and amount. For information on dither, see “Previewing and controlling dithering
in Photoshop images” on page 124.
7 If the image contains transparency, choose an option for preserving or filling transparent pixels:
• Select Transparency (the default setting) to preserve fully transparent pixels as transparent. (Partially
transparent pixels are filled with the Matte color or converted to fully transparent or fully opaque pixels,
depending on the Matte option you choose.)
• Deselect Transparency to fill fully and partially transparent pixels with the Matte color.
Note: The original image must contain transparent pixels in order for you to create transparency in the
optimized image. You can use the magic eraser tool (
) to easily create transparency in a document. In
Photoshop, you can also use the background eraser tool (
).
For more information on setting transparency and Matte color, see “Making transparent and matted Photoshop images” on page 121.
8 To automatically shift colors to the closest Web palette equivalents (and prevent the colors from dithering in a browser), drag the Web Snap slider or enter a value to specify a tolerance level for colors to be
shifted. A higher value shifts more colors. See “Previewing and controlling dithering in Photoshop images”
on page 124.
9 Click OK and save the file with the .gif or .png extension.
To optimize an image as a PNG-24:
1 Open the original file, and then choose PNG-24 from the Settings menu of file formats in the Save For
Web dialog box.
A
B
C
D
E
F
A. Settings menu B. File format C. Transparency checkbox
D. Optimize menu E. Interlaced checkbox F. Matte color
116 CHAPTER 6
Images and Page Design
2 Select Interlaced to create an image that displays low-resolution versions in a browser while the full
image file is downloading. Interlacing can make downloading time seem shorter, and assures viewers that
downloading is in progress.
3 If the image already contains transparency, choose an option for preserving or filling transparent pixels:
• Select Transparency (the default setting) to preserve transparent pixels as transparent. This option is
dimmed if the image does not already contain transparency.
• Deselect Transparency to fill transparent pixels with the Matte color.
4 Click OK and save the file with the .png extension.
To optimize a file according to a specified file size:
1 In the Optimize panel of the Save For Web dialog box, select Optimize to File Size from the Optimize
panel menu.
2 Specify a Start With option:
• Current Settings to use current optimization settings.
• Auto Select GIF/JPEG to automatically generate a GIF or JPEG. (Adobe GoLive selects GIF or JPEG
format, depending on an analysis of colors in the image.)
3 Enter a value for file size.
4 Click OK.
Selecting a color table option
Both the GIF and PNG-8 formats allow you to determine the color table for the image in the Settings panel
of the Save For Web dialog box. This color table appears in the Color Table panel when that image is
selected, and you can make changes to these colors. The color table for an 8-bit image has a maximum
of 256 colors.
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.
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.
Web Uses the standard 216-color color table common to the Windows and Mac OS 8-bit (256-color)
palettes. This option ensures that no browser dither is applied to colors when the image is displayed using
8-bit color. (This palette is also called the Web-safe palette.)
ADOBE GOLIVE 5.0 117
User Guide
Using the Web palette can create larger files, and is recommended only when avoiding browser dither is a
high priority. See “Previewing and controlling dithering in Photoshop images” on page 124.
Custom Preserves the current perceptual, selective, or adaptive color table as a fixed palette that does not
update with changes to the image.
Mac OS Uses the Mac OS system’s default 8-bit (256-color) color table, which is based on a uniform
sampling of RGB colors.
Windows Uses the Windows system’s default 8-bit (256-color) color table, which is based on a uniform
sampling of RGB colors.
Other color tables appear in the menu if you have saved them previously. See “Loading and saving color
tables” on page 121.
Working with the color table in Photoshop images
The color table displays all colors in a GIF or PNG-8 image. You use the Color Table panel in the Save For
Web dialog box to work with the color table.
You can add and delete colors in the color table, shift selected colors to Web-safe colors, and lock selected
colors to prevent them from being dropped from the palette.
The color table also displays colors for original images that use indexed color.
A
B
C
D
E
F
G
H
A. Web-safe or Web-shifted Color B. Locked Color
C. Selected Color D. Edited Color E. Web Shift button
F. Lock Color button G. New Color button
H. Trash button
Note: If your image has fewer colors than the total number specified in the color palette, unused colors are
removed from the color table to reduce file size.
118 CHAPTER 6
Images and Page Design
Sorting the color table
You can sort colors in the color table by hue, luminance, or popularity, making it easier to see an image’s
color range and locate particular colors.
To sort a color table:
Choose a sorting order in the Color Table panel menu:
• Sort by Hue. Neutral colors are assigned a hue of 0, and located with the reds.
• Sort by Luminance, or by the lightness or brightness of a color.
• Sort by Popularity, or by the colors’ frequency of occurrence in the image.
• Unsorted. Restores the original sorting order.
Adding new colors
You can add colors that were left out in building the color table. If the color table already contains the
maximum number of colors (256, or 255 with transparency), you cannot add a new color.
To add a new color:
1 Select the eyedropper tool (
) in the Save For Web dialog box.
2 Click on a color in the image.
The color appears in the eyedropper color sample box in the Save For Web dialog box.
3 Add the new color:
• Click the New Color button (
) in the Color Table panel in the Save For Web dialog box.
• Select New Color from the Color Table panel menu. To view the menu, click the triangle in the upper
right corner of the Color Table panel.
The new color appears in the Color Table panel. A small white square with a dark center appears in the
lower right corner, indicating that the color is locked. See “Locking colors” on page 119.
Selecting colors
You select colors directly in the image or in the Color Table panel to make changes to the colors.
To select a color from the original or optimized image:
1 Select the eyedropper tool (
) in the Save For Web dialog box.
2 Click a color in the image. A white border appears around that color in the Color Table panel.
ADOBE GOLIVE 5.0 119
User Guide
To select a color directly in the Color Table panel/palette:
Click the color in the Color Table panel.
To select a contiguous group of colors, press Shift and click another color. All colors in the rows between
the first and second selected colors are selected.
To select a discontiguous group of colors, press Ctrl (Windows) or Command (Mac OS) and click each
color that you want to select.
To select all colors:
Choose Select All Colors from the Color Table panel menu.
To select all Web-safe colors in the image:
Choose Select All Web Safe Colors from the Color Table panel menu.
Note: The optimized image must contain at least one Web-safe color in order to select Web-safe colors.
To select all non-Web-safe colors in the image:
Choose Select All Non-Web Safe Colors from the Color Table panel menu.
Note: The optimized image must contain at least one non-Web-safe color in order to select non-Web-safe
colors.
To deselect all colors:
Choose Deselect All Colors from the Color Table panel menu.
Editing colors
You can change a selected color in the Color Table panel to any other RGB color value. When you regenerate
the optimized image, the selected color will be changed to the new color wherever it appears in the image.
To edit a color:
1 Double-click the color in the Color Table panel to display the default color picker.
2 Select a color, and click OK.
A small plus sign appears in the center of each edited color.
Locking colors
You can lock selected colors in the Color Table panel to prevent them from being dropped when the number of colors is reduced and to prevent them from dithering in the application. For information on protecting colors from browser dithering, see “Previewing browser dither” on page 125.
Note: Locking colors does not prevent them from dithering in a browser.
120 CHAPTER 6
Images and Page Design
To lock a color:
1 With a GIF or PNG-8 image displayed, select one or more colors in the Color Table panel, as described
in “Selecting colors” on page 118.
2 Lock the color:
• Click the Lock button (
).
• Choose Lock/Unlock Selected Colors from the Color Table panel menu.
A white square with a red center appears in the lower right corner of each locked color.
Note: If the selected colors include both locked and unlocked colors, all colors will be locked.
To unlock a color:
1 Click the locked color to select it.
2 Unlock the color:
• Click the Lock button (
).
• Choose Lock/Unlock Selected Colors from the Color Table panel menu.
The white square disappears from the color swatch.
Deleting colors from the color table
You can delete selected colors from the color table to decrease the image file size. When you delete a color,
areas of the optimized image that previously included that color are rerendered using the closest color
remaining in the palette.
When you delete a color, the color palette type is automatically changed to Custom. This is because the
Adaptive, Perceptual, and Selective palettes would automatically add the deleted color back into the palette
when you reoptimize the image. (The Custom palette does not change when you reoptimize the image.)
To delete selected colors:
1 With a GIF or PNG-8 image displayed, select one or more colors from the Color Table panel, as described
in “Selecting colors” on page 118.
2 Delete the color:
• Click on the Trash button.
• Choose Delete Color from the Color Table panel menu.
Deleting a color changes the color palette type to Custom to prevent the color from being added back to
the palette if you reoptimize the image. To return to an Adaptive, Perceptual, or Selective palette, select the
palette from the color palette menu. (See “Selecting a color table option” on page 116.)
ADOBE GOLIVE 5.0 121
User Guide
Loading and saving color tables
You can save color tables from optimized images to use with other images and load color tables created in
other applications. Once you load a new color table into an image, the colors in the optimized image are
changed to reflect the colors in the new color table.
To save a color table:
1 With a GIF or PNG-8 image displayed, select Save Color Table from the Color Table panel menu.
2 Name the color table and choose a location where it will be saved. By default, the color table file is given
the extension .act (for Adobe Color Table).
If you want to access the color table when selecting Optimization options for a GIF or PNG image, save the
color table in the Color Tables folder, inside the Settings folder in the Adobe GoLive folder.
3 Click Save.
To load a color table:
1 With a GIF or PNG-8 image displayed, select Load Color Table in the Color Table panel menu.
2 Navigate to a file containing the color table you want to load–either an Adobe Color Table (.act) file, or
a GIF file (to load the file’s embedded color table).
3 Click Open.
Making transparent and matted Photoshop images
Transparency makes it possible to place a non-rectangular graphic object against the background of a Web
page. Background transparency, supported by GIF and PNG formats, preserves transparent pixels in the
image. These pixels blend with the Web page background in a browser.
Background matting, supported by GIF, PNG, and JPEG formats, simulates transparency by filling or
blending transparent pixels with a matte color which you choose to match the Web page background on
which the image will be placed. Background matting works only if the Web page background will be a solid
color, and if you know what that color will be.
The original image must contain transparent pixels in order for you to create background transparency or
background matting in the optimized image.
To create background transparency in a GIF or PNG image:
In the Optimize panel in the Save For Web dialog box, select Transparency. The option is selected
by default.
122 CHAPTER 6
Images and Page Design
Fully transparent pixels in the image are preserved as transparent. If the image is anti-aliased, you can matte
partially transparent pixels to blend with a Web page background color. You can also create hard-edged
transparency to prevent the halo effect that results if an anti-aliased image is matted on a color that differs
from the image’s original background color. If the image contains alpha transparency, you can create multilevel transparency to preserve up to 256 levels of transparency (in PNG-24 format only).
Creating background matting in GIF and PNG images
When you know the Web page background color on which an image will be displayed, you can use the matting feature to fill or blend transparent pixels with a matte color that matches the Web page background.
The Web page background must be a solid color, not a pattern.
You can matte GIF and PNG images in two ways. You can choose to preserve fully transparent pixels as
transparent, and matte only the partially transparent pixels, such as those at the edge of an anti-aliased
image. When the image is placed on a Web page, the Web background shows through the transparent pixels, and the edges of the image blend with the background. This feature prevents the halo effect that results
when an anti-aliased image is placed on a background color that differs from the image’s original background. This feature also prevents the jagged edges that result with GIF hard-edged transparency.
You can also deselect Transparency to fill all transparent pixels with the matte color. Fully transparent pixels
are filled with the matte color, and partially transparent pixels are blended with the matte color.
GIF with a Matte color Transparency option selected,
and with Transparency option deselected.
To create a matted GIF or PNG image:
1 Import a Smart Photoshop image that contains transparency or select a Smart Photoshop object already
on a Web page and click Settings in the Smart Image Inspector.
2 In the Optimize panel in the Save For Web dialog box, select GIF, PNG-8, or PNG-24 from
the format menu.
3 Choose whether to preserve transparency:
• Select Transparency to preserve fully transparent pixels as transparent.
• Deselect Transparency to fill fully transparent pixels with the matte color.
ADOBE GOLIVE 5.0 123
User Guide
4 Select a color from the Matte pop-up menu.
Select None, Eyedropper Color (to use the color in the eyedropper sample box), White, Black, or Other
(using the color picker).
Creating hard-edged transparency in GIF and PNG-8 images
When you apply background matting to images that include anti-aliasing, a halo effect can result when the
matte color is different from the original background color of the image. Anti-aliasing creates partially
transparent pixels around the edges of the image to blend the image with the original background color.
When working with GIF or PNG-8 files, you can create hard-edged transparency, in which all pixels that
are more than 50% transparent in the original image are fully transparent in the optimized image, and all
pixels that are more than 50% opaque in the original image are fully opaque in the optimized image. Hardedged transparency prevents the halo effect. However, hard-edged transparency can cause jagged edges in
the image. To prevent jagged edges, apply background matting to the image. See “Creating background
matting in GIF and PNG images” on page 122.
To create hard-edged transparency in a GIF or PNG-8 image:
1 Import a Smart Photoshop image that contains transparency or select a Smart Photoshop object already
on a Web page and click Settings in the Smart Image Inspector.
2 In the Optimize panel in the Save For Web dialog box, select GIF or PNG-8 from the format menu.
3 Select Transparency.
4 Select None from the Matte pop-up menu to make all pixels with greater than 50% transparency into
fully transparent pixels, and all pixels with 50% or less transparency into fully opaque pixels.
Creating background matting in JPEG images
When creating a JPEG from an original image that contains layer transparency, you must matte the image
against a matte color. Since the JPEG format does not support transparency, blending with a matte color is
the only way to create the appearance of background transparency in a JPEG. Fully transparent pixels are
filled with the matte color, and partially transparent pixels are blended with the matte color. When the
JPEG is placed on a Web page with a background that matches the matte color, the image appears to blend
with the Web page background.
To create a matted JPEG image:
1 Import a Smart Photoshop image that contains transparency or select a Smart Photoshop object already
on a Web page and click Settings in the Smart Image Inspector.
2 In the Optimize panel in the Save For Web dialog box, select JPEG from the format menu.
124 CHAPTER 6
Images and Page Design
3 Select a color from the Matte pop-up menu.
Select None, Eyedropper Color (to use the color in the eyedropper sample box), White, Black, or Other
(using the color picker).
Preserving multilevel transparency in PNG-24 images
When you create a PNG-24 image, you can preserve variable transparency, such as that in an anti-aliased
image on a transparent layer, using a feature called alpha transparency. Alpha transparency preserves up to
256 levels of transparency in a PNG image. When the PNG is displayed in a browser using a plug-in that
supports alpha transparency, the PNG displays multilevel transparency, and the image’s edges will blend
with any Web background.
To create variable transparency in a PNG-24 image:
1 Import a Smart Photoshop image that contains transparency or select a Smart Photoshop object already
on a Web page and click Settings in the Smart Image Inspector.
2 In the Optimize panel in the Save For Web dialog box, select PNG-24 from the format menu.
3 Select Transparency.
4 Select None from the Matte menu.
Previewing and controlling dithering in Photoshop images
Most images viewed on the Web are created using 24-bit color displays (millions of colors mode), but many
Web browsers are used on computers using only 8-bit color displays (256-color mode), so that Web images
often contain colors not available to many Web browsers. Computers use a technique called dithering to
simulate colors not available in the color display system. Dithering creates adjacent pixels of different colors
to give the appearance of a third color. For example, a red color and a yellow color may dither in a mosaic
pattern to produce the illusion of an orange color that does not appear in the color palette.
When optimizing images, keep in mind that two kinds of dithering can occur:
• Application dither occurs in GIF and PNG-8 images when Adobe GoLive attempts to simulate colors that
appear in the original image but not in the color palette you specify for the optimized image. You can
control the application dither that Adobe GoLive applies, to select a dithering pattern and a range of colors
to be dithered.
You can choose a dithering pattern to be applied to the image.
• Browser dither occurs when a Web browser using an 8-bit color display (256-color mode) attempts to
simulate colors that appear in an optimized image but not in the color palette used by the browser. Browser
dither can occur with GIF, PNG, or JPEG images and can occur in addition to application dither in GIF or
PNG-8 images. You can control the amount of browser dither by shifting selected colors in the image to
Web-safe colors. Options in the Color Table panel let you specify Web-safe colors when choosing a color.
ADOBE GOLIVE 5.0 125
User Guide
Previewing and controlling application dither
You can preview application dither in GIF and PNG-8 images. The Dither Algorithm pop-up menu in the
Save For Web dialog box lets you choose a dithering method for the image. The Dither percentage slider
lets you control the range of colors simulated by dithering. 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 application dither that provides the color detail you require.
Images with primarily solid colors may work well with Dither set to none. Images with continuous-tone
color (especially color gradients) may require dithering to prevent color banding.
To choose a dithering method:
Select an option from the Dithering algorithm pop-up menu in the Save For Web dialog box:
• No Dither applies no application dither to the image.
• 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.
To specify the amount of application dither applied:
1 Choose a dithering method from the Dither algorithm menu. To specify no dithering for the image,
select No Dither from the menu.
2 If you selected any option other than No Dither in step 1, drag the Dither slider or enter a value to select
a dithering percentage.
Dither algorithm menu and dither pop-up slider
Previewing browser dither
You can preview browser dither directly in Adobe GoLive, or in a browser that uses an 8-bit color display
(256-color mode).
To preview browser dither:
With an optimized file displayed, preview dither in the respective application.
126 CHAPTER 6
Images and Page Design
Choose Browser Dither from the document panel menu in the Save For Web dialog box. (To view the
menu, click on the triangle by the upper right corner of the document panel.)
To preview browser dither in a browser:
1 Set your computer’s color display to 8-bit color (256 colors). See your computer operating system’s
documentation for information on changing the color display.
2 Do one of the following:
• Launch your browser and open an optimized image directly in the browser.
• In Adobe GoLive, with an optimized image displayed, choose Special > Show in Browser and choose a
browser in which to preview the image.
Minimizing browser dither
To protect colors from dithering in a browser, you can shift the colors to their closest equivalents in the Web
palette. This ensures that the colors won’t dither when displayed in browsers on either Windows or Macintosh operating systems capable of displaying at least 256 colors.
To shift a single color to its closest Web palette equivalent:
1 With an optimized image displayed, use the eyedropper tool ( ) in the Save For Web dialog box to
select a single color. Alternatively, click a color in the Color Table panel.
2 In the Color Table panel, click the Web Shift button (
) to shift the color.
A small white diamond appears in the center of a Web-shifted color and in all Web-safe colors.
To shift a group of selected colors to the closest Web palette equivalents:
1 With an optimized image displayed, select colors in the Color Table panel, as described in “Selecting
colors” on page 118.
2 Click the Web Shift button or choose Web Shift/Unshift Selected Colors from the Color Table
panel menu.
A small white diamond appears in the center of selected colors that have been Web-shifted (and in all Websafe colors). If the selection includes both shifted and unshifted colors, all colors in the selection become
shifted colors.
ADOBE GOLIVE 5.0 127
User Guide
To revert Web-shifted colors to their original colors:
Do one of the following:
• In the Color Table panel, select a Web-shifted color and click the Web Shift button or choose
Web Shift/Unshift Selected Colors from the panel menu.
• In the Color Table panel, choose Unshift All Colors from the panel menu.
To specify tolerance for shifting colors automatically to the closest Web palette equivalents:
In the Optimize panel of the Save For Web dialog box, enter a value for Web Snap or drag the pop-up slider.
A higher value shifts more colors.
Adding file information to Smart Photoshop objects
In Adobe GoLive, you can add information or comments to a Smart Photoshop object.
To enter information about an image:
1 Select a Smart Photoshop object on a Web page.
2 Right-click (Windows) or Control-click (Mac OS) the Smart Object, and choose Show Properties
(Windows) or Info in Folder (Mac OS) from the context menu.
3 Enter information as desired:
• In Windows, enter the Caption, Keywords, Credits, or Origin.
• In the Mac OS, enter Comments.
4 Click OK (Windows) or close the window (Mac OS).
For detailed instructions on importing a Smart Photoshop object into a Web page after you have made all
your choices in the Save For Web dialog box, see “Linking to Photoshop files” on page 107.
For information on adding alternative text for Smart Objects and other images, see “Additional image
options” on page 132.
Linking to Illustrator files
Adobe GoLive lets you import Adobe Illustrator files into a Web page. As with Photoshop files, Adobe
GoLive creates a copy of the source file in a Web-safe format and maintains a link, called a Smart Link,
between the two files. If you later make changes to the source image or resize the Smart Illustrator object,
Adobe GoLive automatically updates the Web-safe copy when you return to the page containing the image.
Note: Automatic updating does not occur if the file resized is in the Flash or SVG format since those formats are
vector-based. Accordingly, Illustrator does not open in the background.
128 CHAPTER 6
Images and Page Design
You can also double-click a Smart Illustrator image in the document window to open the original source
image in Adobe Illustrator. The Smart Illustrator object icon will not be available in the Smart tab of the
Objects palette unless you have at least Illustrator 9.0 installed on your computer.
To add a Smart Illustrator object:
1 Drag the Smart Illustrator icon from the Smart tab of the Objects palette into your document window,
or double-click the icon in the palette. You can also drag an Illustrator file onto your Web page. If you do,
skip to Step 4.
2 Select the Smart Illustrator placeholder, and click the Browse button next to the Source text box in the
Smart Image Inspector.
Note: You should size the source image in Illustrator to nearly the size you want on your Web page before
you create a Smart Illustrator object.
3 Select the desired Illustrator file, and click Open. Illustrator starts in the background.
You can also select an image by dragging from the Point and Shoot button ( ) to an Illustrator file in the
Site window or by dropping a file from the Site window. The Destination text box will be filled in automatically when you choose and import a source file.
4 Choose the desired Web format from the Conversion Settings dialog box, and click OK.
Illustrator comes to the front and displays an optimization dialog box appropriate to the Web-safe format
you choose in the previous step. See the Adobe Illustrator User Guide for details on choosing optimization
settings for the various formats.
5 Select the desired optimization settings, and click OK.
6 Specify the folder where you want to save the converted image (it must be inside your site folder or the
link will be invalid).
7 Click Save.
To make changes to conversion or optimization settings of a Smart Illustrator object after the image has
already been imported, see “Using the Smart Plug-in Inspector with Illustrator files” on page 128 for
details.
Using the Smart Plug-in Inspector with Illustrator files
If you choose the SVG, SVG Compressed, or Shockwave Flash conversion format for Illustrator files, the
Smart Plug-in Inspector appears when the Smart Object is selected. The Smart Plug-in Inspector provides
additional options that let you specify the location of the source and destination files, the MIME and class
of the image, and, most importantly, a Settings button that lets you return to the conversion and optimization settings should you want to make changes after you import an Illustrator file into your Web page.
See “Adding audio and video clips” on page 177 for details on the options besides Settings available in the
Smart Plug-in Inspector.
ADOBE GOLIVE 5.0 129
User Guide
To change settings for a Smart Illustrator object (in SVG, SVG Compressed, or Shockwave Flash format):
1 Select the Smart Illustrator object on the Web page.
2 Click the Settings button in the Smart Plug-in Inspector. (If the Smart Plug-in Inspector is not already
visible, choose Window > Inspector.)
3 Choose the desired format from the Conversion Settings dialog box, and click OK.
Illustrator comes to the front and displays an optimization dialog box appropriate to the format you choose
in the previous step. See the Adobe Illustrator User Guide for details on choosing optimization settings for
the various formats.
4 Select the desired optimization settings, and click OK.
5 Specify the folder where you want to save the converted image (usually a folder inside your site folder).
6 Click Save.
Adobe GoLive applies the new settings to the Smart Object on your Web page without changing
the source file.
Note: You cannot change any conversion settings for Smart LiveMotion objects. The Settings button is
dimmed in the Inspector when a Smart LiveMotion object is selected.
Linking to LiveMotion files
Adobe GoLive lets you link to Adobe LiveMotion files on a Web page. Adobe GoLive creates a copy of the
source file in the Flash format and maintains a link between the two files in the form of a Smart LiveMotion
object. If you later make changes to the source image the Smart LiveMotion object, Adobe GoLive automatically updates the Flash format copy when you return to the page containing the image. Since the Flash
format is vector-based, no updating is required when you resize a LiveMotion Smart object. You can also
double-click a Smart LiveMotion image in the document window to open the original source image in
Adobe LiveMotion.
To set the export format in LiveMotion:
1 Start LiveMotion, if it is not already open.
2 If the Export palette is not already showing, choose Window > Export.
3 Select Flash from the top pop-up menu of the Export palette.
If this export setting is not set as described, you will not be able to add a Smart LiveMotion object to a Web
page in Adobe GoLive.
130 CHAPTER 6
Images and Page Design
To add a Smart LiveMotion object:
1 Drag the Smart LiveMotion icon from the Smart tab of the Objects palette into your document window,
or double-click the icon in the palette. You can also drag a LiveMotion file onto your Web page. If you do,
skip to Step 4.
2 Select the Smart LiveMotion placeholder, and click the Browse button (
in the Smart Image Inspector.
) next to the Source text box
3 Select the desired LiveMotion file, and click Open. LiveMotion starts, comes to the front, and saves the
source file as Flash automatically. After a few moments, Adobe GoLive returns to the front.
4 Save the converted image to your site folder or a folder inside your site folder when Adobe GoLive
prompts you. If you do not save to a location inside the site folder, the link will not be valid.
Note: You can also select an image by dragging from the Point and Shoot button ( ) to a LiveMotion file
in the Site window or by dropping a file from the Site window. The Destination text box will be filled in automatically when you choose and link to a source file.
Adding Web-format images
Although using Smart Objects makes for a more efficient workflow, you may already have images in a Websafe format that you want to use on a Web page. When you add a Web-format image to a Web page, Adobe
GoLive creates a simple reference from the HTML page to the image. Adobe GoLive supports GIF, GIF89a
for transparent images, JPEG, Progressive JPEG, and PNG images.
To insert an image:
1 Drag the Image icon from the Basic tab (
double-click the icon in the palette.
) of the Objects palette into your document window, or
2 Select the image placeholder, and click Browse (
) in the Image Inspector.
3 Select the desired graphic file, and click Open.
If you reference an image that is not in a Web-safe format, the placeholder icon displays a broken image
placeholder.
You can also select an image by dragging from the Point and Shoot button (
window or by dragging and dropping an image from the site window.
) to an image file in the site
If Link Warnings is selected, a broken link appears as a question mark icon with a border. Empty
References result when you select an image or piece of hypertext and click New Link (
) in the
toolbar but fail to define the destination URL. See “Checking the site for pages with errors” on page 426
for more information.
ADOBE GOLIVE 5.0 131
User Guide
Importing images for previewing
Importing images via drag-and-drop is a convenient shortcut for previewing pages. You can drag graphics
files from the desktop to a Web page in Adobe GoLive, including GIF, JPEG, Progressive JPEG, PNG, PICT,
TIFF, and BMP files. You can also drag directly from Adobe Photoshop onto the Adobe GoLive document
window.
Adobe GoLive automatically converts Photoshop, PICT, TIFF, and BMP image files to the GIF, JPEG, Progressive JPEG, or PNG file format, depending on the modules installed and the preferences set. See “Setting
image preferences” on page 134 for more information. These converted image files are placed in the Import
Images folder within the Adobe GoLive program folder, or any other folder you select. These converted files
are not production quality however, and they should be used only for placement and previewing. For production quality images, you should always use the Save For Web feature. When you are satisfied with the
result, move your production quality images to the Image or Media folder within your site folder.
Note: If the Save For Web module is installed and enabled, all image conversions are handled in the Save
For Web dialog box. If the module is disabled, the image preferences you set in Adobe GoLive handle conversions
automatically. See “Setting image preferences” on page 134 for additional details.
Simulating Windows gamma in Mac OS
Graphics viewed in Windows look darker than in Mac OS. This is due to a difference in gamma settings.
You can simulate the Windows settings in Mac OS:
• On your Monitors and Sound control panel, set the gamma to “2.2 Television Gamma” using the Calibrate button which launches the Monitor Calibration Assistant.
• Download the GammaToggle FKEY. (Shareware by Roland Gustafsson at
http://www.acts.org/roland/thanks.)
• Use Gamma by Knoll Software (supplied with Adobe Photoshop).
Adjusting image size
You can resize non-Smart Object images in Adobe GoLive; however, it’s usually best to resize images in your
image-editing application for a variety of reasons:
• If you place an oversized image on your page and then reduce its size, your page still references the
unnecessarily large image file, resulting in inefficient use of bandwidth.
132 CHAPTER 6
Images and Page Design
• If you place a small image on your page and enlarge it, the image may look jagged.
A
B
A. Use these options to resize the image.
B. Choose an option to align the image.
When you change the size of an image, Adobe 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.
The resize warning icon reminds
you that the image might not
display at its optimum resolution.
To adjust image size in Adobe GoLive:
With the image selected, select the desired unit of measurement option in the Image Inspector, and enter
a new value for Height and Width. The Image option in the pop-up menu sets the width and height automatically, based on the original size of the graphic.
Note: You should not use this method to routinely reduce image size. For information on resizing Smart
Objects, see “Resizing Smart Objects” on page 106.
Additional image options
The More tab of the Image Inspector contains additional options that let you adjust border width, define
alternative text for an image, and convert an image to a form button or link. (Alternative text is displayed
in browsers that are configured not to display images; it is also used by voice-recognition software.)
ADOBE GOLIVE 5.0 133
User Guide
To activate a box around the image and adjust its width:
1 Select the image, and select Border in the Basic tab of the Image Inspector.
2 Type in the desired border width in pixels, and press Enter.
If the border width attribute is on and set to 0, and if the image is the source of a link, a chain link symbol
appears to indicate that this is a linked image with an invalid link.
To convert the image into a form button:
1 Select the image, and select Is Form in the More (Windows) or Spec. (Mac OS) tab of
the Image Inspector.
2 Type in the name you want to be displayed with the form, and press Enter.
To assign a link to an image:
1 Select the image, and click the Link tab in the Image Inspector.
2 Click the New Link button, and then type in the URL to define the destination of the link; or use the
Browse button to choose a location within your site. A border appears around the image (unless the border
is on and set to 0) to indicate that it is the source of a link.
A
B
C
A. Click New Link to create an undefined link.
B. Use this option to specify the target frame in the
destination frame set. C. Type in a name for the link here.
To enter alternative text for images:
1 Select the image or Smart Object on your Web page.
2 In the Alt Text text box of the Image Inspector or Smart Image Inspector, type the plain text you would
like to display in place of the image.
Note: It is highly recommended that the Alt Text tag be provided for all images. It aids the visually-impaired
and also enhances the performance of a Web page loading in a browser.
134 CHAPTER 6
Images and Page Design
Setting image preferences
The General Image Preferences dialog box lets you determine how Adobe GoLive handles non-Web-ready
images. Files converted to GIF, JPEG, or PNG by Adobe GoLive are not production quality; they should be
used for previewing and placement only.
To select an import folder for PICT, TIFF, or BMP files imported for previewing using drag and drop:
1 Choose Edit > Preferences, expand the General preferences by clicking the + sign (Windows) or triangle
(Mac OS), and then select Image.
2 In the Import Folder text box, click Select to choose another import folder, or leave the folder selection
unchanged to place the images in the Import Images folder in the Adobe GoLive program folder.
To activate automatic conversion to GIF, JPEG, Progressive JPEG, or PNG files:
1 In the General Image Preferences dialog box, locate the File Format options.
2 Select Ask User to pick a dedicated format for each file you import, or choose an option from the pop-up
menu to set a default format. Three basic options are available:
• GIF has a companion Interlaced check box that lets you choose between the standard and interlaced
GIF formats.
• JPEG has a companion Progressive check box that lets you choose between the standard and Progressive
JPEG formats. An additional pop-up menu lets you choose from six standardized compression levels.
• PNG has a companion Interlaced check box that lets you choose between the standard and interlaced
PNG formats.
Note: If the Save For Web module is installed and enabled, all image conversions are handled in the Save
For Web dialog box. If the module is disabled, the image preferences you set here handle conversions. For
additional information on image formats, see “About image formats” on page 138.
To make default settings for low-resolution images that appear while the main image is loading:
1 In the General Image Preferences dialog box, locate the Low Source Image options.
2 Select Place in Same Folder as Source to store low-resolution images generated by Adobe GoLive in the
same folder as the high-resolution source images; or choose Place in Import Folder to store them temporarily before you move them to the site folder.
3 Select the Auto-Generate by Default option to instruct Adobe GoLive to automatically create a
low-resolution copy of each image you import and add it to the page.
To avoid problems in Web browsers, make sure that all your images have the proper extensions to identify their file type; for example, .gif, .jpg, .jpeg, or .png.
ADOBE GOLIVE 5.0 135
User Guide
Creating image maps
Clickable image maps are links from images or parts of images within Web pages. Adobe GoLive lets you
create clickable image maps on top of your image, edit them, and link them to Web pages or other
resources. You can also connect the hot-spot areas in a clickable image map with scripted actions.
To create a clickable image map:
1 Select an image on your Web page.
2 In the Image Inspector, select the Use Map option in the More tab.
Note: By default, Adobe GoLive assigns a unique ID to the image map and enters it in the Name text box.
You can replace this ID by entering a name for the image map in the Name text box on the More tab.
3 To specify a hot spot, click one of the region tools (selection tool, rectangle, circle, or polygon) in the
toolbar, and then drag in the image to draw the link area.
4 Enter a URL for the link, or use the Browse button or the Point and Shoot button to select
a link destination.
5 Use the Target text box to specify the target frame in the destination frame set (if any).
6 Use the Title text box to enter additional information. Some browsers use this information to display tool
tips or voice annotations.
To customize the appearance of the hot spot:
1 Select the hot spot in the image.
2 Use the following tools available in the toolbar:
• Choose the pointer tool to move or resize the hot spot by dragging.
• Click the URL button to display the link destination URL in the hot spot.
• Click the frame or color buttons to edit or turn border and color display on and off, respectively,
while editing.
• Click the color button to change the color used for highlighting.
• If you are working with multiple overlapping hot spots, use the Bring to Front and Send to Back buttons
in the toolbar to change the stacking order.
Note: the Bring to Front and Send to Back buttons are also available in the Transform palette.
To add actions to image maps:
1 Select a hot spot in an image map on your Web page.
2 Choose Window > Actions.
3 In the Actions palette, choose a mouse or key event, and click the + button.
4 Choose the desired action from the Actions menu in the Actions palette.
136 CHAPTER 6
Images and Page Design
Tracing images
Adobe GoLive lets you import tracing images you can use to pre-layout your Web pages. You can import
the following image formats as tracing images: PSD (only RGB 8-bit images), JPG, GIF, PNG, BMP,
TARGA, PCX, PICT (Mac OS), PIXAR, TIFF, and Amiga IFF. The ability to use native Photoshop .psd
images means you don’t have to convert such files to a Web-safe format before use as tracing images.
A
B
C
D
E
A. Opacity slider B. Position controls
C. Move Image tool D. Cut Out tool
E. Cut Out button
To add a tracing image to your Web page:
1 Select Window > Tracing Image and import an image into your page using the Tracing Image palette.
You can use the palette’s Browse button or Point and Shoot button.
2 Set the opacity of the tracing image in the Tracing Image palette.
3 Position the image in the document by either entering pixel values in the respective text boxes or click
the Move Image tool in the palette (the cursor changes to a hand) and drag the image in the document
window. Clicking the Move tool button again, disables the Move Image tool.
Note: You can quickly resize the window to fit the tracing image by selecting Tracing Image from the
Change Window Size pop-up menu in the bottom right corner of the document window.
4 Click the Cut Out tool (similar to Photoshop’s Crop tool) and select a rectangular section of
the tracing image.
Note: You can cancel the cut out process by clicking the Cut Out tool again.
5 Double-click the selection or click Cut Out in the Tracing Image palette.
6 In the Save For Web dialog box make your desired optimization settings and click OK. The cut out
appears as a layer in a floating box in the document window.
The Tracing Image palette’s menu lets you perform several actions on a tracing image:
• Reset the position of the tracing image to 0/0.
ADOBE GOLIVE 5.0 137
User Guide
• Align the tracing image relative to a selection in the document. For example, you can select a table cell or
a floating box in which you want the tracing image to be inserted. The tracing image will be inserted at position 0/0 relative to the selected table cell or floating box.
To remove the tracing image:
Deselect the Source check box in the Tracing Image palette.
Working with Photoshop layered files
Adobe GoLive lets you import Photoshop layered images so that each layer in the image is converted into
an appropriate Web-safe format of your choosing. The converted layers appear in the Web page in separate
floating boxes. This differs from what happens when you place a Smart Photoshop object on a Web page.
Layered files imported by that method are flattened into one image.
To import a layered Photoshop image:
1 Choose File > Import > Photoshop as HTML.
2 Select the folder where you want to save the layers (for example, a folder within your Web site folder),
and click Open.
Note: If you import more than one layered image, you may want to create a separate destination folder for
each layered image you import so that the multiple layers do not become mixed up with one another.
3 In the Save For Web dialog box, choose the optimization settings you want for the first layer, and click
OK. Adobe GoLive adds the first layer as a background image on the page, and then displays the Save For
Web dialog for each remaining layer, which are all added in separate floating boxes. If you want to apply
the same settings to all layers in the image, press Ctrl (Windows) or Control (Mac OS) when you confirm
the settings for the current layer. Adobe GoLive will then apply those settings for all remaining layers
without prompting you to make settings for each layer. See “Choosing options in the Save For Web dialog
box” on page 111 for additional details on the options available.
Note: The first layer of an imported layered Photoshop image replaces any background image already
assigned to the page. If the first layer is smaller than the page, it will tile to fill the page.
You can easily change the order of the floating boxes created when you import a layered Photoshop image
by using the Floating Boxes palette (Window > Floating Boxes); animate them using the Animation option
of the Floating Box Inspector along with the DHTML time line editor; change alignments; and so on.
Note: Some browsers have difficulty handling floating boxes with names that begin with a number. Since Adobe
GoLive uses the layer names to generate names for the floating boxes, it’s important that you do not assign
names to layers in Adobe Photoshop that begin with numbers or consist only of numbers.
138 CHAPTER 6
Images and Page Design
About image formats
The file format you choose for an optimized image is determined by the color, tonal, and graphic characteristics of the original image. In general, continuous-tone images such as photographs should be compressed as JPEG files. Illustrations with flat color or sharp edges and crisp detail, such as type, should be
compressed as GIF or PNG-8 files.
PNG-24 file format is suitable for continuous-tone images. However, PNG-24 files are often much larger
than JPEG files of the same image. PNG-24 format is recommended only when working with a continuoustone image that includes multilevel transparency. (Multilevel transparency is supported by the PNG-24 format but not the JPEG format. See “Preserving multilevel transparency in PNG-24 images” on page 124.)
Depending on the format, you can specify image quality, background transparency or matting, color display, and downloading method.
The appearance of an image on the Web also depends on the computer platform, color display system,
operating system, and browser used to display the image. Preview images in different browsers on different
platforms and with different color bit depths to see how the images will appear on the Web.
About JPEG format
The JPEG format supports 24-bit color and preserves the broad range and subtle variations in brightness
and hue found in photographs and other continuous-tone images. JPEG is supported by most browsers.
JPEG compresses file size by selectively discarding data. Because it discards data, JPEG compression is
referred to as lossy. A higher quality setting results in less data being discarded, but the JPEG compression
method can degrade sharp detail in an image, particularly in images containing type or vector art.
Note: Artifacts, such as wave-like patterns or blocky areas of banding, are added to a file each time you save
the file as a JPEG. You should always save JPEG files from the original image, not from a previously saved
JPEG.
You can create a progressive JPEG file, in which a low-resolution version of the image appears in a browser
while the full image is downloading.
The JPEG format does not support transparency. When you save an image as a JPEG, transparent pixels are
filled with the Matte color. (See “Making transparent and matted Photoshop images” on page 121.) If you
know the background color of the Web page where you will place the image, you can match the Matte color
to the Web page background color to simulate the effect of background transparency. If your image contains transparency and you do not know the Web page background color, or if the background will be a
pattern, you should use a format that supports transparency (GIF, PNG-8, or PNG-24).
ADOBE GOLIVE 5.0 139
User Guide
About GIF format
The GIF format uses 8-bit color and efficiently compresses solid areas of color while preserving sharp
detail, such as that in line art, logos, or illustrations with type. You also use the GIF format to create animated images. GIF is supported by most browsers.
The GIF format traditionally uses a lossless compression method, in which no data is discarded during
compression. You can save a GIF file multiple times without discarding data. However, because GIF files
are 8-bit color, optimizing an original 24-bit image as an 8-bit GIF will generally degrade image quality.
In addition, Adobe GoLive lets you create a lossy version of a GIF file. The lossy GIF format includes small
compression artifacts (similar to those in JPEG files) but yields significantly smaller files.
You can reduce the number of colors in a GIF and choose options to control the way colors dither in the
application or in a browser. GIF supports background transparency and background matting, in which you
blend the edges of the image with a Web page background color.
About PNG-8 format
The PNG-8 format uses 8-bit color. Like the GIF format, PNG-8 efficiently compresses solid areas of color
while preserving sharp detail, such as that in line art, logos, or illustrations with type.
Because PNG-8 is not supported by all browsers, it may be advisable to avoid this format for situations in
which your image must be accessible to the widest possible Web viewing audience. For more information
on browser support for PNG, see your browser’s documentation.
The PNG-8 format uses a lossless compression method, in which no data is discarded during compression.
However, because PNG-8 files are 8-bit color, optimizing an original 24-bit image as a PNG-8 can degrade
image quality. PNG-8 files use more advanced compression schemes than GIF, and can be 10–30% smaller
than GIF files of the same image, depending on the image’s color patterns.
Note: With certain images, especially those with very few colors and very simple patterns, GIF compression
may create a smaller file than PNG-8 compression. View optimized images in GIF and PNG-8 format to
compare file size.
As with the GIF format, you can reduce the number of colors in the image and choose options to control
the way colors dither in the application or in the browser. The PNG-8 format supports background
transparency and background matting, in which you blend the edges of the image with a Web page
background color.
About PNG-24 format
The PNG-24 format supports 24-bit color. Like the JPEG format, PNG-24 preserves the broad range and
subtle variations in brightness and hue found in photographs. Like the GIF and PNG-8 formats, PNG-24
preserves sharp detail, such as that in line art, logos, or illustrations with type.
140 CHAPTER 6
Images and Page Design
The PNG-24 format uses the same lossless compression method as the PNG-8 format, in which no data is
discarded. For that reason, PNG-24 files are usually larger than JPEG files of the same image. PNG-24
browser support is similar to that for PNG-8.
Like the PNG-8 format, the PNG-24 format supports background transparency and background matting,
in which you blend the edges of the image with a Web page background color. In addition, the PNG-24
format supports multilevel transparency, in which you can preserve up to 256 levels of transparency to
blend the edges of an image smoothly with any background color. However, multilevel transparency is not
supported by all browsers.
You can also use Adobe Photoshop images; Adobe Illustrator files; and LiveMotion files. Adobe GoLive
automatically converts the image to a Web format of your choosing.
141
Chapter 7: Floating Boxes
About floating boxes
Floating boxes let you position any object on a page absolutely, so you can use transparent floating boxes
to position and animate objects, for example, and to create layered effects. You can also convert floating
boxes to text frames.
Floating boxes are based on the DIV element, which has been available since HTML 3.2. HTML 4.0 substantially enhances the DIV element’s functionality, allowing it to be absolutely positioned and stacked to
accept a background image or background color. The DIV element is also a core element of Dynamic
HTML and a major building block for absolute positioning with cascading style sheets.
Note: To display properly, floating boxes require Web browsers version 4.0 or later. Although floating boxes may
soon be used as commonly as HTML tables, viewers with older browsers may have trouble viewing pages that
contain floating boxes.
Technically, a floating box is a visual representation of a DIV element, usually formatted with a CSS ID
style. The ID style specifies the width, visibility, and absolute position of the floating box, instructing the
browser to create a subdivision that is not part of the normal flow of HTML code within the page. This
property of being absolutely positioned allows floating boxes to be moved.
Floating boxes inherit styles applied to a page using cascading style sheets.
Two concepts are the key to understanding floating boxes:
• Layering is a key feature. Floating boxes can overlap or even be placed on top of each other. The stacking
order is controlled by an attribute called the z-index (z is from the z-axis in a three-dimensional coordinate
system). Elements with a higher z-index display on top of elements with a lower z-index. For example, an
element with a z-index of 2 appears to float above an element with a z-index of 1.
By default, floating boxes are superimposed on the normal flow of HTML and the Adobe GoLive
layout grid.
• As an independent division within the page, a floating box accepts any other HTML element—such as
an image or simple HTML text with formatting. It also has the same background image and color properties as an HTML page.
142 CHAPTER 7
Floating Boxes
Floating boxes can be opaque or transparent to reveal objects in the background. For example, you can
use transparent floating boxes to position and animate objects so that they pass in front of and behind
each other.
A
B
C
F
D
E
A. Floating box markers show that this HTML page contains five floating boxes
B. Floating box contains a GIF image. C. Floating box animated to move along the curve
D. Floating box animated to move along a linear path E. Floating box has a index of 2
and is a GIF file with a transparent background F. Floating box contains text
Setting up floating boxes
Adobe GoLive lets you add floating boxes to your Web page by dragging the Floating Box icon from the
Objects palette. You can position your floating box accurately using the Floating Box Inspector or a layout
grid that you define in the Grid Settings dialog box. You can add any valid HTML element, including text,
images, rules, and any other basic or advanced icons from the Objects palette to your floating box. You can
format text and assign attributes in the usual way.
ADOBE GOLIVE 5.0 143
User Guide
To set up a floating box:
1 Drag the Floating Box icon from the Basic tab (
double-click the icon in the Objects palette.
) of the Objects palette into the document window, or
The small yellow icon labeled SB at the upper left corner of the floating box is the floating box marker.
When you change the position of the box, this icon remains at the original point of insertion. You can click
this icon to select the floating box unless it is underneath another floating box.
2 Click the border of the floating box to open the Floating Box Inspector.
3 Enter a name for the floating box in the Name text box. If you are using several floating boxes within
your animation, using unique names makes them easier to identify. (Make sure not to name them with just
a number.) If you don’t specify a name, Adobe GoLive names all subsequent floating boxes layer, layer2,
layer3, and so on.
4 To move a floating box, drag it by its border, or enter exact coordinates (in pixels from the upper left
corner of the document window) in the Left and Top text boxes. For additional information on positioning
floating boxes accurately using the layout grid and the Transform and Align palettes, see “Positioning
floating boxes” on page 145.
5 To resize the floating box, enter the desired size in the Width and Height text boxes, or drag any of the
resize handles. Choose the units of measurement from the adjacent pop-up menus in the Inspector:
• Auto to size the box to its contents.
• Percent to size the box to that percentage of its original size.
Note: An internal Netscape bug causes Netscape to resize the width of a floating box to the width of its
contents.
144 CHAPTER 7
Floating Boxes
6 Enter a value for the z-index of the floating box in the Depth text box if you plan to add more overlapping
boxes. Use the z-index (Depth) 1 for the lowest box, 2 for the next box in the stack, and so on.
Assign z-indices whenever you place overlapping floating boxes on the same page to avoid problems
when the browser tries to display them.
A
B
C
A. The lowest box has a z-index of 1.
B. The box in the middle has a z-index of 2.
C. The box at the top has a z-index of 3.
7 If desired, choose a background color for the floating box using the procedure described in “Working
with color” on page 77. You can also add a background image.
To add text to a floating box:
1 Click in the floating box. The background of the box turns white unless you have selected a background
color or image.
2 Type in the required text.
3 Select the text, and apply formatting using the buttons in the Text toolbar or the text formatting
commands from the Type menu. (See “Formatting text using physical and structural styles” on page 60.)
Note: If you embed a floating box in another floating box, the embedded box will inherit any CSS information
from the parent floating box.
To add an image or other object to a floating box:
1 Do one of the following:
• Drag any object from the Objects palette directly to the content area of the floating box.
• Click inside the floating box, and then double-click the desired item in the Objects palette.
ADOBE GOLIVE 5.0 145
User Guide
2 Set up an item or placeholder as desired—for example, use the Point and Shoot button to link an image
placeholder with an image file in the site window.
Note: Netscape Navigator and Internet Explorer may have problems with floating boxes that contain tables or
layout grids. Also, an intermittent bug in Netscape 4.0 browsers may cause the content of an animated floating
box to temporarily disappear, especially if the content is an image button. A simple workaround is to click the
content area and insert a nonbreaking space, press Alt-space (Windows) or Option-space (Mac OS), before the
image button.
To display a background image in a floating box:
1 With the floating box selected, select the BGImage option in the Floating Box Inspector. An Empty
Reference entry appears in the adjacent box, prompting you to select an image.
2 Use the Point and Shoot button ( ) to link to an image file in the site window, type in the image filename (including the relative path to the folder), or click the Browse button ( ) to select an image in the
subsequent file selection dialog.
Note: Avoid using a background image alone in a floating box. In Netscape Communicator, the background image may not display.
To change a floating box background from transparent to an opaque color:
1 With the floating box selected, click the color field in the Floating Box Inspector to open
the Color palette.
2 Select a color from any tab of the Color palette (preferably a Web-safe color), and drag it from the
preview pane of the Color palette to the color field in the Floating Box Inspector.
Positioning floating boxes
A layout grid that you define in the Grid Settings dialog box helps you position floating boxes accurately
on your page. You can also use the Transform and Align palettes to resize, position, and align multiple
floating boxes.
To position a floating box using the layout grid:
1 Choose Window > Floating Boxes to open the Floating Boxes palette.
2 Press on the triangle in the upper right corner of the Floating Boxes palette to open the palette menu.
Choose Floating Box Grid Settings.
146 CHAPTER 7
Floating Boxes
3 In the Grid Settings dialog box, define the layout grid and its behavior:
• Type a value in the Horizontal and Vertical text boxes to define the grid spacing.
• Select Snap to have the floating box snap to the grid lines.
• Select Visible to have the grid display as you drag the floating box to a new position.
4 Select your floating box in the Floating Boxes palette or on the page, and drag to the new location.
Depending on your grid settings, the grid will appear as you drag the floating box.
To position, resize, and align floating boxes using the Transform and Align palettes:
You position, resize, and align floating boxes using the Transform and Align palettes in the same way as you
align and distribute other objects on a layout grid. (See “Aligning and distributing objects” on page 75.)
Converting floating boxes to layout text boxes
You convert floating boxes to layout text boxes in the Floating Boxes palette. Position, size, and background
color attributes of the floating box are retained.
To convert a floating box to a layout text boxes:
1 Choose Window > Floating Boxes to open the Floating Boxes palette.
2 Define a layout grid as described in “Positioning floating boxes” on page 145.
3 Select your floating box in the Floating Boxes palette or on the HTML page.
4 Press on the triangle in the upper right corner of the Floating Boxes palette to open the palette menu.
Choose Convert To Layout Grid. The floating box converts to a text layout boxes on a layout grid in a
new page.
ADOBE GOLIVE 5.0 147
User Guide
About Web page animation with floating boxes
Adobe GoLive Dynamic HTML (DHTML) animation tools let you create full-scale animations to maximize the visual impact of your pages. You create DHTML animations by placing images, text and other
objects in floating boxes and using the TimeLine editor to control movement of the floating boxes.
E
D
A
C
B
A. Floating box containing a GIF image moves along a curved path. B. The TimeLine Editor lets you control the motion of
the floating box over time. C. The Floating Box Inspector controls the initial position, layering, visibility, and curve shape of
the floating box. D. Floating Box icon in the Objects palette. E. Opens the Timeline Editor.
148 CHAPTER 7
Floating Boxes
You can move objects along linear, curved, or random zig-zag animation paths. You can hide them temporarily and change their stacking order. By combining all those features, you can produce amazing visual
effects—for example, you can display two items that seem to revolve around each other. For information
on showing and hiding floating boxes see “Show Hide” on page 258.You use the TimeLine Editor to set the
keyframes and paths for animated objects.
A
B
C
D
E
F
G
H
I
J
A. Time cursor B. Autoplay button C. Scenes popup menu D. Actions Track
E. Time tracks F. Indicates time track with currently selected frame G Loop and Palindrome controls
H. Playback buttons I. Keyframe J. Frames per second
Before using the TimeLine Editor, you need to understand some basic animation concepts:
Scenes Enable Web authors to include multiple animations in the same Web page. All scenes share the same
document and TimeLine Editor windows. You can create multiple scenes for each page and have them play
back automatically (default), trigger them using scripted actions, or provide buttons for the viewer to click.
Frames Are the individual pictorial units of an animation. As used in connection with video display
systems, frames are images that are played back in a rapid sequence to create a visual effect of motion. The
number of frames per second (FPS) controls the animation’s playback speed. The more frames per
second you assign to an animation, the smoother the impression of fluid motion. However, if you exceed
the capabilities of the viewer’s computer, frames will be skipped.
Keyframes Mark points on the time track of an animation sequence at which some specific change
occurs. These changes include changes in direction within the animation path as well as modifications of
general properties, such as visibility and stacking order. For each keyframe, you can control the position of
the associated floating box by dragging it to the desired location in the document window. Also, the distance between two keyframes determines the playback speed—the shorter the distance, the faster the animation will play back and vice versa.
Time tracks Let you insert keyframes in a dedicated time track for each floating box and adjust the timing
and location. Each single track accepts multiple keyframes, which you can place where you want.
ADOBE GOLIVE 5.0 149
User Guide
Actions Are ready-to-use scripts that you can use with the TimeLine Editor, rollover buttons, links, and
form elements. Actions allow you to add sound, trigger the playback of scenes, dynamically change the content of images, and control other processes in the browser window. You define actions in the Action Inspector or the Actions palette.
To animate multiple objects on the same page, you use multiple floating boxes. As you add floating boxes,
Adobe GoLive stacks them in the order you insert them and adds a new time track in the TimeLine Editor.
You animate each floating box separately by inserting keyframes in its time track and positioning the
floating box in the document window.
The time track in the TimeLine Editor represents the motion of a floating box over time (always from left
to right), not the direction of motion in the document window. You determine the direction of motion by
clicking all keyframes successively and dragging the floating box to a new position within the document
window. For example, by selecting the first keyframe in a time track and dragging the floating box to the
right edge of the window, you specify that the animation is to start from the right side of the browser window. When you preview the animation, don’t be confused by the opposing directions of motion in the
two windows.
Adjusting the stacking order of floating boxes lets you to set how floating boxes move over other floating
boxes on the page. See “Using stacking order to simulate relative motion” on page 155.
Creating objects to animate
Any object you want to animate must be enclosed in a floating box. Generally, you can insert any item from
the Objects palette that goes into the body section of a Web page. (Tables and layout grids may cause problems in some browsers.) To provide content for an animation, consider transparent GIF images. Transparent GIFs create a very lively impression of motion because they don’t conceal what is underneath them
while moving across the page. Also suitable are normal GIFs or formatted text. You can also choose an
opaque background color or background image if you don’t want the floating box to be transparent.
150 CHAPTER 7
Floating Boxes
To set up an object to animate, first you insert a floating box in your page, and then you set the properties
of the box and add content to it. See “Setting up floating boxes” on page 142.
Note: Do not drag an image file directly into the floating box. This will create a background image that will
not display in Netscape. To add an image that you want to float across the page, drag the Image icon from
the Basic tab ( ) of the Objects palette to the floating box.
Floating box without content and floating box with image placeholder
Animating floating boxes
To animate a floating box, you place keyframes in the TimeLine Editor. Each keyframe is associated with
a position relative to the upper left corner of the document window. This position represents the location
of the floating box at a particular time while the animation plays back. You adjust the position by dragging
the floating box to the desired location. You can select the shape of the animation path in the Floating
Box Inspector.
Instead of inserting keyframes one by one and specifying their positions, you can also record an animation
path by pressing the Record button and moving a floating box on your page.
To insert a new keyframe:
1 Select the floating box in the document window by clicking its outline, its small yellow marker, or its
name in the Floating Boxes palette.
2 Open the TimeLine Editor by clicking the TimeLine Editor button(
) above the main content area of
the document window. Initially, the TimeLine Editor window contains only one time track with a single
keyframe.
ADOBE GOLIVE 5.0 151
User Guide
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-click (Windows) or Option-click (Mac OS) an existing keyframe and drag
to the desired position on the time track to create a new keyframe.
A
B
C
D
A.The left and right locators mark the beginning and the end of the
play range. B. Alt-click (Windows) or Option-click (Mac OS) the first keyframe, and
then drag to the desired position to create a new keyframe. C. The counter
indicates the position of the keyframe in seconds and frames. D. The Time
cursor follows as you drag, stopping at the position where you drop the new keyframe.
The new keyframe marks the end of the play range. This is indicated by the right play range locator ( ),
which follows as you drag the keyframe. If you insert more keyframes, the keyframe farthest to the right
always limits the play range.
To specify the position of the floating box for a keyframe:
1 Go to the document window and drag the floating box to the position where you want it to appear for
the keyframe. You can also enter the desired position in the Left and Top text boxes of the Floating Box
Inspector.
2 Click the first keyframe ( ) to return the floating box to its start position. (You can also change its position as described in step 1.)
3 Click the Play button (
) at the bottom of the TimeLine Editor to preview your animation. The
floating box travels across the document window and stops where you set the last keyframe.
4 The time cursor also stops at the right play range locator ( ). Click the Stop button (
) to reset the
time cursor to the beginning of the play range, or use the Backward button (
) to return the time cursor.
5 If desired, use the Loop and Palindrome buttons in the lower left corner of the TimeLine Editor window
to control the looping behavior:
• The Loop button (
) plays your animation in a simple endless loop. When it reaches the end point
of the animation path, the floating box jumps back to the start and resumes traveling, repeating this cycle
indefinitely.
• The Palindrome button (
) causes the floating box to bounce back and forth between the start and
end points of the animation path. (The Loop button must be active to activate the Palindrome button.)
152 CHAPTER 7
Floating Boxes
6 To change the playback speed, select another option from the FPS menu at the bottom of the 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.
You can quickly add a keyframe between two existing keyframes and set the floating box’s position for the
frame. In the TimeLine Editor, drag the time cursor to the position in the TimeLine where you want to
insert the new keyframe. The floating box moves to that position in the path. Alt-click (Windows) or Optionclick (Mac OS) the edge of the floating box and then drag it to a new position.
To specify the shape of the animation path:
1 Ctrl-click (Windows) or Command-click (Mac OS) in the Timeline Editor to set the ending position of
an animation path by adding a new keyframe in the TimeLine. Then move the floating box into position
for the keyframe.
2 Ctrl-click (Windows) or Command-click (Mac OS) in the TimeLine Editor to insert a new keyframe
between the two existing keyframes.
3 Click the middle keyframe to select it, and then drag the floating box to the position where you want it
to appear.
A
B
C
D
E
A. End point of animation as marked by the keyframe at 30 seconds B. Starting point of animation
C. Shows position of selected keyframe D. Selected keyframe inserted at 15 divides the animation
into two sections E. Shape option specifies the shape of the animation
ADOBE GOLIVE 5.0 153
User Guide
4 To alter the shape of the path between a keyframe and the next keyframe, select a keyframe and then
choose a shape option from the Animation menu in the Floating Box Inspector. Linear is the default path
shape, Curve creates a smooth curve between keyframes, and None makes the floating box jump between
the keyframes.
To select multiple keyframes, Shift-click them, drag around them, or choose Edit > Select All; then apply a
common setting, such as a curved animation path.
5 Click the Play button (
) in the TimeLine Editor to preview your animation.
To record an animation path:
1 Open the TimeLine Editor, and begin with the initial keyframe.
2 Click the Record button (
) in the Floating Box Inspector.
3 In the document window, drag the floating box along the desired path. A keyframe appears at each major
turn in the path.
4 Click each keyframe and correct the position if necessary.
Managing multiple floating boxes
The Floating Boxes palette helps you manage multiple layered floating boxes in your document window by
showing or hiding and locking and unlocking boxes temporarily.
Note: These settings in the Floating Boxes palette are only temporary and will be overridden when you click
the Play button in the TimeLine Editor or switch document views.
You can also use the Floating Boxes palette to position floating boxes with a grid (see “Positioning floating
boxes” on page 145).
154 CHAPTER 7
Floating Boxes
To manage multiple floating boxes in a document window:
1 Choose Window > Floating Boxes palette. The Floating Boxes palette lists the floating boxes present in
the active window.
A
B
C
D
A. Click the eye icon to hide or show
the content of a floating box. B. Click the
“pen” icon to lock or unlock a floating box.
C. Click the name to bring a floating box to
the foreground. D. Locks the floating box in editing view
2 Click the name (layer, layer 1, etc.) to activate a floating box in the document window for editing and to
bring it to the front. Clicking the name of a floating box temporarily overrides the hide/show and
lock/unlock statuses in the following steps.
3 Click the eye icon to hide or show the content of a floating box, or Ctrl-click any eye icon to hide or show
all floating boxes at once, as follows:
• Dimmed eye icon indicates that the floating box is invisible.
• Black indicates that the floating box is visible.
• Red indicates that the temporary show/hide settings made in the Floating Boxes palette conflict with the
current visibility status of the floating box (see “Controlling the visibility of floating boxes” on page 157),
as set in the Floating Box Inspector for a particular keyframe. For example, the eye icon is red if you have
hidden a floating box in the Floating Boxes palette that is supposed to be visible in the animation.
Note: Red indicates a conflict rather than an error. Your animation will play back without any problems.
4 Click the pen icon to lock or unlock a floating box, or Ctrl-click any pen icon to lock or unlock all floating
boxes at once. When locked, the pen icon is dimmed in the Floating Boxes palette, and you cannot drag the
floating box or edit its content in the document window.
5 The padlock icon in the upper right corner of the Floating Boxes palette lets you preserve all temporary
hide/show and lock/unlock settings when you click the Play button in the TimeLine Editor or switch
views—for example, from Layout to Source and back.
ADOBE GOLIVE 5.0 155
User Guide
Using stacking order to simulate relative motion
The stacking order, also known as the z-index, is a unique property of floating boxes. In animations with
multiple objects, you can use this property to determine which object should appear on top when the paths
of two or more floating boxes cross. You can also use the stacking order to simulate more complex effects
of relative motion—for example, by letting one floating box revolve around another.
Like the other floating box properties, you can control the stacking order for the time span between any
two keyframes on the same time track. To produce the visual effect of stacking, however, this property
must be set for at least two synchronous or overlapping time spans on two different time tracks within the
same scene.
The following example is based on a simple animation that simulates relative motion. It is a palindrome
that consists of two objects; a stationary floating box with a GIF image and an animated floating box with
text content. Four keyframes, each on two time tracks, control the animation, subdividing it in four phases.
The test box remains on top until the final phase, when it moves behind and is hidden by the image box.
1
2
3
4
1. First keyframe position 2. Second keyframe position 3. Third keyframe position 4. Fourth keyframe position
To create an animation with one stationary object and an animated object revolving around it:
1 Insert two floating boxes and add content—for example, add an image to one box and formatted text to
the other.
2 Select the image box that is to remain stationary, position it on the page, and place three keyframes on
its time track in the TimeLine Editor.
3 To ensure that the image box is stationary, select the first keyframe of the image box. Then click on each
keyframe. The position should be the same for all four keyframes to prevent the image box from jumping
during playback. If in doubt, click all four keyframes to check the positions in the Top and Left text boxes
of the Floating Box Inspector. Correct any pixel offset by hand-editing the top and left coordinates for each
keyframe, if necessary.
4 Click the Loop (
an endless loop.
) and Palindrome (
) buttons in the TimeLine Editor to play the animation in
5 Click the Play button (
) to preview the stationary object. The image box shouldn’t move. If any
motion occurs, return to step 4 and correct the Top and Left coordinates.
156 CHAPTER 7
Floating Boxes
6 Select the second box (the text box), and insert three additional keyframes on its time track in the TimeLine Editor. Place each keyframe directly below the image box keyframes to synchronize them.
Two time tracks in the TimeLine Editor. Each holds four keyframes.
7 Define the four positions (corresponding to the four keyframes) of the text box relative to the image box:
• Select the first keyframe of the text box; then drag the text box to a position to the left of the image box,
aligning it vertically with the center of the image box.
• Select the second keyframe of the text box; then drag the text box horizontally on top of the image box.
• Select the third keyframe of the text box; then drag the text box horizontally to the right of the image box.
• Select the last keyframe of the text box, then drag the text box horizontally on top of the image box.
8 Define the stacking order for all four keyframes, both for the text box and image box:
• Select the first keyframe of the text box. In the Floating Box Inspector, enter 2 in the Depth text box.
• Select the first keyframe of the image box. In the Floating Box Inspector enter 1 in the Depth text box.
D
A
E
B
C
A. Current coordinates B. Selects the shape of the animation path
C. Selects a keyframe color D. Sets the stacking order E. Sets visibility
9 Repeat step 9 for the second and third keyframes to stack the text box on top of the image box.
10 Reverse the stacking order for the time span after the last keyframe:
• Select the last keyframe of the text box in the Floating Box Inspector and enter 1 in the Depth text box.
• Select the last keyframe of the image box. Enter 2 in the Depth text box of the Floating Box Inspector.
ADOBE GOLIVE 5.0 157
User Guide
11 Click the Play button (
) to preview your animation. On returning from the farthest right point of
the animation path, the text box should disappear behind the image box.
Controlling the visibility of floating boxes
The visibility property lets you hide an object during the time span between any two keyframes. Invisible
floating boxes offer three major benefits:
• You can make objects appear suddenly, to create a more lively impression of your animation.
• In animations with multiple images, you can hide all the images until the animation is completely loaded
in the viewer’s browser. This avoids the problem of the playback beginning before the browser has all the
information to play smoothly.
• As a good practice, you can hide an image when you use an action to switch the image content of an image
in an animated scene. If the image remains visible, this may cause choppy animation while the browser is
downloading the new image from the Web server.
158 CHAPTER 7
Floating Boxes
To hide a floating box:
1 Click the keyframe from which you want to hide the floating box. In the Floating Box Inspector, deselect
the Visible option.
2 If desired, repeat the step for additional keyframes.
3 Click the Play button (
) to preview your animation. The floating box should disappear temporarily.
Inserting actions in animations
The Actions Track in the TimeLine Editor lets you Ctrl-click (Windows) or Command-click (Mac OS) to
insert action markers. You can connect these markers with scripted actions available from the Action menu
in the companion Action Inspector. For instructions on using actions with the TimeLine Editor, see “Using
Adobe GoLive actions” on page 249.
Note: You can use the action track of pages that don’t have floating boxes.
Creating multiple scenes
The TimeLine Editor lets you save multiple scenes with a document. All scenes share the same document
window, the same floating boxes. Scenes make your animations more flexible. You can play them back
simultaneously, one after the other, or start and stop individual scenes through scripted actions. You can
have the browser autoload scenes (the default), use scripted actions to trigger playback, or let the viewer
select a scene by clicking a button.
Be sure you don’t try to control the same floating box from two scenes simultaneously. We recommend
using only one scene whenever possible. Scenes are a powerful tool, but you can create overly complex
animations.
To create multiple scenes:
1 Create an animation. Adobe GoLive names the first animation you create in a document Scene 1
by default.
2 In the upper left corner of the TimeLine Editor (
the scene, and click OK.
), Choose Scenes > New Scene. Enter a name for
The time tracks in the TimeLine Editor don’t change. The keyframes for the first animation are used in the
first scene you have created. Leave them unchanged as you work on Scene 2. (To edit them, go to the Scenes
menu and switch back to the first scene.)
3 Add and animate floating boxes for the new scene, and then preview the entire animation by clicking the
Play button in the TimeLine Editor.
ADOBE GOLIVE 5.0 159
User Guide
Controlling the playback of scenes
If you create two scenes, you can coordinate playback. By default, scenes are set to Autoplay—that is, all
scenes play back after the browser finishes loading the page. To play scenes back one by one, instruct the
browser to switch to the second scene after the first has completed playing back. Turn off the autoplay
option for the second scene and insert a Play Scene action on the Actions Track of the first scene. (If the
first scene is a looped animation or palindrome, you may need to insert a Play Scene action followed by a
Stop Scene action.)
To have the browser switch to a second scene during playback:
1 Go to Scene 2, and click the Autoplay button (
) to disable automatic playback.
2 Return to Scene 1, and Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track anywhere
before the last keyframe position to insert an action marker (indicated by a question mark icon ( ).
3 In the Action Inspector, choose Actions > Multimedia > Play Scene and choose the name of the scene
from the pop-up menu.
The Play Scene action instructs the browser to switch to the specified scene after finishing playback of the
current scene. On the Actions Track, the Play Scene action icon ( ) replaces the marker.
4 If the first scene is a looped animation or a palindrome, Ctrl-click (Windows) or Command-click
(Mac OS) the Actions Track at the very last keyframe and insert a Stop Scene action (Actions >
Multimedia > Stop Scene). The Stop Scene action icon ( ) appears.
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; otherwise, the animation stops before scenes can be switched.
5 Return to the first scene and preview the animation in the browser. The playback should show the
switched scenes.
6 Continue to add more scenes and automate playback by repeating steps 1 through 6.
Note: To give viewers more control over your animation, you can also attach the Play Scene action to a rollover
button or hyperlink text in Layout view. For instructions on using actions with rollover buttons and text,
see “Using Adobe GoLive actions” on page 249.
160 CHAPTER 7
Floating Boxes
161
Chapter 8: Advanced Page Layout
Using frames
Frames divide a Web browser window into sections that contain separate pages. Using frames, you can
make your page layout more visually interesting and help viewers navigate in your Web site.
About frames
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 while the viewer scrolls through the page
in another frame.
A
B
C
A. The top frame contains an identity page. B. The left frame contains a navigation page. C. The right frame contains a
page that is linked to the navigation page.
You need at least three HTML documents to create a two-frame page layout: one document for the frame
set 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 specifies the URLs that reference the content pages. You design the
content pages to fit or scroll within specific frames in the frame set.
162 CHAPTER 8
Advanced Page Layout
You can set frames to scroll if the content page is larger than the frame and to have visible borders or no
borders. You can also set frames to be a fixed size or to resize proportionally when a visitor resizes the
browser window.
Note: At least one frame in the frame set must be resizeable.
When working with frames, keep in mind the following browser limitations:
• Single-frame pages do not display in Netscape Navigator and Communicator browsers.
• 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.
• Nesting frame sets within frame sets is possible but can cause serious navigation problems.
Adding frames to a Web page
The Frames tab of the Objects palette contains a selection of frame sets that can be dragged to your document window when you want to create a Web page with frames. You can display a preview of the frame
content directly in the document window, without a browser. You can then make corrections on the spot
by double-clicking the frame content or by dragging and dropping an alternative page.
A
B
C
D
F
E
A. Click to switch to Frames view. B. Click to switch to Frame Preview. C. The name of the frame appears here.
D. Click the separator to select the frame set, or drag it to resize frames relative to each other. E. Icons representing
pages appear in the individual frames. F. The pink-shaded areas represent frames with fixed pixel sizes.
To create a frame set:
1 Create the HTML pages you want in your frame set. For example, create a page “Content.html” for a
table of contents frame, and “Body.html” for a main window.
2 Open a new document window, and click the Frame Editor tab (
) at the top of the window.
ADOBE GOLIVE 5.0 163
User Guide
3 From the Frames tab (
) of the Objects palette, drag a frame set icon into your document window.
4 Select the frame set by clicking any of its horizontal or vertical dividers.
5 Set the frame set options in the Frame Set Inspector. (The Size text box is unavailable because a frame
set cannot have an absolute size.)
• Click an Orientation button in the Frame Set Inspector to arrange the frame borders in the frame set
horizontally or vertically.
• To change the thickness of a border, click any divider in the document window, select the Border Size
option, type a value in pixels, and press Enter.
• To hide a horizontal or vertical border, select the divider and set the Border Frame to No and
the Border Size to 0.
• To assign a color to all borders in the frame set, click any divider in the document window, select the
Border Color option, click in the Border Color box, and then select a color from the Color palette. This
color overrides the gray border that most Web browsers display by default.
Note: To color the background of a frame, you must select a background color for the page you want to display
in that frame. (See “Selecting text and background colors” on page 46.)
6 Click each frame in the frame set, and give it a descriptive name. (For example, label the top frame
“Identity” and the right frame “Main.”) Set other frame attributes as needed.
7 Name the page title of the frame set. (Titles assigned to individual frames won’t appear in the
browser window.)
8 Save the frame set document. Make sure to save it with an .html extension, for example, Frameset.html.
164 CHAPTER 8
Advanced Page Layout
To specify the contents of a frame:
Do one of the following:
• In the Frame Inspector, drag from the Point and Shoot button (
the Page icon ( ) next to the title of the target document.
) to a page in the site window, or to
• Type the desired file name in the URL text box of the Frame Inspector. Click the Browse button (
choose a Web page.
) to
• Drag URLs from the External tab of the site window. (By using URLs, you can reference resources on
remote volumes or servers. See “Using site URLs and e-mail addresses” on page 411 for information. Drag
HTML pages from the Files tab of the site window or from the desktop.
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 “Using a table of contents page in a frame set” on page 165
for information.
To preview the frame set page with its contents:
Click the Preview tab ( ) (Windows), or Frame Preview tab (
window. You cannot edit in the Preview mode.
) (Mac OS) at the top of the document
Note: Adobe GoLive cannot preview external URLs. You need to test external links with a browser.
To view or edit a page in another window, double-click the page icon in the frame.
To specify frame attributes:
1 Select the frame you want to modify.
2 In the Frame Inspector, do one of the following to specify a size for the frame:
• Choose Scale from the pop-up Size menu if you want to size the frame automatically when a viewer
resizes the browser window.
• Choose Pixel from the Size pop-up menu, and enter the desired size in pixels if you don’t want the frame
to be resizable. 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 with the same
orientation to Scale, or the frame set scales all frames in that direction.
• Choose Percent from the Size pop-up menu if you want the frame to have a fixed ratio relative to the
overall height or width of the frame set. Then use the Size 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.
• Choose Pixel or Percent from the Size pop-up menu, and drag the frame border to the desired size.
3 In the Name text box, type a name for the frame.
ADOBE GOLIVE 5.0 165
User Guide
4 Select an option from the Scrolling pop-up menu:
• Auto hides the scrollbar if it isn’t needed and shows it if the content is too large for the frame.
• Yes shows the scrollbar at all times.
• No hides the scrollbar.
To move a frame or a nested frame set:
1 Click and drag to move a frame. Control-click and drag to move a 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.
2 Release the mouse button when the frame is at the desired location, or when the nested frame set is at
the desired location within the master frame set.
Using a table of contents page in a frame set
When you use frames to display a table of contents and the pages linked to it, for every link in the table of
contents you must specify the target frame in which the linked page will appear.
166 CHAPTER 8
Advanced Page Layout
To specify a frame for linked pages:
1 Create a frame set and set your table of contents page to appear in one of the frames.
2 Open the table of contents page and link each item in the list to a Web page.
3 For each link, in the Link tab of the Text or Image Inspector, specify the target frame where you want the
linked page to appear by choosing an option from the Target pop-up menu:
• Choosing a frame’s name loads the page in that frame. The frame names of your open frame set appear
at the top of the menu.
• _top loads the page referenced by the link into the full Web browser window, replacing the current frame
set entirely. If the current page is already at the top, the page loads into the frame that contains the link.
• _parent loads the page referenced by the link into 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 loads the page referenced by the link into the window or frame that contains the link, replacing the
table of contents page.
• _blank loads the page referenced by the link into a new untitled window.
• Default removes any previously set target for the page.
You can set actions for pages in frames that force a browser to always display the pages in the frame set
regardless of how the pages are accessed. You can also use actions to set multiple target frames for a single
link. See “Preventing pages from displaying in a frame set” on page 276 and “Displaying two frames from one
link” on page 276.
ADOBE GOLIVE 5.0 167
User Guide
Using stationery
Pages stored in the Stationeries folder become templates that can be reused as the basis for new pages in
your Web site. Stationery is particularly useful if you want to keep the layout of your pages consistent when
designing the site. A stationery page template can contain frame sets, images, stylesheets, and other information for repeated use.
To create stationery:
Prepare the page you want to use as stationery in Layout view in the document window and do one
of the following:
• Choose File > Save As, name the stationery file, locate the site folder you want to keep it in, choose
Stationeries from the pop-up menu at the lower right (Windows) or at the top (Mac OS) of the Save As
dialog box, and click Save.
Saving a stationery file
• Drag the file from the Files tab in the site window into the Stationeries folder in the Extras tab of the site
window. Click the Update button on the toolbar and save the site.
The file is saved in the Stationeries subfolder of the SiteName.data folder and displays in the Site Extras tab
of the Objects palette and in the Extras tab in the site window.
To view the stationery properties, select the stationery file in the site window and view the properties in the
File tab of the File Inspector. In Windows, you can also right-click the stationery file and choose the Show
Properties command. In Mac OS, you can also use the Finder Get Info command to view the properties
(Control-click the stationery file and choose Info in Finder).
To use a stationery page template:
Do one of the following:
• In the Extras tab of the site window, double-click the desired stationery file in the Stationeries folder, and
click Create to open a new, untitled document based on the stationery.
168 CHAPTER 8
Advanced Page Layout
• In the Objects palette, choose Stationeries from the pop-up menu at the bottom of the Site Extras tab
( ). Drag the desired stationery icon to the Files tab in the site window or to the Navigation tab (select the
site window and choose Site > View > Navigation) to where you want to add a child, sibling, or parent page
in the site hierarchy. When you drag stationery to the Navigation tab, a vertical or horizontal bar appears
at the top, bottom, and sides of the page icons indicating where a new page will appear in the hierarchy
when you release the mouse.
Dragging a stationary icon to the Files tab.
GoLive creates a new page based on the stationery template. If you used the navigation hierarchy, the new
page is stored in the New Files folder in the site. Use the File and Page tabs in the File Inspector to change
the filename and title of the new page.
Using GoLive components
Adobe GoLive components let you reference one or more elements stored in a single source file to reuse on
multiple pages. Changes made to the elements in the source file are updated dynamically in the pages that
contain the component. This feature is useful for buttons, logos, headers, mastheads, or other common
navigation elements that you want to use throughout your site.
About components
You use Adobe GoLive components to reference other HTML pages and embed them in your page, complete with text, images, and other visual content. When you embed an HTML page as a dynamic component instead of writing the HTML code in your pages, you can change any element within the component
simply by double-clicking the component to open the source file and then editing the element. When you
save the source file, Adobe GoLive automatically updates all pages that contain the component.
ADOBE GOLIVE 5.0 169
User Guide
Adobe GoLive encloses the embedded HTML page in a custom tag that the browser ignores (although its
content is understood and interpreted correctly), and marks it as dynamic page content that needs to be
updated each time the source file changes.
Note: Components are updated only while you work on your local hard disk. Pages on the Web server are not
updated by just uploading the source file. You also need to upload all pages that contain the component to
update your site after changing a source file.
Components can be nested within other components, and include one or more actions.
Setting up GoLive components
Once you have created your HTML source file and saved it as a component, you use the Objects palette to
insert the component into your pages. You can also use the Objects palette to insert a component placeholder from which you can link to the component source file at a later time.
To create a component source file:
1 In a new document window, click the Page icon (
).
2 Click the HTML tab of the Page Inspector, and click Component to set up the current page for use as a
dynamic component.
170 CHAPTER 8
Advanced Page Layout
This ensures that the component can be easily edited in Layout view of the document window. Also, the
Import CS Library setting is necessary if your component uses GoLive actions.
3 Add the desired content—for example, a layout grid with your corporate logo and headline.
4 Choose File > Save As, name the component, locate the site folder you want to keep it in, choose Components from the pop-up menu in the lower right (Windows) or the top (Mac OS) of the Save As dialog box,
and click Save.
The file is saved in the Components subfolder of the SiteName.data folder and displays in the Site Extras
tab of the Objects palette and in the Extras tab of the site window.
To use a component:
1 Make sure that you have saved the desired source file. (It does not need to be open.)
2 Do one of the following:
• Click the Site Extras tab of the Objects palette, and choose Components from the pop-up menu at the
bottom of the window to display the components you have saved. Then drag the desired component into
the document window.
• Drag the Component placeholder icon from the Smart tab ( ) of the Objects palette into your document window, and use the Browse button or the Point and Shoot button ( ) in the Component Inspector
to link to the desired component. If the component source file is open, you can also link to the Page
icon ( ) in the document window.
When designing the source file, keep in mind that component placeholders resize differently according to
the size of the page and sizes of the embedded components. Also, you can resize the width of component
placeholders when you put them on a layout grid.
To edit the source file:
1 Double-click the embedded component 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.
171
Chapter 9: Adding Interactivity
Creating mouse rollovers
The Rollover icon lets you add mouse rollover images which change when the pointer moves over them.
You can use these rollover buttons in your Web pages as navigation controls or to let viewers control
animations.
Creating rollover buttons
An animation effect occurs when the browser is instructed to toggle between two (or three) slightly different images of the same button. You can easily create these images in programs such as Adobe Photoshop.
Note: The images must be exactly the same size or you won’t get consistent results in all browsers.
The first image determines the normal appearance of the rollover button, that is, how it looks while the
mouse pointer is anywhere else on the page. The second image is a highlighted version of the image that
shows when the mouse pointer is on top. The third image appears when the rollover button is clicked. You
can use a mouse rollover as a hyperlink to another location to display another image or text, and assign a
prebuilt Adobe GoLive action to a button.
Adobe GoLive inserts a custom element that serves as a container for the images plus the JavaScript that
switches its content, depending on the current location of the mouse pointer. Adobe GoLive automatically
loads all the rollover images when the page loads in a Web browser.
To create a mouse rollover button:
1 Drag the Rollover icon from the Smart tab (
) in the Objects palette to your document.
2 To select the main image for the button, click the Main Image icon in the Rollover Inspector, and click
the Browse button ( ) to select an image or drag from the Point and Shoot button to an image in the
site window.
3 To select an image for when the mouse pointer is over the button, click the Over Image icon, select the
check box next to the file selection text box, and select the image.
4 To select an image for when the button is clicked, click the Click image icon, select the check box next to
the file selection text box, and select the image as described in step 3.
You can also use drag-and-drop to assign the three button images. First drag the main image from the
site window or a folder to the Rollover icon in the document window. Then Alt-drag (Windows) or
Option-drag (Mac OS) a second image to assign the mouse-over image. Shift-drag to assign the on-click image.
All images should be the same size.
172 CHAPTER 9
Adding Interactivity
To link a rollover to another location:
In the Rollover Inspector, select the URL check box and type a Universal Resource Locator in the text box.
You can also use the Browse button or the Point and Shoot button to select a link destination.
To display a message at the bottom of the browser window as the pointer moves over the rollover:
In the Rollover Inspector, select the Status check box and enter the text you want in the browser window.
To test the effect, preview the page in a Web browser.
Attaching actions to a rollover
The Actions palette lets you attach scripted actions to the button image—for example, an action that
changes the background color of the page.
Note: Make sure that all button images on a page have a unique name (button1, button2, etc.). Names that
contain only numbers (1, 2, 3, etc.) or that start with a number won’t work in all browsers. Also, names may
not contain spaces or special characters.
To attach an action triggered by a mouse or key event:
1 In the Actions palette, choose a mouse or key event from the list box to the left:
• Select Mouse Click to have a single mouse click trigger the action.
• Select Mouse Enter to have the action triggered when the mouse pointer moves over the button.
• Select Mouse Exit to have the action triggered when the mouse pointer moves off the button.
2 Click the + button to add an action to the Actions list box.
3 Choose an action from the Action menu and edit the action options. For information on the actions that
Adobe GoLive supports, see “Using Adobe GoLive actions” on page 249.
4 Launch a 4.0 or later browser to preview the action. (The 3.0 browsers support some actions. Browser
compatibility information appears next to the name of each action; however, results may vary and you
should always preview your actions in your browsers of choice.)
Using JavaScript
Built-in support for JavaScript and JScript lets you add interactivity to your Web pages, verify form input,
enhance visual displays, and dynamically control the browser. The integrated Script Editor lets you build
scripts in the application, embed them in your page, and test them immediately by launching the targeted
browser.
ADOBE GOLIVE 5.0 173
User Guide
To make it easy for you to add JavaScript, Adobe GoLive provides a complete inventory of building blocks
for all major JavaScript dialects and versions. Whenever you insert a script icon, you choose the targeted
application in the Inspector, which then configures the Script Editor accordingly. Combined with the ability of JavaScript to identify browsers, this feature makes it easy for you to build pages with multiplatform
support.
Important: Not all browsers implement JavaScript in the same way. Test all JavaScripts on all of your
target browsers.
Setting up JavaScript
You can add JavaScripts to your document page. You can also insert JavaScripts in the head section of your
document window to allow a script to be executed while the visible section of the document is still being
loaded. After you have inserted an icon in the body or head of your Web page, you create the JavaScript in
the JavaScript Editor.
To set up a JavaScript:
1 Drag the JavaScript icon from the Basic tab ( ) of the Objects palette to your document window, drag
the Script icon from the Head tab ( ) of the Objects palette to the head section pane, or select the JavaScript Editor icon (
) in the upper right of the document window and click the New Script Item button
(
) on the toolbar of the resulting JavaScript Editor window.
A
B
A. JavaScript icon
B. Script icon
2 Select the JavaScript icon in the document window, or select the Script icon in the head section pane.
3 In the Inspector, type in a descriptive name in the Name text box.
4 Choose a target browser from the Language pop-up menu. The language version corresponding to your
browser selection appears in the text box below the menu.
5 To reference an existing script, select Source and type in a resource locator for your script file, click the
Browse button to select a script, or drag from the Point and Shoot button to link to a script in the site
window. Script files must have the .js extension.
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.
174 CHAPTER 9
Adding Interactivity
• Select the JavaScript icon in the document window, and click the Edit button in the Inspector.
• Click the JavaScript Editor icon (
) in the upper right of the document window.
2 If the icons on the JavaScript Editor toolbar are inactive, click New Script Item (
) button.
3 Click the Events tab of the JavaScript Inspector to see the objects that can have events attached and the
events they support. To add an event to your script, select the event in the Inspector, and type the event
code in the Event Code text box.
Create event definitions by typing the
event codes in the Event Code text box.
4 Click the Objects tab of the JavaScript Inspector to display the complete inventory of JavaScript objects.
To add an object to your script, drag it from the Objects tab to the JavaScript Editor window.
Click a function declaration in the Functions list in the Script tab of the JavaScript Inspector window to
navigate directly to that location in the script.
5 Close the JavaScript Editor to save your work.
6 Click Show in Browser on the Adobe GoLive toolbar to open your Web page in the browser you selected
for previewing and testing in the Preferences dialog box. Or choose Special > Show in Default Browser.
Note: In Mac OS, you cannot preview the effects of a JavaScript in Preview mode.
ADOBE GOLIVE 5.0 175
User Guide
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
• 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.
• new Date()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 again to the browser’s screen using a document.write() method, with the
embedded currtime variable set to the current time and date.
Setting JavaScript preferences
The JavaScript, font, color, and printing preferences let you customize the settings that control how the
Script Editor behaves and appears, and how scripts appear in the Source view.
To set JavaScript preferences:
1 Choose Edit > Preferences.
2 Select the JavaScript icon (
) in the left pane of the Preferences dialog box.
3 Set the following preferences:
• Enable Dragging of Marked Text to control internal drag-and-drop support.
• Auto Indent to control the automatic indenting of lower level script elements.
• Line Numbers to display line numbers at the left margin of the JavaScript Editor window.
• Word Wrap to let the JavaScript code wrap in the JavaScript Editor window when it reaches the right
margin of the window.
• Tab Size to set the width of the indentation (in characters) added when you press the Tab key.
You can preview your settings in the preview pane at the bottom of the Preferences dialog box.
176 CHAPTER 9
Adding Interactivity
To set Font preferences:
1 Choose Edit > Preferences.
2 In the Preferences dialog box, expand the JavaScript preferences in the left pane and select Font.
3 Select a custom font, font size, and style for JavaScript code to override the default setting. This is the
font used to display JavaScript code in the JavaScript Editor.
To set Colors preferences (syntax highlighting):
1 Choose Edit > Preferences.
2 In the Preferences dialog box, expand the JavaScript preferences in the left pane and select Colors.
3 Select Enable Syntax Highlighting to determine the default appearance of the different code elements in
the JavaScript Editor.
4 To choose a color for each code element, click in the color field for the element, choose a new color,
and click OK.
To set Printing preferences:
1 Choose Edit > Preferences.
2 In the Preferences dialog box, expand the JavaScript preferences in the left pane and select Printing.
3 Set Printing preferences to control the default formatting for hardcopy printouts of the JavaScript code:
• Select Printer Specific Settings to format the hardcopy printout by using syntax highlighting (useful on a
color printer), applying bold for HTML elements to make them stand out, and adding line numbers to
make individual lines of code easier to refer to.
• Select Use Special Font for Printing to apply a custom font and style options for hardcopy printing.
Setting up Java applets
Adobe GoLive lets you insert Java applets on a layout grid or in the flow of HTML code, so that you can
add animation or other advanced features to your page. In Mac OS, you can play Java applets in Layout and
Preview modes from within Adobe GoLive, eliminating the need to launch a browser for previewing. In
Windows, you can play Java applets in the Preview mode only.
To set up a Java applet:
1 Drag the Java Applet icon from the Basic tab (
double-click the icon in the Objects palette.
) of the Objects palette to the document window, or
2 To select an applet, click Browse to locate the applet you want, or drag from the Point and Shoot
button ( ) to link to an applet in the site window.
ADOBE GOLIVE 5.0 177
User Guide
The name of the .class file—that is, the file containing the applet code—appears in the Code text box.
The name of the applet appears in the Java applet icon in the document window.
Note: With some Java applet generator programs, the .class extension is not added correctly to the CODE
attribute. These applets work in the browser, but they won’t display in Adobe GoLive.
3 Name the applet by typing a unique name not used by any other object on your page in the Name
text box.
4 Resize the applet by dragging the resize handles, or enter Width and Height values (in pixels or as a
percentage) in the Java Applet Inspector.
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.
Using Java applets as HTML Containers
Adobe GoLive lets you enter alternative text or HTML objects in the Java applet icon. The browser displays
alternative text if the applet element is understood but applet loading is turned off; the HTML appears
when Java is not supported. By adding images or other HTML objects, you can edit or enrich the text or
HTML content of the Java applet.
To display alternative text or HTML within the Java applet icon:
1 With the Java applet icon selected, click the Alt tab of the Java Applet Inspector.
2 Do one of the following:
• In the Alt Text text box, type the plain text you would like to display in place of the Java applet.
• Select Show Alternative HTML. In the document window, type the HTML directly into the applet icon,
or drag any Body icons, Forms, or DHTML icons from the Objects palette to the icon.
Adding audio and video clips
Adobe GoLive supports a variety of plug-ins that let browsers play back multimedia over the Web, allowing
you to place video and audio clips on your page. You can place any multimedia element supported by
Netscape Navigator or Internet Explorer, including QuickTime, Real audio or video, SVG, and SWF plugins, on your layout grid or in your flow of HTML code. You can preview supported media clips from within
Adobe GoLive.
178 CHAPTER 9
Adding Interactivity
Adobe GoLive offers a Plug-in icon that you configure, as well as predefined SWF, QuickTime, Real, or SVG
plug-ins. If you use the Plug-in icon, you map the file type to the plug-in to determine which plug-in opens
which type of file. To make any plug-in available to Adobe GoLive, you must first drag it into the Plug-ins
folder located at the same level as the Adobe GoLive application. For more information on mapping file
type to the plug-ins installed in the Plug-ins folder, see “Setting plug-in preferences” on page 184.
Important: Before uploading QuickTime movies, you must flatten them—that is, convert them to a
“Web-compatible” sequential format.
Setting up plug-ins
You set up all plug-ins—Plug-in, SWF, QuickTime, Real, or SVG—in the same way in the Plug-in Inspector. The options defined in the Basic, More, and Attribs (attribute) tabs are similar for all plug-ins; the
name of the last tab and the options defined in that tab (QuickTime, Special etc.) change depending on the
MIME type mapped to the plug-in. For the predefined plug-ins, the default settings in the Inspector rarely
need to be changed. For the Plug-in icon, you must define all the attributes in the Inspector, which requires
a good understanding of what attributes need to be assigned to each plug-in to work well with different
browsers.
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 Plug-in icon to edit the attributes of media extensions that Adobe GoLive does not
support directly.
Important: Although Adobe has tested all third-party plug-ins and media extensions currently available,
no warranty is granted, either implied or expressed, that plug-ins play properly when embedded in your
Web pages. Be aware that poorly programmed plug-ins may produce crashes and may damage your files.
To set up the Basic tab for a plug-in:
1 Drag the Plug-in icon or one of the predefined plug-in icons (SWF, QuickTime, Real, or SVG) from
the Basic tab ( ) of the Objects palette to the document window, or double-click the icon in the
Objects palette.
2 In the Basic tab of the Plug-in Inspector, select File, and click the Browse button (
) to locate the file
you want, or drag from the Point and Shoot button ( ) to link to a file in the site window.
Note: An SVG plug-in must be linked to an uncompressed SVG file. (See “Setting up SVG plug-ins” on
page 184.)
3 For the Plug-in icon, select Mime, and choose the MIME type from the pop-up menu. Mime is selected
and MIME type is predefined for the SWF, QuickTime, Real, or SVG plug-ins.
Note: The default settings for the SWF, QuickTime, Real, and SVG plug-ins rarely need to be changed.
ADOBE GOLIVE 5.0 179
User Guide
4 Depending on the MIME type and the HTML option selected, the Class option is disabled, enabled,
or predefined.
• For the Plug-in icon, <embed> is defined by default for HTML. If you select the <object> or <embed &
object> tag from the HTML pop-up menu, select Class, and specify the class ID for the required plug-in or
W3CObject control, or select the class ID from the pop-up menu.
• For the SWF plug-in, <embed & object> is defined for HTML, and Class is predefined in the Class
pop-up menu.
• For the QuickTime plug-in, <embed> is defined for HTML, and Class is disabled.
• For the Real plug-in, <embed & object> is defined for HTML, and Class is enabled.
• For the SVG plug-in, <embed> is defined for HTML, and Class is disabled.
5 Enter a value in the Width text box for the width of the media clip in pixels or as a percentage.
6 Enter a value in the Height text box for the height of the media clip in pixels or as a percentage.
7 Choose an alignment option from the Alignment pop-up menu:
• Default to position the icon according to the browser’s preferences. (If the browser does not specify
any alignment preferences, which is the case with all current browser versions, the clip will be left-aligned.)
• Left to position the icon in the upper left corner.
• Center to position the icon in the upper middle.
• Right to position the icon in the upper right corner.
8 From the HTML pop-up menu, select the scripting that browsers will use to detect the required plug-in
and ensure that the content is played back correctly in different browsers. For example, to play back Flash
content, a browser needs the Flash ActiveX® control or the Flash plug-in. The ActiveX control is used by
Internet Explorer and America Online® on Windows 95 or NT®. The SWF plug-in is used by other browsers
that support Flash and by Internet Explorer and America Online on Windows 3.1 or Mac OS. The <object>
tag calls up the ActiveX control; the <embed> tag calls up the SWF plug-in. Choose <Object> & <Embed>
from the pop-up menu to accommodate both the ActiveX control and the SWF plug-in.
To set up the More tab for a plug-in:
1 Click the More tab in the Inspector.
2 Type a unique name for the multimedia element in the Name text box.
3 Select Page, and click the Browse button (
) to assign a destination link for the Plug-in installation
instructions, or drag from the Point and Shoot button ( ) to link to a file in the site window. For an SWF
plug-in, a destination link appears by default.
180 CHAPTER 9
Adding Interactivity
4 Select Code for QuickTime, Real, and SVG plug-ins, and click the Browse button (
) to assign a destination link for the code base, for example, or drag from the Point and Shoot button ( ) to link to a file
in the site window. The Flash code base, for example, specifies the location of the 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 plug-in.)
5 From the Palette pop-up menu, select an option to determine whether the plug-in appears in the Foreground or Background palette. Default places the palette in the background.
6 Enter a value in the HSpace text box to set the horizontal space between the multimedia element and the
surrounding text (the padding to the left and right). Enter a value in the VSpace text box to set the vertical
space between the multimedia element and the surrounding text (padding above and below).
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 up the attributes tab of a plug-in:
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, enter 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.
Setting up SWF plug-ins
The default settings for the Basic, More, and Attribs tabs for the SWF plug-in rarely need to be changed;
however, for more information on these tabs, see “Setting up plug-ins” on page 178.
To set up the SWF tab for a plug-in:
1 Click the SWF tab in the Plug-in Inspector.
2 Select Autoplay to play the Flash movie as soon as the page is loaded.
3 Select Loop to play the movie in an endless loop.
4 For Quality, choose a setting for appearance or playback speed from the pop-up menu:
• Default to use the player settings.
• High to give priority to appearance over playback speed.
• Autohigh to emphasize appearance but to improve speed when the frame rate drops below the specified
frame rate.
• Autolow to emphasize speed but to improve appearance when the Flash player determines that the
processor can handle it.
• Low to give priority to playback speed over appearance.
ADOBE GOLIVE 5.0 181
User Guide
5 For Scale, choose a setting to specify 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.
• Default to make the entire movie visible in the specified area while maintaining the original aspect ratio
of the movie. No distortion occurs. Borders may appear on two sides of the movie.
• No Border to scale 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 to make the entire movie visible in the specified area. No attempt is made to preserve the original aspect ratio. Distortion may occur.
Setting up QuickTime plug-ins
The default settings for the Basic, More, and Attribs tabs for the QuickTime plug-in rarely need to be
changed; however, for more information on these tabs, see “Setting up plug-ins” on page 178.
To set up the QuickTime tab for a plug-in:
1 Click the QuickTime tab in the Plug-in Inspector.
2 Select Show Controller to show playback controls.
3 Select BGColor, and specify a background color by dragging a color from the Color palette preview pane
to the color field in the Plug-in Inspector.
4 Select Cache to enable caching through the browser when the movie is played back.
5 Type a value in the Volume text box to set an audio volume. The value must be an integer from 0 (mute)
to 100 (full volume).
6 Select Autoplay to play the movie automatically when the page opens.
7 Select Loop to play the movie in an endless loop.
8 Select Palindrome to play the move in a loop from beginning to end and then from end to beginning.
9 Select Play Every Frame to play all frames of the movie. (With QuickTime movies, Play Every Frame may
cause playback problems.)
10 Select Link, and click the Browse button (
Shoot button (
) to reference a plug-in file, or drag from the Point and
).
11 If Link is selected, choose -self from the Target pop-up menu to ensure that the poster appears in the
Movie Viewer.
12 Click Open Movie to preview the movie in the QT Movie Viewer.
182 CHAPTER 9
Adding Interactivity
Setting up LiveAudio plug-ins
Audio files can be handled by the QuickTime, LiveAudio, and Real, plug-ins. Which plug-in is used
depends on which Mime type has been mapped to it. For information on setting up Real audio files, see
“Click the Real tab in the Plug-in Inspector.” on page 183.
For information on setting up the Basic, More, and Attribs tabs for an audio plug-in, see “Setting up plugins” on page 178.
To set up the Audio tab for a plug-in:
1 Click the Audio tab in the Plug-in Inspector.
2 Select Is Mastersound to group sounds using the Name attribute assigned on the More tab and to define
one sound of this group as the Mastersound. (All sounds within a group must have the same Name, but
only one sound within the group can be defined as the Mastersound.)
This feature is useful if you want to design your own console using the button elements from the standard
console. Rather than having to place several EMBED actions on a page (for PLAY, PAUSE, STOP, and VOLUME controls, for example), each of which would control the same sound and each of which would require
loading the same sound, you can group sounds using the Name Attribute and define one sound within the
group as the Mastersound. The audio plug-in then accepts the Mastersound and ignores all the other
sounds in the group. Thus you can use the different audio controls attached to the different sounds in the
group to control the single Mastersound without having to load all of them.
3 Select Autostart to play the audio as soon as the viewer opens the page.
4 Select Loop to play the audio in an endless loop. Enter a number in the Loop text box to specify the
number of times the audio should loop. If you leave this text box blank, the audio will play endlessly.
5 Enter a time period in minutes and seconds in the Starttime text box (using the format mm:ss) to set the
start time of the audio.
6 Enter a time period in minutes and seconds in the Endtime text box (using the format mm:ss) to set the
end time of the audio.
7 Type a value in the Volume text box to set an audio volume. The value must be an integer from 0 (mute)
to 100 (full volume). If this text box is left blank, the volume is set to 100.
8 From the Controls pop-up menu, select the controls to be provided with your media clip:
• Default to display the complete set of Play, Stop, and Pause buttons, and a Volume lever.
• Small Console to displays only Stop, Play, and Volume controls.
ADOBE GOLIVE 5.0 183
User Guide
Setting up Real plug-ins
You add Real audio and video clips to your Web page using the Real plug-in.
The default settings for the Basic, More, and Attribs tabs for the Real plug-in rarely need to be changed;
however, for more information on these tabs, see “Setting up plug-ins” on page 178.
To set up the Real tab:
1 Click the Real tab in the Plug-in Inspector.
2 Select Autostart to play the audio or video as soon as the viewer opens the page.
3 Select No Labels to suppress display of information such as title, author, and copyright for the multimedia clip.
4 Choose the controls provided with your multimedia clip from the Controls pop-up menu.
Note: You must have one Real icon for each control—for example, if you want to provide both Play and
Pause buttons for your multimedia clip, you must add a Real icon and assign Play Button from the Controls
pop-up menu, and then add a second Real icon and assign Pause Button from the Controls pop-up.
• Image Window to provide a context menu that allows the viewer to control playback in the playback
area using controls such as Play and Stop. This context menu provides a choice of controls to let the viewer
control the playback directly in the playback area. (Image Window is available only for videos
and animations.)
• Control Panel (or Default) to display 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 to display a Play/Pause button.
• Play Only Button to display a Play button.
• Mute Control to display a Mute button.
• Mute Volume to display a mute button and volume slider.
• Position Slider to display a clip position slider.
• Clip Information to display an information field for information on the Real media clip.
• Home Control to display the Real logo.
• Info Volume to display presentation information as well as a volume slider and a mute button.
• Info Panel to display the presentation information panel.
• Status Bar to display informational messages, the network congestion LED, and the position field, which
indicates the current place in the presentation time line along with total clip length.
184 CHAPTER 9
Adding Interactivity
• Status Field to display 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 to display the clip’s current place in the presentation time line and the total clip length.
5 Select an option from the Console pop-up menu to group multiple controls. For example, you can place
different controls, such as a Play button, a Rewind button, and a Volume slider, in different HTML table
cells spread over the page. You can then tie these controls together by assigning the same Console name to
each of them. You assign a user-specified name in the Console text box, or you can choose a predefined
name from the Console pop-up.
• Default to assign no Console name.
• _master to link the control to all other controls or groups of controls.
• _unique to avoid linking the control to any other control.
Controls that have no Console attribute assigned will be grouped.
Setting up SVG plug-ins
When you drag an SVG icon from the Objects palette, the Layout tab shows only the plug-in icon. To view
the SVG file, click the Preview tab or click the Preview button in the Plug-in Inspector.
The default settings for the Basic, More, and Attribs tabs for the SVG plug-in rarely need to be changed;
however, for more information on these tabs, see “Setting up plug-ins” on page 178.
To set up the SVG tab:
Click the SVG tab in the Plug-in Inspector.
Note: You can link the plug-in only to an uncompressed SVG file. If you want to link to a compressed SVGZ
file, you must export both the uncompressed and compressed files and save both to the same location within
the GoLive site folder. In the SVG tab of the Plug-in Inspector, select Use Compressed SVG to indirectly link
the plug-in with the compressed file via the uncompressed file.
Setting plug-in preferences
The Plug-ins Preferences dialog box lets you assign media file types to the plug-ins currently installed in
the Plug-ins folder within your Adobe GoLive program folder. This allows Adobe GoLive to play back
media files using the appropriate resources.
To assign a new media file type to a plug-in:
1 Choose Edit > Preferences.
2 Select the Plug-ins icon.
3 Click New.
ADOBE GOLIVE 5.0 185
User Guide
4 Enter a media file type (type) and a valid MIME type (subtype) in the Mime Type text box. (MIME,
or Multipurpose Internet Mail Extension, is a file type identifier for files sent across the Internet.)
5 If Adobe GoLive has the appropriate plug-in, it recognizes the MIME type and automatically assigns the
proper plug-in and file extension.
If Adobe GoLive has no equivalent plug-in and the MIME type is not identified, you must enter the extension as well. Adobe GoLive lets you embed this type of media file, but you won’t be able to play it back in
the Inspector.
Using W3CObject controls
Adobe GoLive lets you insert and set up W3CObject controls, which can be downloaded and executed by
a Web browser. The W3CObject control supports ActiveX on Windows. On Mac OS you can only edit the
basic properties of an ActiveX control.
To set up an W3CObject control:
1 Drag the W3CObject control icon from the Basic tab ( ) of the Objects palette to the document
window, or double-click the icon in the Objects palette. You can also drag a W3CObject component from
the desktop to the icon to import it.
2 On Windows, click the select button to open a list of installed ActiveX objects. Select an object to install
and click OK. The object appears in the W3CObject rectangle.
To view the W3CObject component while resizing, Ctrl-drag a corner handle.
Editing the attributes of the W3CObject control
The Properties tab of the W3CObject Inspector lets you enter and edit the properties of the W3CObject
control. If you selected a Windows ActiveX control, its properties are displayed and may be edited but not
deleted. You can add a property by clicking the Add button and entering its name and its value. You can
remove a property by selecting it and clicking Delete. Many Windows ActiveX have built-in dialog boxes
that allow you to edit the properties. Click the Properties button in the Inspector or double-click the Windows ActiveX control to activate the dialog box.
186 CHAPTER 9
Adding Interactivity
Adding scrolling marquees
The Marquee feature is an HTML element that lets you place a scrolling message on your Web page. You
select the scrolling behavior in the Marquee Inspector.
Note: The Scrolling Marquee feature is an Internet Explorer extension that does not work in Netscape.
Preview the scrolling marquee in Adobe GoLive or in your Internet Explorer browser to make sure that it
behaves as desired.
To set up a scrolling marquee:
1 Drag the Marquee icon from the Basic tab (
double-click the icon in the Objects palette.
) of the Objects palette to the document window, or
2 In the Marquee Inspector, type the desired text message for the marquee the Text box.
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.
3 Choose an option from the Behavior pop-up menu:
• Scroll to cause the message to scroll continuously.
• Slide to move the message into the marquee box and to keep it on-screen.
• Alternate to move the message into the marquee box and to bounce it between the edges.
4 To determine how long the marquee is visible, do one of the following:
• Select Forever to make the message scroll continuously.
• Enter a required number of repetitions in the Loops text box.
5 Enter the desired scrolling speed in the Amount text box (the scrolling speed is measured in pixels
between each scrolling amount in milliseconds).
6 Enter the scrolling delay in the Delay text box.
7 Select Left or Right to determine the scrolling direction.
8 Click the More tab. Enter a value (in pixels or as a percentage) for the marquee in the Width and Height
text boxes.
9 Enter a value in the HSpace text box to set the horizontal space around the marquee’s text (the padding
to the left and right). Enter a value in the VSpace text box to set the vertical space around the text (padding
above and below).
10 Choose an alignment for the banner from the Alignment pop-up menu.
11 To assign a background color to the scrolling marquee, drag a color from the Color palette or Colors
tab of the site window to the Color field.
187
Chapter 10: Searching
Searching within a document and within a site
Using the Adobe GoLive search tools, you can find and replace text and HTML code elements in any file
throughout a Web site, search through complex sites for specific files, and generate powerful site reports
that let you query every aspect of a site, from pages with errors such as broken links to pages that contain
specific types of components.
Searching in the current document
You can use Find & Replace in Layout, Outline, or Source view. Depending on the view, you can search for
text and HTML code elements in the current document. Once you find what you’re looking for, you can
automatically change it to something else. You can also search for selected text without opening the Find
dialog box.
Note: Although you can use Find & Replace to search for HTML tags, the Element tab in the Find dialog offers
a more powerful approach that performs more than simple find and replace operations. See “Finding HTML
code elements” on page 196 for additional details.
To find and change text in the current document:
1 Choose Edit > Find, and click the Find & Replace tab if necessary.
2 Do one of the following:
• Type or paste in the text you want to find.
Note: If the amount of text entered is more than the text box can display, you can either scroll through the text
or click the Edit button next to the text box to display the text in a resizeable Edit dialog where you can easily
edit the content without scrolling.
• Choose an item from a previous search from the search history list at the top of the Find pop-up menu.
Previously used search strings appear in the search history menu
along with defined regular expressions.
188 CHAPTER 10
Searching
• Select text in the document window, and drag it to the Find text box.
3 Select options to customize your search:
• Ignore Case lets you search for matching text without regarding case. For example, a search for “frequent
flyer” also finds “Frequent Flyer.”
• Entire Word lets you ignore search text that is embedded within a larger word. For example, if you are
searching for the entire word “any,” GoLive disregards “many.”
• Regular Expression allows wildcard searches. For more information, see “Using wildcards in a search” on
page 191.
Note: Do not use Regular Expression unless you understand wildcard searching. This powerful option can cause
unexpected results, especially if you plan to search for and replace multiple items.
• Backwards searches from the current cursor position toward the top of your document. (This changes
the From Top option to From Bottom.)
• From Top starts the search at the beginning of your document.
• Wrap Around restarts the search at the beginning after it reaches the end of the document.
4 To replace the text, expand the Replace section of the dialog by clicking the small triangle, and either type
in text or choose an item from the search history list in the Replace pop-up menu.
Note: If the amount of text entered is more than the text box can display, you can either scroll through the
text or click the Edit button next to the text box to display the text in a resizeable Edit dialog where you can
easily edit the content.
5 Click Find to start searching your document. Adobe GoLive highlights the first match, if any. Depending
on your Find preferences, the Find dialog box moves to the background or stays in the foreground.
For more information, see “Setting Find preferences” on page 203.
ADOBE GOLIVE 5.0 189
User Guide
6 Continue searching:
• Click Find Next to continue the search.
• Click Replace to replace the text.
• Click Replace & Find to replace the text and find the next occurrence.
• Click Replace All to automatically replace all instances of the text in the document.
To search for selected text in the current document without opening the Find dialog box:
1 In Layout, Source, or Preview view, select the desired text in your document. The selection must be
located within the same paragraph.
2 Choose Edit > Find Selection.
Adobe GoLive starts looking for selected text from the current selection and highlights the next occurrence
of the text using the current settings in the Find dialog box.
You can also find and replace text without reopening or moving the Find and Replace dialog box to the
foreground by using Edit > Replace or Edit > Replace & Find Next. These commands are only available if
the item searched for was found and is still selected.
To find and replace text or HTML code elements in multiple files:
1 Choose Edit > Find, and click the Find & Replace tab if necessary.
2 With the site window open, type in text or HTML code, and select search options.
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 or Regular Expression.
3 Click the triangle next to Find in Files, and do one of the following to define the scope of your search:
• Click or Shift-click to select the desired file or files in the site window, and drag the file or files into the
Files list.
• Click Add Files, and select the files you want to search in the dialog box that appears.
190 CHAPTER 10
Searching
• Click Add Site to add an entire site. You can then remove individual files by selecting the files in the list
and then pressing Backspace or Delete, or clicking Remove All.
4 Select options to customize your search:
• Source Mode lets you view the matches in source view, displayed as raw HTML code. Select this option
to find individual HTML tags; otherwise Adobe GoLive lets you find only visible content.
Important: Be careful about selecting Source Mode if you plan to use the search and replace function. If you
select Source Mode, Adobe GoLive finds and replaces any occurrence of the text, whether it is visible document
content or HTML code. For example, if you search for and replace the word “Traveler” in all project files with
Source Mode selected, Adobe GoLive replaces that word in hyperlinks pointing at a filename (for example,
Frequent-Traveler.html), disrupting links in the process.
• Script of String lets you select the language encoding used in the search from a pop-up menu.
5 Click Find to start searching the selected file or files. Adobe GoLive shows you the first file found
containing matching text. Adobe GoLive opens the file.
6 Continue searching by doing one of the following:
• Click Find Next to find or view the next match in the same or next document.
• Click Find All to find or view all matches. In the list box, 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 highlight
the first match.
ADOBE GOLIVE 5.0 191
User Guide
While Adobe GoLive searches selected files or folders, a moving arrow in the Files list indicates the file
currently being searched, and a number to the right of the filename indicates how many occurrences have
been found.
A
B
A. The small arrow indicates the file currently being searched.
B. Numbers displayed in the Hits column indicate the number
of matches in the file.
7 Search for and replace text.
Note: You’ll receive a warning message if Adobe GoLive is unable to save while searching and replacing a file.
You can choose to cancel the operation or allow Adobe GoLive to continue.
Using wildcards in a search
When you select Regular Expression in the Find dialog box, you activate wildcard searching. (Regular
Expression is a proven technology used in many word-processing applications.) GoLive makes wildcard
searching easier by allowing you to use editable wildcard patterns in the search history pop-up menu.
For more information, see “Setting Find preferences” on page 203.
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.
192 CHAPTER 10
Searching
The following table lists available wildcard search options:
Wildcard Option
Action
Examples
Wildcards for Single Characters
.
Finds any single character.
[]
Finds any one of the characters in square brackets.
“[0123456789]” finds any digit.
“[a-zA-Z]” finds any alphabetical
character.
Finds any one character in a range enclosed in square
brackets.
“[0-9]” finds any digit.
[^]
Finds any character other than the characters following the
caret symbol (^) in the brackets.
“[^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.
\x00 - \xff
Finds any character, as identified by its ASCII value.
“\X43” finds “C”
?
The question mark makes the preceding character or string
(enclosed in parentheses) optional.
“(Adobe )?GoLive” finds “Adobe
GoLive” and “GoLive”.
+
The plus sign finds one or more occurrences of the preceding
character or search string in a row.
“ba+” finds “ba”, “baa”,
“baaa”, etc.
*
The star is equivalent to a “?” and a “+”, and can result in a “ba*” finds “b”, “ba”, “baa”,
“not found” message if no occurrences are found. The char- etc.
acter preceding the “*” is optional.
Quantifiers
Other Search String Modifiers
|
The vertical bar serves as a separator for alternative search
strings.
“Adobe|GoLive|4.0” finds
“Adobe”, “GoLive”, and “4.0”.
ADOBE GOLIVE 5.0 193
User Guide
Wildcard Option
Action
Examples
()
Parentheses enclose a search string that serves as a definition
for quantifiers.
See the description of “?” above.
^
In source mode, the caret finds the start of a line. In Layout
view, it finds the beginning of a paragraph.
$
In source mode, the dollar sign finds the end of a line. In
Layout view, it finds the end of a paragraph.
Search String
Finds
Adobe|GoLive
"Adobe" or "GoLive"
m(i|a)ll
"mill" or "mall"
Adobe( GoLive)?
"Adobe 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"
<H[1-6]>
HTML headers 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>"
About back-references in wildcard searches
Back-references let you replace without specifying text. They appear as wildcard strings in the Replace text
box, from which they refer back to any string that matches a part of the search pattern.
A back-reference consists of a backslash character followed by a number, for example “\1”, “\2”, and so on.
The number refers to a subexpression (enclosed in parentheses) of the wildcard search pattern in the Find
text box:
• “\1” refers to the first subexpression in the wildcard search pattern. This subexpression starts at the first
opening bracket from the left and ends with the complementary closing bracket.
• “\2” refers to the second subexpression, which starts at the second opening bracket from the left and ends
with the complementary closing bracket.
When you click the Replace button, each back-reference is replaced with the part of the matching text that
has been recognized by the subexpression it refers to.
194 CHAPTER 10
Searching
For example, you enter ((Adobe )?GoLive) in the Find text box. This search patterns finds any occurrence
of “Adobe GoLive” or “GoLive”. (The “?” character makes the “Adobe” enclosed in the second pair of
parentheses optional.) You enter the wildcard pattern \1 5.0 in the Replace text box: If the match is “Adobe
GoLive”, the result is Adobe GoLive 5.0 If the match is “GoLive”, the result is GoLive 5.0.
Using index searches (Mac OS)
The Content index search feature offers another way to search a Web site and is especially fast because it
builds an index of your site and uses it during its searches. It uses techniques that are similar to search
engines in several respects:
• It is an index-based search.
• A ranking is made (the best hit is always displayed with a rank of near to 100%).
• The search is not case sensitive.
• “Filler” words are filtered.
To use index search (Mac OS):
1 With a site file open, choose Edit > Find, and click the Content tab.
Note: If the Content panel does not appear in the Find dialog box, make sure that the AIAT module is
located in the Modules folder. This index feature is based on Apple Information Access Technology (AIAT)
developed by Apple Computer, Inc.
2 Select options to customize your index:
• Choose a different language encoding from the Encoding pop-up menu if you want to enter foreignlanguage text (and you have the proper system fonts and keyboard drivers installed).
ADOBE GOLIVE 5.0 195
User Guide
• Select a relevance ranking in the pop-up menu at the lower left corner of the window. This ranking
controls the way hits are displayed (80% lists hits with an 80% ranking and better, and so on).
You can choose a different option from the rank menu at any time to rebuild an existing hit list.
For example, if you end up with a long list of hits after selecting the All option, simply choose >60%
to shorten the list.
• Select Double Click Opens an Untitled Copy, if you want to be able to view all of the relevant hits in a
specific document. With this option selected, double-clicking a hit in the list box creates an untitled copy
of the document with all of the hits highlighted in red.
• Select Auto Update if you want an index saved automatically whenever you save changes to your site.
3 In the Search text box, type in one or more keywords to search for—for example, “frequent” and
“traveler”—separated by a space. Index search finds whole words only; it is not case-sensitive (“Traveler”
and “traveler” yield the same result). If multiple sites are open, choose a site to search from the Site pop-up
menu.
4 Do one of the following:
• Click Build Index if this is the first time you are searching a site. If you skip this step, you are prompted
to build an index before the search is started.
• Click Update Index if you have made changes in the current site since you built or updated the index.
If you previously selected Auto Update, the index has been updated whenever you make changes.
The Content index search indexes your site and creates an index file (for example, Newsletter.index) in the
same folder as your site document.
5 Click Search. All hits appear in the list box at the bottom of the Find window, with results in order of
relevance. Click the symbol to the left of the filename to view the hits in more detail. Clicking a hit renames
the column Term, and surrounding text for each hit appears in the Context column.
196 CHAPTER 10
Searching
6 To view individual hits, double-click an entry. If you selected Double-Click Opens an Untitled Copy, an
untitled copy of the document opens with all hits highlighted.
Hits are marked in red throughout the document.
Finding HTML code elements
The Element tab in the Find dialog box lets you find and manipulate HTML code elements using an
HTML-savvy search mechanism that offers several advantages over simple Find and Replace. Find and
Replace searches look for literal text strings. For example, if you search for <body bgcolor=”red”> using
Find and Replace, you will not find instances of this tag which lack the quotation marks or have other
attributes included, such as <body bgcolor=red> or <body text=”black” bgcolor=”red”>. Element
searches, on the other hand, understand HTML structure and will catch these variations. In addition,
Element lets you quickly add, delete, or modify attributes of existing HTML tags. This added sophistication
makes Element a more powerful way to search for and manipulate HTML elements on a page or throughout an entire site.
The Element window includes three sections:
• The top Search section lets you select search criteria, including HTML elements and attributes.
• The middle Action section lets you set actions you want carried out on any HTML elements and
attributes found during a search.
ADOBE GOLIVE 5.0 197
User Guide
• The lower Find In section lets you set the scope of a search: one file, several unrelated files, or an
entire site.
A
B
C
A. Search section B. Action section C. Find in action
Searching for HTML code
Element lets you perform simple search tasks involving HTML tags or more sophisticated operations that
edit and manipulate HTML tags.
To find HTML code:
1 Choose Edit > Find and click the Element tab in the Find dialog.
2 With the Site window open, specify the search criteria in the Search section of Element as follows:
• Select Name is or Name matches from the top left pop-up menu.
• Type the name of the HTML element you’re looking for in the top right text box or choose one from the
pop-up menu to the right of the text box.
• In the scrollable text box below, type the attributes, operators, and attribute values you want as search
criteria or choose them from the respective pop-up menus directly below the scrollable text box.
3 Define the scope of your search by doing one of the following:
• With the Site window open, click Site in the Element Find in section to select the entire site. (With several
site windows open, choose the desired site from the pop-up menu to the right.) You can then remove individual files from the Element file list by selecting them and pressing Backspace or Delete or by clicking
Remove.
• Click or Shift-click files in the Site window and drag the file or files to the Element file list.
• Select the Files option in Element, click Add Files, and select the files you want searched.
4 Click Start to begin the search. Element displays the number of hits in the file list.
198 CHAPTER 10
Searching
Using Element actions to edit HTML code
In addition to simply finding HTML tags, Element lets you manipulate HTML elements in a variety of ways
using the Element action pop-up menu in the middle Action section:
Keep Element keeps the element and sets, updates, or deletes its attribute.
Rename Element renames the element, but keeps the element’s contents. You can keep the element’s
attributes or change them with an Attribute action.
Delete Element deletes the element completely, including its start and end tags as well as its contents.
Replace Element by its Content deletes only the element’s start and end tags, leaving its content untouched.
Delete Content Only deletes only the content of the element, leaving its start and end tags in place.
To modify an existing HTML code element:
1 Define the search criteria and scope of the search as described in “Searching for HTML code” on
page 197.
2 Choose Keep Element from the Element Action pop-up menu.
3 Click New Action to create an Attribute action.
4 Select set, update, or delete from the Attribute action pop-up menu.
• The Set option sets the specified attribute and value for the HTML element whether or not the attribute
already exists.
• The Update option only updates the attribute if it already exists in the specified HTML element. It does
not add the attribute.
• The Delete option removes the attribute and its value wherever it appears.
5 Enter the attribute in the Attribute text box or choose an attribute from the context-sensitive pop-up
menu to the right of the text box. (The pop-up menu displays only attributes relevant to the HTML
element selected in the Search section of Element.)
6 Enter the attribute’s value in the Value text box or select a value from the context-sensitive pop-up menu
to the right of the text box.
7 Click Start to begin the search and carry out the specified action.
Element lets you create multiple Attribute actions to be performed during a Keep Element action. Click
New Action and follow the steps outlined here before you click Start. Element performs each Attribute
action defined in the Action section. You can remove an Attribute action by selecting it in the list and
clicking Delete Action.
ADOBE GOLIVE 5.0 199
User Guide
To rename an existing HTML code element:
1 Define the search criteria and scope of the search as described in “Searching for HTML code” on
page 197.
2 Choose Rename Element from the Element Action pop-up menu.
3 Enter a new element name in the text box that appears below the Element action pop-up menu.
4 Click Start to begin the search and carry out any specified actions.
You can create Attribute actions to a Rename Element action, if desired.
To delete an existing HTML code element:
1 Define the search criteria and scope of the search as described in “Searching for HTML code” on
page 197.
2 Choose Delete Element from the Element Action pop-up menu.
3 Click Start to begin the search and carry out the specified action.
To replace an existing HTML code element with its content:
1 Define the search criteria and scope of the search as described in “Searching for HTML code” on
page 197.
2 Choose Replace Element by its Content from the Element Action pop-up menu.
3 Click Start to begin the search and carry out the specified action.
To delete the content of an existing HTML code element:
1 Define the search criteria and scope of the search as described in “Searching for HTML code” on
page 197.
2 Choose Delete Content Only from the Element Action pop-up menu.
3 Click Start to begin the search and carry out the specified action.
Saving an Element task for later use
Once you have created a search task in Element, you can save it for future use, saving you the trouble of
specifying the same settings.
To save a task:
1 Click Save Task.
2 Select the folder where you want to save the task and give the task a name.
3 Click Save.
200 CHAPTER 10
Searching
To reapply a saved task:
1 Choose Browse in the Open Task pop-up menu right below the Save Task button.
2 Select the desired task and click Open.
3 Choose the file or files you want to apply the task to in the Find In section of Element and click Start.
Finding files
You can find individual files or objects (such as colors and e-mail addresses) throughout your site. This is
particularly useful if you have a huge site with dozens or even hundreds of pages. Instead of scrolling
through long file lists in the site window, you can enter a full or partial filename or URL.
To search for files within a site:
1 With a site file open, do one of the following:
• Choose Edit > Find, and click the In Site tab.
• Click the Find Files in Site button (
) in the site toolbar.
2 Type in the full or partial name of the file or URL you are looking for, and choose options for Whose:
• Choose Name or URL from the leftmost pop-up. Name searches the site without filtering, allowing you
to search for objects, such as e-mail addresses or colors managed in your site.
• Choose Contains, Is, Begins With, or Ends With from the rightmost pop-up menu.
3 Click Find. Adobe GoLive displays the first item in the site window. If you are searching for files, the
matches appear either in the Files tab or in the Site view tab, depending on which tab was activated in the
site window when you started searching. Other items you are searching for appear in their respective tabs.
Colors, for example, appear in the Color tab.
In Site highlights any item it finds in the different tabs of the site window.
4 To continue searching, click Find Next.
ADOBE GOLIVE 5.0 201
User Guide
Using site reports
The Site Reports tab of the Find dialog box allows for file-finding by a wide range of criteria. And since site
reports are viewable in the same ways that sites are viewable, they can provide an additional set of filtered
views—that is, additional to the views available when you use the Filter tab in the View Controller.
To display the Site Reports tab:
1 Open a site or bring a site already open to the front.
2 Do one of the following:
• Choose Site > Site Report.
• Choose Edit > Find, and click the Site Reports tab.
Defining site queries
You define a site query on one or more subtabs of the Site Reports tab. A query can be more or less complex.
Complex queries can contain multiple criteria on the same subtab or spread across multiple subtabs.
Queries that specify more than one criterion use “AND” logic; for example, if you define a query to show
files that were created over two weeks ago and contain external links, the report will show only those files
created over two weeks ago that contain external links.
To define a query:
1 Display the Site Reports tab.
2 Provide one or more report criterion on one or more of the Site Reports subtabs:
• The File Info subtab shows files by byte size, download time, modification date, and creation date. For
HTML files, the Download Takes option under the File Info tab considers everything that makes up the
page (images, QuickTime movies, etc.) when computing download time.
• The Errors subtab shows pages with missing image attributes, problem titles, and HTML error and
warning flags. The list of browsers that appears in the HTML error and HTML warnings categories is
defined in the application preferences (Edit > Preferences, click Source, and select Browser Sets). If you
want a different list of browsers to appear in the Site Reports dialog, change the list of browser sets in the
application preferences.
• The Site Objects subtab shows pages in a site that use certain components, addresses, fonts, font sets, and
site colors. To update the lists of items in the Site Objects subtab, you should either rescan your site or add
items through the various tabs of the Site window
• The Links subtab shows pages with external links, links to files with a certain extension, and links of one
or more protocols (for example, ftp: or mailto:).
• The Misc subtab shows pages a certain number of clicks away from a given page.
202 CHAPTER 10
Searching
3 Do one or both of the following:
• Save the query for reuse.
• Generate a report based on the query for viewing.
Viewing site reports
You can view a report in three different tabs of the Report View window: Details, Navigation, and Structure.
To view a site report:
1 Open a site or bring a site already open to the front.
2 Display the Site Reports tab.
3 Do one of the following:
• Define a site query.
• Load a site query.
4 Click Search.
5 View the report on one or more of the following tabs:
• Files provides a table of the files that conform to the query, with one file per row. The columns are similar
to those in the Files tab of the site window—name, status, size, and so on.
• Navigation provides the same graphical view of the site provided by the regular Navigation View (the one
you display by choosing Design > Navigation View). However, the files that conform to the query spotlighted and the view can’t be edited. For information on the regular Navigation View, see “About navigation
views” on page 31. For information on varying this view (for example, by filtering it), see “Using the View
Controller” on page 387.
You can make further refinements in a report by viewing it in the Navigation tab and filtering the view.
• Structure provides a tree view of the file hierarchy of your site in which only files that conform to the
query are shown. Also shown are folders containing the conforming files, folders containing those folders,
and so on. The root of the tree is the site folder.
In addition to the three tabs, the Report View window also includes a brief summary head area that tells
you the number of files that matched your search criteria and the criteria specified to create the report.
To edit a page shown in a site report:
1 Select the page in one of the report tabs. Report tabs permit selecting pages but not opening them.
2 Open a Navigation View or Links View of the site. The page you selected in the report tab will be selected.
3 Open the selected page in a document window and edit it.
ADOBE GOLIVE 5.0 203
User Guide
Reusing site queries
You can save queries for reuse and then reload them to generate a site report.
To save a site query:
1 Define a query.
2 Click Save Query.
3 Type a name for the query. The .glsq extension is provided automatically. By default, the query is placed
in the umbrella folder for your site.
4 Click Save.
To load a site query:
1 Display the Site Reports tab.
2 Click Load Query.
3 Select a query. Site query files have the .glsq extension.
4 Click Open.
Setting Find preferences
The Find preferences let you control the behavior of the Find dialog box and let you enter default options
for wildcard searching.
To set Find preferences:
1 Choose Edit > Preferences, click Find, and set the following options:
• Whether the Find dialog box (Keep Find window in front) or the document (Activate Document) comes
to the front when you find a match; and whether the Find dialog closes (Close Find window) when a match
is found.
• How GoLive deals with text files when you search a site in Source Mode. Use Only HTML files lets you
limit searches to Web pages; Use HTML and Text Files lets you include all text files found in a site, including
external stylesheets or JavaScript files, for example.
204 CHAPTER 10
Searching
2 Click the triangle to the left of Find in the left pane of the Preferences dialog box, and select Regular
Expressions to list editable wildcard search options that appear in the search history menu of the Find
window.
3 To add or edit wildcard search strings, do one of the following:
• To add more wildcard search strings, click New. In the text box below the Name list box, type in a descriptive name—for example, “any word + GoLive.” In the text box below the Regular Expression list, type in
the new wildcard search string. For example, enter “[a-zA-Z]+ GoLive” to find any word followed by
“GoLive”. As you type, the list adds the new option. Click OK.
• To edit an existing option, select a search string from the list, and edit it in the two text boxes. As you type,
the list changes the option. Click OK to change the window and save your changes.
• To delete an existing option, select the search string to be deleted from the list, and click Delete.
205
Chapter 11: Using Cascading Style
Sheets
About page design with cascading style sheets
You can simplify and standardize Web page design with cascading style sheets. Use a style sheet to set the
typographic properties of each HTML format, or create styles that you can apply selectively to text.
You can also use a style sheet to control the position of text and objects in floating boxes on a page. Adobe
GoLive lets you position these elements with pixel-level precision. Adobe GoLive also uses absolute positioning for its built-in dynamic HTML objects.
Style sheet properties supported by Web browsers vary greatly between both browser vendors and browser
versions. Web designers need to consider which browser viewers are likely to use. In general, Netscape 4.0
and Internet Explorer 3.0 or later support many of the properties that can be specified in Adobe GoLive.
For general information on CSS, see “About cascading style sheets” on page 223.
Creating a style sheet
To create a style sheet, first you define it as an internal or external style sheet—that is either in the head
section of a Web page or as a separate file. After you define the style sheet, you create styles and define
properties for the styles. If the style sheet is external, you then reference it from your page. Finally, you apply
the styles to your page elements.
The Style Sheet window displays all internal and external style sheets for the current page. The internal style
sheet lists its selectors under the Internal folder in the Style Sheet window. To view selectors in an external
style sheet, you must double-click the external style sheet’s name in the Style Sheet window to open the style
sheet in another window. To view the definition of any selector, select it to view its details in the CSS Selector palette. To expand or collapse a style sheet or selector, click the arrow symbol next to its left. You can
drag a style from one Style Sheet window to another or copy and paste.
To create an internal style sheet in the head section of a document:
1 Click the CSS button (
the Style Sheet window.
) above the main content area of the document window to open
206 CHAPTER 11
Using Cascading Style Sheets
2 Add styles to the style sheet. See “Creating styles with tag selectors” on page 206, “Creating classes” on
page 208, and “Creating IDs” on page 208.
You can view the style sheet in Source view after adding the first style; it appears as a STYLE tag in the
head section.
To create an external style sheet:
1 Choose File > New Special > Style Sheet Document.
2 Add styles to the style sheet. See “Creating styles with tag selectors” on page 206, “Creating classes” on
page 208, and “Creating IDs” on page 208.
3 Save the new style sheet in your site folder to ensure it appears in the site window and is within reach of
the Point and Shoot feature. Make sure to include the .css extension in the style sheet filename.
For instructions on how to link a document with, or edit the newly created style sheet, see “Referencing
external style sheets” on page 219.
Creating styles with tag selectors
One of the most useful features of cascading style sheets is the ability to reformat the visible part of an
HTML document based on its structure—that is, its hierarchy of tags. By using tags as selectors, you can
enhance the presentation of a document and maintain downward compatibility as a courtesy to viewers
with non-CSS browsers. This means that users of 4.0 browsers will see the extra formatting that CSS permits, while the rest of your audience will see a plain (but structured) document.
ADOBE GOLIVE 5.0 207
User Guide
You can use tag selectors in two different ways:
• Simple tag selectors reformat all instances of a particular tag within your page. For example, if you create
a style with h1 as the selector and the text properties 36 point and sans serif, all <H1> headers will appear
that way.
• Contextual tag selectors reformat all instances of a particular tag enclosed within another tag. For
example, if you create a style with h1 i as the selector and assign a special text color, a CSS-savvy browser
will display all <I> tags within <H1> headers as colored text.
Note: Adobe GoLive does not preview contextual tag selectors, either in Layout or Preview views. You must open
the file in a CSS-compliant browser to see the result.
To create a style based on a tag selector:
1 With the Style Sheet window in the foreground, click the New Tag button (
toolbar. The new style is listed under its style sheet, with its name selected.
2 In the Basics tab (
press Enter.
) in the Style Sheet
) of the CSS Selector Inspector, name the tag selector in the Name text box, and
Tag selectors are HTML start tags with the less than and greater than (< and >) characters stripped off—
for example, h2 for second-level headers, p for plain-text paragraphs, i for italicized, and b for boldface
inline formatting. You can add tag selectors for several common HTML elements relating to links, body,
paragraphs, and table cells) by right-clicking (Windows) or Control-clicking (Mac OS) in the Style Sheet
window and choosing a tag from the Add Selector submenu.
Note: You can reformat the hyperlinks in your page by using “A” as a tag selector.
3 In the CSS Selector Inspector, add style properties. For more information, see “Defining style properties”
on page 209.
4 Any new style properties you add are automatically applied to paragraphs or blocks of text formatted
with the tag used as the selector.
A
B
C
A. Basics tab of the CSS Selector Inspector
B. Tag selector C. Style properties
208 CHAPTER 11
Using Cascading Style Sheets
Creating classes
You can apply classes to any selected block of text, independent of the structure of the HTML document.
Typical uses of classes include distinctive formatting for warning notes or other special information-carrying elements 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.
Note: Don’t use classes to visually structure a document. Not only will this effect be completely lost on visitors with non-CSS browsers, but even worse, they will see a completely unstructured presentation of your
document. Instead, use classes for local formatting, such as for inline text or single paragraphs.
To create a style based on a class:
1 With the Style Sheet window in the foreground, click the New Class button (
toolbar. The new style is listed under its style sheet, with its name selected.
2 In the Basics tab (
press Enter.
) in the Style Sheet
) of the CSS Selector Inspector, type a class name in the Name text box, and
You can use any alphanumeric character string as a class name—for example, myboldclass. You don’t have
to type the leading period; Adobe GoLive does this automatically.
3 In the CSS Selector Inspector add style properties. For information on style properties, see “Defining
style properties” on page 209.
4 To apply the class style, select a range of text (anything from a single character to multiple paragraphs)
in the document window, and use the options in the Style tab of the Text Inspector. See “Applying styles”
on page 218.
Creating IDs
Unlike classes, which you can apply to an unlimited number of elements, IDs let you embed a specific style
for a unique paragraph or range of text in your document. Use IDs for a headline with special formatting
or any other text that needs unique treatment.
To create a style based on an ID:
1 With the Style Sheet window in the foreground, click the New ID button (
The new style is listed under its style sheet, with its name selected.
) in the Style Sheet toolbar.
2 In the Basics tab ( ) of the CSS Selector Inspector, type a unique ID name in the Name text box—
for example, #myheaderid, and press Enter.
You can use any alphanumeric character string with a leading pound sign (#) as the ID name. ID names
may not contain spaces.
3 In the CSS Selector Inspector add style properties. See “Defining style properties” on page 209.
ADOBE GOLIVE 5.0 209
User Guide
4 Applying the ID style requires that you hand-edit the source code of your page. See “Applying styles” on
page 218.
Defining style properties
The CSS Selector Inspector contains all of the style properties that Adobe GoLive supports. These styles
cover the major part of the CSS specification, with the exception of some style options that cause problems
in all major browsers.
Currently, all 4.0 browsers display only a few style properties. Some properties work with a single browser
only, some don’t work at all but cause no harm, and others cause a browser crash. When applying a style
property to your pages, make sure you test it in all major browsers that support cascading style sheets.
For a listing of browser-safe features, visit Web Review’s Cascading Style Sheets Guide at
http://webreview.com/pub/guides/style/style.html.
Font properties
The Font tab of the CSS Selector Inspector lets you define a font family and make font style settings, including color, font size, and line height.
A
D
B
C
A. Font text box B. Moves selected font in the list
C. Font Set pop-up menu D. Font pop-up menu
210 CHAPTER 11
Using Cascading Style Sheets
To edit the font properties of a style:
1 Select a style in the Style Sheet window, and click the Font tab (
) in the CSS Selector Inspector.
2 Choose a font color from the Color pop-up menu, or drag in a selection from the Web Color List
tab ( ) of the Color palette to set the foreground color property.
3 Enter a font size in the Size text box, choose an absolute, relative, length unit, or a percentage from the
Units pop-up menu, and press Enter.
4 Enter a number in the Line Height text box. Line height is the distance between the baselines of two
adjacent lines of text. Select a unit (use percent to maintain scalability) from the Units pop-up menu, and
press Enter.
5 Choose a font style from the Style pop-up menu. Choose Unchanged to keep an element’s current font
style unchanged when the new style sheet is applied.
6 Choose a font weight from the Weight pop-up menu. Values 100-300 are lighter than normal, and values
500 to 900 are heavier than normal. Lighter and Bolder apply font weights that are relative to the weight
inherited from the parent element. Unchanged keeps an element’s current font weight unchanged when the
new style sheet is applied.
7 Choose the style’s preferred font family and alternate font families to use if the font is not available on
the Web viewer’s computer. To add font families to the Font Family list, do one of the following:
• Choose a font set from the font set pop-up menu.
• Click New, and choose a font from the font pop-up menu; or type a font name, and press Enter.
• To change the order of preference, select an entry from the list, and use the Up and Down buttons to shift
the selection.
The first available font family in the list will be used by the browser. If none of the listed fonts is available
on the viewer’s system, a font that matches a listed font specification is used.
See “Setting language and font preferences” on page 18 for instructions on setting default fonts for these
general specifications.
8 Select font properties in the Decoration section to set a text-decoration property.
Text properties
The Text tab of the CSS Selector Inspector lets you define spacing, case, and alignment properties for the
current style.
To edit the text spacing, case, and alignment properties:
1 Select a style in the Style Sheet window, and click the Text tab (
) in the CSS Selector Inspector.
2 To set the text indent, choose a length unit or a percentage from the Units pop-up menu, type an
indentation in the Text Indent text box, and press Enter.
ADOBE GOLIVE 5.0 211
User Guide
3 To set word spacing (add to the default word spacing), choose a length unit from the Units pop-up menu,
type a number in the Word Spacing text box, and press Enter.
4 To set letter spacing (adding to the default space between letters), choose a length unit from the Units
pop-up menu, type a number in the Letter Spacing text box, and press Enter.
5 To set vertical alignment (the vertical positioning) of an element, type in a value, and choose an option
from the pop-up menu:
• Baseline aligns the baseline of the element with the baseline of the parent element.
• Sub subscripts the element.
• Super superscripts the element.
• Top aligns the top of the element with the tallest element on the line (relative to the formatted line that
the element is a part of).
• Text Top aligns the top of the element with the top of the parent element’s font.
• Middle aligns the vertical midpoint of the element (typically an image) with the baseline plus half the
x-height of the parent.
• Bottom aligns the bottom of the element with the lowest element on the line (relative to the formatted
line that the element is a part of).
• Text Bottom aligns the bottom of the element with the bottom of the parent element’s font.
6 To set small caps, choose Small Caps from the Font Variant pop-up menu.
7 To set the text case (Capitalize, Uppercase, or Lowercase) choose an option from the Transformation
pop-up menu.
8 To set the text alignment (Left, Center, Right, and Justify), choose an option from the Alignment
pop-up menu.
212 CHAPTER 11
Using Cascading Style Sheets
Block properties
The Block tab of the CSS Selector Inspector lets you define the properties of the block generated by the current style, including its visual and nonvisual properties. See “The CSS1 formatting model” on page 228.
A
C
B
D
E
A. Sets invisible element margins. B. Sets floating element
position and size. C. Sets distance between border and
element content. D. Formats element as a floating box.
E. Clears or allows floating boxes on either side of the element.
To edit the block properties of a style:
1 Select a style in the Style Sheet window, and click the Block tab (
) in the CSS Selector Inspector.
2 To set the margins for a block element, choose a length unit or a percentage (recommended for better
scalability) from the Units pop-up menu, and then type a number in any of the Top, Right, Left, and
Bottom Margin text boxes. Or use the All Margins text box to specify the margin in all four directions at
once. Press Enter.
You can also decrease the spacing between surrounding elements. Negative values cause two elements
to overlap.
3 In the Padding section, set the spacing between the border and the content of any element formatted
with the current style.
Choose a length unit or a percentage (recommended for better scalability) from the Units pop-up menu,
and then type a number in any of the Top, Right, Left, and Bottom Padding text boxes. Or, to specify the
spacing in all four directions at once, use the All Paddings text box. Press Enter.
4 Under Block, set the width and height properties for any element formatted with the current style. This
property is most useful with referenced elements, such as images.
ADOBE GOLIVE 5.0 213
User Guide
Choose a length unit or a percentage from the Units pop-up menu, and then type a number in the Width
or Height text box, and press Enter. Leaving one property set to Auto ensures that the element is scaled
proportionally. Leaving both width and height properties set to Auto displays the referenced item in its
original size.
5 In the Float pop-up menu, set the float property to create an element that is not part of the normal flow
of text. Choose any of the following options:
• Left moves the element to the left, so the text wraps on the right side of the element.
• Right moves the element to the right, so the text wraps on the left side of the element.
• None causes the element to appear where it occurs in the text.
6 In the Clear pop-up menu, specify how an element accepts floating elements.
• Left moves the element below any floating element on the left side.
• Right moves the element below any floating element on the right side.
• None allows floating elements on all sides.
Positioning properties
The Position tab of the CSS Selector Inspector lets you define the positioning properties of any floating
element formatted with the style, including position, clipping behavior, rank in the stacking order,
overflow behavior, and visibility.
A
B
C
A. Sets controls that position floating elements.
B. Sets stacking order of floating elements.
C. Sets display properties of excessive content in elements.
214 CHAPTER 11
Using Cascading Style Sheets
To edit the positioning properties of a style:
1 Select a style in the Style Sheet window, and click the Position tab (
) in the CSS Selector Inspector.
2 Select a positioning method from the Kind menu:
• Choose Absolute, and then type the coordinates (preferably in pixels) in the Left and Top text boxes to
specify the position of the floating element with respect to the upper left corner of the browser’s main
display area.
• Choose Static to let the element flow with the text.
• Choose Relative, and then type the coordinates (preferably in pixels) in the Left and Top text boxes to
specify the position of the element with respect to the parent element.
3 To specify the size of the element, type measurements in the Width and Height text boxes.
4 To specify where and how the element is visually cropped when it overlaps with adjacent elements, select
a clipping method from the pop-up menu:
• Choose Auto to let the browser determine the clipping properties.
• Choose Rect to crop the element to a rectangular box, and then type the measurement by which the
element is to be cropped in the Top, Right, Bottom, and Left text boxes.
• Choose Inherit to force the element to inherit the clipping method of the parent element; that is, how
much of the floating box is displayed.
5 Set the stacking order of floating elements by assigning a numeral to each layer in the Z-Index text box.
If two elements overlap, the one with the higher z-index conceals a portion of the other.
6 In the Overflow pop-up menu, set the overflow property to determine how the element will behave if its
content outgrows its specified size. Choose any of the following options:
• Visible causes the element to grow with its content.
• Scroll adds a vertical or horizontal scrollbar to the element.
• Hidden hides excessive content.
• Auto defaults to the browser’s preferences for handling excessive content.
7 In the Visibility pop-up menu, set the visibility property to determine whether the element is displayed
or not when the browser loads the page. The visibility property is useful as an initial setting that scripting
will override. Choose any of the following options:
• Inherited assumes the visibility property of the parent element.
• Visible lets you display the element when the browser loads the page.
• Hidden hides the element from view.
ADOBE GOLIVE 5.0 215
User Guide
Border properties
The Border tab of the CSS Selector Inspector lets you set the borders of the block generated by a style,
including line width, color, and line style. See “The CSS1 formatting model” on page 228 for more information.
To edit the border properties of a style:
1 Select a style in the Style Sheet window, and click the Border tab (
) in the CSS Selector Inspector.
2 To set the border width for the top, right, left, or bottom borders, choose a unit from a Units pop-up
menu, type a number in a border text box, and press Enter. Use the All Borders controls to set all four
borders at once.
3 Choose a border color from the Color pop-up menu, or drag a selection from the Web Color List
tab ( ) of the Color palette.
4 Choose a line style from the Line Style pop-up menu.
Background properties
The Background tab of the CSS Selector Inspector lets you set the background of the block
generated by a style. You can use an image or color as a background. See “The CSS1 formatting model” on
page 228 for more information.
To edit the background properties of a style:
1 Select a style in the Style Sheet window, and click the Background tab (
) in the CSS Selector Inspector.
2 To set a background image, select the Image option, type a URL for the image file, and press Enter.
You can also click Browse and locate the file, or use Point and Shoot to link to an image in the site window.
Select Absolute to use an absolute path.
When you set a background image, also set a background color that will be used when the image is
unavailable.
3 To set a background color, choose one from the Colors pop-up menu, or drag a selection from the
WebColor List tab ( ) of the Color palette.
4 To tile image horizontally, vertically, or in both directions, choose an option from the Repeat
pop-up menu.
• Repeat tiles the image both horizontally and vertically.
• Repeat x tiles the image horizontally.
• Repeat y tiles the image vertically.
• Once sets this property to no-repeat, disabling tiling.
216 CHAPTER 11
Using Cascading Style Sheets
5 To set a background to scroll or not scroll with other elements on the page (background-attachment
property), choose an option from the Attach pop-up menu.
• Choose Scroll if you want the image to scroll.
• Choose Fixed if you don’t want the image to scroll.
6 To set the position of the image within the element block, choose a length unit, a percentage, or any of
the Left, Center, Right, or Top, Center, Bottom keyword options from the Top and Left Units pop-up menu,
type a number in the Top and Left text boxes, and press Enter.
List & Others properties
The List & Others tab of the CSS Selector Inspector allows you to 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.
A
B
C
D
E
A. Image used as a list marker B. Style for the list marker
C. Position of list marker relative to text D. Unsupported CSS properties
E. Unsupported property name and value text boxes
To edit the list item marker properties:
1 Select a style in the Style Sheet window, and click the List & Others tab (
CSS Selector Inspector.
) in the
ADOBE GOLIVE 5.0 217
User Guide
2 To use a custom image as a list item marker, select the Image option, type a URL for the image file, and
press Enter. You can also click Browse and locate the file, or use Point and Shoot to link to an image in the
site window. Select Absolute to use an absolute path (see “About absolute link paths” on page 401).
3 To set the type of the list item marker, choose from the following options in the Style pop-up menu.
• For bulleted lists, choose Disc, Circle, or Square.
• For numbered lists, choose Decimal, Lower Roman, Upper Roman.
• For alphabetical lists, choose Lower Alpha and Upper Alpha.
4 To set the position where the list item marker appears, choose one of the following from the Position
pop-up menu:
• Inside sets the list item marker flush with the second, third, and following lines of text.
• Outside adds a first-line indent, letting the list item marker stand out from the rest of the text (like the
bullet at the start of this item).
Specifying unsupported properties
To ensure upward compatibility with future releases of the CSS Specification, Adobe GoLive lets you
specify as yet unsupported properties and their values.
To specify an unsupported property for a style:
1 Select a style in the Style Sheet window, and click New in the List tab ( ) of the CSS Selector Inspector.
A property-name and property-value pair appears in the two text boxes below the list box.
2 Enter the new property name, type a value in the Value text box, and press Enter.
View and check your entry in the Basics tab of the CSS Selector Inspector.
Managing styles
You rename styles in the CSS Selector Inspector and duplicate or delete styles in the Style Sheet window.
You can drag a style from one style sheet to another, or copy a style and paste it into another style sheet.
To duplicate a style:
Select the style in the Style Sheet window, and click the Duplicate button (
Duplicating a style creates an exact copy, complete with all style properties.
To delete a style:
Select the style or styles in the Style Sheet window, and choose Edit > Clear.
) in the Style Sheet toolbar.
218 CHAPTER 11
Using Cascading Style Sheets
To rename a style or view its properties:
Select the style in the Style Sheet window. The style’s properties are listed in the Basics tab (
Selector Inspector.
) of the CSS
To rename the style, select the style name in the Name text box, and type a new name. Don’t forget the
pound sign (#) in front of ID names (see “Creating IDs” on page 208). Adobe GoLive automatically inserts
the period in front of CLASS names.
Applying styles and referencing style sheets
After you’ve created internal and external style sheets, you need to apply the styles to your pages. External
style sheets also need to be referenced from your pages.
Applying styles
Styles are applied in three different ways, depending on their selectors. Styles that use tag selectors are
applied automatically. Classes require that you select text and apply them manually using the Style tab of
the Text Inspector. The Style tab lists all classes in a page’s internal or external style sheets.
IDs are a special case because of ambiguities that are still unsolved in the cascading style sheets specification. The current release of Adobe GoLive lets you create IDs, but you have to hand-code in the Source view
to use them in your page.
To apply classes:
Do one of the following:
• To apply an inline style for selected text in a paragraph, in the Style tab of the Text Inspector, select the
checkbox in the Inline column for the style you want to apply.
• To format an entire paragraph with a style, click in the paragraph, and then in the Style tab of the Text
Inspector. Select the checkbox in the Par column for the style you want to apply.
• To create a division that is disconnected from the normal flow of HTML, click in a paragraph and then
in Style tab of the Text Inspector. Select the checkbox in the Div column for the style you want to apply.
• To apply a format to the body section of a page, click anywhere in the document, and then in the Style
tab of the Text Inspector. Select the checkbox in the Area column for the style you want to apply.
To apply an ID:
1 Note the name of the desired ID from the Style Sheet window.
2 In the Source view of the document window, find the paragraph or block of text to which you want to
assign the ID, and remove all other formatting to reduce the risk of ambiguity.
3 If the text to be reformatted is a paragraph, hand-edit the <P> tag by inserting the ID as an attribute in
the start tag. For example, if the ID name is #headerbox, edit the code as follows:
ADOBE GOLIVE 5.0 219
User Guide
Your original source code looks like this:
<P>TravelEZ</P>
After you insert the ID attribute, your source code should look like this:
<P ID="headerbox">TravelEZ</P>
4 If the text to be reformatted is a block of text within a paragraph, you will have to enclose that text in a
<SPAN> or <DIV> tag and insert the ID as an attribute in the start tag. For example, if the ID name is
#headerbox, edit the code as follows:
Your original source code looks like this:
<P>Welcome to TravelEZ</P>
After you insert the <SPAN> tag with the ID attribute, your source code should look like this:
<P> <SPAN ID="headerbox">Welcome to TravelEZ</SPAN></P>
5 Switch back to Layout view to view the effect. If you are not satisfied with the result, select the ID style
in the Style Sheet window, and edit its properties as desired.
Referencing external style sheets
The Style Sheet window, in addition to the internal style sheet, also lists all external style sheets referenced
by the current page. In conjunction with the Style Sheet toolbar and the External Style Sheet Inspector, it
also lets you link to an external style sheet, both on your local hard disk and on the Web. You can also link
a style sheet to multiple pages in a Web site without having to link to pages one at a time.
Linked external style sheets appear in the Style Sheet window
along with the internal style sheet.
220 CHAPTER 11
Using Cascading Style Sheets
To reference an external style sheet:
1 Click the New Item button (
) in the Style Sheet toolbar. Alternatively, you can right-click (Windows)
or Control-click (Mac OS) in the Style Sheet window and choose Add Link to External CSS from the
context menu.
2 A new empty reference to an external style sheet appears in the Style Sheet window.
3 Select the empty reference, and go to the External Style Sheet Inspector.
4 In the External Style Sheet Inspector, type in the URL path and filename of the style sheet in the URL
text box, click the Browse button to locate the style sheet in the file selection dialog box, or click the Point
and Shoot button ( ) to link to a style sheet in the site window.
A
B
C
A. Link to an external style sheet. B. Open an
external style sheet for editing. C. Change the
cascading order of multiple external style sheets.
5 Reference additional style sheets as needed.
If the referenced style sheet contains tag selectors that match the HTML tags used in your document, the
document will be reformatted automatically.
ADOBE GOLIVE 5.0 221
User Guide
6 Use the Move Up and Move Down buttons to change the cascading order for documents with several
external style sheets. The Move Up button increases the weight of a style sheet. If conflicts arise between
style rules, its styles take precedence over those from style sheets that are lower in the cascade. The Move
Down button decreases the weight of a style sheet.
With the style sheet referenced, you can edit it (if it is not write-protected) by selecting the style sheet in
the Style Sheet window, and then clicking Open in the External Style Sheet Inspector. You can also just double-click its name in the Style Sheet window.
An easy way to link a page with a style sheet document within the same site is to drag the style sheet file
icon from the site window to the small page symbol above the main content area of the document window.
After linking the page, the styles from the style sheet will be available for formatting visual page content.
Linking external style sheets to multiple pages in a Web site
Adobe GoLive lets you easily link external style sheets to multiple pages in a Web site without the laborious
task of applying it to each page one page at a time.
To link an external style sheet to multiple pages:
1 In the File tab of the site window, select two or more pages.
2 In the File Inspector, choose the Styles tab.
3 Enter the URL of the external style sheet into the text box at the bottom of the Inspector. You can also
use the Point and Shoot button to select the style sheet in the Files tab of the Site window, or click the
Browse button.
4 Click the Add button to link the selected style sheet to the pages selected in the Files tab.
You can link more than one external style sheet. The order of link creation shown in the Styles tab indicates
the order of precedence of the properties in the external style sheets. The higher the external style sheet
appears in the Styles tab, the lower its precedence.
To quickly change the style sheet referenced by multiple pages:
1 Create a new style sheet document, and save it as part of your site. The Save dialog box has a shortcut
menu that lets you navigate to any open site document.
Use the same style names as in the original style sheet, and your pages will reformat
automatically.
2 In the site window, select the .css file you want to replace.
3 In the Link Inspector, locate the icon of the style sheet document you want to replace, and use the Point
and Shoot feature on the new style sheet document.
4 In the Change Reference dialog box, click OK to confirm the change.
222 CHAPTER 11
Using Cascading Style Sheets
When you open a page that references a style sheet, it will contain a new set of styles. If the new style sheet
uses the same style names as the previous one, your page will be reformatted with the new styles.
To unlink an external style sheet from multiple pages:
1 In the File tab of the site window, select two or more pages.
2 In the File Inspector, choose the Styles tab.
3 In the Styles tab, select the external style sheet you want to unlink.
4 Click the Remove button.
To view a referenced external style sheet:
Double-click the external style sheet in the Style Sheet window to view the style sheet in a separate window.
Exporting and importing style sheets
Adobe GoLive lets you easily import external style sheets or export the internal style sheet. By importing a
style sheet, you can use the view controller to see how a style sheet affects the content of a page in different
browsers. When you are satisfied, you can export the style sheet.
To export the internal style sheet:
1 Right-click (Windows) or Control-click (Mac OS) anywhere in the Style Sheet window, and choose
Export Internal CSS from the context menu.
2 Name the file using .css as its extension, and click Save.
To import an external style sheet:
1 Right-click (Windows) or Control-click (Mac OS) anywhere in the Style Sheet window, and choose
Import External CSS from the context menu.
2 Select an external style sheet and click Open.
All the styles defined in the external style sheet appear under Internal in the Style Sheet window as part of
the document’s internal style sheet.
Previewing with cascading style sheets
The View Controller contains a selection of options for previewing pages formatted with cascading style
sheets. It lets you disable style sheets to view the page as it would appear in a non-CSS browser or choose
one of the default style sheets from Web Settings (see “The CSS tab” on page 376) to simulate the appearance of your page in several browsers on the two major platforms.
ADOBE GOLIVE 5.0 223
User Guide
To use CSS options in the View Controller:
1 In Layout view, choose Window > View Controller to open the View Controller.
2 Select Allow Overlapping Paragraphs to preview how elements with negative margin values grow into
adjacent elements.
3 Select the options from the Root CSS menu one by one to simulate the look of your page in Windowsbased or Macintosh-based browsers. This previewing feature is based on the default style sheets stored in
the CSS tab ( ) of Web Settings (see “The CSS tab” on page 376). Choose Navigator 3 (Mac OS) to see
how the document would look in a non-CSS-compliant browser.
About cascading style sheets
Adobe GoLive reads Cascading Style Sheet (CSS) formatted documents without changing styles and formatting rules. It can display most of the style properties addressed in the CSS specification and gives Web
authors a large choice of CSS formatting options, including:
• Internal and external style sheets.
• Tag selectors for reformatting the tags in an HTML document.
• Structure-independent styles based on classes.
• Unique styles for selected elements based on IDs.
• A wide choice of style properties, including font, text, block, positioning, border, background,
and list styles.
Basic style sheet syntax
Regardless of the way cascading style sheets are incorporated in your documents, the basic syntax is always
the same. Style sheet specifications—commonly referred to as rules—consist of a single line of text with the
following basic notation:
selector { property: value }
The selector element is an HTML tag or another item that the CSS syntax can address. The property
element defines a style feature that the content will have when rendered by the browser. The value specifies
how this feature is rendered.
The following is an example of a basic style sheet rule:
H1 {font-weight: bold; font-size: 24pt}
This rule instructs the browser to display the first-level header in 24 point size and bold typeface, overriding
the browser’s HTML preferences.
Selectors
Unlike in a printed document, the structure of an HTML page determines its formatting. Tags that identify
the position within that structure enclose the content. This underlying principle makes it difficult to
address individual items of text for formatting, thus creating a need for a different addressing mechanism.
CSS uses selectors to solve that problem. A selector is a string of code that identifies what elements the
corresponding rule applies to. It connects the HTML page with the style sheet.
Selectors may have several components:
• Tags: All HTML tags are possible selectors. If used as a selector, the enclosing less than (<) and greater
than (>) characters are removed.
• Classes: All elements inside the BODY section can be classed by adding a CLASS attribute. Classes
can then be addressed in the style sheet to apply the formatting rules. A class definition consists of a
period followed by string of text and a rule—for example, .headline {color: green}. When defining classes
in Adobe GoLive, you don’t have to type the period; Adobe GoLive will automatically add the period to the
source code.
Two major classes of selectors are used with cascading style sheets:
• Simple Selectors match elements based on the element type and/or attributes, not the element’s position
in the document structure. H1 (all level 1 headers) and H1.headline (all level 1 headers with the CLASS
attribute.headline) are examples of simple selectors.
• Contextual Selectors match elements based on their position in the document structure. A contextual
selector consists of several simple selectors. H1.headline B (all level 1 headers with the CLASS attribute
.headline and bold typeface) is an example of a contextual selector consisting of two simple selectors,
H1.headline and B. Future versions of Adobe GoLive will support contextual selectors.
The ID selector is a special case that allows for setting style properties on a per-element basis. It addresses
a single element within the HTML document by adding an ID attribute with an alphanumeric identifier.
In the style sheet, the same identifier is combined with a rule to apply special formatting. An ID definition
consists of a pound sign (#) followed an alphanumerical identifier and a rule—for example, #xy99 {fontweight: 100}.
Inheritance
If you assign a style to an HTML tag, its children inherit those style specifications. Suppose there is an H1
tag with a style property blue and an in-line emphasized element:
<H1>The headline <EM>is</EM> blue.</H1>
If no color has been assigned to the in-line EM element, the emphasized “is” will inherit the color of
the parent element; that is, it will also display in blue. Other style properties are likewise inherited—
for example, font-family and font-size.
ADOBE GOLIVE 5.0 225
User Guide
As in hardcopy publishing, the value of a style property is often given as a percentage that refers to another
property:
H1 { font-size: 24pt }
H1 { line-height: 120% }
If a property can be specified as a percentage, the browser needs to know what property the percentage
refers to. 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.
How style sheets are embedded in HTML
Unlike HTML, the CSS1 mechanism keeps formatting instructions for HTML tags together in a container
enclosed in a <STYLE> tag (= the style sheet), instead of interspersing them with the flow of HTML code.
When loading the page, the browser reads the formatting instructions contained in that tag and caches
them with the page. Subsequently, whenever the program finds an instance of an HTML tag for which
custom format definitions exist in the style sheet, it applies those rules.
Cascading style sheets are embedded in the HTML using the <STYLE> tag. This tag has a TYPE attribute;
its value is set to "text/css" by default. TYPE="text/css" tells the browser to interpret any formatting
instructions enclosed in the <STYLE> tag as a CSS1 style sheet and build the screen display according to
the rules specified within. Although CSS1 is the predominant style sheet mechanism currently in use on
the Web, this type description may reduce conflicts with future style sheet mechanisms on the Web.
The following is an example of a basic, yet complete style sheet:
<STYLE type="text/css">
<!-h1 {font-size: 36pt}
-->
</STYLE>
You’ll notice that the rules are enclosed in <!-- and --> HTML comment tags. These tags instruct browsers
that are unaware of the style tag to ignore the tags (unknown tags are ignored).
CSS1 containment in HTML pages is based on external or internal style sheets. Adobe GoLive supports the
four basic methods of embedding—the <LINK> tag and the @import command for external style sheets,
and the <STYLE> tag and class element for internal style sheets.
External style sheets External style sheets are text-only documents containing nothing but style definitions.
They can either be referenced or imported:
• A style sheet document can be referenced within the HTML page using the <LINK> tag. By referencing
external style sheets, style definitions can be applied to several pages at a time or even to all pages
throughout a site. Adobe GoLive reads and writes references to external style sheets. An example follows:
<HTML>
<HEAD>
226 CHAPTER 11
Using Cascading Style Sheets
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool">
</HEAD>
<BODY>
<H1>This page has an external stylesheet attached.</H1>
</BODY>
</HTML>
A referenced external style sheet works much like a master style sheet in a word-processing application.
As with style sheets for word processing files, some definitions are “hard wired” to certain types of text.
Also, you can override the definitions within the document and assign styles explicitly to selected text.
• A style sheet can explicitly import another style sheet using a dedicated @import command. The
imported style sheet is merged with any local style sheets. Adobe GoLive reads these import notations from
existing files (if they have the proper syntax) and lists them in the Style Sheet window, but it won’t let you
create any notations. An example follows:
<HTML>
<HEAD>
<TITLE>title</TITLE>
<STYLE TYPE="text/css">
@import url(http://style.com/basic);
</STYLE>
</HEAD>
<BODY>
<H1>This page has an imported stylesheet.</H1>
</BODY>
</HTML>
Internal style sheets Internal style sheets are confined to the document they are contained in. There are
several methods for embedding internal style sheets:
• An internal style is based on a <STYLE> tag with one or more selectors for HTML tags within the
document. Embedded in the header section, this style sheet is only valid for the local page. This type of style
sheet applies uniform styles to several instances of a tag within a document. Once these styles have been
defined, they are automatically applied without any user intervention. An example follows:
<HTML>
<HEAD>
<TITLE>title</TITLE>
<STYLE TYPE="text/css">
<!-H1 {
font-weight: bold;
font-size: 24pt;
font-family: sans-serif;
}
-->
</STYLE>
ADOBE GOLIVE 5.0 227
User Guide
</HEAD>
<BODY>
<H1>This page holds an internal stylesheet.</H1>
</BODY>
</HTML>
An internal <STYLE> element with tag selectors works much like a word processor style sheet embedded
in a file, the only difference being that its styles are “hard-wired” to certain text elements. You can change
definitions within the document, but you cannot assign a style explicitly to selected text.
• Another type of internal style sheet applies special formatting to individual blocks of text within the body
section. It is based on a CLASS definition in the header and local CLASS attributes assigned to selected tags
or paragraphs.
The CLASS element closely resembles user-defined paragraph and character styles in a word-processing
application in that the author creates and applies the style definition. CLASS style elements are easily
recognized by their name, which begins with a period, as in .headline. An example follows:
<HTML>
<HEAD>
<TITLE>title</TITLE>
<STYLE TYPE="text/css">
<!-.headline { color: #00FF00 }
.bodycolored { color: #0099FF }
-->
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=headline>This headline is formatted using a CLASS element.</H1>
<P CLASS=bodycolored>This paragraph has a custom color.</P>
</BODY>
</HTML>
The CLASS element works much like a paragraph or character style in a word-processing application.
You can change its definition within the document and assign it to selected paragraphs.
The ID element is a special style element. It also consists of a style definition in the header but is locally
confined to a unique element within the page. An alphanumeric identifier that appears within the
definition and the tag it controls makes the assignment. The name of ID style elements starts with a pound
sign, as in #yz98. An example follows:
<HTML>
<HEAD>
<TITLE>title</TITLE>
<STYLE TYPE="text/css">
<!-#z99y { letter-spacing: 2em }
-->
</STYLE>
228 CHAPTER 11
Using Cascading Style Sheets
</HEAD>
<BODY>
<P ID=z98y>This text has extra-wide letter spacing.</P>
</BODY>
</HTML>
How style sheets cascade
One of the fundamental features of CSS is that style sheets cascade—in other words, several style sheets may
control the same document and override one other according to certain rules of precedence. You can build
and embed or attach your preferred style sheet when authoring the page, but your viewers may have personal style sheets to customize the presentation of HTML pages to meet their own needs (if the browser
supports this feature).
When several style sheets try to influence the presentation, conflicts may arise. These conflicts are resolved
by assigning each style rule a weight. As an author using Adobe GoLive, you can assign a weight when
referencing external style sheets (see “Referencing external style sheets” on page 219). By default, the
viewer’s rules weigh less than the author’s rules. Consequently, if there are conflicts between the style sheets
of a document loaded by the browser and the viewer’s personal sheets, the author’s rules will override the
viewer’s rules. In any case, both the viewer’s and author’s rules override the browser’s default values.
Imported style sheets also cascade with one other, in the order they are imported. Any rules specified in
the style sheet itself override rules in imported style sheets. That is, imported style sheets are lower in the
cascading order than rules in the style sheet itself.
The CSS1 formatting model
Cascading style sheets are based on a simple block-oriented formatting model. Each element consists of
one or more rectangular blocks, each of which has a core content area with optional surrounding padding,
border, and margin areas.
A
B
C
D
E
F
A. Block width B. Margin (transparent) C. Border
D. Padding E. Content F. Element width
ADOBE GOLIVE 5.0 229
User Guide
This formatting model gives you much more flexibility in controlling spacing between objects.
For example, by setting the top margin of one element to a negative value, you can make it grow into
another element directly above it.
To best visualize the block concept, choose a background color for an element:
The result is a colored block that extends over the entire width of the page and whose height is controlled
by its text content. You should set aside a little time to experiment with those properties—for example, set
the padding to move the text within away from the edge of the block.
For instructions on setting the margin, border, and padding properties, see “Block properties” on page 212.
About relative and absolute length units
The format of a length value is an optional plus or minus sign (+ is the default), immediately followed by
a number (with or without a decimal point) immediately followed by a unit identifier such as em, ex, or,
pc. Some properties allow negative length units, but this may complicate the formatting and there may be
browser-specific limitations.
There are two types of length units: relative and absolute. Relative units specify a length relative to another
length property. Style sheets that use relative units will scale more easily from one output medium to
another (for example, from a computer display to a laser printer).
Relative units may also reduce the differences in font size that occur when a page is viewed on different
platforms. (See “About font sizes across platforms” on page 64.)
The following relative units are supported:
em
Height of the element’s font
ex
Height of the letter X
pixel
Pixels relative to the resolution of the drawing area—that is, the computer display
Absolute length units are only useful when the physical properties of the output medium are known.
The following absolute length units are supported:
in
Inches, 1in. = 2.54 cm
cm
Centimeters
mm
Millimeters
pt
Points, 1pt = 1/72 in.
230 CHAPTER 11
Using Cascading Style Sheets
pc
Picas, 1pc = 12pt
Percentage units and keyword values (for example, xlarge) offer similar advantages in terms of scalability
as relative units.
About percentage units
The format of a percentage value is an optional plus or minus sign (+ is the default), immediately followed
by a number (with or without a decimal point), immediately followed by the percent sign (%).
Percentage values are always relative to another value—for example, a length unit. Each property that
allows percentage units also defines what value the percentage value refers to. Most often this is the font size
of the element itself, such as line height.
Many style properties use keywords instead of numerical unit specifications—for example, XX-small
through X-large to specify font size relative to the parent element.
About color units
A color is either a keyword or a numerical RGB specification, such as any color from the Real Web Colors
tab ( ) of the Color Palette.
The pop-up keyword color names are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, and yellow. The 16 colors are from the W3C palette.
Numerical color specifications use the RGB color model. The format of an RGB value in hexadecimal
notation is a #, immediately followed by either three or six hexadecimal characters—for example, #FFFFFF
for white. The format of an RGB value in the functional notation is rgb, followed by a comma-separated
list of three numerical values.
231
Chapter 12: Creating Forms
About Forms
Adobe GoLive provides a complete inventory of form elements (HTML elements) ready for easy drag-anddrop insertion from the Forms tab ( ) of the Objects palette. All form elements fully support the
HTML 4.0 standard, including labels, navigation using tabbing, access keys, and structuring through field
sets and legends. All are also backward compatible with the HTML 3.2 specification.
In Adobe GoLive 5.0 you can add actions and events to form elements in the same easy way that you add
actions to mouse clicks or page loads. (See “Using Adobe GoLive actions” on page 249.) Be aware, however,
that browsers do not necessarily support JavaScript in a form—for example, image rollovers generally will
not work with forms.
Setting up forms
Adobe GoLive lets you build forms visually in the Layout view of the document window by dragging
icons (HTML elements) from the Forms tab of the Objects palette to create the necessary form elements,
such as text boxes, check boxes, radio buttons, and pop-up menus. You set the properties of the form elements in the Inspector. (See “Adding form elements” on page 233.) As you build your form visually, you
can check the source HTML code by switching to the HTML Source Editor (Source view) or the HTML
Outline Editor.
The Form element must be the first element in your form. Without the Form element, Netscape will not
render the form page.
Using tables to lay out forms
Different browsers and different platforms display form elements differently, in appearance and size.
No Web authoring tool guarantees that fill-in forms you design for the Web will look the same across
platforms. With Adobe GoLive, however, you can get predictable results if you place form elements in
HTML tables, rather than on layout grids or in a simple flow of HTML. If you decide to use a layout grid,
because some browsers display forms as much as 50% larger, be careful not to group your elements too
tightly. If you use HTML tables, increase the height of the rows and width of the cells and preview your
forms frequently on all targeted browsers.
Setting up the Form element
The Form icon identifies the current Web page or section of a Web page as a form and instructs the browser
where and how to return form information for processing. The content of your form must be contained in
the box that surrounds the Form icon in the document window. If you are using an HTML table to design
your form, be sure to put the Table icon in the box that surrounds the Form icon in the document window.
232 CHAPTER 12
Creating Forms
To set up a Form element:
1 Drag the Form icon from the Forms tab ( ) of the Objects palette, or double-click the icon in the
Objects palette. The Form icon must precede any content of the form.
2 Select the Form icon in the document window, and set up the Form element in the Form Inspector.
3 Type a unique name for your form in the Name text box. Naming the form is especially important if you
have more than one form on your page. CGI scripting is also easier if each form on your site is identified
by a unique name.
4 In the Action text box, type the directory and file name of the CGI script where the information will be
sent when the viewer clicks the Submit button. Alternatively, click the Browse button and select a destination, or drag from the Point and Shoot button ( ) to link to a CGI script in the site window. Internet
Explorer has problems using mailto:, so we don’t recommend that an action include an e-mail address
for sending the information. Due to this browser issue, we recommend using CGI scripts only to
process forms.
5 If you are using frames, select a target location in the destination URL from the Target pop-up menu.
The frame set page has to be open for the Target menu to be active.
If your form is embedded in a frame set and you want to control where the HTML page returned by the
CGI appears, choose a target location from the Target pop-up menu. In addition to the names you have
given to individual frames within a frame set, you can set the following options:
• _blank to load the page into a new unnamed window.
• _self to load the page into the window or frame that previously held the form.
• _parent to load the page into the parent frame set of the form.
• _top to load the page into the full browser window, replacing any current frame sets.
6 Select an encryption method from the Encrypt pop-up menu. Encryption is only used for secure sites
utilizing special encryption software. Ask your ISP webmaster for more information, such as the
appropriate encryption method.
7 In the Method pop-up menu, determine how the form information will be sent:
• Post to return data entered by the viewer information separately from the Web page.
• Get to append the viewer’s entries to the file specified by the URL in the Action text box.
• Default to omit the Method attribute.
Note: It is recommended that you use the Post option. Appending information to the destination file may
exceed the URL length limit and possibly cause data loss.
ADOBE GOLIVE 5.0 233
User Guide
Adding form elements
Form elements are HTML elements. The Forms tab in the Objects palette contains a complete inventory of
form elements including buttons, check boxes, text fields, list boxes, pop-up menus, special elements, and
HTML 4.0 elements.
To add a form element:
1 Drag the appropriate icon from the Forms tab ( ) of the Objects palette to the box enclosing the Form
icon in your document window. Alternatively, place your pointer in the box enclosing the Form icon in
your document window and double-click the icon in the Objects palette.
Note: Icons from the Forms tab must be added in the box that encloses the Form icon in the document
window, otherwise they will not be part of the form.
2 With the icon selected in the document window, set up the form element in the Inspector.
For information on setting up specific form elements, see the description of that form element.
A
C
B
A. Insert the Form icon before all elements of a fill-in form. B. Individual form elements can be dragged into table cells.
C. Forms tab
Setting up buttons and check boxes
You can set up several types of buttons, radio buttons, and check boxes on your Web page form.
• The Submit Button, labeled Submit Query, sends data entered in the form to the CGI script
for processing.
• The Reset Button, labeled Reset, clears the current data, resetting the form to its default values.
234 CHAPTER 12
Creating Forms
For information on buttons that accept HTML in the label area, see “Using universal buttons” on page 242.
• The Radio Button lets viewers select one item from a list. To make sure that the selection works properly,
create logical groups of complementary radio buttons in the Form Radio Button Inspector.
• The Check Box lets the viewer select multiple items from a list.
To set up a Submit, Reset, or Custom button:
1 Drag the Submit Button or Reset Button icon from the Forms tab (
document window, or double-click the icon in the Objects palette.
A
) of the Objects palette to your
B
A. Submit Button icon
B. Reset Button icon
2 You can change a submit or reset button in the Form Button Inspector.
3 For a custom button, set Button to Normal in the Form Button Inspector. Do not use Submit or Reset;
these names are reserved.
4 Click in the button label area in the document window, and type in the button label you want viewers to
see. Use the Type or Style menu commands to format the label.
To set up a Radio Button:
1 Drag the Radio Button icon from the Forms tab (
or double-click the icon in the Objects palette.
) of the Objects palette to your document window,
2 Select the icon in the document window, and set the options in the Form Radio Button Inspector.
3 In the Group text box, type in a new logical group name, or select an existing group name from the
pop-up menu.
4 In the Value text box, type in a value or a descriptive name for the radio button that will identify it within
the group. When a viewer clicks the Submit button in the form, this value will be passed to the CGI script.
5 In the Focus section, select the Selected check box to have the radio button appear selected by default.
For more information on setting tabbing chains and access keys, see “Setting up tabbing chains” on
page 239 and “Defining access keys” on page 240.
6 If necessary, from the Forms tab of the Objects palette, drag a label icon next to each button, and enter
your text. Repeat these steps for each button in the group.
ADOBE GOLIVE 5.0 235
User Guide
To set up a check box:
1 Drag the Check Box icon from the Forms tab (
double-click the icon in the Objects palette.
) of the Objects palette to your document window, or
2 Select the icon in the document window, and set the options in the Form Check Box Inspector.
3 In the Name text box, type in a unique name to identify the check box.
4 In the Value text box, type in a descriptive name for the check box. When a viewer clicks the Submit
button in the form, this value will be passed to the CGI script to indicate the selection of this option.
5 In the Focus section, select the Selected check box to have your check box appear selected by default. For
more information on setting tabbing chains and defining access keys, see “Setting up tabbing chains” on
page 239 and “Defining access keys” on page 240.
Setting up text fields
You can set up text fields, password fields, and text areas on your Web page form.The Text Field and
Password icons insert a single-line text field that lets viewers enter text, such as their names or other
personal data, or a hidden password, respectively. The Text Area icon inserts a text field that lets viewers
enter multiple lines of text. When a viewer clicks the Submit button, this text will be passed to the
CGI script.
To set up a text field or a password field:
1 Drag the Text Field or Password icon from the Forms tab (
window, or double-click the icon in the Objects palette.
A
) of the Objects palette to your document
B
A. Text Field icon
B. Password icon
2 Select the icon in the document window, and set the options in the Inspector.
3 In the Name text box, type in a unique name to identify the text field or password field.
4 In the Value (Windows) or Content (Mac OS) text box, type in default text that can be overwritten by
viewers, or leave the text box empty.
Note: Password protection of Web pages is an interactive feature that requires processing of viewer entries
through a CGI script on the Web server. What you implement in Adobe GoLive is the visual representation of
the password protection mechanism.
5 In the Visible text box, type in the number of characters that will be visible in the text box.
236 CHAPTER 12
Creating Forms
6 In the Max text box, type in the maximum number of characters accepted by the text box before
truncation occurs. The default is to leave it empty. If empty, this limit is determined by the Web browser
used to view the form.
7 Select Password Field if the text box is a password text box. If selected, Adobe GoLive will display bullets
rather than text as the viewers type.
To set up a text area:
1 Drag the Text Area icon from the Forms tab (
double-click the icon in the Objects palette.
) of the Objects palette to your document window, or
2 Select the icon in the document window, and set the options in the Form Text Area Inspector.
3 In the Name text box, type in a unique name to identify the text area.
4 In the Rows text box, type in the number of rows to determine the maximum number of rows visible in
the text box.
5 In the Columns text box, type in the number of characters to determine the width of the visible text area.
6 Choose the appropriate option from the Wrap pop-up menu to control line breaks:
• Default uses the default text area settings of the browser.
• Off instructs the browser to ignore the Columns limit and prevents text entered into the text area from
wrapping at the right margin of the box.
• Virtual and Physical instruct the browser to respect the Columns limit. The entered text wraps when it
reaches the right margin of the box and starts scrolling vertically.
7 If desired, in the Content text box, type in default text that the viewer can overwrite (optional).
ADOBE GOLIVE 5.0 237
User Guide
Setting up list boxes and pop-up menus
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.
To set up a list box or a pop-up menu:
1 Drag the List Box or Popup icon from the Forms tab (
window, or double-click the icon in the Objects palette.
A
) of the Objects palette to your document
B
A. List Box icon B. Popup icon
2 Select the icon in the document window, and set the options in the Form Popup Inspector.
3 In the Name text box, type in a unique name to identify the list box or pop-up menu.
4 In the Rows text box, type in the number of rows you want to be visible. For a pop-up menu, this is the
number of rows viewers see when scrolling through the menu.
5 Select Multiple Selection to allow viewers to select one or more options.
6 Select an option from the Label/Value list box. Check the box next to the Label and Value text boxes to
have the browser display that option as the default selection.
7 Edit the options:
• Click Duplicate to duplicate the currently selected option for editing.
• Click New to add a new option. Enter a label and value in the Label and Value text boxes, respectively.
Setting up special HTML elements
A number of special HTML elements let you add images to your form buttons, insert hidden data, include
cryptographic keys, and interactive file browsers.
• The Input Image icon inserts an image, such as a graphical Submit button. Inserting graphics can help
viewers navigate through your pages.
• The Hidden icon inserts an HTML tag that does not display in the browser but whose values are
submitted with the form. This tag is used to send additional information in browser-server exchanges.
• The Key Generator icon lets viewers address an encryption algorithm for safeguarding transactions with
your Web site. For more information on cryptographic issues associated with forms, contact your ISP’s
webmaster.
• The File Browser icon inserts a file selection dialog box, but is rarely used.
238 CHAPTER 12
Creating Forms
To insert an input image placeholder:
1 Drag the Input Image icon from the Forms tab (
or double-click the icon in the Objects palette.
) of the Objects palette to your document window,
2 Select the placeholder in the document window, and set the options in the Image Inspector.
3 Link the image placeholder with a graphic using the Point and Shoot button, drag and drop, or the
Browse button of the image Inspector.
4 In the More tab of the Form Image Inspector, set up the input image. Two items are important for
inputting images:
• Select Form, if you plan to use the image as a clickable button. (This is selected by default.)
• Be sure to enter a name in the Name text box to identify the input image as a unique item. This is
especially important if you are using several graphical submit buttons within the same form. The text you
enter in the Name text box is appended to the x and y coordinates sent to the CGI script to indicate that
viewers have clicked a specific input image on the page, and to trigger a button-specific action.
To set up a hidden tag, key generator, or file browser:
1 Drag the Hidden, Key Generator, or File Browser icon from the Forms tab (
your page, or double-click the icon in the Objects palette.
A
B
) of the Objects palette to
C
A. Hidden icon B. Key Generator icon
C. File Browser icon
2 Select the icon in the document window. In the Inspector, name the tag by typing in a unique name in
the Name text box.
3 Enter a value:
• For a Hidden tag, type a default value in the Value text box.
• For a Key Generator tag, type the security level in the Challenge text box.
• For a File Browser, in the Visible text box, type a numerical value to determine the width of the file
browser window.
ADOBE GOLIVE 5.0 239
User Guide
Providing form navigation
With HTML 4.0, Web authors can make their forms navigable using keyboard shortcuts. In Adobe GoLive,
these attributes are implemented as check box options that appear in the Focus section of the different
Inspectors.
In an HTML form, each element must receive focus from the viewer to become active and perform its task.
In earlier versions of HTML, this was usually done by clicking the desired element. HTML 4.0 introduces
two alternative ways of navigating a form using the keyboard:
• Viewers can follow a predefined tabbing chain, and then type in text or press Enter to trigger some formspecific action.
• Viewers can select individual elements by pressing a platform-specific key combination, and then type in
text or press Enter to trigger some form-specific action.
Note: Not all browsers support form navigation control keys.
Setting up tabbing chains
Adobe GoLive lets you define a tabbing chain for any given set of form elements on the same page. The
tabbing chain specifies the order in which form elements are selected when viewers press the Tab key
repeatedly.
A tabbing chain is defined by assigning a tab index value to each element. Navigation proceeds from the
element with the lowest index value to the element with the highest index value. Tab index values need not
be contiguous or start at any particular value. If you assign the same tab index value to two elements, the
sequence in the HTML stream determines the tabbing order. Labels, text fields, password fields, text areas,
Submit buttons, Reset buttons, check boxes, radio buttons, pop-up menus, and list boxes support
tab indexing.
To assign a tab index value to form elements automatically:
1 In Layout view, choose Special > Start Tabulator Indexing. Alternatively, select the first element, and click
the Start/Stop indexing button (
) in the Inspector.
Small yellow index boxes appear on top of or inside indexable elements throughout your form, and a
pound sign is appended to the pointer ( ).
2 Click each element successively in the required tabbing order. A number appears in each index box and
in the Tab text box of the respective Inspector. This is the tab index.
3 When you have specified the tabbing chain, choose Special > Stop Tabulator Indexing, or click the
Start/Stop indexing button (
) in the Inspector.
240 CHAPTER 12
Creating Forms
4 Test the result in a browser that supports tabbing navigation, such as Microsoft Internet Explorer 4.0 on
a Windows platform.
A
B
C
A. Text boxes in a form B. Yellow index boxes identify indexable elements
C. Click elements sequentially to set the tabbing order.
To assign a tab index value to form elements manually:
Select the form elements one at a time in the desired tabbing order, and enter a number in the Tab text box
of the Inspector.
To change an existing tabbing chain:
1 Select the element where you want to start renumbering.
2 Choose Special > Start Tabulator Indexing, or click the Start/Stop Indexing button (
the Inspector.
) in
3 Click each element successively in the new required tabbing order.
4 Choose Special > Stop Tabulator Indexing, or click the Start/Stop Indexing button (
the Inspector.
) in
5 Test the result in a browser that supports tabbing navigation, such as Microsoft Internet Explorer 4.0 on
a Windows platform.
Defining access keys
Adobe GoLive lets you define a unique access key for any form element on a page. An access key lets
viewers focus on an element by pressing a modifier key and a dedicated alphanumeric key (Alt-S,
for example, to activate the Submit button in a Microsoft Windows-based browser).
Legends, labels, text fields, password fields, text areas, Submit buttons, Reset buttons, check boxes, and
radio buttons support access keys.
ADOBE GOLIVE 5.0 241
User Guide
To define an access key:
1 Select the element you want to assign a key combination to.
2 In the Key text box of the Inspector, type any alphanumeric character.
3 Add a visual indication of the access key—for example, add a label or text that gives the key combination.
4 Repeat steps 1 through 3 for the next form element. Do not assign the same access key to two form
elements.
5 Test the result in a browser that supports navigation via access keys, such as Microsoft Internet
Explorer 4.0 on a Windows platform.
Setting up read-only form elements
HTML 4.0 lets Web authors set individual HTML form elements to read-only status. For example, you
might want to include text that must accompany the form. Text fields, password fields, and text areas support read-only status.
To set an element to read-only status:
Select the element you want to set to read-only, and select Read-only in the Inspector.
Setting up inactive form elements
To give viewers access to form elements only in specific situations, HTML 4.0 lets you build HTML forms
with dimmed elements that can be conditionally activated by a script. On the HTML side, you add a
“disabled” attribute to each form element that should be unavailable when a viewer loads the form. On the
scripting side, the program monitors elements of another form for a particular event and activates the item
when the condition is met. For example, this feature lets you keep a form’s Submit button inactive until
viewers enter some required data.
Legends, labels, text fields, password fields, text areas, Submit buttons, Reset buttons, check boxes, and
radio buttons support the inactive status.
To disable an element:
1 In the document window, select the element you want to deactivate.
2 Select Disabled in the Inspector.
3 Write the script to implement the logic that dynamically enables the item, and attach the script to the
page or to another button.
242 CHAPTER 12
Creating Forms
Using universal buttons
In forms designed for HTML 4.0 compatible browsers, the Button icon inserts a universal clickable button
that carries an editable label. This button behaves exactly like a standard Reset, Submit, or Normal button,
but because the label area accepts HTML, you can customize its appearance. You can insert formatted or
unformatted text, an image, or other content to make the user interface of your form more intuitive.
To insert a button:
1 Drag the Button icon from the Forms tab (
icon in the Objects palette.
) of the Objects palette to your page, or double-click the
2 Click the Button text in the button icon, enter a description of your choice (for example, Send), or insert
an image placeholder and link it with a button image.
3 Set up the button in the Form Button Inspector.
• In the Name text box, give a unique name to the button.
• In the Value text box, specify an action or a value to be passed to the CGI script.
Adding labels
In forms designed for HTML 4.0 compatible browsers, the Label icon inserts a visual label that you can use
to identify the purpose of a check box, radio button, text field, or menu to viewers. The Label icon has a
major advantage over the previously used HTML text labels. Clicking the label now activates or deactivates
the associated object—for example, a check box.
To insert a label:
1 Drag the Label icon from the Forms tab (
double-click the icon in the Objects palette.
) of the Objects palette to your document window, or
2 Click in the content area of the label, and then type the label name.
3 Double-click the name in the content area again, and assign a style such as bold, if desired.
4 To link the label with the check box select the label, and then do one of the following:
• Click the Point and Shoot button (
to label.
) in the Form Label Inspector. Drag to the form element you want
• 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 text box of the Form Label Inspector displays the ID which controls the association between
the check box and its label.
5 Each time you link a label to a form element, click Show to check the association. This button is particularly useful if your page contains multiple pairs of label-form elements.
ADOBE GOLIVE 5.0 243
User Guide
Grouping form elements
In forms designed for HTML 4.0 compatible browsers, the Field Set icon inserts a bounding box that
visually groups form elements. You can use the legend to tell viewers the purpose of the options grouped
in the field set.
Note: This does not render in Netscape, and Internet Explorer has problems if this is used on a layout grid.
To insert a Field Set and Legend:
1 Drag the Field Set icon from the Forms tab (
double-click the icon in the Objects palette.
) of the Objects palette to your document window, or
2 In the Form Fieldset Inspector, select Use Legend if you want a legend to appear in the field set boundary.
3 Choose an alignment option for the legend from the Alignment pop-up menu:
• Default positions the legend according to the browser’s preferences. (If the browser does not specify
any legend alignment preferences, which is the case with all current browser versions, the legend will be
left-aligned.)
• Left positions the legend in the upper left corner of the field set.
• Center positions the legend in the upper middle of the field set.
• Right places the legend in the upper right corner of the field set.
4 Double-click the legend in the field set, and then type in the name of your choice.
5 Drag an HTML table into the field set, and add several check boxes, radio buttons, or other form
elements to the document window.
245
Chapter 13: Using Actions
Setting up actions
In Adobe GoLive there are three main types of actions, characterized by the types of events that can trigger
them—onload event actions, link actions, and timeline editor actions. Onload event actions and link
actions require triggers; timeline editor actions are triggered by the timeline sequence.
Note: In Adobe GoLive 5.0, you set options for most actions in the Actions palette. Options for Head actions
appear in the Action Inspector.
Setting up onload event actions
Onload event actions are triggered after a Web page loads, before any user interaction occurs. These actions
execute before any other actions in the document. To add an onload action, insert a head action icon from
the Smart tab of the Adobe GoLive Objects palette. Dragging the Head Action icon from the Objects palette
into the header region of your page sets the action to trigger when the page loads. This type of action can
only be added to the header and will automatically add the onload event handler into the <Body> tag. Use
this type of action only when you want something to happen when the page finishes loading. Dragging an
Action Item icon from the Objects palette to the body section of your document inserts a script item in the
body of the page that serves as a placeholder for HTML code that triggers when the browser loads the body
section. The action will occur when the browser reaches this position when parsing the document.
(OnParse actions execute while the page is loading.)
To set up a Head Action:
1 Drag the Head Action icon from the Smart tab (
document.
) of the Objects palette to the head section of your
If the head section is not open, drag the Head Action icon to the small triangle directly below the Layout
tab; when the head section opens drop in the icon.
246 CHAPTER 13
Using Actions
2 Set up the action in the Action Inspector.
• Choose an action trigger from the Exec. pop-up menu. Actions can be triggered after a page loads in the
browser (OnLoad), when it is unloaded (OnUnload), when it is called by a Call action inside the page
(OnCall), or when the page is parsed (OnParse).
• Choose the action from the Action pop-up menu, and set the action’s properties.
For instructions on using individual actions, see “Using Adobe GoLive actions” on page 249.
Choose an action to be triggered by the action item.
To set up a Body Action action:
1 Drag the Body Action icon from the Smart tab (
of your document.
) of the Objects palette to the body section
2 In the Body Action Inspector, choose the Document Write action (see “Document Write” on page 254)
from the Message submenu of the Action menu, and set it up as desired.
3 Preview the action in a 4.0 browser.
Setting up link actions
Link actions are actions which are applied to hyperlinked items and triggered by some type of interaction
with the link, such a mouse or a key action. (See “About Action triggers” on page 248.)
To add a link action to your page, create and highlight a link (on a picture or text), and switch to the Actions
palette. You should see a list of events on the left side. If you haven’t highlighted a hyperlinked item, no
events will be active. This is because link actions are initiated by a JavaScript event handler, which can only
reside in the <A> tag of a linked item.
If you want to add a link action without making the hyperlink go to another page, you can either make
the link to the same page or enter the “#” sign in the URL field.
ADOBE GOLIVE 5.0 247
User Guide
To set up an action triggered by a mouse event:
1 In the Layout view of the document window, select text or an image on the page.
2 Click the New Link button in the toolbar.
3 Click the Link tab in the Inspector.
4 Type # in the URL (Universal Resource Locator) text box in the Inspector. The # character creates an
empty anchor, which deactivates the link.
5 In the Actions palette, choose a trigger option from the Events list:
• Mouse Click triggers the action when the user clicks on the text or image.
• Mouse Enter triggers the action when the mouse pointer is over the text or image.
• Mouse Exit triggers the action when the mouse pointer leaves the text or image.
6 Click the + above the Actions list.
7 Choose an action from the Action menu in the Actions palette.
A
B
C
A. Choose a mouse or key event that triggers the action.
B. Click the + button to enable action attachment.
C. Choose an action from the Action menu.
For information on using individual actions, see “Using Adobe GoLive actions” on page 249 and “Using
Actions Plus actions” on page 269.
Setting up TimeLine Editor actions
You can also use the TimeLine Editor to add actions. Add actions to the action track of the TimeLine Editor
by Ctrl-clicking (Windows) or Command-clicking (Mac OS). Unlike the onload and link actions, Timeline
actions are not triggered by event handlers but rather by the timeline sequence. In this way you can initiate
time-based actions or actions which interact with a given scene.
248 CHAPTER 13
Using Actions
About Action triggers
All actions need an event to trigger them. In the TimeLine Editor, actions are triggered automatically
depending on their position relative to the time track. You specify other action triggers in the Action
Inspector or the Actions palette.
In the Actions palette, six mouse events and two key events are available:
• Mouse Click triggers an action after a single mouse click on a rollover button, linked image, text,
or form element.
• Mouse Enter triggers an action when the mouse pointer is moved over a rollover button, linked image,
text, or form element.
• Mouse Exit triggers an action when the mouse pointer is moved away from a rollover button, linked
image, text, or form element.
• Double Click triggers an action when the viewer double-clicks a rollover button, linked image, text, or
form element.
• Mouse Down triggers an action when the viewer presses the mouse button while the pointer is on a rollover button, linked image, text, or form element.
• Mouse Up triggers an action when the viewer releases the mouse button while the pointer is on a rollover
button, linked image, text, or form element.
• Key down and Key Press trigger an action when the viewer presses any key.
• Key up triggers an action when the viewer releases any key.
The head section of the page provides additional options for triggering actions. The Exec. pop-up menu in
the Action Inspector lets you specify when and how an action in the head section executes.
The Exec pop-up menu offers the following options:
• OnLoad (default) triggers the action after the browser has loaded the page. This is the default behavior
implemented in previous versions of Adobe GoLive.
• OnUnload triggers the action when the browser leaves the page.
• OnParse triggers the action when the browser reads that part of the document header (slightly earlier
than OnLoad).
• OnCall calls the action later in the browser session by using the Call Action action (see “Call Action” on
page 263). When you create an OnCall action, Adobe GoLive assigns a default name (for example:
B289B5EE0) that appears in the Name text box next to the pop-up menu. You can overwrite this name with
a description that is easier to retrieve. The name you enter here must be unique; that is, it must not be used
by any other variable or action in the page.
ADOBE GOLIVE 5.0 249
User Guide
Using Adobe GoLive actions
Adobe GoLive comes with a complete set of ready-to-use scripted actions that are fully compatible with
the 4.0 and later releases of Netscape Navigator and Microsoft Internet Explorer. Some actions work
with 3.0 browsers.
The Adobe Actions Plus folder contains a number of the most common customer-requested JavaScript
actions, created by independent developers. For information on Actions Plus, which include slide shows,
daily redirects, forced frames, remote window targeting, and password protection, see “Using Actions Plus
actions” on page 269.
Get Form Value
The Get Form Value action reads the current content of a form element from the body of the current page.
This action depends on input from the viewer in the form text field.
To set up a Get Form Value action:
1 Insert a Head Action in the head section of the page (see “Setting up onload event actions” on page 245).
2 Choose the Get Form Value option from the Getters submenu of the Action menu in the
Action Inspector (see “Setting up onload event actions” on page 245).
3 In the Exec. menu, set the Exec trigger to OnUnload. (You can also use the OnCall action if you attach it
to a form image that serves as a Submit button.)
4 In the Form text box, enter the name of the form that contains the text field.
5 In the Element text box, enter the name of the text field whose content you want to read.
6 If your form contains more elements you want to have read, insert more Get Form Value actions and set
them up as required.
7 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 “Write a Cookie” on page 268.
Get Floating Box Position
The Get Floating Box Pos action reads the current position of a floating box moving across the page. You
can process this information using, for example, an Idle action that moves a second floating box to the current position of that floating box. This creates the impression that the second object trails the first.
To set up a Get Floating Box Position action:
1 Prepare an animation with two floating boxes. Open the TimeLine Editor and record an animation path
for the first floating box.
2 Make sure that the second floating box has only one keyframe, so that it is static and unmoving.
(You move this floating box using the Idle action.)
250 CHAPTER 13
Using Actions
3 Insert a Head Action in the head section of the page (see “Setting up onload event actions” on page 245).
4 Choose Get Floating Box Pos from the Getters submenu of the Action menu in the Action Inspector.
5 Set the trigger to OnCall in the Exec. menu and name the action, for example, GetLeaderPosition.
6 Select the floating box you want to monitor from the Floating Box pop-up menu.
7 Insert another Head Action in the head section of the page and leave its trigger set to OnLoad.
8 Choose Action > Specials > Idle in the Action Inspector.
9 Deselect “Exit Idle If Condition Returns True.”
10 In the Condition tab choose Actions > Specials > Timeout enter an appropriate time interval in the
Timeout text box.
11 In the True tab, choose Action > Multimedia > Move To as the action to execute when the condition is
true. Then choose the floating box you want to move from the Floating Box pop-up menu.
12 Click the small icon next to the Floating Box option to specify how to supply the Web address. The red
“C” icon ( ) (default) lets you specify a fixed Web address. The green question mark icon ( ) lets you
choose an action. The blue ball icon ( ) lets you select a variable that holds the Web address.
13 Click the small icon next to the Pos option twice so a green question mark (
) appears, and the pop-up
menu lets you choose an action. Then Choose the Get Floating Box Pos action defined in previous steps,
for example GetLeaderPosition. This action supplies the position the floating box will move to.
14 Click the False tab and repeat steps.
15 Preview the action in a 4.0 browser.
Preload Image
The Preload Image action forces the browser to cache specified images before the page displays. Although
the page may take longer to load initially, preloaded images are immediately available when loading is
complete. Preloading images lets all the images on a page appear at the same time, and DHTML animations
and actions can immediately swap images.
To set up a Preload Image action:
1 Insert a Head Action in the head section of the page (see “Setting up onload event actions” on page 245).
2 Choose the Preload Image option from the Image submenu of the Action menu in the Action Inspector
see “To set up a Head Action:” on page 245.
3 Use the Point and Shoot button to select an image in the site window, enter the URL of the image in the
Link text box, or click Browse and select an image file.
4 Repeat for any image you want to preload.
Note: Don’t use Preload Image with rollover button—they are automatically preloaded.
ADOBE GOLIVE 5.0 251
User Guide
Random Image
The Random Image action swaps the contents of an image placeholder in a random sequence, based on
an external trigger such as a mouse-click or a page loading. You can specify a maximum of three
alternative images for the base image.
To set up a Random Image action for a normal image:
1 In Layout mode, insert an image placeholder.
2 In the Basic tab of the Image Inspector, link to an image using the Browse button or the Point and
Shoot button ( ).
3 In the More tab of the Image Inspector, enter a unique name in the Name text box.
Important: Image actions require images of equal size to avoid problems with scaling. The Random Image
action requires that the base image be named. Naming the base image ensures that it appears in the Base Image
pop-up menu in the Actions palette.
4 In the Link tab of the Image Inspector, click the New Link button.
You must create a link for the Random Image action to work with a normal image. However, you don’t need
to specify a target for this link.
5 In the Actions palette, select a mouse or key event and click the + button.
6 Choose the Random Image option from the Image submenu of the Action menu.
7 In the Base Image pop-up menu, select the base image you want to have swapped in a random sequence.
8 Enter URLs for the alternate images in the Image 1, Image 2, and Image 3 text boxes.
9 Preview the action in a 4.0 browser.
Set Image URL
The Set Image URL action lets you swap the content of an image in the browser window, for example, an
animated banner at the top of the page. You can exchange an image dynamically by inserting two keyframes
in the TimeLine Editor and adding complementary Set Image URL actions at the same positions relative
to the time track. You can also attach the action to any link to let the viewer decide.
To set up a Set Image URL action in the TimeLine Editor or attach it to an image, rollover, hyperlink text, or a
form element:
1 Insert an image, rollover, hyperlink, or form element on the page.
2 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker, or select a mouse or key event and click the + button in the Actions palette.
3 Choose Set Image URL from the Image submenu of the Action menu in the Actions palette.
252 CHAPTER 13
Using Actions
4 Choose the plain image you want to exchange from the Image pop-up menu. To list the image, it must
be named in the More tab of the Image Inspector. To name it, type text in the Name text box.
5 Use the Point and Shoot button to link to an image file in the Site window, type in the URL path to the
alternative image in the Link text box, or click Browse and locate a local image file.
6 Preview the action in a 4.0 browser. The second image will be scaled to match the size of the first graphic.
7 To restore the base image, add a second keyframe and Set Image URL action pair to the Actions Track of
the TimeLine Editor, or add a second image, rollover button, text item, or form element.
8 Repeat steps 2 through 4 for the new action. When repeating step 4, make sure you reference the original
image displayed before the first Set Image URL is executed.
9 Preview the action in 3.0 and 4.0 browsers.
You can create a slide show by adding multiple Set Image URL actions and a complementary keyframe on
the Actions Track of the TimeLine Editor.
Go Last Page
The Go Last Page action forces the viewer’s browser to jump to the last page visited. If you use this action,
you should give a hint to viewers that they have already visited this page.
To set up a Go Last Page action:
1 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker, or select a mouse or key event and click the + button in the Actions palette.
2 Select the Go Last Page option from the Link submenu of the Actions menu in the Actions palette.
3 Preview the action in a 4.0 browser.
Goto Link
The Goto Link action jumps to a user-specified URL. When using this action to jump to another site, it is
good practice to give viewers a hint that they are going to move to another location on the Web.
To set up a Goto Link action in the TimeLine Editor or for an image, a rollover button or form element:
1 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker, or select a mouse or key event and click the + button in the Actions palette. (Using this
action with text may confuse viewers. Use a normal text hyperlink instead.)
2 Choose Actions > Link > Goto Link.
3 Click the small icon next to the Link option to specify how to supply the Web address:
The red “C” icon ( ) (default) lets you specify a fixed Web address. The green question mark icon ( )
lets you choose an action. The blue ball icon ( ) lets you select a variable that holds the Web address.
ADOBE GOLIVE 5.0 253
User Guide
4 If the current page is located in a frame set, use the Target text box to specify a target frame where the
referenced page should appear.
5 Preview the action in a 4.0 browser.
Navigate History
The Navigate History action makes the viewer’s browser jump back by a specified number of pages in
the history window. If you use this action, you should give a hint to viewers that they have already visited
this page.
To set up a Navigate History action:
1 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker, or select a mouse or key event and click the + button in the Actions palette.
2 Select the Navigate History option from the Link submenu of the Actions menu.
3 Enter an integer number in the Go Where: text box to specify the number of pages you want the browser
to jump back or forth.
4 Preview the action in a 4.0 browser.
Open Window
The Open Window action lets you open a second window on top of the browser’s default window. You
can select what the new window will display by specifying a URL. It may take a few moments to open the
new window.
To set up an Open Window action in the TimeLine Editor or attach it to a link:
1 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker, or select a mouse or key event and click the + button in the Actions palette.
2 Choose Open Window from the Link submenu of the Action menu in the Inspector or Actions palette.
3 Use the Point and Shoot button to link to a page or URL in the Site window, type in the URL in the Link
text box, or click Browse and locate a local Web page.
4 If the current page is located in a frame set, use the Target text box to specify a target frame where the
referenced page should appear.
5 Enter appropriate values (in pixels) in the Size text boxes to determine the initial size of the window when
the browser opens it.
6 Select any of the following options to control the display:
• Resize to allow resizing within the browser.
• Scroll to control display scroll bars within the browser window.
254 CHAPTER 13
Using Actions
• Menu to control display of the browser’s menu bar.
• Dir. to display the standard browser directory buttons, such as What’s New and What’s Cool.
• Status to display the status bar in the newly opened browser window. The status bar shows loading
progress and URLs as the viewer moves the pointer over links.
• Tools to display the browser’s toolbar.
• Loc. to show the URL location field at the top of the newly opened browser window.
7 Preview the action in a 4.0 browser.
Document Write
The Document Write action is a companion action to the Body Action. It replaces a Body Action with text
or HTML code you specify, the current value retrieved by an action, or the value of a variable.
To set up a Document Write action:
1 Insert a Body Action at a convenient location in the body section of the page.
2 Choose the Document Write option from the Message submenu of the Action menu in the
Action Inspector.
3 Click the small icon next to the HTML option to specify the source that should supply the HTML.
4 Preview the action in a 4.0 browser.
Open Alert Window
The Open Alert Window action lets you open an alert dialog box with a custom text message to alert the
viewer to some problem—for example, a preferred browser version for viewing a page.
To set up an Open Alert Window action in the TimeLine Editor or attach it to an image, a rollover button, hyperlink
text, or form element in the Layout view:
1 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker, or select a mouse or key event and click the + button in the Actions palette.
2 Choose Open Alert Window from the Message submenu of the Action menu in the Actions palette.
3 Click the small icon next to the Message option to specify the source that should supply the HTML, or
type the message to be displayed in the window.
4 Preview the action in a 4.0 browser.
Set Status
The Set Status action allows you to display a custom text message in the status line at the bottom of the
browser’s document window.
ADOBE GOLIVE 5.0 255
User Guide
To set up a Set Status action in the TimeLine Editor or attach it to an image, a rollover button, hyperlink text, or
form element:
1 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker, or select a mouse or key event and click the + button in the Actions palette.
2 Choose Set Status from the Message submenu of the Action menu in the Actions palette.
3 Enter the desired message in the Text text box.
4 Preview the action in a 4.0 browser.
Drag Floating Box
The Drag Floating Box action allows viewers to drag a floating box around the page in their browser
window.
To set up a Drag Floating Box action in the TimeLine Editor:
1 Insert a floating box and fill it with content (see “Setting up floating boxes” on page 142). Be sure to let
viewers know that they can move the item.
2 Insert a Head Action into the head section of the page (see “Setting up onload event actions” on
page 245).
3 Choose Drag Floating Box from the Multimedia submenu of the Action menu in the Action Inspector.
4 Choose the floating box you want to drag from the Floating Box pop-up menu. The floating boxes in the
current page are named layer, layer 1, layer 2, and so on, unless you have renamed them in the Floating Box
Inspector (see “Setting up floating boxes” on page 142).
5 Preview the action in a 4.0 browser. You should be able to drag the item.
Flip Move
When triggered for the first time, the Flip Move action moves a floating box to a user-specified position.
When triggered for the second time, it moves the floating box back to its start point. For example, you can
attach this action to a button to let the viewer flip an object into view that is initially hidden behind the
edge of the page and flip it back out of sight again.
To set up a Flip Move action:
1 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker, or select a mouse or key event and click the + button in the Actions palette.
2 Choose Flip Move from the Multimedia submenu of the Action menu.
3 Choose the floating box you want to drag from the Floating Box pop-up. The floating boxes in the
current page are named layer, layer 1, layer 2, and so on, unless you have renamed them in the Floating Box
Inspector (see “Setting up floating boxes” on page 142).
256 CHAPTER 13
Using Actions
4 Use the Pos1 and Pos2 text boxes to edit the start and end points for the flip move action, or drag the
floating box to the desired start point and click Get to use those coordinates for Pos1. Repeat for Pos2 to
determine the end point.
5 Make sure that the Anim option is selected.
6 Enter a value in the Ticks text box to specify animation speed. One tick equals 1/60 of a second. The
higher the number of ticks, the slower the object moves.
7 Preview the action in a 4.0 browser.
Move By
The Move By action moves a floating box horizontally and/or vertically by a user-specified offset.
To set up a Move By action in the TimeLine Editor or attach it to an image, a rollover button, hyperlink text, or
form element:
1 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker, or select a mouse or key event and click the + button in the Actions palette.
2 Choose Move By from the Multimedia submenu of the Action menu.
3 Choose the floating box you want to drag from the Floating Box pop-up menu. The floating boxes in the
current page are named layer, layer 1, layer 2, and so on, unless you have renamed them in the Floating Box
Inspector (see “Setting up floating boxes” on page 142).
4 Click the small icon next to the Floating Box option to specify how the floating box parameters
will be supplied.
The red “C” icon ( ) (default) lets you enter your own constant values. The green question mark icon
( ) lets you choose an action. The blue ball icon ( ) lets you select a variable defined in the page.
5 If you use constants:
• Enter the number of pixels that you want to move the floating box horizontally in the DeltaX text box.
• Enter the number of pixels that you want to move the floating box vertically in the DeltaY text box.
6 Preview the action in a 4.0 browser.
Move To
The Move To action is a “one-way” version of Flip Move (see “Flip Move” on page 255). It moves a floating
box to a user-specified position, where it remains for the rest of the browser session.
To set up a Move To action in the TimeLine Editor or attach it to an image, a rollover button, hyperlink text,
or form element:
1 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker, or select a mouse or key event and click the + button in the Actions palette.
ADOBE GOLIVE 5.0 257
User Guide
2 Choose Move To from the Multimedia submenu of the Action menu.
3 Choose the floating box you want to drag from the Floating Box pop-up menu. The floating boxes
in the current page are named layer, layer 1, layer 2, and so on, unless you have renamed them in the
Floating Box Inspector.
4 Click the Floating Box option and specify how to supply the floating box parameters.
The red “C” icon ( ) (default) lets you enter your own constant values. The green question mark icon
( ) lets you choose an action. The blue ball icon ( ) lets you select a variable defined in the page.
5 If you use constants:
• Use the Pos text box to edit the end point for the Move To action, or drag the floating box to the desired
end point and click Get to use those coordinates for the end position. The start point is implicit—that is,
Adobe GoLive assumes you want the animation to start where the floating box is located before you define
the end point.
• Enter a value in the Ticks text box to specify animation speed. One tick equals 1/60 of a second. The
higher the number of ticks, the slower the object moves.
6 Make sure the Anim option is selected. Preview the action in a 4.0 browser.
Play Scene and Stop Scene
The Play Scene and Stop Scene actions let you manage the playback of single-scene animations or multiple
scenes created with the TimeLine Editor. You can control multiple-scene animations dynamically by inserting Play Scene and Stop Scene actions on the action track of the TimeLine Editor (see “Creating multiple
scenes” on page 158) or let the viewer control scene playback by clicking buttons labeled, for example, Play
and Stop.
To set up a Play Scene action for an image, a rollover button, hyperlink text, or form element:
1 Select a mouse or key event and click the + button in the Actions palette.
2 Choose Stop Scene from the Multimedia submenu of the Action menu in the Actions palette. (Inserting
a Stop Scene action is good practice at this point; it stops any other animation that may still be playing when
the viewer clicks the Play button.)
3 Click the + button one more time, then choose Actions > Play Scene.
4 Choose the scene you want the browser to play back from the Scene pop-up menu.
To set up a Stop Scene action for an image, a rollover button, hyperlink text, or form element:
1 Select a mouse or key event and click the + button in the Actions palette.
2 Choose Stop Scene from the Multimedia submenu of the Action menu in the Actions palette.
3 Choose the scene you want the browser to stop from the Scene pop-up menu.
4 Preview the action in a 4.0 browser.
258 CHAPTER 13
Using Actions
Play Sound and Stop Sound
You can insert the Play Sound and Stop Sound actions on the Actions Track of the TimeLine Editor, or
attach them to a pair of Play and Stop buttons, or text in the Layout view. Use the action to control the
playback of an audio track embedded using a plug-in.
Note: The Play Sound action requires a cross-platform, cross-browser audio plug-in that can be controlled by
JavaScript.
To set up a Play Sound action in the TimeLine Editor or attach it to an image, a rollover button, hyperlink text, or
form element:
1 Insert a plug-in placeholder and link it with a sound file (see “Adding audio and video clips” on
page 177). Name the audio plug-in (the name is referenced later to tell the browser which plug-in to play).
Then specify custom attributes and playback behavior in the Plug-in Inspector.
2 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker, or select a mouse or key event. Click the + button in the Actions palette.
3 Choose Stop Sound from the Multimedia submenu of the Action menu in the Actions palette. (Inserting
a Stop Sound action is good practice; it prevents system crashes by stopping any other sound track that may
still be playing when the viewer clicks the Play button.)
4 Select the sound you want to stop from the Name pop-up menu.
5 Insert another action marker on the Actions Track of the TimeLine Editor or click the + button in the
Actions palette one more time, then select Play Sound from the Multimedia submenu of the Action menu.
6 Choose the sound you want to start playing back from the Name menu.
7 Preview the action in a 4.0 browser.
To set up a Stop Sound action:
1 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker, or select a mouse or key event and click the + button in the Actions palette.
2 Choose Stop Sound from the Multimedia submenu of the Action menu.
3 Choose the sound you want to stop from the Name pop-up menu.
4 Preview the action in a 4.0 browser.
Show Hide
The Show Hide action lets you show or hide the content of a floating box in the browser’s document
window. You can show or hide objects dynamically by inserting two keyframes in the TimeLine Editor
(see “Animating floating boxes” on page 150, for instructions) and adding Show Hide actions to the time
track of the floating box.
ADOBE GOLIVE 5.0 259
User Guide
To set up a Show Hide action in the TimeLine Editor:
1 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker.
2 Choose Show Hide from the Multimedia submenu of the Action menu in the Action Inspector.
3 In the Floating box menu, choose the floating box you want to assign the action to. The floating boxes
in the current page are named layer, layer 1, layer 2, and so on, unless you have renamed them in the
Floating Box Inspector (see “Setting up floating boxes” on page 142).
4 In the Mode menu, choose what should happen to the floating box:
• Hide hides the floating box until a complementary Show action is executed.
• Show uncovers the floating box until a complementary Hide action is executed.
• Toggle shows or hides the floating box, depending on its current visibility status.
5 Create another keyframe and a complementary Show Hide action in the TimeLine Editor.
6 Preview the action in a 4.0 browser.
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 Animation button in any animated page you create, allowing them to stop
playback without choosing a menu command or editing browser preferences.
To set up a Stop Complete action for an image, a rollover button, hyperlink text, or form element in
the Layout view:
1 Select a mouse or key event and click the + button in the Actions palette.
2 Choose Stop Complete from the Multimedia submenu of the Action menu in the Actions palette.
3 Preview the action in a 4.0 browser.
Wipe Transition
The Wipe Transition action fades floating boxes and their visible content in and out using a “shutter effect.”
To set up a Wipe Transition action:
1 In Layout mode, insert a floating box and provide some content. You can use a rollover button, a normal
image, text, or form element.
2 If you use a normal image or text, select the object and click the New Link (
or the Image Inspector. In the inspector, replace empty reference with #.
) button in the toolbar
3 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker, or select a mouse or key event. Click the + button in the Actions palette.
260 CHAPTER 13
Using Actions
4 Choose the Wipe Transition option from the Multimedia submenu of the Action menu.
5 In the Floating box menu, choose the floating box you want to assign the action to. The floating boxes
in the current page are named layer, layer 1, layer 2, and so on, unless you have renamed them in the
Floating Box Inspector (see “Setting up floating boxes” on page 142).
6 Select an option from the Transition menu to determine the way the floating box will be wiped in or out.
7 Enter an 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.
8 Preview the action in a 4.0 browser.
Netscape CSS Fix
The Netscape CSS Fix action is a workaround for a program error in Netscape Navigator that causes Web
pages to lose important CSS information when the viewer resizes the browser window.
To set up a Netscape CSS Fix action:
1 Insert a Head Action in the head section of the page.
2 Choose the Netscape CSS Fix option from the Others submenu of the Action menu in the
Action Inspector.
3 Test-run your animations or actions in Netscape Navigator 4.0.
Note: We recommend using the Netscape CSS Fix action whenever you create animations involving floating
boxes. With frame sets, make sure to use the action in the head section of the page and not the frame set.
Resize Window
The Resize Window action resizes the browser window. You can have the resize action triggered dynamically by an action inserted in the TimeLine Editor or provide clickable buttons or text links if you want to
enable the viewer to make the decision.
To set up a Resize Window action:
1 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker, or select a mouse or key event and click the + button in the Actions palette.
2 Choose the Resize Window option from the Others submenu of the Action menu.
3 Enter a value (in pixels) in the Width text box to specify the width the window will be resized to by
the action.
4 Enter a value (in pixels) in the Height text box to specify the height the window will be resized to by
the action.
5 Preview the action in a 4.0 browser.
ADOBE GOLIVE 5.0 261
User Guide
Scroll Down, Left, Right, Up
The Scroll Left, Scroll Up, Scroll Right, and Scroll Down actions let you dynamically scroll the browser window. For example, you can use these actions to let the viewer follow the path of a floating box traveling
beyond the margin of the window.
To set up a Scroll Left, Scroll Up, Scroll Right or Scroll Down action:
1 If you want to have the window scroll dynamically, Ctrl-click (Windows) or Command-click (Mac OS)
the Actions Track of the TimeLine Editor to insert an action marker. If you want to leave the decision to the
viewer, select a mouse or key event and click the + button in the Actions palette.
2 Choose the Scroll Left, Scroll Up, Scroll Right, or Scroll Down option from the Others submenu of the
Action menu.
3 Enter a value (in pixels) in the Scroll pixels text box to specify the pixel distance which you want the
window to scroll.
4 Enter a value (in pixels) 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 scroll speed.
5 Preview the action in a 4.0 browser.
Set Back Color
The Set Back Color action lets you change the background color of the browser window. You can change
the background color either dynamically by using the Set Back Color action in the TimeLine Editor, or you
can attach it to buttons or text to let the viewer choose.
To set up a Set Back Color action in the TimeLine Editor or attach it to an image, a rollover button, hyperlink text,
or form element:
1 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker, or select a mouse or key event. Click the + button in the Actions palette.
2 Choose Set Back Color from the Others submenu of the Action menu of the Inspector or Actions palette.
3 Click the Background Color field to open the Color palette.
4 Choose a color from any tab (preferably a browser-safe color from the Real Web Colors tab, and drag it
from the preview pane of the Color palette onto the Background Color field.
5 Preview the action in a 4.0 browser.
262 CHAPTER 13
Using Actions
Condition
The Condition action monitors the browser window for the occurrence or nonoccurrence of an event and
triggers two other actions if the specified condition is true or false. You can choose between two conditions,
the Timeout and Intersection actions (see “Intersection and Timeout” on page 263). This action runs without any viewer input, so it is best used with an action item in the head section of the page. (To monitor
multiple occurrences in a session, set up an Idle action.)
To set up a Condition action:
1 Insert a Head Action in the head section of the page (see “Setting up onload event actions” on page 245).
2 Choose the Condition option from the Specials submenu of the Action menu at the top of the Action
Inspector.
3 In the Condition tab, select the Intersection or Timeout action as the condition. (For instructions on
using the Intersection or Timeout action, see “Intersection and Timeout” on page 263.)
4 In the True tab, specify an action to be executed when the specified condition evaluates to true.
5 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 (see “Set Image URL”
on page 251) to swap the image content based on the result of the condition action.
6 Preview the action in a 4.0 browser.
Action Group
The Action Group action lets you group other actions and run them sequentially. This action is most useful
on the actions track of the TimeLine Editor (see “Inserting actions in animations” on page 158), 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.
To set up an Action Group action:
1 Ctrl-click (Windows) or Command-click (Mac OS) the Actions Track of the TimeLine Editor to insert
an action marker.
2 Select the Action Group option from the Specials submenu of the Action menu in the Action palette.
3 Click the + button to add an action placeholder.
4 Select any option from the second Action menu.
5 Repeat steps 3 and 4 until you have added all desired actions to the Action Group.
6 Preview the action in a 4.0 browser.
ADOBE GOLIVE 5.0 263
User Guide
Call Action
The Call Action action available from the Specials submenu of the Action menu calls an action from the
head section of the page. In order for Call Action to work, the trigger for the action in the header must be
set to OnCall (see “Get Form Value” on page 249).
The Call Action action can be used to make your actions modular and easier to maintain. For example,
when your page contains two links that jump to the same URL (one at the top, one at the bottom), you
define the GoToURL action once in the header and connect it with a button and a text link. If you decide
to change the URL addressed by the two controls later on, you will only need to change it once.
By clicking the small icon next to the Action pop-up menu you can specify how to supply the name of
the action:
The red “C” icon ( ) (default) lets you select an action. The green question mark icon ( ) lets you
choose an action. The blue ball icon ( ) lets you select a variable of the type “Action name” that holds
an action name.
Call Function
The Call Function action from the Specials submenu of the Action menu calls a function from the head
section of the page or an external JavaScript library. In order for the Call Function action to work, you must
create a function in the head section using the JavaScript editor.
Note: Action-based JavaScript calls will make it easier for JavaScript-savvy developers to create new actions.
Intersection and Timeout
The Idle action inserts a script that monitors the browser window for a user-specified condition and triggers other actions, depending on whether the condition is true or false. You can choose between three conditions: timeout, intersection, and key compare. These actions are best used in the head section of the page
as the conditions are to be checked automatically.
The Timeout action is a timer and switch combination. It lets you specify a time span after which the
browser should switch between two states. The condition it monitors is “false” while the timeout period
still lasts and returns “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.
The Intersection condition monitors the browser window for the physical intersection of two floating
boxes. It is true when the floating boxes overlap in the browser window and false if they don’t. You can use
the result of this action to trigger two further actions.
264 CHAPTER 13
Using Actions
This action supplements the Drag Floating Box action (see “Drag Floating Box” on page 255). An intersection occurs when the paths of two floating boxes cross. The Intersection action may be connected, for
example, with a Set Back Color action (see “Set Back Color” on page 261), causing the browser to change
the background color.
To set up an Intersection or Timeout action:
1 Insert a Head Action in the head section of the page (see “Setting up onload event actions” on page 245).
2 Choose the Idle option from the Specials submenu of the Action menu in the Action Inspector.
3 Select the Condition tab (see “Condition” on page 262) and choose the Timeout option from the
Specials submenu of the Action menu.
4 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.
5 Enter a time span in seconds in the Timeout (secs.) text box.
6 Click the True tab and select the action to be triggered when the Timeout limit has elapsed. In the
following example, the Timeout action triggers a Set Image URL action (see “Set Image URL” on page 251),
causing the browser to change the content of an image.
7 Click the False tab and choose the action to be executed while the Timeout period still lasts. In the
example shown above, you would use a second Set Image URL action that supplies an alternative image.
8 Preview the action in a 4.0 browser.
To set up an Intersection action as a condition:
1 Click the Condition tab; then choose the Intersection option from the Specials submenu of the
Actions menu.
2 If you want the action to terminate the first time the Timeout condition is true, enable 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.
3 Select the floating boxes you want to monitor for the intersection from the two Floating Box
pop-up menus.
4 Click the True tab and choose the action you want to have triggered when an intersection occurs.
5 Click the False tab and choose the action to be executed while the floating boxes don’t overlap.
6 Preview the action in a 4.0 browser.
ADOBE GOLIVE 5.0 265
User Guide
KeyCompare
The KeyCompare action from the Specials submenu of the Action menu launches an action when the
viewer hits a selected key. This action is designed for use with the Idle action, which goes into the head
section of the page because it must load ahead of the visible page content. You can use this action, for
example, to simulate Windows-style access keys for objects on your page.
To set up a KeyCompare action:
1 Drag the Head Action icon from the Smart tab (
of the page.
) of the Objects palette into the head section
2 In the Action Inspector, choose Idle from the Specials submenu of the first Action menu.
3 Click the Condition tab, and choose KeyCompare from the Specials submenu of the second
Actions menu.
4 Enter the ASCII character code that corresponds to the desired keystroke in the CharCode text box.
5 Click the True tab and choose the action you want the keystroke to trigger.
6 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 on the False tab. A keystroke is a single event whose absence need not—
and must not—be monitored.
Using Variables
Adobe GoLive features a set of actions that allows you to use variables. You can use variables as an input to
other scripted actions, replacing settings you would make in the Inspector.
There are two major uses for variables defined 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 first. After declaring a variable, you may want to initialize it.
To declare a variable:
1 Drag the Head Action icon from the Smart tab of the Objects palette into the head section of
the page.
2 In the Action Inspector, choose Declare Variable from the Variables submenu of the Action menu. (In
order for Call Action to work, the trigger for the action in the header must be set to OnCall.
266 CHAPTER 13
Using Actions
3 Enter a variable name in the Name text box. Make sure that its name is not used by any other JavaScript
item in the page, and follows the standard JavaScript naming conventions for variables. Names must
consist of alphabetical characters only. Digits, dashes, slashes, and other non-alpha characters are
not allowed.
4 Choose an appropriate data type from the Type menu:
Boolean Any on/off state in the current page.
Integer Any integer value in the current page.
Float Any floating point value in the current page.
String Any string value in the current page.
Layer Any floating box in the current page.
Layer Position Location of a floating box 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 (see “Get Form
Value” on page 249).
Function Any function declared in the head section of the page.
5 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. You will use the Write Cookie and Read Cookie actions explained later in
this section to set the cookie and read its content, respectively.
To initialize a variable:
1 Drag the Head Action icon from the Smart tab (
of the page.
) of the Objects palette into the head section
2 In the Action Inspector, choose Init Variable from the Variables submenu of the Action menu.
3 Choose the variable you want to initialize from the Variables pop-up menu. (You must have declared
your variable for it to appear in the pop-up menu.)
4 The Value item changes automatically with the type of the variable. Use the appropriate control to supply
an initial value:
Boolean A checkbox (selected is true, deselected is false).
Integer A text box that accepts whole numbers only.
Float A text box that accepts numbers with decimal points.
ADOBE GOLIVE 5.0 267
User Guide
String A text box that accepts any string of text.
Layer A pop-up menu showing all floating boxes in the page.
LayerPos Two x and y text boxes for the position of a floating box 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 Point and Shoot button combination for specifying URLs.
Color A color field that brings up the Color palette 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
(see “Get Form Value” on page 249).
Functions A pop-up menu that lists all function declarations from the head section of the current page.
Read Cookie
The Read Cookie action lets you retrieve information stored in a cookie at runtime. You can have your site
read a cookie when your page loads, or when a viewer clicks on an item on your page.
To have the browser read the cookie when the page loads:
1 Drag the Head Action icon from the Smart tab of the Objects palette into the head section of the page.
2 Choose Read Cookie from the Variables submenu of the Action menu in the Action Inspector.
3 Enter the name of the cookie specified in the Write Cookie action in the Name text box.
To have the browser read a cookie when a viewer mouse-clicks on a specific item in your page:
1 Create a text link, image, rollover button, or form element.
2 In the Actions palette, add an action by selecting an item from the events list and clicking the + button
on the Actions palette.
3 Choose Read Cookie from the Variables submenu of the Action menu.
4 Enter the name of the cookie specified in the Write Cookie action in the Name text box.
Testing a Variable at Runtime
Test Variable is an extension to the Idle action that allows you to read the current value of a variable 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.
268 CHAPTER 13
Using Actions
To set up a Test Variable action:
1 Drag the Head Action icon from the Smart tab of the Objects palette into the head section of the page.
2 In the Action Inspector, choose Idle from the Special submenu of the Action menu.
3 In the Condition tab of the Idle action, choose Test Variable from the Variables submenu of the second
Action menu.
4 Choose the variable whose value you want to compare from the Variables pop-up menu.
5 The Value item changes automatically with the type of the variable. Use the appropriate control to supply
a value (like the URL in the example shown above) you want to test the variable against, as set out in the
preceding section on variable initialization.
6 In the Operator pop-up menu, specify the type of the comparison.
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.
Setting a Variable’s Value at Runtime
You may want to assign a certain value to a variable at runtime.
To set up a Set Variable action:
1 Drag the Head Action icon from the Smart tab (
of the page.
) of the Objects palette into the head section
2 In the Action Inspector, choose Test Variable from the Variables submenu of the Action menu.
3 Set the Exec. trigger to OnCall and enter a name for the Set Variable action in the Name text box. This is
required if you want to make the Set Variable action accessible at runtime. If you leave the Exec trigger set
to the OnLoad default value, the Set Variable action is executed when the page loads and the new value will
overwrite your initialization. If you set the trigger to OnUnload, you will not be able to set the variable at
runtime because the Set Variable action runs when the browser leaves the page.
4 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, as explained in the preceding section on variable initialization.
Write a Cookie
Cookies allow 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.
To set up a Write Cookie action:
1 Drag the Head Action icon from the Smart tab of the Objects palette into the head section of the page.
ADOBE GOLIVE 5.0 269
User Guide
2 In the Action Inspector, choose Write Cookie from the Variables submenu of the Action menu.
3 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.
4 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.
5 Set optional attributes:
• Path lets you specify 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 lets you specify 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 lets you ensure that the cookie will only be transmitted 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.
For more detailed information on the optional Path, Domain, and Secure attributes, please refer to the Web
page at http://home.netscape.com/newsref/std/cookie_spec.html.
Using Actions Plus actions
The Adobe Actions Plus folder contains a number of the most common customer-requested JavaScript
actions. Created by independent developers, these actions include slide shows, daily redirects, forced
frames, remote window targeting, and password protection. When installed in the Adobe GoLive Actions
folder, they appear in the Action > Actions Plus menu in the Action Inspector or the Actions palette. Point
and click accessibility allows you to build more interactive and dynamic sites than ever before, and all without a single line of coding.
About browser compatibility
Adobe has made every effort to provide actions that are usable by the widest possible browser audience.
Although many of these actions work on all 3.0 and later browsers, some do not. For your convenience, a
compatibility matrix is included for each action to show which browsers and platforms support that action.
(None of the Actions Plus actions runs on version 2.0 or earlier browsers.)
Note: The compatibility matrix is intended only as a guide. Inconsistencies occur within browser versions from
the major browser vendors. You should evaluate your potential audience and determine what level of browser
is right for your Web site and whether your actions run predictably.
270 CHAPTER 13
Using Actions
Setting up Actions Plus actions
You set up actions contained in the Actions Plus folder in the same way as you set up other actions in Adobe
GoLive. (See “Setting up actions” on page 245.)
Note: The DailyImageURL, Password, SlideShow, and SlideShowAuto actions require that you prepare an
image or open a particular page before setting up the action as a head item or mouse event.
Redirecting to a page based on the day of the week
DailyRedirect lets you display a different Web page for each day of the week, based on the date set in the
viewer’s computer. For example, when a viewer loads the page or clicks a text link, the browser can be redirected to display a page specified for that day of the week.
If any of the day text boxes are left blank (Empty Reference!), the browser is not redirected on that day, but
stays on the original page instead.
Note: Netscape Navigator and Microsoft Internet Explorer retrieve the date information when the browser is
first launched. If the computer’s date is changed without restarting the browser (for example, to test the action),
the new date is not noticed by the action.
Browser
compatibility
NN3 &
later
IE3
IE4 &
later
AOL3
AOL4 &
later
Windows
Yes
Yes
Yes
Yes
Yes
Mac OS
Yes
No
Yes
No
Yes
To apply the DailyRedirect action:
1 Set up the action trigger as described in “Setting up actions” on page 245.
2 Choose Actions Plus > DailyRedirect in the Action menu in the Action Inspector or the Actions palette.
3 For each day’s Location text box, link to a Web page or URL you want to display. If you don’t link to a
page or URL (leaving it as Empty Reference!), the page is not redirected on that day.
Redirecting to a page based on the time of day
TimeRedirect lets you display a different page, based on the time set in the viewer’s computer. For example,
when a viewer loads the page or clicks an image, the browser can be redirected to another page depending
on the time of day. You can even set it to go to one page before a specified hour and another on or after that
hour. So, for example, you can set up your Web site to display one page during the day and another at night.
ADOBE GOLIVE 5.0 271
User Guide
The action is reset at midnight.
Note: Netscape Navigator and Microsoft Internet Explorer retrieve the date information when the browser is
first launched. If the computer’s date is changed without restarting the browser (for example, to test the action),
the new date is not noticed by the action.
Browser
compatibility
NN3 &
later
IE3
IE4 &
later
AOL3
AOL4 &
later
Windows
Yes
No
Yes
No
Yes
Mac OS
Yes
No
Yes
No
Yes
To apply the TimeRedirect action:
1 Set up the action trigger as described in “Setting up actions” on page 245.
2 Choose Actions Plus > TimeRedirect in the Action Inspector or the Actions palette.
3 For Time, enter the hour before or after you want the redirection to occur.
4 Select PM to set the hour as PM. Leave it unselected to set the hour as AM.
5 Select Before Location, and link to a page or URL to display before that time. Leave this option unselected to prevent the redirection from occurring before the selected time.
6 Select At/After Location, and link to a page or URL to display at or after the specified time. Leave this
option unselected to prevent the redirection from occurring at or after the selected time.
Displaying an image based on the day of the week
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.
272 CHAPTER 13
Using Actions
Note: Netscape Navigator and Microsoft Internet Explorer retrieve the date information when the browser is
first launched. If the computer’s date is changed without restarting the browser (for example, to test the action),
the new date is not noticed by the action.
Browser
compatibility
NN3 &
later
IE3
IE4 &
later
AOL3
AOL4 &
later
Windows
Yes
No
Yes
Yes
Yes
Mac OS
Yes
No
Yes
No
Yes
To apply the DailyImageURL action:
1 Choose the image you want to replace based on the day of the week, and select it.
2 Click the More tab in the Image Inspector, and enter a name in the Name text box.
3 Set up the action trigger as described in “Setting up actions” on page 245.
4 Choose Actions Plus > DailyImageURL in the Action Inspector or Actions palette.
5 Choose the image from the Image menu in the Action Inspector. This is the base image that is replaced
with the image for that day.
6 For each day’s Location text box, link to an image you want to display. If you don’t link to an image
(leaving it Empty Reference!), the image is not replaced on that day of the week.
Note: All images must be the same size in pixels.
Creating slide shows
SlideShow lets viewers cycle through a series of images by clicking a link. Each click displays the next image
in the series.
The following rules apply to images used for the SlideShow action:
• They must be the same size in pixels.
• They must be in the same folder as the starting image.
• 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, starting with 01 and ending with the .gif or .jpg extension. For
example, the starting GIF image would be named 01.gif, and the others would be named 02.gif, 03.gif,
and so on.
ADOBE GOLIVE 5.0 273
User Guide
You cannot have more than one SlideShow action and SlideShowAuto action on the same page.
Browser
compatibility
NN3 &
later
IE3
IE4 &
later
AOL3
AOL4 &
later
Windows
Yes
No
Yes
Yes
Yes
Mac OS
Yes
No
Yes
No
Yes
To apply the SlideShow action:
1 Click the Layout tab to switch to Layout view.
2 Select the image you want to make the starting image for the slide show.
3 Click the More tab in the Image Inspector, and enter a unique name in the Name text box, such as First
Picture. This name does not have to be the same as the name of the file. For example, although the file
might be named 01.jpg, you could enter any descriptive name in the Image Inspector.
4 Set up the action trigger as described in “Setting up actions” on page 245.
5 Choose Actions Plus > SlideShow in the Actions palette.
6 From the Base Image menu, choose the starting image you named in step 3 and which will be replaced
with the rest of the images in the slide show.
7 For # of Images, enter the total number of images in the slide show.
8 Select any of the following playback options:
• 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 forwards and
backwards links for the slide show.
• Palindrome plays the slide show back and forth. To use this option, you must select Loop as well.
Leaving all three options unselected plays the slide show a single time.
Creating automatic, timed slide shows
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 SlideShowAuto action:
• They must be the same size in pixels.
• They must be in the same folder as the starting image.
• They can be either GIF or JPEG images, but you cannot mix GIF and JPEG images in the same slide show.
274 CHAPTER 13
Using Actions
• They must be named in sequence, starting with 01 and ending with the .gif or .jpg extension. For
example, the starting GIF image would be named 01.gif, and the others would be named 02.gif, 03.gif,
and so on.
You cannot have more than one SlideShowAuto action and SlideShow action on the same page.
Browser
compatibility
NN3 &
later
IE3
IE4 &
later
AOL3
AOL4 &
later
Windows
Yes
No
Yes
Yes
Yes
Mac OS
Yes
No
Yes
No
Yes
To apply the SlideShowAuto action:
1 Click the Layout tab to switch to Layout view.
2 Select the image you want to make the starting image for the slide show.
3 Click the More tab in the Image Inspector, and enter a unique name in the Name text box, such as Begin
Show. This name does not have to be the same as the name of the file. For instance, although the file might
be named 01.gif, you could enter any descriptive name in the Image Inspector.
4 Set up the action trigger as described in “Setting up actions” on page 245.
5 Choose Actions Plus > SlideShowAuto in the Action Inspector.
6 From the Base Image menu, choose the starting image you named in step 3 and which will be replaced
with the rest of the images in the slide show.
7 For # of Images, enter the total number of images in the slide show.
8 For Interval (in Secs.), enter the number of seconds to wait between displaying images.
9 Select Stop at End of Slideshow to play the slide show a single time only. Otherwise, the slideshow will
play continuously.
ADOBE GOLIVE 5.0 275
User Guide
Stopping automatic, timed slide shows
SlideShowAutoStop is a companion action to SlideShowAuto and lets viewers pause or continue an automatic slide show. For example, you can link this action to a button on the same page as the slide show.
Clicking the button once could pause the slide show, and clicking it again could restart it. This action can
only be used on a page where the SlideShowAuto action is applied.
Browser
compatibility
NN3 &
later
IE3
IE4 &
later
AOL3
AOL4 &
later
Windows
Yes
No
Yes
Yes
Yes
Mac OS
Yes
No
Yes
No
Yes
To apply the SlideShowAutoStop action:
1 Set up the action trigger as described in “Setting up actions” on page 245. This action can only be triggered by a mouse event, such as clicking a pause button.
2 Choose Actions Plus > SlideShowAutoStop in the Actions palette.
Preventing pages from being viewed outside of their frame set
ForceFrame lets you prevent pages that appear within a frame set from being viewed outside of the frame
set. For example, a search engine might refer to a topic described in a content page in one frame of your
multiframe Web page. With ForceFrame, a viewer clicking the search engine’s link to your page would see
the entire frame set of the page, not just that content page in a frame by itself. 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 though the site.
This action should only be applied to content pages that are part of a frame set.
Browser
compatibility
NN3 &
later
IE3
IE4 &
later
AOL3
AOL4 &
later
Windows
Yes
No
Yes
Yes
Yes
Mac OS
Yes
No
Yes
No
Yes
To apply the ForceFrame action:
1 Set up the action trigger as described in “Setting up actions” on page 245. The trigger should be applied
to all content pages that appear in the frame set, but not the frame set itself.
2 Choose Actions Plus > ForceFrame in the Action Inspector or the Actions palette.
276 CHAPTER 13
Using Actions
3 For frame set, enter the name of the frame set in which you want to display the content page.
4 For Frame, enter the name of the frame in which you want the content page to appear.
Preventing pages from displaying in a frame set
KillFrame prevents pages from being loaded into one frame of a frame set, provided that JavaScript is
turned on in the viewer’s browser. For instance, you can use this action to prevent someone from displaying
your page in one frame, and their logo or advertising in another frame on their Web page.
Browser
compatibility
NN3 &
later
IE3
IE4 &
later
AOL3
AOL4 &
later
Windows
Yes
No
Yes
Yes
Yes
Mac OS
Yes
No
Yes
No
Yes
To apply the KillFrame action:
1 Set up the action trigger as described in “Setting up actions” on page 245. KillFrame can only be triggered by a head action, and is usually triggered when the page loads.
2 Choose Actions Plus > KillFrame in the Action Inspector.
Displaying two frames from one link
Target2Frames lets you display two frames from a single link. For example, suppose your Web page has
three frames: one on the left with a button, and an upper frame and lower frame on the right. With
Target2Frames, you can set up the page so that clicking the button in the left frame displays a separate new
page in each of the upper and lower frames on the right.
Browser
compatibility
NN3 &
later
IE3
IE4 &
later
AOL3
AOL4 &
later
Windows
Yes
Yes
Yes
Yes
Yes
Mac OS
Yes
No
Yes
No
Yes
To apply the Target2Frames action:
1 Set up the action trigger on a page in one of the frames, as described in “Setting up actions” on page 245.
This action must be triggered by a mouse event, such as a mouse click.
2 Choose Actions Plus > Target2Frames in the Actions palette.
ADOBE GOLIVE 5.0 277
User Guide
3 For Frame 1, enter the name of the frame in which you want the first new page to appear when the action
is triggered.
4 For Link, link to the page or URL to display in that frame.
5 For Frame 2, enter the name of the frame in which you want the second new page to appear when the
action is triggered.
6 For Link, link to the page or URL to display in that frame.
Setting up a hyperlinked menu outside the main browser window
TargetRemote is used in conjunction with the Open Window JavaScript action. You can use Target Remote
to set up a small hyperlinked menu outside the main browser window so that when a viewer clicks on an
item in the menu window, the target URL opens in the main browser window.
Browser
compatibility
NN3 &
later
IE3
IE4 &
later
AOL3
AOL4 &
later
Windows
Yes
No
Yes
No
Yes
Mac OS
Yes
No
Yes
No
Yes
To apply the TargetRemote action:
1 Set up an Open Window action to open another HTML page in a new window. In this new HTML page,
set up a menu using buttons, graphics, and text as necessary.
2 Link each menu item using the New Link button in the Inspector.
3 For each menu item, add a TargetRemote action as a mouse event in the Actions palette, as described in
“Setting up actions” on page 245.
4 In the TargetRemote URL Link text box, type the URL of the page that you want to load in the original
window when the link is clicked.
5 If the original window is a frame set and you want the linked page to open in one of the frames, type the
name of the frame in the Optional Target Frame Name text box.
Note: If remote windows are resized in Netscape Navigator, they lose their ability to target the original window.
For this reason, the TargetRemote action should be used only with windows that are not resizable.
278 CHAPTER 13
Using Actions
Confirming links
ConfirmLink displays a confirmation dialog box before loading the linked page. This lets you create a confirmation dialog box so that when viewers click a link they can confirm whether they want to go to that
link. Clicking OK will display the linked page; clicking Cancel will return the viewer to the original page.
Browser
compatibility
NN4 &
later
IE3
IE4 &
later
AOL3
AOL4 &
later
Windows
Yes
Yes
Yes
Yes
Yes
Mac OS
Yes
No
Yes
No
Yes
To apply the ConfirmLink action:
1 Set up the action trigger as described in “Setting up actions” on page 245. This action can only be triggered by a mouse event, such as clicking a link.
2 Choose Actions Plus > ConfirmLink in the Actions palette.
3 For Message, enter the confirmation message. You can start a new line within the message by typing \n.
4 For Go To This URL On OK, link to the Web page or URL to display when the viewer clicks OK in the
confirmation dialog box. If you don’t link to a page or URL (leaving it Empty Reference!), the page is not
redirected, but displays the original page instead.
5 For Target Frame Name, enter the frame you want to load on the page. Otherwise, the entire page
is loaded.
Adding password protection
Password lets you password-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 hacked by turning off JavaScript in the browser or viewing the source code. The Password action
consists of two parts, an HTML file that generates an encrypted password, and the action itself.
Although Password provides a reasonable level of security, it is still possible to hack the password. It is
therefore not recommended for sites that require a high level of security. Also, the password-protected file
must only be placed in a directory that contains a default home page such as index.html (depending on
your ISP), so that the contents of the directory cannot be viewed by typing the directory location into the
browser location window.
ADOBE GOLIVE 5.0 279
User Guide
Browser
compatibility
NN3 &
later
IE3
IE4 &
later
AOL3
AOL4 &
later
Windows
Yes
Yes
Yes
Yes
Yes
Mac OS
Yes
No
Yes
No
Yes
To apply the Password action:
1 Use your browser to open the file makepassword.html located in the appropriate folder:
• In Windows, Adobe/GoLive 5.0/Modules/JScripts/Actions/Actions Plus
• In Mac OS, Adobe GoLive 5.0/Modules/JScript/Actions/Actions Plus folder
2 Click the link on the makepassword.html page, and enter the password you want to use. Passwords are
case-sensitive.
3 Write down the encrypted version of the password that appears. For example, if you entered the password Adobe, the encrypted version you’d write down might be 57968.
4 Set up the action trigger as described in “Setting up actions” on page 245. This action must be triggered
by a mouse event, such as a mouse click.
5 Choose Actions Plus > Password in the Actions palette.
6 For Encrypted Password in the Inspector, enter the encrypted version of the password you wrote down.
Using the earlier example, you’d enter 57968.
7 For Alert On Correct Login, enter any message you want to display when viewers enter the correct,
nonencrypted password (Adobe, using the earlier example) in the Password dialog box. If you leave this
text box blank, viewers will either encounter a JavaScript error or see an empty alert message when they
enter their password.
8 Make or place a new page in the same directory as the password page. This is the page that loads when
the password is entered correctly.
9 Name this page using the nonencrypted version of your password plus the suffix .html. For example, if
your password is Adobe, the password-protected page is Adobe.html.
Sending cookies
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, this 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.
280 CHAPTER 13
Using Actions
Browser
compatibility
NN3 &
later
IE3
IE4 &
later
AOL3
AOL4 &
later
Windows
Yes
No
Yes
Yes
Yes
Mac OS
Yes
No
Yes
No
Yes
To apply the VisitorCookie action:
1 Set up the action trigger as described in “Setting up actions” on page 245.
2 Choose Actions Plus > VisitorCookie in the Action Inspector or the Actions palette.
3 In the text box Give Your Cookie A Unique Name, enter the name you want to give the cookie.
4 For Redirect After 1st Visit, link to a page or URL to display the next time a viewer triggers
the action.
Deleting cookies
DeleteCookie is a companion action to VisitorCookie. It lets you delete the cookie (or any other cookie) by
typing 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.
Browser
compatibility
NN3 &
later
IE3
IE4 &
later
AOL3
AOL4 &
later
Windows
Yes
No
Yes
Yes
Yes
Mac OS
Yes
No
Yes
No
Yes
To apply the DeleteCookie action:
1 Set up the action trigger as described in “Setting up actions” on page 245.
2 Choose Actions Plus > DeleteCookie in the Action Inspector or Actions palette.
3 For Cookie Name, enter the name of the cookie you want to delete. For example, if you are using it to
test the VisitorCookie action and named the cookie “Store Cookie,” enter Store Cookie here.
ADOBE GOLIVE 5.0 281
User Guide
Shifting Code to an External Library
Adobe GoLive lets you create an external JavaScript library file that stores common code from animated
scenes created in the TimeLine Editor, JavaScript actions, image buttons, dynamic components, and
other DHTML objects. At the same time, it removes common code from your pages and replaces it with
references to the library, 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 components: Adobe GoLive invariably
places common code for DHTML items and actions in the head section of a page. While this works well
with “straight” pages, problems occurred in earlier versions whenever 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, making your pages load faster.
Using the JavaScript library at page level
You can enable the JavaScript library feature on a per-page basis and have Adobe GoLive shift the code from
the current page to the library.
To shift code from the current page to the library:
1 Click the small page symbol above the main content area of the document window to bring up the Page
Inspector.
2 Click the HTML tab of the Page Inspector.
3 Click the Import GoLive Script Library radio button to have Adobe GoLive shift JavaScript code from
the current page to the external library.
Using the JavaScript Library by Default
The JavaScript option in the Script Library view of the Preferences dialog box controls the usage of the
external JavaScript library in Adobe GoLive, leaving the decision to you whether you want the program to
include JavaScript code from DHTML objects in any page you create (default behavior) or to shift it to the
external library.
Use the options in the Script Library Preferences dialog box or Page Inspector as follows:
• Leave the Write code to Page default option activated to have Adobe GoLive include the entire JavaScript
code in the page(s) where the scripted action is used.
282 CHAPTER 13
Using Actions
• If your pages contain dynamic components, select the Import GoLive Script Library radio button. This
option instructs Adobe GoLive to shift common code from any page you create from now on to the
CSScriptLib.js script library. At the same time, a file reference is created in the header of each new page you
create to ensure that the common code from the library is available when the browser loads the page.
When you select the Import GoLive Script Library radio button in the Script Library Preferences dialog
box, Adobe 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.
• If you don’t have a site document open in the background when you save the page, Adobe GoLive writes
the code to a default library file which can be found in the Modules: JScripts subfolder of the Adobe GoLive
program folder.
Note: Selecting the Import GoLive Script Library radio button in the Script Library Preferences dialog box does
not move code from pages you have already saved to the CSScriptLib.js script library. To move code from those
pages to the library, you will have to open each page and select the Import GoLive Script Library radio button
in the HTML tab of the Page Inspector.
283
Chapter 14: Editing QuickTime
Movies
About the interactive QuickTime editing tools
Using the Apple Computer QuickTime™ 4.0 technology, Adobe GoLive lets you create movies for the Web,
edit them, and enhance them with interactivity for a more complete Web experience for your visitors. You
can create new movies from scratch as well as alter existing movies.
New and enhanced features
The Adobe GoLive interactive editing tools are integrated into an enhanced user interface layout that incorporates the look and functions of the Adobe GoLive tools. The following list briefly describes each of the
new or enhanced features:
QuickTime Objects palette. This tab on the Objects palette contains new track icons, such as SWF, that you
can drag onto the track list area in the TimeLine Window.
Movie menu. Offers multiple functions such as displaying your movie window or presenting your movie.
It also provides layout, text, track, and view size functions. When you want to export your movie or movie
track, you can do so from the Movie menu.
Toolbar. A dynamic toolbar that provides additional functions to the Movie menu. You can access the
TimeLine Window; position, resize, rotate, skew, and lock tracks; make a movie streamable; and change the
layering position of a track.
Multiple undos. The multiple undo function is fully implemented in the interactive QuickTime editing
environment.
Movie Viewer window. Two tabs are now included in the Movie Viewer window. The Preview tab lets you
preview your movies and set basic properties and annotations in the Movie Inspector. The Layout tab lets
you position, resize, skew, and rotate the movie tracks using the toolbar buttons. You can also set basic
properties and annotate the movie in the Layout tab view.
TimeLine Window. In version 4.0, this was called the Track Editor. The TimeLine Window has been redesigned for easier use and has added tools to help you create and edit samples for your tracks.The sample
tools include Inspect/Move/Copy, Create, Divide, Glue, and Delete Sample. Multiple sample selection
opens the new Multiple Sample Inspector, and multiple track selection opens the new Multiple Track
Inspector. You can now change the duration of a sample by resizing the sample duration bar, and you can
set a selection range using sliders.
Track and Sample Inspectors. Adobe GoLive now provides extended track and Sample track editing features
in individual inspectors, plus new tools for creating and editing samples.
284 CHAPTER 14
Editing QuickTime Movies
New tracks. SWF track, Streaming track, Picture track, 3D track, Folder track, MPEG track (Mac OS only),
and enhanced Text track.
Note: QuickTime for Windows does not support MPEG video. Therefore, the MPEG icon appears on the
Objects palette only in the Mac OS version of Adobe GoLive.
Import Adobe Photoshop layers as sprites. You can now import Adobe Photoshop layers in one file and have
those layers converted into sprites. With minimal setup in the Adobe Photoshop file, the layers are
imported with mouse cursor actions activated.
Filters. Generic, one-source, and two-source filters let you apply numerous effects into your QuickTime
movies.
Using the TimeLine Window
The TimeLine Window provides enhanced functionality that lets you add more complex interactivity to
your QuickTime movies, but at the same time makes it easier to do so. The TimeLine Window is shown
here and described below.
A
C
B
D
E
F
G
H
I
J
K
A. Sample tools B. Marker pop-up C. Time Ruler D. Time cursor E. Track information
F. Video track G. Loop H. Palindrome control I. Playback controls J. Time scale slider K. Keyframe
The TimeLine Window tools and controls provide the following functions:
Inspect/move/copy sample ( ) Use this tool for selecting items in the TimeLine Window. You can also use
this tool for moving and copying tracks, as well as displaying the track inspectors.
ADOBE GOLIVE 5.0 285
User Guide
Create sample ( ) Use this tool to create a Sample track bar or sprite keyframe. Some tracks do not contain samples, such as the Video track. However, for the tracks that do contain samples (such as the three
Filter tracks, HREF, Text, Chapter, and Sprite tracks), an expanding/collapsing arrow is visible to the left of
the track name. Click the arrow to expand the track. The Sample track appears. You’ll need to create the
sample content (they are not created by default). Click the Create sample tool, choose your start point in
the track content area and drag the Sample track bar to the desired end point. Release the mouse button.
You’ll see your Sample track in the track content area and the corresponding sample inspector will be
displayed.
Divide sample (
) Use this tool to create several samples in a very short time frame. For example, you can
add text to a sample, apply it, then display the text at three different time intervals by cutting the original
long sample into three pieces. Then you can drag each sample bar to the time interval you want.
Glue samples (
) Use this tool to set the end time of one sample to the start time of the next sample. Or,
you can set the start time of a sample to the end time of the previous sample. For example, create a Text
track with two samples. Drag the second sample until there is a gap between sample one and sample two.
Then, click the first sample with the glue tool, and the gap will be filled.
Delete sample (
) Use this tool to delete a Sample track bar or sprite sample. Simply place the eraser tool
on the Sample track bar or sprite sample and click.
The Marker pop-up (
) Jumps you to a specific marker in the Time Ruler, which will jump to that spot in
your movie in the Movie Viewer window.
The Time Ruler Displays time intervals depending on what you have selected in the Time Slider at the bottom of the window (x number of frames per second, or seconds). You can also set markers in the Time
Ruler, which allow you to jump right to that spot in the movie for editing purposes.
The track list Displays the tracks in the current movie. Each track bar is identified by its name (such as
Video Track 1 or Two Source Filter Track) or by its title if you enter one in the appropriate Inspector (such
as Fade-in for a Filter Track). You can also double-click the Track name in the track list and enter a new
name. You can select a track by clicking its name in the track list or by clicking the track bar in the track
content area. To delete a selected track, choose Edit > Cut or Edit > Clear.
The standard Video and Filter track Examples for you to see how some typical tracks appear in the TimeLine
Window.
286 CHAPTER 14
Editing QuickTime Movies
The three columns of Track information to the left of the track list are shown or hidden by clicking the
Show/Hide Track Info button (
) at the bottom of the window. The columns display the following
information:
• V shows whether or not the track is visible. Click the eye icon ( ) to show or hide the track. In general,
if you hide a track, the boundaries of the movie could be affected. QuickTime will recalculate the entire
movie and the size of the Movie Viewer window could change.
• L shows whether or not the track is locked. Click the lock icon ( ) to lock or unlock the track. When a
track is locked, the word locked appears in parentheses following the track name in the track bar.
• Type icon shows what kind of track it is. For example, the video icon (
) identifies a Video track, the
Text icon ( ) identifies a Text track. These icons are found in the QuickTime tab of the Objects palette.
The track content area Displays a bar (or keyframe for a sprite sample) that represents the media on each
track. The left edge of the bar marks the start time, and the right edge marks the end time of the track. The
keyframe marks the start time of the sprite sample.
The Loop button (
) Plays the movie in a simple endless loop. When the end of the movie is reached,
the movie jumps back to the start and resumes playing, repeating this cycle the number of specified times.
The Palindrome button (
) Causes the movie to bounce back and forth between its start and end points.
(The Loop button must be clicked to enable the Palindrome button.)
Playback controls Let you play your movie in a variety of ways:
• The Step Backward button (
) rewinds the movie by a single step with each click. Holding down this
button rewinds the movie continuously.
• The Stop button (
) stops movie playback in the Movie Viewer window. A single-click stops the movie
in its place. A double-click returns the movie to the beginning.
• The Play button (
) launches movie playback in the Movie Viewer window.
• The Step Forward button (
) advances the movie a single step with each click. Holding down this
button advances the movie continuously.
The Time Slider The scale to the right of the looping and playback buttons controls the time resolution of
the movie. This makes it easier to examine the timing relationships of the various tracks in multiple track
movies. Its nonlinear scale extends from one frame (maximum resolution) to one minute (minimum
resolution).
By dragging the Time Slider scale to the right, you decrease the time resolution (x number of frames per
second, or a measure of seconds up to one minute) and the track bars compress until they fit in the track
list area. This allows you to survey a larger section of the movie or the entire movie at a time. The image
above shows the effect of compressing the movie display to 50 percent (two frames instead of one). By dragging the Time Slider scale to the left, you maximize time resolution, which increases the level of detail with
which the tracks are displayed. The default time resolution is 6 Frames per second. Any changes you make
are saved between sessions.
ADOBE GOLIVE 5.0 287
User Guide
The Time Cursor Lets you preview your movie and place new markers in the Time Ruler. To preview your
movie, simply grab the Time Cursor with your mouse, hold down the mouse button and move the Time
Cursor left or right. When you want to place a new marker in the time scale, move your mouse left or right
in the time scale without holding down the mouse button. You’ll see a dotted, vertical line, and your mouse
cursor becomes a hand. To place the new marker, slowly move your mouse down until the cursor turns into
a small triangle. At that point, click your mouse and a new marker will be set.
Using the track and sample inspectors
The track inspectors and sample inspectors are the foundations for building interactivity into your QuickTime movies. It is within these various track and sample inspectors that you edit, set properties, select filter
effects, create sprite actions, and control layout parameters. You can also very easily layout your movie in
the Layout tab view. When you place a track in the TimeLine Window, typically each track has a Sample
track attached to it, but not every one does. In addition, each track and sample have a corresponding
inspector.
For example, place a Text track in the track list area of the TimeLine Window. Click on the Text track and
you’ll see its corresponding Text Track Inspector. You can set properties, position the Text track, and choose
the Mode, the way in which the text will be displayed in the movie.
Now notice that the Text track has an arrow next to it. When you click the arrow, the track expands to reveal
a Sample track. (The Sample track is dimmed at this point because you have to create it and its content.)
The Sample track will contain the properties and actions that belong to the Text track. In other words, the
Text track is a type of placeholder, while the Sample track contains the actual content of the track.
In the Text Sample Inspector, for example, enter the text you want to add to your movie, apply actions to
the text, align the text, set properties, and control the layout of the text.
Working with multiple tracks
Adobe GoLive lets you work with multiple tracks. Hold down the shift key and click the tracks you want to
include. The Multiple Track Inspector appears. You can align and leap tracks. The Base Track determines
the reference for leaping. The multiple tracks feature is especially useful when you work with Folder tracks,
which contain multiple tracks. See “Using Folder tracks” on page 310.
Using the Movie Viewer window
The Movie Viewer window contains two tabs, one for previewing and the other for layout and editing.
• The Preview tab lets you view the movie and set its properties in the Movie Inspector. By using the playback controls at the bottom of the Movie Viewer window, you can adjust the volume, play the movie all the
way through, or step forward and backward through the movie one frame at a time.
288 CHAPTER 14
Editing QuickTime Movies
• The Layout tab also lets you set properties in the Movie Inspector. Simply click in the Movie Viewer
window and make sure no other track or sample is selected (otherwise that corresponding inspector would
be displayed). The most exciting feature of the Layout tab, however, is that you can work in Layout Editing
view, a two-dimensional layout mode in which you can visually work with your movie tracks. See “Using
the Layout Editing view” on page 288 for details.
Using the Layout Editing view
The Layout Editing view in the Movie Viewer window offers a visual editing environment for your QuickTime movies. This view lets you edit and manipulate your movie tracks in a visual, two-dimensional manner. Although it’s essential to have the capability to enter numerical coordinates (as you do in the inspectors), it’s much easier to control the different movie tracks in the Movie Viewer window by physically
moving them. The Layout Editing view also provides a way to skew the movie track (stretch it into a parallelogram-like shape) or rotate it (turn it in any direction) to create some very interesting visual effects.
Customizing QuickTime Preferences
The QuickTime Preferences let you set the Layout Grid's properties, such as grid size, grid color, grid spacing, and subdivisions. You can also define a Movie Scratch Volume, which Adobe GoLive uses for its temporary movie files (similar to the Photoshop and Premiere Scratch Disks.) You can set other Adobe GoLive
Preferences as well, such as site and general preferences. Click Edit > Preferences and select QuickTime, or
select other preferences from the dialog box.
Working with tracks
Being able to select tracks easily is important when you’re working in Layout Editing view. You may have
several track layers in your movie, and they may be layered one on top of the other. Layout Editing view
offers a context pop-up menu that lists all the available tracks at the clicking location. Simply Ctrl-click
(Mac OS) or Right-click (Win) to display the context pop-up menu. You can select the track you want, or
all the tracks. (This feature is the same as in Photoshop, in which you can select a layer in the document
window by Ctrl-clicking when using the Move tool.)
When you select a track in the Track list in the TimeLine Window, the track is also selected (outlined) in
the Movie Viewer window. Likewise, when you select a track in the Movie Viewer window, it appears outlined and the track is also highlighted in the Track list.
ADOBE GOLIVE 5.0 289
User Guide
Using the Background track
The Background Track is in fact a video track whose only task is to keep the Movie Viewer Window (and
the movie itself) expanded to the desired size set in the New QuickTime Movie dialog box. It also provides
a specified background color for the movie. If you were not to have a Background Track when creating a
new movie, the movie would shrink to a size of '0,0' because there would be no visible content. To demonstrate this, simply create a new movie and delete the Background Track; the Movie Viewer shrinks to '0,0'.
Once you add visible content to the movie and then delete the Background Track, the Movie Viewer window (that is, the movie) will be resized to the resulting boundary of the remaining tracks.
Select a track either in the Movie Viewer window or in the Track list in the
TimeLine Window to edit or change the track in Layout Editing view.
Using the toolbar and Movie menu
The toolbar and Movie menu each provide tools while you’re working in Layout Editing view. Any changes or
additions you make while working in this view are reflected and saved in the corresponding inspectors, which
you can also use at any time to make changes to properties while you’re working in Layout Editing view.
The toolbar provides the following buttons for Layout Editing view:
• The Position/Resize Track button (
) lets you position or resize the track. If you work with the Grid
turned on (choose Movie > Show Grid), you can make your changes using the Grid as a guide. With the
Snap To Grid feature on, any change you make in position or size will snap to the closest grid coordinate.
Turn off Snap To Grid to have more flexibility in track placement.
290 CHAPTER 14
Editing QuickTime Movies
• The Skew Track button (
) lets you stretch the track into a parallelogram-type of shape. Simply select
the track, and grab one of the blue handles with your mouse cursor and drag the track until you reach a
desired shape.
• The Rotate Track button (
) lets you turn the track in any direction you want, up to a complete rotation of 360 degrees. Select the track, and grab one of the blue handles with your mouse cursor and drag the
track until you reach a desired newly rotated position.
• The Lock and Unlock Track buttons (
), (
) let you lock and unlock the selected track. With a
locked track, when you select it, the handles will be dimmed and you cannot make any changes to it. The
locked track will have the word (Locked) in parenthesis behind the track name in the track bar, and the
corresponding inspector properties will be dimmed.
• The Bring to Front button (
) places the selected track all the way to the front of the layering order.
You can bring the selected track forward one layer at a time using the Movie menu. Choose Movie > Track
> Bring Forward to do this.
• The Send Back button (
) places the selected track all the way to the back of the layering order. You
can send the selected track backward one layer at a time using the Movie menu. Choose Movie > Track >
Send Backward to do this.
The Movie menu provides the following menu items for Layout Editing view:
• Choose Movie > Show or Hide TimeLine to display or hide the TimeLine Window.
• Choose Movie > Hide or Show Ruler to display or hide the Ruler.
• Choose Movie > Hide or Show Grid to display or hide the Grid.
• Choose Movie > Snap To Grid to turn this function on or off. A check mark next to Snap To Grid shows
that this function is turned on. Snap To Grid forces the track to snap into place to the closest grid coordinate when you’re moving the track. Turning off this function allows more flexibility of placement.
• Choose Movie > Track > Bring To Front or Bring Forward to move the track to the very front of the
layering order, or to move the track forward one layer at a time, respectively.
• Choose Movie > Track > Send Backward or Send To Back to move the track backward one layer at a time,
or to move the track to the very back of the layering order, respectively.
• Choose Movie > View Sizes to zoom the track in or out, or to view the track in different percentage sizes.
You can also use the Movie > Export functions while in Layout Editing view. See “Exporting movies and
tracks” on page 308.
Opening QuickTime movies
You can create a new movie or open an existing movie, either of which are displayed in the Movie Viewer
window.
ADOBE GOLIVE 5.0 291
User Guide
To create a new movie:
1 Choose File > New Special > New QuickTime Movie. The New QuickTime Movie dialog box appears.
2 Enter a name in the Name field.
3 Choose the movie size from the pop-up menu. You can choose one of the pre-defined sizes from the popup or enter your own pixel values in the corresponding text fields.
4 Choose a background color or leave the default choice, which is white.
5 Click OK. The Movie Viewer window appears with the background track in place.
6 Click the Show TimeLine Window button (
background track and track bar.
) to display the TimeLine Window, and you’ll see the
To open an existing movie:
1 Choose File > Open, navigate to the movie file, and open it. The movie opens in the Preview tab in the
Movie Viewer window.
2 Click the Show TimeLine Window button (
) to display the TimeLine Window. You should see the
tracks associated with the movie. Click the Layout Tab to enable Layout Editing within the Movie Viewer
Window.
Viewing movie properties and annotating
You use the Movie Inspector to view information about a movie and to annotate a movie. The Movie
Inspector appears whenever you select the Movie Viewer window.
To view movie information:
Click the Movie Viewer window to display the Movie Inspector. In Layout Mode, make sure that no track
or sample is selected, otherwise the corresponding track or sample inspector is displayed instead of the
Movie Inspector.
The Basic tab of the Movie Inspector provides technical information on the movie, including the number
of tracks it contains, its duration, the size of the movie file in bytes, the data rate available per second during
playback, as well as the physical dimensions of the movie.
The Autoplay Movie checkbox sets the movie to start automatically when it is viewed in the QuickTime
Player or Adobe GoLive. It does not affect playback in the browser via the plug-in. If you check Autoplay
Movie and None in the Loop pop-up, the movie will play once all the way through.
The Controller pop-up menu lets you choose a type of controller suitable for your movie. The type of controller must be compatible to the movie content. For example, choosing a QuickTime VR controller for a
movie that doesn’t contain any QTVR content won't have an effect.
292 CHAPTER 14
Editing QuickTime Movies
To annotate a movie:
Click the Annotation tab in the Movie Inspector. You can fill out any or all of the fields listed in the Annotation tab.
Saving a movie
You save a movie by choosing File > Save. The first time you save a movie, the Save Movie As dialog box
appears and the movie will be flattened. (The movie must be flattened to be Web-ready.) Subsequently,
when you choose File > Save, the movie will not be flattened. To flatten your movie again, you must choose
File > Save As to do so.
Flattening your movie resolves all track references; that is, all data referenced by a track will be incorporated
into the movie (the movie becomes self-contained). For example, if you add a Video track to an existing
movie, the track initially only contains a reference to the actual video data (for instance to a video somewhere on your hard disk), not the data itself. When placing this movie on a Web server (or another computer) the video data referenced by the track will not be found. To avoid this, the movie must be flattened
(because the data is incorporated into the movie, and the movie file size will increase).
Select the folder in which you want to save the movie, typically in your site folder. You can create a folder
in your site window (for example Movies), and save your movies to that location. You’ll see the movie file
appear in the site window once you save the movie.
To save an existing movie with a different name:
Choose File > Save As. Name the file and choose the destination folder in the Save dialog box. The movie
will be flattened.
Using Video tracks
A Video track in a QuickTime movie is a standard structure for holding visual data, such as digitized video.
It consists of a number of sequential pixel images that play back at a certain speed (referred to as the frame
rate, expressed in frames per second) to give the viewer the visual impression of motion.
You can also import animated GIF files into the TimeLine window to add to your QuickTime movie. To do
so, you need to drag a Video track into the TimeLine window and choose an animated GIF file. The file is
automatically converted to a Video track, which you can then play faster or slower by changing the track
duration by resizing the track content bar or in the Video Track Inspector.
Adding Video tracks
You can add Video tracks to your movie by either importing the first visible video (or other visible track)
from another movie, or by copying any Video track from another movie and pasting it into your movie.
ADOBE GOLIVE 5.0 293
User Guide
To insert a Video track or import the first visible Video track of another movie:
1 Open or create a movie. See “Opening QuickTime movies” on page 290.
2 With the Movie Viewer window selected, click the Show TimeLine Window button (
) on the toolbar.
3 Drag the Video Track icon from the QuickTime tab of the Objects palette onto the track list area of the
TimeLine Window.
4 Navigate to and select a movie that you want to import, and click Open. Adobe GoLive imports the first
visible track of the movie and its name appears in the track list.
Note: An image file can also be imported and will be converted by QuickTime as a video source. The File dialog
box displays all the files that can be imported. However, if you select a file that is not usable as a Video track,
the creation of this Video track will be canceled.
5 In the Video Track Inspector, rename the track by entering a name in the Title field, or double-click the
track in the track list. Set the other track properties. For information on viewing and setting track properties, see “Setting the properties of a video or other visible track” on page 293.
To insert a track by copying it from another movie:
1 Choose File > Open and open the movie that contains the track you want to copy. Or, simply drag the
movie track from one TimeLine Window into another TimeLine Window.
2 With the Movie Viewer window selected, click the Show TimeLine Window button (
to open the TimeLine Window for the movie you want to copy the track from.
) on the toolbar
3 Select the track you want to copy from the track list, and choose Edit > Copy. (You can select and
copy/paste multiple tracks. Simply shift-click the tracks in the first movie’s track list, choose Edit > Copy,
select the second movie list, and choose Edit > Paste.) Be sure to highlight the destination track for the paste
function to work. If the track is not highlighted, click the track list and a blue focus rectangle will enclose
the area.
4 Open the movie you are adding the track to if its not already open, and with the Movie Viewer window
selected, click the Show TimeLine Window button (
) on the toolbar.
5 Choose Edit > Paste. The new track appears in the TimeLine Window.
6 In the Video Track Inspector, rename the track by entering a name in the Title box, or by double-clicking
the track name in the track list, and then set the other track properties. For information on viewing and
setting track properties, “Setting the properties of a video or other visible track” on page 293.
Setting the properties of a video or other visible track
The Video Track Inspector allows you to view and edit the track properties:
Title The title of the Video track. Enter any name you want.
Start Time The time position in the movie where you want to start the Video track.
294 CHAPTER 14
Editing QuickTime Movies
Duration The length of time you want the Video track to run.
Scale Sample Time This checkbox is enabled for tracks that contain samples (sprites, text, chapter, HREF,
and filters), or for the Folder track, which contains other tracks. With this option checked, the sample durations changes proportionally when you change the track duration in the track inspector (or if you Shiftdrag the track bar's end). With this option not checked, only the last sample would be lengthened to the
end of the track bar. (The default setting is unchecked.)
Note: If you have a Sprite track with a lot of samples (for example, frame actions) that need to occur at specific
times in the movie, and you then change the duration of the Sprite track with ‘Scale Sample Time’ checked, all
the samples (keyframes) would move as well. This is not a recommended process as this could drastically change
the whole layout of the sprite samples.
Position The left and top position respectively of the Video track in the movie. You can view the position
changes in the Layout tab of the Movie Viewer window as you change the position numbers in the Inspector. Likewise, you can change the position in the Movie Viewer window and see the changes reflected in the
Video Track Inspector.
Size Sets the vertical and horizontal dimensions (width and height respectively) of the Video track as it
will appear in the movie. The actual size of the movie is determined by the resulting boundary size of all
visible tracks.You can view the size changes in the Layout tab of the Movie Viewer window as you change
the size numbers in the Video Track Inspector. Likewise, you can change the size in the Movie Viewer window and see the changes reflected in the Video Track Inspector.
Normalize Track/Set Track Dimension Click this icon (
) to set these track dimensions. Every track has its
own original dimension (called normal size). When you adjust these dimensions in the Layout tab view or
in the inspector, you determine a scaling factor. If your track's original size is 160x240 and you set it to
320x240, the scaling factor is 2. When you select Normalize from this popup, the track is reset to 160x120.
If you set the track to 320x240 and then select Set Track Dimension, this new dimension will be the track's
new original size; that is, the scaling factor is removed and is set back to one (1). After having done that,
Normalize will scale the track down to 320x240, rather than 160x120.
This is particularly useful for the Text track. For example, add a Text track and a Text Sample. When you
add a Text track, it is added with the size of 320x240 (the size is determined by the movie size). Scale the
Text track down to 160x120 and watch how the text is scaled down. The text will be half the original size.
In most cases, you don’t want this. To scale the track but not its contained elements, select Set Track Dimension. The track dimensions still show 160x120, but this is now its new original size because the scaling factor has been set to one (1). The text won’t be scaled any further.
Constrain Proportions Resizes the Video track proportionally. For example, when you edit the value in the
width box, the height is adjusted to maintain the original aspect ratio of the track, and vice-versa.
ADOBE GOLIVE 5.0 295
User Guide
Mode Specifies how the Video track will overlay on other tracks within the movie:
Choose a mode from the pop-up list.
• Dither Copy (default mode) simply overlays the image on a track directly below it and applies dithering
for a more refined look. There is no interaction between a track in Dither Copy mode and tracks below it.
• Copy is the same as Dither Copy, with one exception: it lacks the dithering capability, which makes it less
suitable for display on systems in 256-color mode. However, this option may provide better performance
in low memory situations.
• Blend makes the track translucent, so you can see partially through it to the track below. The degree and
color of the transparency can be set by clicking the color field next to the Mode drop-down list, which
displays the Color palette. In the Color palette, choose a color and drag it from the preview pane to the
Mode color field. The lighter the color, the less translucent the track will be; the darker the color, the more
translucent it will be.
• Transparent lets you define a transparent color for any visual track. Choose the color as described in
Blend mode.
The next four modes are all based on alpha channels. An alpha channel defines how an image is combined
with a background image already present at the location where the image will appear. By defining an alpha
channel you specify which part of a visible image should be left out (the proper term is “masked”) to make
a background image appear in that area. The “alpha” graphics modes in this menu enable Adobe GoLive to
display movies with alpha channel content:
• Straight alpha means that the color components of each pixel should be combined with the background
pixel at the same location based on the value contained in the alpha channel.
• Premul white alpha supports images created on a white background with a premultiplied alpha channel.
• • Premul black alpha supports images created on a black background with a premultiplied alpha channel.
• Straight alpha blend is a combination of straight alpha and blend, so the masked areas will be transparent,
and the non-transparent areas will be translucent. As with the Blend mode, you can use the Color palette
to edit the degree of translucency.
• Composition (Dither Copy) is similar to Copy and Dither Copy, but more appropriate for Video tracks
created from animated GIF files.
296 CHAPTER 14
Editing QuickTime Movies
Adding Picture tracks
When you want to present a slide show or “stills” as part of your QuickTime movie, you use the Picture
track.
To insert a Picture track:
1 With a movie open in the Movie Viewer window, click the Show TimeLine Window button (
toolbar.
) on the
2 Drag the Picture Track icon from the QuickTime tab of the Objects palette onto the track list area of the
TimeLine Window.
3 In the Basic tab of the Picture Inspector, enter a name in the Title box, or double-click the track name in
the track list, and then set the other properties.
4 Click the Images tab of the Picture Inspector.
5 Choose whether to insert or replace images:
Insert Image Inserts the new images at the current time marker position.
Replace Images Replaces the old images with new images starting at the current time marker position and
lasting for a duration that you set in the Slideshow Time Interval and Loop settings. For example, in an
existing Picture track with a 10-second duration, move the Time Cursor to 00:00:04.00. Then, set the Slideshow Time Interval to one (1) second and import three new images with the Loop set to one (1). The resulting duration of these three images will be three seconds, and the Picture track’s existing images will be
replaced with the new ones from the time 00:00:04.00 to 00:00:07.00.
6 Click the Import button. Navigate to your images folder and choose an image.
7 Set the other properties:
Images Constrain Proportion When set, the images that are larger than the Picture track’s dimensions will be
scaled down while preserving their aspect ratio.
ADOBE GOLIVE 5.0 297
User Guide
Background Color Sets the background color of the Picture track. Choose a color by clicking in the colorfield, which displays the Color palette. Choose a color in the Color palette and the background color field
is automatically filled in.
Slideshow Time Interval Lets you specify each image’s duration (similar to an animated GIF’s interframe
delay).
Loop When importing an image sequence, this specifies the number of times the sequence will loop as set
in the corresponding fields. For example, create a new Picture track. Set Loop to 2. Set the Slideshow Time
Interval to 1 sec. Import four images. The resulting track will have a duration of eight seconds (four images
x 1 sec. interval x 2 loops). The playing sequence will be Image 1 -2 -3 -4 -1 -2 -3 -4.
Using Sprite tracks
A Sprite track contains image objects (referred to as sprites), to which you can apply actions and set individual mouse states (main, over, click inside, and click outside). Sprites are great for giving your visitors an
interactive experience through objects that effect a behavior, such as jumping to a different Web page.
Like a Video track, a Sprite track consists of a sequence of frames that play back at a certain frame rate.
Unlike a Video track, which is a continuous stream of pixel images, a Sprite track relies on a pool of images
that are stored with its first keyframe. The advantage is that subsequent frames need not contain the pixel
image itself, but simply a reference to an item in the image pool. This type of movie is then much smaller
in file size than pixel-based video, thus making your animations load faster.
The following sections provide step-by-step instructions for working with sprites. The following is the
overall process for creating a sprite:
1 Add the Sprite track
2 Set the properties
3 Import the images (which creates the sprites)
4 Set basic behaviors and actions on the sprites
Adding Sprite tracks and setting properties
To insert a Sprite track and set various properties:
1 With a movie open in the Movie Viewer window, click the Show TimeLine Window button (
).
2 Drag the Sprite Track icon from the QuickTime tab ( ) of the Objects palette onto the track list area of
the TimeLine Window. This inserts a new Sprite track, which appears in the Tracks list.
You can also copy and paste a track from another movie. See “Adding Video tracks” on page 292 for more
information.
298 CHAPTER 14
Editing QuickTime Movies
3 In the Basic tab of the Sprite Track Inspector, set the options. For information on setting track properties,
see “Setting the properties of a video or other visible track” on page 293.
4 Set options in the Sprites tab of the Sprite Track Inspector:
Visible Select this option to display the Sprite track in the Movie Viewer window. By deselecting this option,
you can temporarily hide the Sprite track to view tracks below it. This option does not affect the movie’s
boundary as it can in Show/Hide option in the TimeLine Window.
Scale Sprites When Track Is Resized Select this option if your sprites contain vector graphics. This option
ensures that your sprites scale smoothly when the Sprite track is resized. If this option is not selected, sprites
with vector graphics may look jagged after resizing.
Background Color Select this option to choose a background color. The default background color is black.
To select a color, click on the Color palette. Choose your color and drag it from the color sample pane into
the background color box in the Sprite Track Inspector.
Add new sprites Enter the number of sprites you want to add. You enter this number after you import your
images into the Sprite Track Image Pool on the Images tab.
The next step is to import your images.
Importing images (creating sprites)
Note: Images you import as sprites will default to a black background. This is because you have to add a sprite
to the image to see something. Once you add a sprite, you can change the background color in the Sprite Track
Inspector.
To use images as sprites, you first add them to the image pool. You can use still images with the following
formats as sprites: BMP, GIF, JPEG/JFIF, MacPaint, Photoshop, PICT, PNG, QuickDraw GX (Mac OS only,
requires the QuickDraw GX extension), QuickTime Image Format, SGI, Targa, and TIFF. By importing
images, you create an image gallery in the Images tab of the Sprite Track Inspector.
To import images into the image pool:
1 Select the newly added Sprite track in the track list.
2 In the Sprites tab of the Sprite Track Inspector, enter a number in the Add New Sprites text box. For now,
enter the number two (2).
3 Click the Images tab of the Sprite Track Inspector, and click Import. (For now, do not check Import
Photoshop Layers; choose a Photoshop file that is not layered. For details on importing Photoshop layers,
see “Importing Photoshop layers as sprites” on page 304.) This opens a file selection dialog box. Find your
first image and click Open (Windows) or Add (Mac OS) to start importing. Select your second image and
click Open or Add. When you are finished adding the two images, click Done.
4 The Compression Settings dialog box appears.
ADOBE GOLIVE 5.0 299
User Guide
• Select an image compressor from the pop-up menu. QuickTime comes with numerous built-in image
format compressors that cover most of the media formats used on the Internet and for general screen
publishing purposes. Your choice of compressor should depend on the type of image and reasonable movie
file-size limitations. We recommend that you try the default option first, which is JPEG. If this proves
unsatisfactory, experiment with other compressors to find the format that best suits your needs.
• Select a color depth to use in your movie from the Best Depth pop-up menu. The options available
depend on the compressor you choose. Most graphics compressors offer choices that just say “Color”
(equivalent to 256 colors) and “Greyscale.” The preview pane to the right shows how your color settings
affect the image.
• Drag the Quality slider to set the quality of the images in your Sprite track. As you drag the slider between
the Least and Best labels, it shows numerical values from 0 to 100. Image quality and degree of compression
are inversely proportional: the higher you set the quality, the lower the compression ratio will be. The
preview pane to the right shows how your quality settings affect the image.
5 Click OK. Adobe GoLive imports the images and adds each sprite object to the subtrack below the Sprite
track. You’ll see Sprite 1 and Sprite 2 listed and you’ll see a keyframe on each track.
6 Click Sprite 1 and notice that the Sprite Object Inspector appears. You can rename the sprite in the Title
field.
7 Click again on the Sprite track in the Tracks list. Click the Basic tab in the Sprite Track Inspector. If you
want to position the sprite differently, go ahead and experiment with these settings. You can watch the
sprite move around in the Movie Viewer window as you change the settings.
Note: You can select Direct Input For Textfields in Preferences/General/User Interface so that Adobe GoLive will
use the entered values and you won’t have to press Return for the setting to take effect.
You’re now ready to apply some basic behaviors and actions to your sprites.
Setting behaviors and actions on sprites
Wired sprites let you add true interactivity to your QuickTime movies, allowing them to respond to events
caused by visitors to your Web page. They play back in any Web browser that has the QuickTime plug-in
installed. (We recommend that you have QuickTime 4 or higher installed.)
You set behaviors and actions in the Sprite Sample Inspector. You can modify the physical location of the
sprite in the Movie Viewer window, control the sprite’s visibility, and choose how the sprite will overlay
other sprites with the Mode pop-up menu. Most important, the Sprite Sample Inspector lets you set up the
sprites for the rollover behavior and actions you want to assign.
300 CHAPTER 14
Editing QuickTime Movies
To set behaviors on your sprites:
1 Select the keyframe and view the Sprite Sample Inspector, which has two tabs: Basic and Actions.
Set the sprite rollover behavior in the Basic tab.
2 With the keyframe selected, set up the appearance and behavior of the sprite in the Sprite Sample
Inspector:
Visible Check this box to make the sprite visible in your QuickTime movie.
Mode Specifies how the sprite will overlay on other sprites within the movie.
Behavior Sets which sprite image is assigned to a specific behavior:
• Main reveals the first image that appears in the movie.
• Over reveals the image that appears when a user passes the cursor over the main image. In other words,
the first image is going to roll over into the second image.
• Click Inside reveals the image that appears when the user clicks and holds down the mouse button.
• Click Outside reveals the image that appears when you releases the mouse outside the sprite after clicking.
(For example, click the sprite, hold the mouse down and drag it outside the sprite to reveal the image.)
Image This pop-up menu lists the sprite images located in the image pool.
Cursor This pop-up menu lists the shapes you can assign to the cursor when the visitor passes it over the
sprite.
Status Enter information or notes on the status of the sprite. The text you enter here will be displayed in
the browser window’s status bar when you view the movie via the plug-in.
3 Add more keyframes and set behaviors and appearances as you wish. You can also add more sprites and
experiment with their appearance and behavior in the Sprite Sample Inspector.
4 In the Movie Viewer window, pass your cursor over the sprites and watch the behavior. Also, click the
Play button (
) in the TimeLine Window to preview the interactivity in the Movie Viewer window.
ADOBE GOLIVE 5.0 301
User Guide
You’re now ready to add some wired actions to your sprites. When you wire a sprite, you insert keyframes
and attach actions to them.
To wire a sprite with an action:
1 Locate the desired sprite on the Sprite track and click the keyframe with which you want to launch the
action. If you need a new keyframe, use the Create Sample tool to place the new keyframe in the desired
location on the Sprite track.
2 In the Sprite Sample Inspector, click the Actions tab.
3 Select an event from the Events list to determine what the viewer should do to trigger a sprite action:
• Mouse Down triggers an action when the user presses the mouse button down (without releasing it)
while the pointer is on top of a sprite.
• Mouse Up triggers an action when the user releases the mouse button while the pointer is on top of
a sprite.
• Mouse Click triggers an action upon a single mouse click on a sprite.
• Mouse Enter triggers an action when the mouse pointer is moved over a sprite.
• Mouse Exit triggers an action when the mouse pointer is moved away from a sprite.
4 Click the “+” button to attach an action to the event.
5 In the Action pop-up menu, choose an action—for example, GoTo URL. Click Apply. After you choose,
an action, a brief description of the action appears below the pop-up menu with the appropriate fields that
you need to fill in. For a complete list of sprite actions, see “About sprite actions” on page 302.
You can wire the sprite with additional actions. For example, you can combine any of the mouse-click
events with one of the two mouse-over events to make the sprite respond not only when being clicked but
also when the visitor moves the mouse pointer over it.
Active events are identified by dot symbols (“•”) that appear to the right of the each event.
6 Click the Play button (
window.
) in the TimeLine Window to preview the interactivity in the Movie Viewer
302 CHAPTER 14
Editing QuickTime Movies
Adobe GoLive comes with a complete set of ready-to-use wired actions for QuickTime movies. These
actions can be attached to single keyframes in a Sprite track.
About sprite actions
Adobe GoLive includes multiple wired actions for controlling a movie, tracks, sprites, QTVR objects, and
SWF files. The following actions set movie properties:
Movie Set Volume Sets the audio volume of the movie. You can set the volume level between 0 (minimum)
and 255 (maximum).
Movie Set Rate Sets the movie’s playback speed. You can enter any of the following values (decimals or
whole numbers allowed):
• 1 to playback at normal speed
• 2 to playback at double speed
• 0 to stop
• -1, -2, and so on to play backwards
Movie Set Looping Flags Sets the looping mode for movie playback. The Loop pop-up menu lets you choose
the following:
• None to play from beginning to end, then stop
• Loop to play from beginning to end, then resume playback at the beginning
• Loop and Palindrome to play from beginning to end, then backwards until reaching the beginning, from
which point on it will play forward again
Movie GoTo Time Jumps to a user-specified time in the movie. The maximum value is given by the movie’s
duration.
Movie GoTo Beginning Jumps to the beginning of the movie.
Movie GoTo End Jumps to the end of the movie.
Movie Step Forward Advances the movie one frame at a time.
Movie Step Backward Rewinds the movie one frame at a time.
Movie Set Selection Selects part of the movie, based on a user-specified time range. The Start Time and End
Time text boxes let you enter the time range. The Get Current Selection box starts the time range at the
point of play selection specified by the user.
Movie Set Play Selection Plays only the current movie selection specified by the Movie Set Selection action.
The checkbox lets you toggle Movie Play Selection on and off.
The following actions set track properties:
ADOBE GOLIVE 5.0 303
User Guide
Track Set Enabled Enables or disables a track, regardless of its type. You can use it, for example, to switch
between two different Sound tracks.
Track Set Layer Sets the current track’s layer number, specifying its front-to-back order relative to the other
tracks. The Track pop-up menu lets you choose the track. A text box displays the selected track layer number. You can enter a number to move the selected track forward or backward. The lower the layer number,
the further front the track appears.
Track Set Matrix Sets the dimensions of the target track. The Track pop-up menu lets you choose the track.
The Position and Size text boxes display the current settings. You can change these settings. When checked,
the Constrain Proportions button maintains the aspect ratio of the settings.
Track Set Graphics Mode Sets the graphics mode of the selected track. The Track pop-up menu lets you
choose the track. The Mode pop-up menu lets you choose how the track will overlay on other tracks. You
can also choose a track color by clicking the color box to the right of the Mode pop-up menu. When you
click the Color field, the Color palette appears. Choose your color in the Color palette, and it will be displayed in the Color field.
Track Set Sound Volume Sets the volume for the selected track. The Track pop-up menu lets you choose the
track. You can set the volume level between 0(minimum) and 255 (maximum).
Track Set Sound Balance Sets the sound balance for the selected track. The Track pop-up menu lets you
choose the track. You can set the balance left, center, or right (-128 maximum left to 128 maximum right).
The following actions set sprite properties:
Sprite Set Matrix Sets the position of the target sprite. The Track pop-up menu lets you choose the track.
The Sprite pop-up menu lets you choose the target sprite. A Position text box displays the current position
of the sprite. You can change the sprite’s position.
Sprite Set Image Index Selects the image for the target sprite. This action creates mouseover or rollover
effects. The Track pop-up menu lets you choose the track. The Sprite pop-up menu lets you choose the target sprite. The Image pop-up menu lets you choose the target image, and a thumbnail of the image appears
in the Image box.
Sprite Set Visible Shows or hides the target sprite. The Track pop-up menu lets you choose the track. The
Sprite pop-up menu lets you choose the target sprite. A Visible check box shows and hides the sprite.
Sprite Set Layer Sets the target sprite’s layer number, specifying its front-to-back order relative to other
sprites on the same track. The Track pop-up menu lets you choose the track. The Sprite pop-up menu lets
you choose the target sprite. A text box that accepts the layer number. The lower the layer number, the further front the sprite appears.
304 CHAPTER 14
Editing QuickTime Movies
The following action is global; that is, it doesn’t control the movie playback window:
GoTo URL Jumps the sprite to the specified URL. The Link box lets you use the Point and Shoot button to
specify a Web page in your site window, or you can browse for the target Web page and enter the URL manually. The Target box pop-up is only for an embedded ‘GoTo URL’ from within a movie in a Web page. It
determines how the link will be opened.
The following actions set QTVR properties:
QTVR GoTo NodeID Sets the current node ID of a QuickTime VR movie.
QTVR Set Pan Angle Sets the current pan angle of a QuickTime VR movie.
QTVR Set Tilt Angle Sets the current tilt angle of a QuickTime VR movie.
QTVR Go To field of View Sets the current field of view of a QuickTime VR movie.
QTVR Go To Default View Sets the current default view of a QuickTime VR movie.
The following actions set SWF properties:
SWF Track Set Pan Sets the current pan percentages for the target SWF track. It moves the SWF track by a
relative amount set in the corresponding text fields.
SWF Track Set Zoom Factor Zooms the target SWF track by a specified factor (between 0 and 100%). The
Action Normalizes Track button resets the SWF track to its default (non-zoomed) size.
SWF Track Set Zoom Rect Sets the current zoom rectangle for the target SWF track. The zoom rectangle is
the area of the SWF track that will be zoomed into the area that comprises the current size of the SWF track.
For example, create a movie with at least one sprite in it. Import an SWF track and set its size to 320x240
pixels. Click the Actions tab and apply the ‘SWF Track Set Zoom Rect’ action with the zoom rect set to
160x120 pixels. Select the Mouse Click trigger event. Click the sprite to see the effect: the 160x120 zoom
rect is zoomed into the 320x240 pixel track size area.
SWF Track GoTo Frame Sets the current frame of the target SWF track.
SWF Track GoTo Frame Label Sets the current frame label of the target SWF track.
Importing Photoshop layers as sprites
You can now import Photoshop file layers as sprites. The great advantage of this is that you can do all your
design and layout of the sprites in Photoshop (including mouseover images, and so on), and then import
it into the QuickTime movie very easily. With this feature it's easy to create a great looking interface in Photoshop with all the behavior in the image, and then bring it to life automatically in Adobe GoLive without
the need to reposition all the images or assign the behavior to the images manually.
ADOBE GOLIVE 5.0 305
User Guide
To import Photoshop layers as sprites:
1 In Adobe Photoshop, name each layer with the appropriate name, such as Layer_main, Layer_over, and
Layer_click. Save the file and close Photoshop.
2 In Adobe GoLive, create a sprite track and make sure that its selected in the Tracks list.
3 In the Images tab of the Sprite Track Inspector, click Import and make sure you check the Import Photoshop Layers checkbox.
4 Select your Photoshop image, and then click Open (Windows) or Add (Mac OS) to start importing.
Click Done.
5 In the Compression Settings dialog box, choose the settings you want and click OK. For a detailed
description, see “Importing images (creating sprites)” on page 298.
Adobe GoLive imports the image into the image gallery with each layer listed as a separate image. You can
click on each image name (layer) and view the properties. If you want, you can name each image (layer) in
the Name box. You’ll be able to animate these images as you would any other.
After you set properties and imported your images into the image pool, you can set actions on sprites and
create interactivity.
Using SWF tracks
Adobe GoLive lets you integrate SWF files into your QuickTime movies. Once you set up your SWF files
(which you can do in Adobe LiveMotion) with the actions you want and the correct frame rates, you can
incorporate them into your QuickTime movies by using the SWF track tools. See your Adobe LiveMotion
documentation for details on setting SWF actions and frame rates.
When you insert a SWF track into a QuickTime movie, QuickTime matches the SWF time base with the
QuickTime time base. In other words, if a SWF file has an internal speed of 15 frames per second (fps) and
a duration of one minute, the corresponding SWF track will also have a duration of one minute.
To insert an SWF file:
1 With a movie open in the Movie Viewer window, click the Show TimeLine Window button (
).
306 CHAPTER 14
Editing QuickTime Movies
2 Drag the SWF Track icon from the QuickTime tab ( ) of the Objects palette onto the track list area of
the TimeLine Window. Navigate and choose the SWF file. This inserts a new SWF track, which appears in
the Tracks list. The SWF file also appears in the Movie Viewer window.
A
B
A. SWF file B. Video
3 Set the properties as necessary. See “Setting the properties of a video or other visible track” on page 293
for details.
Using Streaming tracks
Adobe GoLive lets you export movies as RTSP streaming movies for use on an RTSP-dedicated server. For
in-depth details about video streaming and how to prepare your movies for HTTP and RTSP streaming,
please see your QuickTime documentation.
HTTP streaming vs. RTSP streaming
QuickTime offers two types of streaming: HTTP streaming and RTSP streaming.
With HTTP streaming (Hypertext Transfer Protocol), you put your movie files on a Web (HTTP) server as
you do Web pages and image files. Movies are downloaded in their entirety to the computer’s hard drive
where the QuickTime plug-in plays them. Since the movie is downloaded to the hard drive, you can replay
the movie any time you wish and a higher data rate (higher quality) is ensured. If you have Sprite tracks or
3D tracks, these will be visible to your viewers (whereas they won’t be with RTSP streaming).
ADOBE GOLIVE 5.0 307
User Guide
RTSP streaming (Runtime Streaming Protocol) requires a dedicated streaming server which sends out
movie data on an as-needed basis; no file is stored on the viewer’s computer. If the network is congested,
preventing portions of the movie from arriving on time, RTSP will ignore the fact that some data may be
missing. However, since RTSP streaming works without files, it’s possible to do live broadcasts, where all
viewers see the same movie data at the same time. The advantage of RTSP streaming is that viewers don’t
have to store large movie files on their hard drives, as they do with HTTP streaming.
Adding Streaming tracks
Again, before you add Streaming tracks in Adobe GoLive, be sure to read your QuickTime documentation
about preparing movie files for HTTP or RTSP streaming. The QuickTime documentation also contains
details on embedding HTML attributes and tags, and using HREF links.
You can add Streaming tracks, resize/position/scale/skew/rotate/layer it just like any other track. In the
track's RTSP tab, you can specify the RTSP link to the streaming movie on the server. To be streamed, a
movie must be made into a Streaming Movie. (See “Exporting movies and tracks” on page 308 for details.)
The client movie (the movie you're assembling here) uses the Streaming track to create a reference to the
streaming movie on the QuickTime Streaming Server.
To add a Streaming track:
1 With a movie open in the Movie Viewer window, click the Show TimeLine Window button (
).
2 Drag the Streaming Track icon from the QuickTime tab ( ) of the Objects palette onto the track list
area of the TimeLine Window. This inserts a new Streaming track, which appears in the Tracks list.
3 On the Basic tab of the Streaming Track Inspector, set the properties such as the position and size of the
Streaming track. For details on setting properties, see “Setting the properties of a video or other visible
track” on page 293.
4 Click the RTSP tab to specify the URL that points to the streaming content.
5 In the Link box, you can use the Point and Shoot button to specify a Web page in your site window, or
browse to locate the file you want. You can also use the Adobe GoLive URL Mapping feature, which allows
you to store virtual content inside the site window.
6 Click on Get Streaming Properties. This opens the connection to the RTSP URL to obtain important
attributes of the streaming movie (dimensions and duration).
Note: If the streaming content is a live broadcast, it has no specific duration. This is also a good test to check if
the link is working.
7 You can set the Timeout Interval for the streaming content. The Timeout Interval determines when the
attempt to establish a connection to the streaming server should be terminated. This applies only when you
are working from within Adobe GoLive, not for the embedded movie in the Web page (when the user's
client tries to establish this connection). You can cancel the connection to the RTSP server by pressing
any key.
308 CHAPTER 14
Editing QuickTime Movies
Using SWF and sprites in streaming movies
SWF files and sprites are not streamable, that is, you must create two movies: the streamable movie for the
server, and the client movie. The client movie will be placed on an HTTP server, and the streaming movie
will be placed on a streaming server. The client movie will contain a URL embedded in the Streaming track
that points to the server movie.
Exporting movies and tracks
These export features in the Movie menu let you do the following:
• Movie > Export Movie lets you export your movie in a different compression or file type than the original. You can choose to export your movie into an AVI file, a BMP file, or a DV stream, just to name a few
of the items in the pop-up list. A list of compression settings is also available in the pop-up menu.
• Movie > Export As Streaming Movie lets you export your movie as a streaming movie for use on a
streaming-dedicated server. You can rename the movie when you export it and choose settings from the
pop-up menu.
• Movie > Export Track lets you export one track as any number of files. Simply save the exported track as
a movie or self-contained movie in a specified folder location.
Adding 3D tracks
If you have QuickDraw 3D files, you can import them in the 3D track. Drag the 3D track icon from the
QuickTime tab on the Objects palette into the track list area of the TimeLine Window. Navigate and choose
the QuickDraw 3D file. You’ll see the 3D track in the track content area and the 3D Track Inspector. Set the
properties as necessary.
Adding Sound and Music tracks
You import sounds in various formats, including AIFF/AIFC, System 7 Sound, WAV, .mp3 files, and Sound
Designer II, as well as standard MIDI files. Any sound or Music track you import creates a track in the
TimeLine Window.
To insert a sound or Music track:
1 With a movie open in the Movie Viewer window, click the Show TimeLine Window button (
).
ADOBE GOLIVE 5.0 309
User Guide
2 Drag the Sound Track or Music Track icon from the QuickTime tab (
track list area of the TimeLine Window.
A
) of the Objects palette onto the
B
A. Sound Track item
B. Music Track item
3 Select a sound (AIFF, AIFC, System 7 Sound, WAV, .mp3 files, or Sound Designer II) or music file (standard MIDI) and click Open to import it.
4 In the Sound Track Inspector or Music Track Inspector, enter a new name for the track in the Title field.
5 Click the Play button (
) in the TimeLine Window to listen to the track and see how it fits in with
other tracks.You can change the duration of the track in the Sound or Music Track Inspector, or by dragging the content Start and End bar in the TimeLine Window.
Using HREF tracks
An HREF track is used to embed URLs on an additional Text track in a QuickTime movie. A Web browser
jumps to a URL destination on the Web—either automatically or when a viewer clicks the movie display
area. The track you add creates a segment of specified length during which the URL appears in the movie.
This feature can also be used in a page with HTML frames, where the movie plays back in one frame and a
second frame is used to display the alternative URLs addressed during movie playback. Using frames allows
the movie to play back continuously, while the content of the second frame is being swapped. Content
swapping can be achieved either interactively by a mouse click or automatically by setting the appropriate
option for the movie. You can use only one HREF track per movie.
To insert an HREF track:
1 With a movie open in the Movie Viewer window, click the Show TimeLine Window button (
).
2 Drag the HREF Track icon from the QuickTime tab ( ) of the Objects palette onto the track list area
of the TimeLine Window. This inserts a new empty track named HREF Track. You’ll notice that the HREF
track is hidden by default. This is so the URL won’t be displayed in your movie. If you want to display the
URL, click the eye icon to show the HREF track. You’ll see the HREF track (the URL) in the Movie Viewer
window.
3 Set the HREF track properties as necessary. You can’t rename an HREF track. For information on track
properties, see “Setting the properties of a video or other visible track” on page 293.
4 Click the small triangle control next to the HREF track name in the TimeLine Window to expand the
HREF track. You’ll see the Sample track displayed.
310 CHAPTER 14
Editing QuickTime Movies
5 With the Create Sample tool, add the sample content bar to the track content area.
6 Make sure the Sample track is selected, and then in the HREF Track Inspector, enter a URL in the Link
field, or click Browse and navigate to a page, or click the Point-and-Shoot button and drag to a file or URL
in the site window.
Note: You’ll notice that the HREF track is hidden by default. This is so the URL won’t be displayed in your
movie. If you want to display the URL, click the eye icon to show the HREF track. You’ll see the HREF track (the
URL) in the Movie Viewer window.
7 In the Target pop-up, choose the location where the URL should be displayed.
8 If you check the Autoload checkbox, when the movie plays, it will automatically jump to the specified
URL. If you leave this checkbox unchecked, the visitor to the Web page must click the QuickTime movie to
jump to the specified URL.
Using Folder tracks
Folder tracks let you organize your tracks into groups. For example, you can group together all the Video
tracks, or tracks that pertain to images (picture, sprites).
To insert a Folder track:
1 With a movie open in the Movie Viewer window, click the Show TimeLine Window button (
).
2 Drag the Folder Track icon from the QuickTime tab of the Objects palette onto the track list area of the
TimeLine Window. This inserts a new empty Folder track.
3 Set the properties as necessary:
Title Enter a title for the Folder track.
Scale Sample Time This checkbox is enabled for tracks that contain samples (sprites, text, chapter, HREF,
and filters), or for the Folder track, which contains other tracks. With this option checked, the sample or
track durations change proportionally when you change the track duration in the track inspector (or if you
Shift-drag the track bar's end). The Folder track settings are inherited by its nested tracks. The default setting is unchecked.
To organize your tracks in folders:
1 Simply drag a track into the Folder track. Once you drag a track into the Folder track, you’ll see a triangle
next to the track. Click the triangle to expand the Folder track and see the tracks within it.
2 Click on a track within the Folder track and you’ll see its corresponding Inspector.
3 Add more folders as you wish and organize all of your tracks.
ADOBE GOLIVE 5.0 311
User Guide
Adding Chapter tracks
Like the chapters of a book, a Chapter track subdivides a movie into segments that deal with the same topic.
It provides basic navigation support for QuickTime movies, allowing viewers of your page to get quickly to
selected points in a movie. When viewed in a Web browser, the QuickTime Player, or Adobe GoLive, the
QuickTime plug-in displays the Chapter track as a pop-up menu in the standard controller of the movie.
You should use only one Chapter track per movie.
To insert a Chapter track:
1 With a movie open in the Movie Viewer window, click the Show TimeLine Window button (
2 Drag the Chapter Track icon from the QuickTime tab (
of the TimeLine Window.
).
) of the Objects palette onto the track list area
3 In the Chapter Track Inspector, enter a track name in the Title field. In the Act as Chapter Track for popup menu, choose a track.
The width of a Chapter track must be at least 275 pixels, otherwise the navigation pop-up menu will not
be visible.
4 In the TimeLine Window, click the small triangle ( ) control next to the track name to expand the track.
You’ll see the Sample track.
5 With the Create Sample tool, add the Sample track by dragging the track bar for the desired duration.
6 In the Chapter Sample Inspector, set the properties as necessary.
7 In the Movie Viewer window, check your choices by choosing chapters from the chapter list. (You may
have to resize the window to see the pop-up menu.)
312 CHAPTER 14
Editing QuickTime Movies
Using Text tracks
Text tracks display text within a movie—for example, subtitles in a movie. You can subdivide Text tracks
into segments and display different text messages in a movie.
A
B
A. Text Links B. Scrolling text
Adding Text tracks
Text tracks display text within a movie. A typical example is the subtitling of movies. You can also add messages to your movie to enhance the visual experience. You can link the text to a URL so that when visitors
click the word or phrase, a Web page will appear.
To insert a Text track:
1 With a movie open in the Movie Viewer, click the Show TimeLine Window button (
2 Drag the Text Track icon from the QuickTime tab (
the TimeLine Window.
).
) of the Objects palette onto the track list area of
3 Set the track properties as necessary. See “Setting the properties of a video or other visible track” on
page 293 for details on setting properties.
4 In the TimeLine Window, click the small triangle next to the track name to expand the Text track. You’ll
see the Sample track.
5 With the Create Sample tool, place a sample bar in the content area of the TimeLine Window and drag
it to the desired duration.
6 Make sure the Sample track is selected, then in the Text tab of the Text Sample Inspector, type the desired
text in the Text field. Click Apply.
7 Align the text by choosing Left, Center, or Right from the Align pop-up menu.
ADOBE GOLIVE 5.0 313
User Guide
Adding text links
You can link a specific word or phrase to a URL or to a number of other items.
To link text:
1 In the Text Sample Inspector, select the word or phrase that you want to link in the text box of the Text
Tab.
2 Click the Link icon. The word or phrase becomes blue and underlined.
3 Select the event you want, such as Mouse Click.
4 Choose an action, such as GoTo URL from the Action pop-up menu.
5 Click Apply. You’ll see the text in the Movie Viewer window is now blue and underlined.
6 Add more actions by clicking the Action + icon and choosing an action from the pop-up menu.
A
B
C
D
A. Select the text to link B. Link icon
C. Select trigger event D. Action pop-up menu
Setting text properties
You set text properties in the Properties tab of the Text Sample Inspector. Some of the text properties
require other properties to be set first or to have a combination of properties set to achieve the desired
result. Those instances are noted in the property descriptions.
314 CHAPTER 14
Editing QuickTime Movies
To set text properties:
1 With the Text Sample track selected, click the Properties tab of the Text Sample Inspector.
2 Choose any of the following items:
• Don’t Display. Specifies that the text will not be displayed in the movie.
• Don’t Auto Scale. Specifies that the text will not be scaled automatically.
• Clip To Text Box. Changes the text box size and does not rewrap the text. Before you check this checkbox,
click the Layout tab and enter positive values in pixels in the Margin Width and Margin Height boxes.
• Use Movie BG Color. Specifies that the text color will be the same as the movie background color
• • Shrink Text Box. Specifies that the text will shrink to new text dimensions and will be rewrapped.
Note: Before you check this checkbox, click the Layout tab and enter positive values in pixels in the Margin
Width and Margin Height boxes.
• Scroll Delay. Sets the scroll delay. Only works when scrolling is enabled and the delay time is shorter than
the sample duration. For example, check Scroll In and Scroll Out. Set the sample duration to 00:00:10:.00.
Set the scroll delay to 00:00:02.00. The text must scroll in for four seconds, pause for two seconds, and scroll
out for four seconds (in this example, the total of these fields must be 10 seconds or less).
• Scroll In. Sets the start time of the scrolling text.
• Scroll Out. Sets the end time of the scrolling text.
• Horizontal Scroll. Sets the text to scroll in a horizontal manner. This QuickTime function does not work
with linking text.
• Reverse Scroll. Reverses the direction of the scrolling text. If the text originally scrolled from bottom to
top, setting this property causes the text to scroll from top to bottom. Likewise, with left to right or right
to left directions.
• Continuous Scroll. Causes one text sample to scroll in, followed by another text sample scrolling in and
out. The second text sample causes the first sample to scroll out. Scroll In and Scroll Out need to be set
along with Continuous Scroll for this to work correctly. For example, create two text samples on the same
Sample track. Set the first sample to Scroll In and Continuous Scroll. Set the second sample to Scroll In and
Scroll Out, as well as Continuous Scroll.
• Flow Horizontal. Lets horizontally scrolled text flow within the text box. Leaving this unchecked causes
the text to flow as if the text box has no right edge (this is the default). For example, create a text sample
that will be wrapped in the text tab’s text area. Set the scrolling properties to Scroll In and/or Scroll Out, as
well as Horizontal Scroll.
• Inverse Hilite. Reverses the highlighted text color and the text color.
• Text Color Hilite. Sets the highlighted text color.
• Start and End. Sets the start and end times of the scrolling text.
ADOBE GOLIVE 5.0 315
User Guide
Setting the text layout properties
You set the text layout in the Layout tab of the Text Sample Inspector.
To set the text layout properties:
1 With the Text Sample track selected, click the Layout tab of the Text Sample Inspector.
2 Choose any of the following items:
• Margin Width. Sets the width of the text box margin in pixels.
• Margin Height. Sets the height of the text box margin in pixels.
• Background. Sets the Text track background color. Click in the Color field, which displays the Color
palette. Choose a color.
• Drop Shadow. Sets a shadow text that drops just slightly below and to the right of the original text.
• Transparent. Hides the Text track background color.
Using Filter tracks
The TimeLine Window lets you use transition effects in a movie and specify exactly when they start. Effects
and transitions have their own track in the TimeLine Window, referred to as Filter tracks. There are three
types of filters:
• Generic filters (Cloud, Fire, or Ripple) generate their own effect from scratch.
Note: Remember that the tracks are reversed in order—the lower the track in the track list, the higher its order
in the movie.
• One Source filters are applied to a single track only and change its visual presentation. This filter needs
one video source track.
• Two Source filters, or transitions, fade out one track and fade in another. This filter needs two video
source tracks. Examples include Cross Fade, Explode, Implode, and Gradient Wipe.
The following section explains how to use a filter on a movie, using one example for each type of filter. You
will find a reference with brief descriptions of the QuickTime video effects available in Adobe GoLive in the
sections, “QuickTime filter effects” on page 400 and “QuickTime transition effects” on page 403.
Adding and applying Filter tracks
You can use filters to give your QuickTime movies special effects.
To insert a generic Filter track:
1 With a movie open in the Movie Viewer window, click the Show TimeLine Window button (
).
316 CHAPTER 14
Editing QuickTime Movies
2 Drag the Generic Filter Track icon from the QuickTime tab ( ) of the Objects palette onto the track list
area of the TimeLine Window. A new empty Filter track appears in the track list.
3 With the track still selected, set the properties in the Generic Filter Inspector. See “Using Video tracks”
on page 292 for details on setting properties.
4 Click the triangle next to the Filter track to expand the track. You’ll see the Sample track.
5 With the Create Sample tool, create a sample bar in the Sample track content area. The Generic Filter
Sample Inspector is displayed.
6 Click the Select button. The Select Effect dialog box opens.
7 Choose an effect: Cloud, Fire, or Ripple. Notice that when you select each effect, the parameters are
dynamic and change with each effect. The preview pane displays each effect.
8 Choose the Load button if you want to load a previously saved effect.
9 Choose Save if you want to save this effect as a .qfx file for later use (which you do with the Load button).
10 Click OK. The Sample content bar will be labeled with the name of the actual effect, and you’ll be able
to play the movie in the Movie Viewer window to view the filter. You can also work with the Filter tracks in
the Layout tab of the Movie Viewer window.
To insert a one-source filter:
1 With a movie open in the Movie Viewer window, click the Show TimeLine Window button (
).
2 Make sure you have the following tracks in your movie:
• One video or Picture track in your movie. In the TimeLine Window, make sure the Filter track is below
the Video track in the track list.
3 Drag the One Source Filter Track icon from the QuickTime tab ( ) of the Objects palette onto the track
list area of the TimeLine Window. A new empty Filter track appears in the track list.
4 With the track still selected, set the properties in the One Source Filter Inspector. See “Using Video
tracks” on page 292 for details on setting properties.
5 Choose a Video track from the Source pop-up list to which you want to apply this filter.
ADOBE GOLIVE 5.0 317
User Guide
6 Click the triangle next to the Filter track name in the track list to expand the track. You’ll see the Sample
track.
7 With the Create Sample tool, create a sample bar in the Sample track content area. The One Source Filter
Sample Inspector is displayed.
8 Click the Select button. The Select Effect dialog box opens.
9 Choose an effect from the list. (See “QuickTime filter effects” on page 318 for a description of each
effect.) Notice that when you select each effect, the parameters are dynamic and change with each effect.
The preview pane displays each effect.
10 Choose the Load button if you want to load a previously saved effects file.
11 Choose Save if you want to save this effect as a .qfx file for later use (which you do with the Load
button).
12 Click OK. The Sample content bar will be labeled with the name of the actual effect, and you’ll be able
to play the movie in the Movie Viewer window to view the filter. You can also work with the Filter tracks in
the Layout tab of the Movie Viewer window.
To insert a two-source filter:
1 With a movie open in the Movie Viewer window, click the Show TimeLine Window button (
).
2 Make sure you have the following tracks in your movie:
• Two Video tracks. In the TimeLine Window, make sure the two Video tracks are above the Filter track.
3 Drag the Two Source Filter Track icon from the QuickTime tab ( ) of the Objects palette onto the track
list area of the TimeLine Window. A new empty Filter track appears in the track list.
4 With the track still selected, set the properties in the Two Source Filter Inspector. See “Using Video
tracks” on page 292 for details on setting properties.
5 Choose a Video track from the Source A pop-up menu and a track from the Source B pop-up menu.
6 Click the triangle next to the Filter track name in the track list to expand the track. You’ll see the Sample
track.
7 With the Create Sample tool, create a sample bar in the Sample track content area. The Two Source Filter
Sample Inspector is displayed.
8 Click the Select button. The Select Effect dialog box opens.
9 Choose an effect from the list. (See “QuickTime transition effects” on page 321 for a description of each
effect.)
10 Notice that when you select each effect, the parameters are dynamic and change with each effect. The
preview pane displays each effect.
11 Choose the Load button if you want to export this effect into another movie.
12 Choose Save if you want to save this effect as a .qfx file.
318 CHAPTER 14
Editing QuickTime Movies
13 Click OK. The Sample content bar will be labeled with the name of the actual effect.
14 Choose whether you want to have the effect transition from Source A to B or vice-versa.
15 Play the movie in the Movie Viewer window to preview the filter. You can also work with the Filter
tracks in the Layout tab of the Movie Viewer window.
QuickTime filter effects
Adobe GoLive comes with the following QuickTime built-in video filter effects. As you view each filter, the
preview pane displays the effect:
Alpha Gain The alpha gain filter manipulates the alpha channel of a single track. This operation is com-
monly applied before passing the track to the Alpha Compositor effect. The Alpha Gain effect has several
parameters:
• Bottom pin: The minimum value that the alpha channel can take after the gain and offset parameters
have been applied.
• Top pin: The maximum value that the alpha channel can take after the gain and offset parameters have
been applied.
• Gain: This value is multiplied by the original alpha channel value.
• Offset: This value is added to the old alpha channel, after it has been multiplied by the gain parameter.
Blur This effect applies a convolution blur effect to a single track. The Blur effect has one parameter:
• Amount of blurring: This pop-up menu provides a choice of values, from 1 (least) to 7 (most). The larger,
the value, the longer the effect will take to run and the greater the degree of blurring.
Brightness and Contrast This filter adjusts the brightness and contrast of the track. The default value is 0.
Values between -100 and 0 decrease the brightness and contrast; values between 0 and 100 increase the
brightness and contrast.
Color Style This effect allows you to apply two color change effects to a single track. Both effects process the
red, green, and blue components of each pixel independently. The color style effect offers two options:
The first option, Solarization, adjusts the color balance of the source track by generating a table of replacement color values from two parameters. The table starts at zero intensity and increases to the maximum
intensity at the peak point. After that it falls back to zero. It has two controls:
• Solarize Amount: This slider control adjusts the maximum intensity of the solarization table.
• Solarize Point: This slider control adjusts the peak point of the solarization table.
The second effect, Posterization, produces a “color banding” effect. It reduces the number of colors in an
image by replacing all pixels whose color is in a consecutive range with the middle color from that range.
It has a single slider control:
• Posterize amount: The number of colors that are grouped and replaced with the mid-range color.
ADOBE GOLIVE 5.0 319
User Guide
Color Tint This filter converts the track to greyscale, and then applies a light and a dark color to the
image.mThe light color replaces the white in the greyscale image, and the dark color replaces the black. The
end result is a tinted duochrome version of the source image.
This filter has several controls.
• Tint Type: This pop-up menu lets you select from a choice of five different tints, including Black and
White, X-Ray, Sepia, Cobalt, and Other. When you choose Other, the following parameters are enabled:
• Light color: This color replaces the white of the greyscale image.
• Dark color: This color replaces the black of the greyscale image.
• Brightness: Adjusts the brightness of the source between -255 (all colors are replaced with black) and 255
(all colors are replaced with white). A value of 0 will leave the brightness unchanged.
• Contrast: Adjusts the contrast of the source between -128 (minimum contrast) and 128 (maximum
contrast). A value of 0 will leave the contrast unchanged.
ColorSync (Mac OS only) This effect adjusts the color balance of an image to match a specified color sync
profile. Typically, you would use this to adjust the color profile of an image to match the current display
device. This allows you to maintain accurate color representations across devices. You specify both the color
sync profile of the source image and the color sync profile of the destination device the image will be displayed on. The color sync filter has three parameters:
• Source profile: The color sync profile of the source image.
• Destination profile: The color sync profile of the target device.
• Matching Option: Allows you to achieve maximum similarity for adjusting converted colors for the
following:
• Peripheral (photos)
• Saturation (graphics)
• Absolute Colorimetic (logos)
• Relative Colorimetic (logos)
Edge Detection This effect applies an edge detection convolution to a single track. The performance of the
edge detection is determined by the convolution kernel. This is a matrix of values applied to each pixel of
the source to produce the resulting image. This effect has two parameters:
• Edge thickness: This pop-up menu gives you a choice of seven values, from 1 (least) to 7 (most). The
larger the value, the thicker the edges in the resulting image.
• Colorize Result: If this option is selected, the edges produced are colorized, based on the color of the
source pixels around them. Otherwise, edges are rendered as light gray against a dark gray background.
320 CHAPTER 14
Editing QuickTime Movies
Emboss This effect applies an emboss convolution to a single track. This effect has one parameter:
• Amount of Embossing: This pop-up menu gives you a choice of seven values, from 1 (least) to 7 (most).
The higher the value, the heavier the embossing effect.
Film Noise This effect simulates effects that are seen on aged film stock. It can be used to make a video
source appear as if it has suffered the effects of age and wear. The film noise effect offers the options of hairs
and scratches. These simulate hairs lying on the surface of the film, and vertical or near-vertical one-pixel
lines that simulate scratches. Five parameters can be adjusted to control the visual impression:
• Hair density: This parameter controls the number of hairs that are drawn on each frame and the
frequency with which they appear.
• Hair length: The maximum length (in pixels) of the hairs being drawn.
• Scratch density: This parameter controls the number of scratches that are drawn on each frame and the
frequency with which they appear.
• Scratch duration: The maximum number of frames for which each scratch appears.
• Scratch width: The maximum width, in pixels, of a scratch.
General Convolution This effect applies a general-purpose convolution effect to a single track. The effect
that results is determined by the values entered into the kernel parameters of the effect. The kernel for this
convolution is a 3-by-3 matrix of values, consisting of the Cells 1 through 9.
The convolution algorithm examines every pixel of the source, and the eight pixels surrounding it. These
values are multiplied by the appropriate values in the cells and summed. This sum is then used as the value
of the corresponding destination pixel.
HSL Balance This filter effect allows you to independently adjust the hue, saturation, and lightness channels
of a single track. The HSL balance filter effect has three parameters:
• Hue: Adjusts the hue channel value of each pixel.
• Saturation: Adjusts the saturation channel value of each pixel.
• Lightness: Adjusts the lightness channel value of each pixel.
Lens Flare This filter produces a sun-spot effect. The Lens Flare filter has two options: Intensity and Flare
Center, and Flare Type. The Intensity and Flare Center option has three parameters:
• Size: Adjusts the flare center size. 1.0 is a small sun-spot in the center of the image, and the increasing
values expand the flare until the flare covers the entire image at 2.0.
• Brightness: Adjusts the brightness of the flare. 0.0 is transparent and 1.0 is the most opaque.
• Flare Center: The X and Y axis settings adjust the horizontal and vertical motion dispersion of the flare.
The Flare Type option visually displays the type of flare image being used.
ADOBE GOLIVE 5.0 321
User Guide
RBG Balance The RGB balance filter allows you to independently adjust the red, green, and blue channels
of a single track. The RGB balance filter has three parameters:
• Red multiplier: Adjusts the red channel value of each pixel.
• Green multiplier: Adjusts the green channel value of each pixel.
• Blue multiplier: Adjusts the blue channel value of each pixel.
Sharpen This effect applies a convolution sharpen effect. The sharpening that is applied is determined by
the convolution kernel. This is a matrix of values that are applied to each pixel of the source track. The
sharpen filter effect has two parameters:
• Amount of sharpening: This pop-up menu gives you a choice of seven values, from 1 (least) to 7 (most).
The higher the value, the faster the effect will run and the greater the degree of sharpening
• Brightness: The default value of 1.0 sharpens the source track but doesn’t change its brightness. Values
between 0.0 and 1.0 decrease brightness; values greater than 1.0 increase brightness.
QuickTime transition effects
Adobe GoLive comes with the following QuickTime built-in transition filter effects. As you select each filter, the preview pane displays the effect.
The following effects are alpha channel based:
Alpha Compositor This effect is used to combine two images using the alpha channels of the images to con-
trol the blending. It provides for the standard alpha blending options, and can handle pre-multiplying by
any color, although white and black are most common and often run faster. The alpha compositor effect
has one parameter:
• Blend mode: The blend mode parameter can contain one of the following values:
• Straight alpha performs a standard alpha blend. The alpha channel value of the first track defines the
amount of that track that is included in the composite image, and one minus the alpha channel value of
the first track defines the amount of the second track that is included in the composite image.
• Pre-multiply alpha calculates the destination pixel based on the color you specify in the Pre-multiply
color field.
• Reverse alpha performs a reverse alpha blend.
Chroma Key The chroma key effect combines two tracks by replacing all the pixels of the first track that are
the color specified in the Key Color color field with the corresponding pixels of the second track. This
allows the second track to “show through” the first in those places where the first track has the specified
color:
• Key Color: The chroma key color to replace in the first track with pixels from the second track.
322 CHAPTER 14
Editing QuickTime Movies
The following effects are transitions between two tracks:
Cross Fade A “cross fade” or “dissolve” provides a smooth alpha blending between two video sources,
which changes over time to give a smooth fade out from the first track into the second. This effect has
one parameter:
• Percentage: The two slider controls let you manipulate the degree of visibility of either source during the
blend.
Explode In an explode effect, track B grows from a single point expanding out until it entirely covers track
A. This effect has three parameters:
• Percentage: The two slider controls let you manipulate the degree of visibility of either source during the
blend.
• Explode Center X: The x-coordinate (horizontal) of the explosion center.
• Explode Center Y: The y-coordinate (vertical) of the explosion center.
Gradient Wipe The Gradient Wipe effect transitions between two tracks, with the change pattern controlled
by an input image. At the start of the effect, the area covered by the input image shows the first track, while
the area outside the input image shows the second. Over the duration of the effect, the input image is
shrunk until only the second track is visible. The gradient wipe effect has three parameters:
• Percentage: The two slider controls let you manipulate the degree of visibility of either source during the
blend.
• Matte: The input image that controls the transition between the two tracks.
• Edge Blur: The slider from 0 to 255 controls the amount of edge blur, or distortion, that the leading edge
of the gradient wipe will display.
Implode In an implode effect, track A shrinks down to a single point, revealing track B. The center point of
the implosion is defined in the effect parameters. The implode effect has three parameters:
• Percentage: The two slider controls let you manipulate the degree of visibility of either source during the
blend.
• Implode center X: The x-coordinate (horizontal) of the implosion center.
• Implode center Y: The y-coordinate (vertical) of the implosion center.
Push A push is an effect where one source image replaces another, with both tracks moving at the same
time. For example, track A would typically occupy the entire screen, and then track B would slide in from
the left, while track A slides out to the right at the same time. The push effect has two parameters:
• Percentage: The two slider controls let you manipulate the degree of visibility of either source during the
blend.
• Push from: Controls the direction from which track B will replace track A. This parameter can contain
Top, Right, Bottom, and Left.
ADOBE GOLIVE 5.0 323
User Guide
Slide In a slide effect, track B slides onto the screen to cover track A. At the end of the effect, track B will
completely cover track A. The slide effect has two parameters:
• Percentage: The two slider controls let you manipulate the degree of visibility of either source during the
blend.
• Angle: The angle from which track B will enter the frame. This value is expressed in degrees, with 0
degrees defined as the top of the screen.
Iris, Matrix Wipe, Radial, Wipe Each of these effects is an implementation of a series of masking or “reveal”
type effects that take place between two tracks. Each has seven parameters:
• Percentage: The two slider controls let you manipulate the degree of visibility of either source during the
blend.
• Wipe Type: By setting this parameter, you control which of the 13 available wipes, listed in the Wipe Type
pop-up menu, is used. You can preview the wipe types in the preview pane of the Select effects... dialog box.
• Horizontal repeat: The number of horizontal repeats of the effect that occur in a single track.
• Vertical repeat: The number of vertical repeats of the effect that are executed in a single track.
• Border width: The width, in pixels, of a border that is drawn around the second track.
• Border color: The RGB color of the border around the second track.
• Soft edges: If the option is selected for this parameter, the border drawn around the second track is
blurred.
Zoom This filter produces a zooming effect of one image (B) over (or from) another image (A). The Zoom
filter has four parameters:
• Percentage: The percent, or amount, of the area that the zooming image (B) will zoom. The left zoom
percentage setting controls the zooming image (B) from its starting point (center to outer), and the right
side controls the zooming image from the end point (outer back to center). You can adjust the two
percentage settings and watch the effects of zooming in and out, zooming image B over a large portion of
image A, zooming image B over a very small portion of image A, or a combination of the two so that the
zooming object “zooms in place.”
• Zoom Type: Three choices let you control which images will be zooming:
• Zooming B over A zooms image B out from or into a static image A.
• Zooming B over Zooming A zooms image B out from or into a zooming image A.
• Zooming A simply zooms image A.
• Zoom Center: The X and Y axis settings adjust the horizontal and vertical start or end point of the
zooming image, depending on the area percentage settings.
• Distance: The amount of travel space or velocity that the image will zoom.
325
Chapter 15: Working in HTML
Editing HTML code in Source view
In Source view, you can view your document’s HTML source code, check the HTML syntax, fine-tune your
code, or even build Web pages from scratch. If you are a seasoned HTML programmer with a good working
knowledge of HyperText Markup Language and have been using other text-oriented HTML editors, you’ll
find Source view very useful for tweaking and fine-tuning the underlying HTML code. Working in Source
view is like working in any HTML text editor. You can create a new document or open existing Adobe GoLive,
HTML, or text documents. You can type or paste text from another document or application, and make
and save changes.
You change to Source view by clicking the Source tab (
appears.
) of the document window. A Source toolbar
Using drag and drop in Source view
When working in Source view, you can drag HTML element icons from the Objects palette into the flow
of your HTML code and use them as editable tag templates. After inserting an element, you can edit its
attributes and attribute values while the Source editor monitors your input and highlights typing errors or
incomplete syntax.
Drag and drop insertion of a line element.
You can also drag a color from the preview pane of the Color palette and drop it on selected items in your
HTML code (see “Working with color” on page 77). Or you can drag pages and URLs from the site window,
to create a link.
326 CHAPTER 15
Working in HTML
Formatting Text
In Source view, you can apply basic text formatting commands from the Type menu to selected text in the
body of your page. For more information, see “Formatting text using physical and structural styles” on
page 60.
To format text:
In Source view (
), do one of the following:
• Select a paragraph, and then choose a command from one of the submenus under the Type menu.
• Double-click the text to highlight a single word, or click and drag to highlight more text. Choose the
desired formatting command from one of the submenus under the Type menu.
Highlighting Syntax
As you enter and edit HTML code in Source view, the syntax highlighting feature works in the background,
continuously monitoring your code and comparing it with the content and rules specified in Web Settings.
When the syntax highlighting feature recognizes a tag, it highlights the start and end tags and tag attributes
to indicate that the syntax is complete.
Syntax highlighting uses different colors to visually separate tags, attributes, and document content,
making it easy for you to keep track of the HTML code.
To set syntax highlighting and text wrapping:
1 Click the Source tab (
) in the document window.
2 In the Source view toolbar, set the highlighting and text wrap options. For information on changing the
color of text highlighting, see “Setting Source preferences” on page 328.
• Turn Syntax Highlighting Off button (
code in the default text color.
) deactivates syntax highlighting, showing the HTML source
• Detailed Syntax Highlighting button (
) activates syntax highlighting.
• Highlight Media & Links button (
• Highlight URLs button (
) highlights images and media items only.
) highlights references to other pages and locations on the Web.
• Highlight Server Side Code button highlights server-side code such as ASP.
ADOBE GOLIVE 5.0 327
User Guide
• Word Wrap button (
on and off.
) toggles the wrapping of the source at the margin of the Source Editor window
• Display Line Numbers button (
) shows the code line numbers.
Checking syntax
In Source view, you can check to make sure that your Web pages contain only valid and error-free code.
The built-in syntax checker parses your HTML code against the coding rules stored in Web Settings and
highlights code elements presumed faulty.
When you select specific HTML code and launch syntax checking, you can pinpoint which tags and
attributes are not supported by a given set of browsers or are specific to Adobe GoLive. When you choose
a browser set from the browser compatibility menu, an incompatibility list appears in the error log,
detailing potential problems. The sets available in this menu are assembled when you set Source
preferences. For more information, see “Setting Source preferences” on page 328.
Syntax warning in Source view
To check syntax:
1 In the Source view toolbar, click the Display Errors button (
) to check for syntax errors. The
counter next to the button shows the number of syntax errors in the page.
2 Click the Display Warnings button (
) to check for syntax warnings. The counter next to the button
shows the number of syntax warnings in the page.
328 CHAPTER 15
Working in HTML
3 Click the Check Syntax button (
) in the Source toolbar. The source code is verified and the syntax
checker highlights the first code element presumed faulty. (If nothing is highlighted, your HTML code
is correct.)
Check the error log above the main window area to learn more about these errors. The triangle control ( )
opens and closes the error log section of the Source Editor window. It opens automatically when the syntax
checker detects faulty HTML code.
4 Correct each error, and then click the Check Syntax button again to make sure that all errors have
been found.
Reformatting hand-coded HTML automatically
Adobe GoLive lets you process HTML code you have entered yourself, reformatting it automatically with
indents and line breaks; changing the case of tags and attributes; and setting quotes for attribute values as
specified in Web Settings.
To process HTML code:
1 Switch to the Layout view.
2 Choose Special > Rewrite Source Code. Alternatively, you can right-click (Windows) or Control-click
(Mac OS) the page icon just below the Layout tab and choose Rewrite Source Code from the context menu.
Adobe GoLive rewrites the source code according to the options selected in the Global tab of Web Settings
(Edit > Web Settings).
Setting Source preferences
You can customize the Source preferences that influence the behavior of the HTML syntax checker and
appearance of HTML code in Source view:
• Source settings turn on and off drag and drop support and control how HTML code appears in Source
view. A preview pane in the dialog box shows you how the text will look with the preferences you choose.
• Browser Sets settings let you combine browsers and revisions of the HTML specification into complex
sets of HTML syntax rules. The sets you assemble here appear in the browser compatibility list in Source
view. Based on the tag descriptions in the Adobe GoLive Web Settings, these preferences instruct the
built-in syntax checker which rules to use when checking your source code.
• Font settings control the default screen font that displays HTML code and content in Source view.
• Colors settings let you turn syntax highlighting on and off and control the way the individual HTML tags
and enclosed text are displayed in Source view when the viewer enables syntax highlighting.
• Printing options control the default formatting options used when printing HTML source code.
ADOBE GOLIVE 5.0 329
User Guide
To set general source preferences:
1 Choose Edit > Preferences, and click the Source icon.
2 Select from the options controlling how HTML behaves in Source view:
• Enable Dragging of Marked Text turns dragging on or off. This preference is enabled by default.
• Relaxed Checking of &xxx Characters lets you relax the rules applied to special characters when checking
the syntax. Select this option to use uppercase characters (as found in older HTML files) and
keep the syntax checker from looking for a trailing semicolon. For example, the &lttag&GT string will
be interpreted as &lt;tag&gt;. This preference is enabled by default.
• Do Not Mark Unknown Attributes As Errors determines whether the syntax checker ignores non-HTML
or unknown tag attributes. For example, Adobe GoLive uses the custom COOL attribute to identify an
HTML table as a layout grid. If you uncheck this option, the syntax checker will find and mark this attribute
as unknown. This preference is enabled by default.
• Text formatting in Source view options. You can decide whether boldface display for HTML tags is on or
off (Bold for Tags is enabled by default), whether lower-level HTML tags are automatically indented or not
(Auto Indent is set to 4 by default) and tab size of the indent (Tab Size), whether you want line numbers
to display at the left margin (Line Numbers), and whether you want HTML to wrap automatically
(Word Wrap).
These settings are previewed in the Preferences window.
To build a custom browser set for the syntax checker:
1 Choose Edit > Preferences, and click Browser Sets under Source preferences.
2 Select New, and enter a descriptive name in the text box below the Browser Sets list.
3 Select the desired set of browsers from the Browser list.
4 Select Default Browser Set if you want the syntax checker to default to the new browser set, and click OK.
You can now choose the new browser set from the browser compatibility list in Source view. This new
browser set will influence the behavior of the syntax checker.
To edit or delete an existing browser set:
1 In the Browser Sets preference panel, choose a set from the Browser Sets list.
2 Do one of the following:
• To edit the set, choose a different set of browsers from the Browser list, and click OK.
• To delete the set, choose Delete, and click OK.
330 CHAPTER 15
Working in HTML
To set font preferences:
1 Choose Edit > Preferences, and click Font under Source preferences.
2 Choose a typeface, font size, and style for HTML code. This typeface appears only within Source view,
not on your Web page. These settings are previewed in the Preferences window.
To set syntax highlighting preferences:
1 Choose Edit > Preferences, and click Colors under Source preferences.
2 Select preferences:
• If you don’t want to use syntax highlighting, select No Syntax Highlighting. If you want to use syntax
highlight, turn syntax highlighting off, or choose Detailed, Media & Links, URLs highlighting, or Server
Side Code.
• To select a custom color for an HTML code element, double-click the color box to open the color picker,
and select a new color.
To set printing preferences:
1 Choose Edit > Preferences, and click Printing under Source preferences.
2 Select preferences:
• Printer Specific Settings lets you print using color attributes for syntax highlighting (only useful on a
color printer), bold typeface, or line numbers.
• Use Special Font lets you apply a custom typeface, size, and style.
Use these preferences when you want the printed version of your document in Source view to look different
from the online version.
ADOBE GOLIVE 5.0 331
User Guide
Using the Source Code palette
Adobe GoLive lets you work in Layout view and Source view at the same time through the Source Code
palette. While viewing a page in Layout view, you can open the Source Code palette and work in either window. Changes you make in the document window’s Layout view are instantly reflected in the Source Code
palette and vice versa. You can do most of your layout work in Layout view and fine-tune the underlying
HTML code or enter code that must be entered manually in the Source Code palette without ever having
to switch views in the document window.
To open the Source Code palette:
Choose Window > Source Code.
The Source Code palette’s pop-up menu gives you several options:
• Choose Local Mode to display the code only for the element currently selected in the Layout tab of the
document window. Normally, the Source Code palette displays code for the entire document. The Local
Mode option lets you limit the amount of code displayed for easier editing.
• Choose Word Wrap to wrap the contents to the margin of the Source Code palette. If you resize the palette
with this option enabled, the contents wrap to the palette’s new size.
• Choose Display Line Numbers to show code line numbers.
• Choose Dim When Inactive to make the contents of the Source Code palette dim when you’re working
in the Layout tab of the document window. The dimming turns off when you return to the Source Code
palette for further editing.
Note: The Source Code palette displays your document’s underlying HTML code only when the Layout tab of
the document window is active.
Editing HTML code in Outline view
The Outline view, displays HTML code elements in a hierarchical, structured view. Using the Outline
view, you can generate clean, valid HTML without typing a single element of code. You select tags and
attributes from a menu or the toolbar, drag and drop items from the Palette, and use Point and Shoot to
link pages and graphics. You can build Web pages from scratch, fine-tune your code, even define new tags
and attributes.
332 CHAPTER 15
Working in HTML
To switch to the Outline view of a document:
Click the Outline tab in the document window.
A
B
C
D
A. Outline tab B. Triangle control expands or collapses element or view C. Arrow control lets you open the
referenced file. D. The Open dialog box appears when you click the arrow control.
Note: To use Outline view, the HTML Outline Module must be enabled in the preferences (see “Managing
modules by setting preferences” on page 14).
Editing in Outline view
When you view a Web page in Outline view, the Outline toolbar appears. You can use this toolbar to insert
and edit HTML elements or use equivalent commands in the Special menu. You insert new tags below the
current selection in the HTML outline.
• The New Tag button (
) inserts a new HTML tag below the currently selected tag.
• The New Attribute button (
• The New Text button (
) inserts a new HTML attribute in the currently selected tag.
) inserts a new HTML text box below the currently selected tag.
• The New Comment button (
selected tag.
) inserts a new HTML comment box below the currently
• The New Custom Tag/New Foreign Item button (
) inserts an empty tag so that you can enter nonHTML code in your document. For more information, see “Adobe GoLive and XML” on page 471
ADOBE GOLIVE 5.0 333
User Guide
) toggles the tag format from unary to binary and vice versa. Unary tags
• The Toggle Binary button (
don’t have an end tag, while binary tags have a start tag and an end tag.
International script systems selected using any of the Adobe GoLive Encoding options are displayed as clear
text, enabling users to edit foreign-language content—for example, Japanese or Chinese characters.
You can drag frequently used HTML-based elements from the Objects palette and drop them anywhere
in the Outline Editor window, just as you would in Layout view. After inserting an element, you can edit
its attributes.
Navigating in Outline view
The outline that appears when you create or view a document in Outline view contains all of the essential
elements of an HTML page. You can use this structure as a template and fill it with your own content.
• HTML tags appear as box symbols.
• Indents indicate an item’s position within the HTML hierarchy. The HEAD and BODY elements are
indented to show that they are contained in the HTML element. The HEAD element in turn contains a
TITLE element with a text box.
• Start and end tags are connected by vertical lines to show that they are complementary items.
A
B
C
A. Current selection B. Start and end tag connectors
C. Drag and drop handle
To navigate in Outline view:
1 Choose File > Open or File > New, and click the Outline tab (
) in the document window.
2 To collapse or expand the outline, do one of the following:
• Click the triangle on the HTML box to collapse the outline.
• Click the triangle on the HTML box to expand a collapsed outline.
334 CHAPTER 15
Working in HTML
3 To navigate through the outline, do one of the following:
• To move through the Outline view, use the arrow keys. The Up arrow selects the item above the current
selection, and the Down arrow picks the one below. If the pointer is in a text box, the arrow keys move the
pointer within the box.
• To move through the attribute list of an element, use the arrow keys. The Up arrow selects the item above
the current selection, and the Down arrow chooses the one below.
• To expand or collapse the currently selected tag element, press Enter (Windows) or Return (Mac OS).
This is only possible with binary tags (tags always used in pairs).
• To show the tag attribute pop-up menu, click the triangle to the right of the element name.
• To activate the next text box, press Tab. To activate the preceding text box, press Shift-Tab.
• To delete the current selection, use the Backspace key.
• To activate the tag selection pop-up menu, Control-click (Windows) or Command-click (Mac OS)
the tag name.
Inserting new HTML tags
While working in Outline view, you can insert HTML tags and define their types and attributes. You can
either enter a tag name directly or select one provided in the appropriate pop-up menus of the Outline
view. You may want to define tag attributes to fine-tune the appearance of your Web page. Attributes control the way a tag is displayed by the browser. Many tags support special formatting instructions, such as
element alignment, color, and directory paths to resource files. Predefined attributes are available.
To insert a tag and define its type and attributes using the Outline toolbar:
1 In Outline view, select an HTML element in the outline.
2 Click the New HTML Tag button (
the current selection.
) in the Outline toolbar, and insert an untitled HTML tag below
3 To name the tag, do one of the following:
• Enter the desired HTML tag name in the Untitled Tag text box, and press Enter. To enter tags directly, you
should be familiar with the capabilities of the targeted browser. Unsupported tags will be ignored.
• To use a tag from the Web Settings deselect the tag text box, then Ctrl-click (Windows) or Commandclick (Mac OS) the name, and choose an HTML tag from the list in the pop-up menu.
4 To define an attribute, click the show/hide attributes triangle, and choose an attribute from the attribute
pop-up menu.
5 To assign a value to the attribute, click the triangle to the right of the attribute, and choose a value from
the values pop-up menu.
ADOBE GOLIVE 5.0 335
User Guide
For information about adding additional attributes, see “Inserting attributes” on page 336.
A
B
A. Click the show/hide attributes triangle control to pop up the
attribute list and select the desired attribute. B. Click this triangle
control to pop up the values list and select the desired value.
Note: Adobe GoLive does not check for tag or attribute syntax errors you might enter while working in Outline
view. You can search for coding errors in Source view. For more information, see “Checking syntax” on page 327.
Inserting text or comments
You can use the Outline toolbar to insert text boxes for entering content or comments in your Web page.
Text entered in an HTML Text box will be visible on your Web page. (For example, a Text box might be
associated with a block quote.)
Text entered in an HTML Comment box doesn’t appear in your Web page when viewed in a browser
window. You can use comments to provide useful hints for editing documents at later dates—for example,
if you intend to embed advanced features that require significant background information.
To add an HTML Text box or an HTML Comment box:
1 In Outline view, select an HTML element in the outline, and then do one of the following:
• To add text to your page, click the New HTML Text button (
) in the Outline toolbar.
• To add comments to your page, click the New HTML Comment button (
) in the Outline toolbar.
You can place comments anywhere in your document, even outside of the HTML container tag.
A text box containing question marks is inserted below the current selection.
2 Type your text in the box. The text wraps automatically at the border of the text box. If you temporarily
stop entering text and deselect the text box, you can resume your work by inserting the pointer where
you stopped.
Note: Comments appear dimmed in Outline view to remind you that they won’t appear in your Web page, but
they remain selectable and editable.
336 CHAPTER 15
Working in HTML
Inserting attributes
You can add and edit tag attributes using the Outline toolbar. Attributes control the way a tag is displayed
by the browser. Many tags support special formatting instructions, such as element alignment, color, and
directory paths to resource files.
To add a new tag attribute:
1 In Outline view, select the tag you wish to add an attribute to.
2 Click the New HTML Attribute button (
) on the Outline toolbar. A blank attribute appears below
the other tag attributes. Alternatively, you can click the triangle to the right of the element name and select
an attribute from the pop-up menu.
3 Type an attribute name into the text box, and press Enter.
Note: If you are not sure whether an attribute is valid or not, consult the World Wide Web Consortium’s (W3C)
Web site at www.W3.org.
4 Click the text box to the right of the attribute name field, type in a value, and press Enter, or select an
attribute value from the attribute value pop-up menu by clicking the triangle to the right of the attribute
name. If the attribute is valid, a color box, path pointer, or similar symbol appears to the right of the
attribute name.
New attribute value
5 If necessary, select options for the attribute you’ve chosen. If color is appropriate to the attribute (for
example, the color of a link), a color box and the Web color code appear beside the attribute name. Clicking
the color box displays the Color Palette.
If a path is appropriate to the attribute (for example, the directory path to the background image), a path
pointer appears beside the attribute name. Clicking this path pointer opens a file selection dialog box.
Toggling the binary format
You can toggle the binary tag format on and off using the Outline toolbar. This allows you to determine
whether a new tag has a complementary end tag or not.
ADOBE GOLIVE 5.0 337
User Guide
Most HTML tags are binary tags, or container tags. Binary tags enclose their content in a pair of tags, called
start and end or open and close tags. A few tags, however, do not need an end tag; these are called unary
tags. One of the most frequently used unary tags is the IMG tag for embedding images.
To toggle the binary format on and off:
1 In the document window Outline view, select a binary HTML tag.
2 Click the Toggle Binary button (
) in the Outline toolbar. By default, both halves of a binary HTML
tag are displayed. This command changes only the currently selected tag.
Using the Markup Tree palette
The Markup Tree palette (Window > Markup Tree) provides a navigational tool that makes selecting
HTML elements, even in complex documents, quick and precise. The palette visualizes the current selection (in Layout, Frames, or Outline mode) in a hierarchical tree structure from the selected element back
to the root. For example, with a table cell selected, the Markup Tree palette displays the structure starting
with the HTML element, the body element, the table element, the row, and then the cell.
When you click an element in the Markup Tree, the element is selected in the document window and in the
Source Code palette. Navigational controls (
,
) let you step forward or back among previously
selected elements so you can quickly return to an element you have edited before.
The Markup Tree palette’s pop-up menu gives you several options:
• Choose Select Previous Item to select the item you were previously editing.
• Choose Select Next Item to select the next item in the selection history.
• Choose Draw Bevels to view elements in the markup tree as beveled buttons.
• Choose Draw Indented to view the markup tree in a hierarchical structure.
Adding unknown elements
HyperText Markup Language (HTML) is an ever-evolving language, and new tags are created often.
To ensure that your Web pages are always up to date and use the latest technology, you can insert placeholders for tags that Adobe GoLive doesn’t recognize, type in the new tag names, and edit tag attributes.
To insert an unknown element:
1 In Layout view, drag the Tag icon from the Basic tab (
document window.
) of the Objects palette to your
2 In the Tag Inspector, enter the name of the new tag in the Tagname text box and press Enter.
3 Click the New button to add a new attribute. (This activates the text boxes below the list box.)
4 Enter an attribute name and value in the left and right text boxes and press Enter.
338 CHAPTER 15
Working in HTML
5 To delete the currently selected attribute, click Delete.
Note: To add an unknown tag to the head section of your document, use the Tag icon in the Head tab of the
Objects palette and drag them as needed to the head section of your document window.
Using text macros with source code editors
Text macros save time if you frequently use the HTML, JavaScript, and WebObjects source code editors
built into Adobe GoLive. They eliminate typing lengthy strings of source code for often-used tags and
script elements.
Four text macros are stored in four editable files, which reside in a special Text Macros subfolder within the
Modules folder in the Adobe GoLive program folder. One folder can hold a combination of tags; the other
three are environment-specific:
• The Default.macro file can hold any combination of HTML tags, JavaScript strings, and WebObjects code
snippets. These objects can be inserted into any of Adobe GoLive’s editor windows. This file is Adobe
GoLive’s default repository for text macros.
• The HMTL Source.macro file can hold text as well as HTML tags. These macros can be inserted into the
HTML source code displayed in Source view for a document.
• The JavaScript Source.macro file holds prefabricated strings of JavaScript code. These tags can be inserted
into the JavaScript source code displayed in the JavaScript editor.
• The WebObject Source.macro file holds snippets of WebObjects code. These code snippets can be
inserted into the WebObjects source code displayed in the WebObjects declaration editor.
All text macro files are loaded when Adobe GoLive starts up to make them available throughout the application. The HMTL Source.macro, JavaScript Source.macro, and WebObjects Source.macro files, however,
are loaded only if the appropriate program modules are enabled in the Modules Manager.
Inserting text macros into the source code
To insert automated source code, type the macro name and press Ctrl+M (Windows) or 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 or source macro file for the editor you are currently using.
Text macros are case-insensitive, which means that you can enter their names in lowercase or uppercase
characters, or any combination of lowercase and uppercase.
ADOBE GOLIVE 5.0 339
User Guide
Defining text macros
You define text macros by opening the desired source macro file with Adobe GoLive or a text editor and
then typing, copying and pasting, or dragging the appropriate code. Text macro definitions must have the
following basic format:
MacroName [Delimiter]MacroContent[Delimiter]
The first element in a macro definition is the macro name you enter in the respective editor before pressing
Ctrl+M (Windows) or Command+M (Mac OS). 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.
The three source code editors differ in what they regard as self-contained words. For example, using a dollar
sign ($) in a macro name might work in the HTML Source editor but will fail in the JavaScript editor
because this character is an integral part of the JavaScript syntax.
Separated by a space character, the second element specifies the content of the macro, that is, the text that
is actually inserted after you type the macro name and press Ctrl+M (Windows) or Command+M
(Mac OS). The content element must be enclosed in two identical or complementary delimiter characters.
When you prompt Adobe GoLive to insert a text macro, the macro interpreter will regard the first character
after the separating white space as the delimiter and look for an identical character to determine where the
content ends.
For example, an image tag macro with basic attributes could look like this:
image «<img "src=../GIFS/???.GIF" width="20" height="20">»
You can also use a text macro to insert a string of formatted text. Here is an example:
webdesign $This Web Site was designed using <B>Adobe GoLive.</B>$
Using delimiters
As already noted, delimiters tell Adobe GoLive’s text macro interpreter where the content of a text macro
starts and ends. You can use any character as a delimiter, as long as you heed one basic rule: The delimiter
may not occur in the macro content itself. You can even use white space and carriage returns to insert
structured text and multi-line code, respectively.
Here is an example of improper delimiter usage:
image "<img "src=../GIFS/???.GIF" width="20" height="20">"
This macro definition won’t produce a usable result because it uses double quotes as delimiters. The double
quotes are already used to enclose tag attributes in the HMTL tag definition, so Adobe GoLive will only
insert the text before the second double quote character. The result would be:
image "<img
340 CHAPTER 15
Working in HTML
Note: As a general rule of thumb, you should refrain from using characters that are typically used as structural
elements within the source code syntax, for example, the less than (<) and greater than signs (>) enclosing
HTML tags.
Automating insertion point placement and text selection
Normally, when inserting a text macro, Adobe GoLive’s text macro tool selects the entire insert. To ensure
a smoother workflow, however, you can also place the insertion point or select text for overtyping anywhere
in the insert.
Placing the insertion point in an insert is accomplished by adding a “vertical bar” character (“|”). Here is
an example:
image «<img "src=|" width="20" height="20">"»
The vertical bar after the src attribute and “equal to” sign places the insertion point so that you can enter
the attribute value without having to move the pointer to the desired location.
Selecting text for overtyping is accomplished by enclosing a placeholder word or string in single quotes.
Here is an example:
image «<img "src=../GIFS/'???'.GIF " width="20" height="20">"»
The three question marks enclosed in quotes will be selected when you insert this example macro, allowing
them to be overtyped with macro name “C” instead.
Calling a macro from within a macro
To reduce overall typing work and make your macro files easier to maintain, Adobe GoLive’s text macro
tool lets you reference other macros from within a macro.
To call another macro from within a macro, you need to enclose the name of that macro in dollar signs ($).
The following example shows the proper syntax:
Macro #1:
meta-author «<META NAME="author" CONTENT="$author$"»
Macro #2:
author "Michael Daeumling"
Upon insertion of the meta-author macro, Adobe GoLive will automatically look for the second macro
named “author” and insert its content at the specified location in the first macro, so the resulting text insert
would read:
meta-author <META NAME="author" CONTENT=" Michael Daeumling"
ADOBE GOLIVE 5.0 341
User Guide
If calling a second macro produces unexpected results, this may be due to a circular reference. Circular
references occur if the second macro contains a reference back to the macro called in the first place. The
text macro tool handles those circular references gracefully without entering an endless loop. Rather than
that, it will suppress the circular reference and insert the macro name found at the beginning of the macro
definition.
Here is a simple example:
A "A to $B$"
B "B to $C$"
C "B to $A$"
The resulting text insert would read:
A to B to C
As can be seen from the above example, Adobe GoLive ignores the circular reference pointing back to
macro “A” and inserts the macro name “C” instead.
Using keywords as substitutes for control characters
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.
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 quotes. This conflict is solved
by substituting percent signs (or any other suitable character) for single quotes. The Adobe 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 = %
write.document.write('%what%')
• Caret lets you redefine the insertion point marker if the vertical bar is not allowed—for example because
it is used to express a a bitwise OR operation in JavaScript.
CARET = %
• Macro lets you redefine the dollar signs enclosing a macro name.
MACRO = %
342 CHAPTER 15
Working in HTML
Saving HTML fragments
Adobe GoLive lets you save parts of your Web page as HTML fragments—that is, chunks of ready-made
HTML code that are not embedded in the default page structure. This feature is useful when you want to
share parts of a page with other pages not necessarily in GoLive, because it eliminates the need to strip off
redundant HTML page tags when you merge the code. HTML fragments are also instrumental in building
dynamic pages with WebObjects (see the online manual Using Web Objects).
You can also save parts of your Web page as code snippets in the site window or as components that can be
reused and dynamically updated in GoLive. See “Using custom snippets” on page 417 and “Using GoLive
components” on page 168 for information.
To create an HTML fragment:
1 Choose File > New to create a new document.
2 Add the part of your Web page that you want to save as an HTML fragment.
3 Click the page icon (
) in the upper-left corner of the document window.
4 Choose Window > Inspector to open the Page Inspector and click the HTML tab.
5 Deselect the appropriate <html>, <head>, <title>, and <body> options to partly or completely strip the
basic framework off the page.
6 Save the new document.
GoLive strips out the <HTML>, <HEAD>, <TITLE> (if empty) and <BODY> tags from the source code,
leaving all other tags and attributes within the <BODY> tags intact.
343
Chapter 16: Using Dynamic Link
Server requirements
To use ASP-based dynamic content created with Adobe GoLive, you need the following server software:
• Microsoft Internet Information Services (IIS) version 3 or later running under Windows NT; or
Microsoft Personal Web Server running under Windows NT or Windows 98; or Peer Web Server running
under Windows NT. Microsoft IIS 3 does not have an ASP engine installed by default; you need to install
the ASP Extension separately.
• To assure compatibility with Access 2000 databases you’ll need to install version 2.1 or later of Microsoft’s
Data Access Components (MDAC), available from http://www.microsoft.com/data.
• UNIX servers with Chili!Soft ASP installed.
• Microsoft Commerce Server (only needed for e-commerce functionality).
Compatible sources of dynamic content
Adobe GoLive lets you provide dynamic content on your Web site from the following sources:
• All ADO (ActiveX Data Objects) compliant databases, including Microsoft Access, Oracle, Microsoft
SQL Server, and any database accessible via ODBC, such as FileMaker Pro. The OLE DB driver is recommended, since the ODBC driver does not provide primary key information for the database tables.
• Microsoft Commerce Server (ASP-specific).
About security
Several of the pages in the Dynamic Link Config folder could pose security risks if they were present on
your production site, and uploaded to the public server along with your Web site pages. There are several
approaches you can take to prevent problems:
• Do not upload any pages from the Config folder to a Web site that can be accessed by anonymous users.
• Adobe GoLive makes use of IP authorization to prevent unauthorized individuals from tampering with
your files. The module uses a file called friends.asp in the Include folder inside the Config folder that designates trusted IPs. Open this file in a text editor to see instructions on adding friendly IP addresses or
disabling this security feature.
• Set a password for your Config folder on the server side using Basic Authentication.
• Disable HTTP read permissions for the Config/databases folder. This prevents anyone from downloading
your databases.
344 CHAPTER 16
Using Dynamic Link
Troubleshooting
Adobe GoLive provides a way to make sure your server configuration is correct so you can create dynamic
pages properly. To use this feature, locate the troubleshooting.asp file located in the Dynamic Link\Examples\asp\config\info folder where you installed Adobe GoLive and upload it to the Dynamic Link Config\info folder on your Web server. Then open the file in your browser by entering its URL in your browser.
For example, http://localhost/golive/config/info/troubleshooting.asp.
The Dynamic Link interface
The Adobe GoLive Dynamic Link module adds a palette to the Adobe GoLive work area. It provides a visual
way to implement dynamic content or database connectivity in your Web site without hand-coding or
scripting. You access the Dynamic Link palette by choosing Window > Dynamic Link.
Note: If Dynamic Link is not available under the Window menu, make sure the Dynamic Link module is
enabled in Adobe GoLive preferences. Choose Edit > Preferences, click the Modules icon, and enable Dynamic
Link in the right pane.
The Dynamic Link palette
The Dynamic Link palette gives you full control over the use of dynamic content on your Web pages. You
use the palette to set up content sources, bind placeholders to database fields, and control many other
aspects of dynamic content on your site. The palette also lets you view bindings currently defined on your
page and see bindings that are invalid—those not properly linked to an online database.
The palette includes two tabs:
• Content Sources.
• Binding Details.
The Show All Dynamic Bindings button, when pressed, shows all bindings on the Web page, both valid and
invalid. When you are working online and connected to a content source, valid bindings are highlighted in
the valid color (green by default); invalid bindings are highlighted in the invalid color (red by default).
When you are working offline, all bindings are shown as valid, since Adobe GoLive has no way of validating
the bindings. See “Adobe Dynamic Link preferences” on page 347 for details on changing preferences,
including those for the default binding colors.
ADOBE GOLIVE 5.0 345
User Guide
The Content Sources tab
The Content Sources tab opens a pane in the palette where you can add, edit, or delete content sources
for a Web page.
A
B
A. Show All Dynamic Bindings button B. The Content Sources
pane displaying a content source.
Editing a content source lets you:
• Establish sort criteria.
• Apply filters that limit dynamic content to specific ranges of data or records based on fields in the content
source.
The Edit Content Source window lets you edit
a content source for a Web page.
346 CHAPTER 16
Using Dynamic Link
Once you have added a content source, you use this pane to bind placeholders to specific fields in the online
database that serves as the content source. Simply click or select the placeholder, and then click the field
desired in the Content Sources pane to bind the two.
The Binding Details tab
The Binding Details tab opens a pane in the palette where you can fine-tune bindings by selecting additional options that appear there. These options vary depending on the type of field involved in the binding,
but can include:
• Applying text formatting filters to format dynamic content such as currency and dates.
• Adding dynamic behavior to links to other pages.
• Creating buttons to navigate between records.
A
B
C
A. The Bind To area of the Binding Details pane is available
whenever any text or image placeholder is selected on the Web page.
B. The Filter area appears for text placeholders only.
C. The Link Action area appears only when an HTML link is selected
on the Web page.
Adobe GoLive Dynamic Link folders
To use dynamic content with the Adobe Dynamic Link module on your site, the following four folders must
be in the Dynamic Link Config folder you need to make available through HTTP on the root of your
Web server:
The Actions folder Contains files that make it possible to update, delete, or edit records in an online database using a Web-based front end, or control a shopping cart.
ADOBE GOLIVE 5.0 347
User Guide
The Databases folder Contains the files you want to use as sources of dynamic content on your Web site,
including Access, Oracle SQL Server, and ODBC database files. You should place any database files you
want to use as content sources in this folder. .udl links to Oracle SQL Server and ODBC database files
should be placed here instead of the actual database files themselves. See “Adding databases to a site” on
page 348 for additional details.
The Include folder Contains files containing ASP code that is used by Adobe GoLive Dynamic Link on the
pages you create so that the pages can support dynamic content.
The Info folder Stores pages that let Adobe GoLive obtain information about the databases and other con-
tent sources installed at your Web site. It also contains files describing available text filters, form actions,
filters, and the user interface for these items.
Adobe Dynamic Link preferences
Adobe Dynamic Link preferences let you change:
• The colors used to highlight bound placeholders and orphaned bindings on the current page.
• The thickness of the highlighting border.
• The HTTP timeout setting observed before Dynamic Link reports an error when it cannot access the
content sources defined for the current page.
To access Adobe Dynamic Link preferences, do the following:
1 Choose Edit > Preferences.
2 Click the Dynamic Link icon.
Dynamic Link also adds a Server Side Code Highlighting button to the Source window. Click this button
to highlight server-side code, such as ASP, on a page in Source view.
To change the color used, choose Edit > Preferences, expand the Source preference, and select Colors. Double-click the Server Code color box to open the color picker, and select the color you want employed for
highlighting.
Configuring a new site
Configuring a site for dynamic content takes just a few simple steps using Adobe GoLive Dynamic Link.
This section takes you through the necessary setup procedures, shows you how to add databases and other
content sources, and covers the setup of access to an e-commerce server.
348 CHAPTER 16
Using Dynamic Link
Setting up the Dynamic Link folders
Every Web site you set up to use dynamic content needs to have access to four special folders inside the
Dynamic Link Config folder you place on your Web server. Make sure you have the Config folder properly
installed on the root of your Web server. The folders include:
The Actions folder Contains files that make it possible to update, delete, or edit records in an online database using a Web-based front end; or control a shopping cart.
The Databases folder Contains the files you want to use as sources of dynamic content on your Web site,
including Access, Oracle SQL Server, and ODBC database files. .udl links to Oracle SQL Server and ODBC
database files should be placed here instead of the actual database files themselves.
The Include folder Contains files containing ASP code that is used by Adobe Dynamic Link on the pages you
create so that the pages can support dynamic content.
The Info folder Stores pages that let Adobe GoLive obtain information about the databases and other con-
tent sources installed at your Web site. It also contains files describing available text filters, form actions,
filters, and the user interface for these items.
These four folders contain snippets of code, databases, and other items required for a site to use dynamic
content technology successfully.
Note: For security, disable HTTP read permissions for the Config/databases folder. This prevents anyone on the
Web from downloading your databases.
Place the entire Config folder containing these folders on the root of your Web server. You can find it in
Dynamic Link/Server Pages/asp inside the Adobe GoLive folder.
For additional help on installing files or folders or setting permissions on your Web server, please consult
with the system administrator, IS staff of your network, or ISP.
Adding databases to a site
Adobe GoLive Dynamic Link supports a variety of content sources for dynamic content offered by Active
Server Pages technology:
Access database files (.mdb) Databases created with Microsoft Access.
Microsoft Data Link files (.udl) Links to databases generated by a variety of programs, including FileMaker
Pro, Oracle SQl Server, and ODBC databases.
To add an Access database (.mdb) to your Web site:
1 Quit Adobe GoLive, if it is already running.
2 Drag your database file to the Databases folder in your Dynamic Link Config folder on the Web server.
3 Open Adobe GoLive.
ADOBE GOLIVE 5.0 349
User Guide
The database can now be selected as a content source using Adobe GoLive Dynamic Link.
To add an Oracle SQL Server or ODBC database to your Web site:
1 Quit Adobe GoLive, if it is already running.
2 Navigate to the Databases folder in the Dynamic Link Config folder on the Web server.
3 Right-click and select New > Microsoft Data Link from the Context (shortcut) menu.
This creates a file called New Microsoft Data Link.udl that will serve as a link to the database.
4 Right-click this file and select Rename from the context menu. Give the file an appropriate name.
5 Right-click this file again and select Properties from the context menu.
6 Click the Provider tab and select the appropriate provider for your database.
7 Click Next and fill in the requested information in the Connection tab.
8 Click Test Connection and then OK to save your settings.
Your database can now be selected as a content source using Adobe GoLive Dynamic Link.
If you encounter difficulties as you create the Data Link (.udl) file, please consult with the administrator of
the database, the system administrator of your network or Web server, or ISP.
To add a FileMaker Pro database to your Web site:
1 Open the ODBC control panel on your Web server.
2 Click the System DSN tab and click Add.
3 Select the FileMaker Pro driver in the Create New Data Source window and click Finish.
Note: FileMaker Pro must already be installed on the server for its driver to appear as a choice.
4 Enter FMP as the Data Source Name and Description.
5 Select the Use Remote Connection option and set the server address to the IP address of the machine
running the FileMaker Pro database.
Important: The FileMaker Pro database will not work with the Web server unless this option is selected. If
the database is on the same machine as your Web server, select the Use Remote Connection option, and use
the IP address 127.0.0.1.
6 Make sure that FileMaker Pro is running and that the databases you want to use are open. These databases show up as tables in the Dynamic Link New Content Source window.
7 Right-click and select New > Microsoft Data Link from the Context menu. Select the ODBC provider as
the Provider and FMP as the Data Source.
If you encounter difficulties as you create the Data Link (.udl) file or configure the ODBC control panel for
FileMaker Pro, please consult with the administrator of the database and the system administrator of your
network or Web server.
350 CHAPTER 16
Using Dynamic Link
Adding access to an ASP-based e-commerce server
Adobe GoLive Dynamic Link lets you prototype shopping cart functionality without any special server set
up, but to use the e-commerce features of the Adobe Dynamic Link module on a production site, you need
to have the system administrator or an experienced ASP programmer set up access to a Microsoft Commerce Server and properly install the pages. The administrator can customize the mscommerce.asp file
found in the Adobe Dynamic Link Info folder installed in the Config folder at the root level of your site to
create custom fields, if necessary.
Adding dynamic content to pages
This section guides you through the process of binding or linking mock content on a page to dynamic content stored in an online database. You’ll learn how to link simple text and graphics placeholders to dynamic
content. In addition, you’ll learn how to create and control dynamic tables that automatically grow or
shrink to display multiple items. Finally, you’ll see how to create links to dynamic pages and how to apply
formatting filters to dynamic text.
Creating simple dynamic text and graphics
Design your pages on your local machine as usual, placing mock elements or placeholders on the page in
place of the actual content. The mock content lets you visually design the page exactly the way it should
appear to the viewer. After designing the page in this way, bind or link the placeholders to fields in an online
database. The content of those fields replaces the mock content on the page when it appears live, or when
it is previewed within Adobe GoLive. Once your site is done, you can make it available on your Web server,
as usual.
To prepare your page for dynamic content, do the following:
1 Choose the appropriate format from the Format pop-up menu in the Dynamic Link palette. If the palette
is not showing, choose Window > Dynamic Link.
Note: Leave the Keep Original Page option checked if you want to save a copy of your page with
the .html extension.
2 Click Make Dynamic in the Dynamic Link palette.
3 Enter the URL of the Dynamic Link Config folder on your Web server in the Config Folder URL edit box.
A typical URL might be: http://localhost/golive/config. Ask the system administrator of your network for
the exact URL, if you are uncertain what to enter.
4 Click New in the Dynamic Link palette.
5 Enter a name for the content source.
Note: The name you give a content source should reflect its purpose in a clear way. The name cannot contain
spaces or special characters.
ADOBE GOLIVE 5.0 351
User Guide
6 Select Database Query as the type, the database you want to use, and the desired database table.
7 Choose a sorting method, if desired.
8 Click OK.
All the fields available in the database appear below the name of the content source. Now you can bind
placeholder elements on the Web page to the fields listed in the Content Sources pane.
Note: If you are an advanced user familiar with SQL, you can enter valid SQL statements instead of specifying
a database table.
To enter custom SQL statements, do the following:
1 Select Custom SQL from the Table popup menu in the New Content Source window when you define a
new content source.
2 Enter valid SQL statements.
3 Click OK to apply your settings for the content source.
Once you’ve prepared your page for dynamic content, you can bind placeholders on your page to the fields
in the specified content source.
To bind a placeholder to dynamic content, do the following:
Select the object on the Web page and then select the dynamic content field you want to replace the placeholder’s mock content.
The Content Sources pane displays a source’s name and available fields. A checked box indicates that the field
is bound to the current placeholder on the Web page.
352 CHAPTER 16
Using Dynamic Link
The field becomes highlighted and the box is checked to indicate that you have bound the currently selected
placeholder to this field.
Note: Binding graphic placeholders to dynamic graphics follows a similar procedure. You must include a field
in your database that contains the URLs of the graphics you want to use as dynamic content. You then bind the
placeholder graphic to this dynamic content field as just described. When the page appears live or is previewed
within Adobe GoLive, the graphic referenced by the URL appears in place of the mock graphic. You must save
the page before previewing or dynamic content composed of images will not appear.
Creating a dynamic table
To create a dynamic table that shrinks or grows to accommodate dynamic content you first design the table
normally, adding placeholder text and cell formatting as desired. This section assumes you’ve already prepared your page for dynamic content. If not, follow the steps given in “Creating simple dynamic text and
graphics” on page 350.
To bind a table to dynamic content, do the following:
1 Select the contents of the first row you want replaced with dynamic content. Select the content source
field whose content you want to replace the placeholder text in the table.
2 Select the entire table or any cell in the table, and then click the Binding Details tab in
the Dynamic Link palette.
3 Select the Replace Rows option.
4 Select the appropriate content source from the Content Source pop-up menu.
5 Select an option for the records you want displayed in the table:
• All Records will display all the records in your content source.
• First/Last Record lets you specify a range of records to be displayed.
ADOBE GOLIVE 5.0 353
User Guide
• Records per Page lets you limit the number of records displayed on the current page.
A
B
A table bound to dynamic content.
A. The highlighted first row indicates the text there is a placeholder
bound to a field in the content source. B. The highlight border
indicates that the entire table is a dynamic table that will be
replaced when viewers see the page live.
During preview or when the page is viewed online, dynamic content replaces the information in the bound
placeholder row. Any additional rows will be created as necessary.
Creating links to dynamic pages
Adobe GoLive Dynamic Link makes the process of creating links to dynamic pages easy.
Note: Links to dynamic pages will not work properly when you preview the page within Adobe GoLive, use the
Show in Browser feature, or simply open the page locally as a file in a browser. In order to test the functionality
of dynamic page links, the page must be served up live on your Web server, and viewed in a browser by typing
in its Web address, using the form http://webserver/site/page.asp.
354 CHAPTER 16
Using Dynamic Link
To create a link to a dynamic page:
1 Select the text or graphic to be used as the link origin.
2 Click the New Link button in the toolbar and enter a link destination in the Inspector; or use the Browse
button or the Point and Shoot button to choose a dynamic page (.asp) within your site.
3 Click the Binding Details tab in the Dynamic Link palette.
4 Select the Link Action option.
5 Choose an option from the Link Action pop-up menu:
• Show Details of Current Record.
• Show Previous Record.
• Show Next Record.
• Show First Record.
• Show Last Record.
• Show Empty Record.
6 Select a content source from the Content Source pop-up menu.
If you need more control over the value passed along with the link to the dynamic page, you can specify
custom dynamic URL arguments by choosing Add Arguments to URL from the Link Action pop-up menu.
You must also prepare the target page in addition to creating a link.
To prepare the target page for dynamic URL arguments:
1 Open the target dynamic page, highlight the content source in the Dynamic Link palette, and click Edit.
The Edit Content Source window lists all available fields in the Filter Records area.
2 Select the field name you want to serve as a matching filter to parameters submitted with links from
other pages.
ADOBE GOLIVE 5.0 355
User Guide
3 Select a Match Pattern filter from the pop-up menu next to the field name or enter valid parameters
manually.
Selecting a Match Pattern filter.
Query filter
Example
pop-up menu
choice
“Match URL ID parameter”
The pop-up menu lets you choose from a variety of filters, including a parameter appended
to the end of the requested URL, form field,
cookie, session variable, or application variable for the current field.
text string
“=’bowwow’”
number string
“=123”
script function
“=’{bowwow()}’”
For example, if you’re building a fashion site
and want to show apparel for the current season you might write,
SEASON = '{CurrentSeason()}'
Where CurrentSeason() is a function
you’ve written that calculates the season from
the date.
4 Click OK to apply your selections.
To create a link with dynamic URL arguments:
1 Open the page on which you want to create the link to the prepared dynamic page.
356 CHAPTER 16
Using Dynamic Link
2 Select the text or graphic to be used as the link origin.
3 Click the New Link button ( ) in the toolbar and enter a link destination in the Inspector; or use the
Browse button or the Point and Shoot button to choose a dynamic page within your site.
4 Click the Binding Details tab in the Dynamic Link button.
5 Select the Link Action option.
6 Choose Add Arguments to URL from the from the Link Action pop-up menu.
The Dynamic URL Arguments box displays all the parameters available for the target page. Enter the values
needed for these parameters using the notation source:field to pass dynamic arguments along with the URL.
For example, if the content source is Feature_Information and the parameter is ID, you would enter
Feature_Information:ID.
Here’s a handy way to edit and preview pages with dynamic links at the same time—at least if you’re
editing the live pages on your Web server. Just keep a browser window open that points to the page you’re
editing (using the page’s Web address). When you want to preview the links, move to your browser window and
click the Refresh button.
Applying formatting filters to dynamic content
Adobe GoLive Dynamic Link lets you control how dynamic content based on currency, date, time, or other
criteria is displayed on the live page. The formatting options available from the Filter pop-up menu’s
VBScript submenu are:
Filter name
Comments
Encode string as
HTML
(HTMLEncode)
Formats dynamic content as HTML, letting
you display HTML code on the client
browser.
Encode URL string
(URLEncode)
Formats dynamic content so it can be sent
over the address line as a query string.
Format currency
(FormatCurrency)
Formats dynamic content as currency, using
the currency format specified in the server’s
Regional Settings control panel. If the setting is for dollars, all dynamic content formatted with the Currency filter is formatted
as U.S. dollars. To format multiple currencies, apply the Currency filter to only one
placeholder (the one with the same currency as the Regional Settings control
panel) and format other currencies with the
Number filter.
Format number
(FormatNumber)
Formats dynamic content as a number.
ADOBE GOLIVE 5.0 357
User Guide
Filter name
Comments
Format percent
(FormatPercent)
Formats dynamic content as a percent.
Format date and
time
(FormatDateTime)
Formats dynamic content as date or time.
In addition, you can format e-commerce dynamic content with the following filters available from the Filter pop-up menu’s Microsoft E-Commerce submenu:
Filter name
Comments
Format money
(DataFunctions.Money)
Formats dynamic content as
money.
Format number
(DataFunctions.Float)
Formats dynamic content as a
number.
Format date
(DataFunctions.Date)
Formats dynamic content as a
date.
Format date and time
(DataFunctions.DateTime)
Formats dynamic content as a
date or time.
Format time
(DataFunctions.Time)
Formats dynamic content as a
time.
Clean string
(DataFunctions.CleanString)
Formats dynamic content by
stripping nonprinting characters (character codes 1– 29) or
changing them to spaces
(character code 32).
You can find detailed information about these formatting functions in the MSDN documentation available
online at msdn.microsoft.com.
To format dynamic content, follow these steps:
1 Select placeholder text that is already bound to dynamic content.
2 Click the Binding Details tab.
3 Select the Filters option and choose the desired formatting filter from the VBScript or Microsoft
E-Commerce submenu.
When you apply a filter format to a bound placeholder, additional options may appear that let you refine
the format further. For example, Format Date and Time offers options for Long Date, Short Date,
and so on.
358 CHAPTER 16
Using Dynamic Link
Formatting filters only affect dynamic content. They have no impact on the appearance of your
placeholders.
Note: Make sure that the formatting filter you select is appropriate to the type of dynamic content that
replaces the placeholder. Choosing Format Date and Time for dynamic content that is neither date nor time
results in an error message.
Previewing dynamic pages
You can preview dynamic pages directly in Adobe GoLive.
To preview a page with dynamic content:
Click the Preview tab in the document window.
Note: Links to dynamic pages will not work properly when you preview the page within Adobe GoLive, use the
Show in Browser feature, or simply open the page locally as a file in a browser. In order to test the functionality
of dynamic page links, the page must be served up live on your Web server and viewed in a browser by typing
in its Web address, using the form http://webserver/site/page.asp.
Creating an e-commerce site
Online commerce Web sites provide one of the most compelling reasons for using dynamic content on the
Web. Adobe GoLive Dynamic Link lets designers quickly prototype a complete shopping cart system, and
see how the site will look to viewers. Once the site is designed, the designer simply hands it off to an experienced ASP programmer familiar with Microsoft Commerce Server for installation and configuration on
the server.
E-commerce overview
The first step in creating a shopping cart system is to design the interface. Typically, an online shopping
system includes the following pages:
Products page Lets customers view information about available products and add them to a shopping cart.
Shopping cart page Displays the current contents of the customer’s shopping cart and lets the customer
change quantities, delete items, or continue shopping.
Check out page Lets customer enter the address, credit card number, and other information necessary for
completing the order.
Order confirmation page Confirms that the order has been successful, and supplies any other information
you want to tell the customer.
What you call these pages and how you design them is entirely up to you.
ADOBE GOLIVE 5.0 359
User Guide
This section assumes you already know how to create dynamic placeholders, links to dynamic pages,
dynamic tables, and set up forms.
The following sections give basic instructions on what needs to appear on the pages that make up your
shopping cart area. You should create the pages first and then go back to create bindings, specify button
actions, and so on. The rest of this section assumes you already have a database set up for use with your
online store.
The e-commerce features of Microsoft Commerce Server and Adobe GoLive expect the database to have a
very specific structure. The database must have a table called Products that includes the following fields:
• sku
• name
• description
• image_file
• list_price
The Products table can also include any other fields you need in addition to the required fields. In this case,
you should have an ASP programmer familiar with Microsoft Commerce Server edit the mscommerce.asp
files found in the Info and Include folders inside the Adobe GoLive Config folder on the server to incorporate the additional fields you want to use.
Explore the online store demonstration provided with Adobe GoLive to see how a shopping cart system
should work. You can find it in the Dynamic Link\Examples\asp\adobe folder where you installed Adobe
GoLive. To open it in your browser, make sure it is available on your Web server and enter its Web address.
A typical address would be: http://localhost/golive/adobe/home.asp. If you have Microsoft Access, also
explore the adobe.mdb database available in the Databases folder inside the Dynamic Link Config folder
on your Web server.
Setting up a products page
A products page lists all the items you have available for sale in your online store. You might want a link
that lets customers view the current contents of their shopping carts.
How you design the page is up to you. You might have one page that lists all your products and lets customers order from that page. Or you could link to a product details page for each item. The key element you
need to add in either case is a way for the customer to add a product to a shopping cart. You do this by
placing an Add to Cart button enclosed in a form for each product.
360 CHAPTER 16
Using Dynamic Link
The illustration shows a typical design. Also look at the products.asp page included in the demonstration
files in the Dynamic Link\Examples\asp\adobe folder for a good example.
Finally, make the page dynamic using the Dynamic Link palette. You will set up content sources, activate
button actions later, after you have created all the pages. Next, set up the shopping cart page itself.
Setting up a shopping cart page
The shopping cart page lets customers see what they have ordered, change quantities, and see the updated
total. Make sure the page has a table displaying placeholders for all the details of the order, including items
ordered, amounts, unit prices, and totals. Make sure you use form text fields for the quantity sections of
your cart so that the viewer can adjust the quantity ordered. The shopping cart page also needs a way to
proceed to check out. Once you’ve designed the page, you need to enclose the table displaying the shopping
cart contents in a form.
See the illustration for an example, or look at the cart.asp page included in the sample files (in the Dynamic
Link\Examples\asp\adobe folder).
Finally, make the page dynamic using the Dynamic Link palette. You will set up content sources, activate
forms and buttons later, after you have created all the pages. Next, set up a check out page.
ADOBE GOLIVE 5.0 361
User Guide
Setting up a check out page
The check out page typically displays a form where the customer can enter billing and shipping information, and then submit the final order.
The form also needs a Submit button, and perhaps a button or link that lets the customer clear the form,
as shown in the illustration. Also look at the checkout.asp page included in the demonstration files (in the
Dynamic Link\Examples\asp\adobe folder) for a basic example.
Finally, make the page dynamic using the Dynamic Link palette. You will set up content sources, activate
forms and buttons later, after you have created all the pages. Next, set up an order confirmation page that
displays when the customer has submitted a final order from the check out page.
Setting up an order confirmation page
Once the customer has submitted a final order, you’ll want to display a page that confirms the order,
provides information on contacting your company, and perhaps thanks the customer.
Finally, make the page dynamic using the Dynamic Link palette. You’ll set up content sources, activate
forms and buttons later, after you’ve created all the pages.
Now you’ll need to connect the pages together into a working online store by creating content sources,
activating the forms, binding placeholders to content sources, and creating dynamic links and buttons.
The next section shows you how to accomplish this.
Connecting the products page
To prepare the products page, you need to:
• Create a content source.
• Set up the Add to Cart button.
• Bind placeholders and links.
To create the content source:
Use the Content Sources pane of the Dynamic Link palette to create a content source linked to the database
of all your products.
To set up the Add to Cart button:
1 Create or select the button you want to use for adding items to the shopping cart.
2 In the Bindings Details pane of the Dynamic Link palette, set the button’s action to Add to Shopping Cart
using the pop-up menu.
3 Set its SKU parameter to SKU.
4 Set its Success Link to cart.asp or whatever you called your shopping cart page.
362 CHAPTER 16
Using Dynamic Link
To bind placeholders and links:
1 Bind placeholder text, graphics, and tables (if any) to the appropriate fields of the content source.
2 Bind links to dynamic pages where your designs require them.
Note: Step 2 is necessary only if you want to use the Microsoft Commerce Server feature of tracking shopper IDs
by storing them in the URL strings. If so, make sure that every page in the site is a dynamic page and that every
link is a link to a dynamic page.
For detailed instructions on any of these tasks, see “Adding dynamic content to pages” on page 350.
Connecting the shopping cart page
To prepare a shopping cart page, you need to:
• Create a content source.
• Set up shopping cart buttons.
• Bind the cart table.
• Bind placeholders and links.
To create the content source:
1 Click New in the Content Sources pane of the Dynamic Link palette.
2 Select Microsoft E-Commerce Shopping Cart from the Type pop-up menu.
3 Set the Product Database to the appropriate database.
4 Give the content source an appropriate name and click OK.
Note: Creating a content source for a shopping cart page differs somewhat from the procedure used for
simple placeholders. You simply specify a database designed for e-commerce. There’s no need to specify a
table. A content source created for e-commerce displays special fields used by Microsoft Commerce Server.
You bind form fields and placeholders in your shopping cart to these special fields. An e-commerce content
source also displays a dollar sign in the Content Sources pane of the Dynamic Link palette to remind you of
its special nature.
To activate a Check Out image button:
1 Select the image and set its URL to your check out page using the Link tab of the Image Inspector.
2 Select the Link Action option in the Binding Details pane of the Dynamic Link palette and choose Add
Arguments to URL from the pop-up menu.
To activate a Shop More image button:
1 Select the image.
2 Set its link to your products page in the Image Inspector.
ADOBE GOLIVE 5.0 363
User Guide
3 Select the Link Actions option in the Binding Details pane of the Dynamic Link palette and choose Add
Arguments to URL from the pop-up menu.
To create an input image Update Total button:
1 Select the image, click the More tab of the Image Inspector, and check Is Form. This makes the button
act as a Submit button for the shopping cart page.
2 Select the Links Action option in the Binding Details pane of the Dynamic Link palette and choose the
Update Totals action.
Note: You could also use a regular form Submit button, although that restricts you to the plain look of a
generic form button.
To bind the cart table:
1 Bind the placeholders in the table containing the cart details to the relevant fields in the e-commerce
content source.
2 Select the entire table by clicking its top or left border. (You’ll know the cursor is over the table border
when it changes to a grabber hand.)
3 In the Binding Details pane of the Adobe GoLive palette, select the Replace Rows option.
To bind placeholders and links:
1 Bind placeholder text, and graphics to the appropriate fields of the content source.
2 Bind links to dynamic pages where made necessary by your design.
Note: Step 2 is necessary only if you want to use the Microsoft Commerce Server feature of tracking shopper
IDs by storing them in the URL strings. If so, make sure that every page in the site is a dynamic page and
that every link is a link to a dynamic page.
For detailed instructions on any of these tasks, see “Adding dynamic content to pages” on page 350 in
this chapter.
Connecting the check out page
To prepare the check out page, you need to:
• Set up check out buttons.
• Bind placeholders and links.
To create an input image Purchase button:
1 Select the image, click the More tab of the Image Inspector, and check Is Form. This makes the button
act as a Submit button for the check out page.
364 CHAPTER 16
Using Dynamic Link
2 Select the Links Action option in the Binding Details pane of the Dynamic Link palette and choose the
Purchase Now action.
3 Set the button’s Success Link to the page you want the viewer to see when the order is submitted; for
example, a page called thanks.asp.
Note: You could also use a regular form Submit button, although that restricts you to the plain look of a
generic form button.
You may want to add a button that lets the customer reset the form. A generic Reset button works, but you
may want to use an image instead.
To add an image Reset or Clear Form button:
1 Select the image you want to use as a Reset button.
2 Click the Source tab of the document window.
3 At the end of the highlighted IMG tag add: onclick= “formName.reset()”
The code should now look like this:
<img src= “imageName.gif” onclick= “formName.reset()”
Simply replace formName with the name you gave to the form on this page.
To bind placeholders and links:
1 Bind placeholder text, graphics, and form fields to the appropriate fields of the content source.
2 Bind links to dynamic pages where your design requires them.
Note: Step 2 is necessary only if you want to use the Microsoft Commerce Server feature of tracking shopper
IDs by storing them in the URL strings. If so, make sure that every page in the site is a dynamic page, and
that every link is a link to a dynamic page.
For detailed instructions on any of these tasks, see “Adding dynamic content to pages” on page 350 in
this chapter.
Connecting the order confirmation page
To prepare the order confirmation page, you need to:
• Bind placeholders and links.
To bind placeholders and links:
1 Bind placeholder text and graphics, if any, to the appropriate fields of the content source.
2 Bind links to dynamic pages where your design requires them.
ADOBE GOLIVE 5.0 365
User Guide
For detailed instructions on any of these tasks, see “Adding dynamic content to pages” on page 350 in this
user guide.
Linking to the online store
You may want to link to an online store from an entry page or home page. You’ll need to prepare the page
with the link first.
To link to an online store from another page:
1 Be sure to make the page with the link to the store dynamic as an ASP page using
the Dynamic Link palette.
2 Select the link to the online store.
3 Select the Link Action option in the Binding Details pane and choose Dynamic Page from
the pop-up menu.
Making a shopping site secure
Customers are reluctant to submit credit card and personal information online unless you can provide
online security for transactions. To implement secure transactions from your shopping pages, make sure
you specify HTTPS and not simply HTTP as the protocol used in all shopping site URLs.
Adding the pages to a commerce server
After you’ve finished setting up a shopping cart site, you should give the pages to an experienced ASP programmer familiar with Microsoft Commerce Server. The programmer will know how to place the pages on
the commerce server properly.
Creating a Web-based database front end
Adobe GoLive lets you easily create a Web-based front end to an online database. Web-based front ends let
a broad spectrum of staff manage intranet resources such as databases without being forced to learn database programs.
Binding form fields to database fields
The first step in creating a Web-based front end is to design the interface. Normally, this involves designing
an HTML form that displays records, fields within a record, and options for submitting changes, adding
records, and deleting records. You then bind the form fields to dynamic content fields in the content source.
When the page is previewed or viewed online, dynamic content replaces the placeholder form fields to display the contents of a database record.
366 CHAPTER 16
Using Dynamic Link
To bind a form field to a dynamic content field in a content source:
1 Select the form field.
2 Click the box next to the dynamic content field you want to appear in the form field.
You’ll also generally need to add navigation links so that the user can easily go from one record to the next.
Adding record navigation links
You can add Previous and Next links to a form by binding links on the form to special settings in
the Dynamic Link palette.
Note: You could also use image buttons instead of text links to create navigation or action elements on
the Web page.
To add Previous and Next navigation links:
1 Type Previous and Next somewhere in the form.
2 Select Previous and click the New Link button (
) in the toolbar.
3 Click the Binding Details tab.
4 Click the Link To option and select Show Previous Record from the Link Action pop-up menu.
5 Select a content source from the Content Source pop-up menu.
6 Repeat these steps for the Next link, but select Show Next Record from the Link Action pop-up menu.
Note: Adobe GoLive automatically disables the Previous or Next links as appropriate on the live page if there
isn’t another record.
Adding record action buttons
You can create buttons that let you add, duplicate, or delete records in an online database.
To create a record action button:
1 Create or select the form image input button.
2 Click the Binding Details tab.
3 Choose the desired option from the Action pop-up menu for form buttons in the Form Inspector:
• Submit Changes.
• Add Records.
• Delete Records.
• Duplicate Records.
4 Select a content source from the Content Source pop-up menu.
You can now use the form as a front end to your database.
367
Chapter 17: Web Settings
About Web Settings
Web Settings is a basic building block of Adobe GoLive that helps maintain the integrity of your HTML
code. It comes with a complete inventory of HTML tags, special character codes, and browser-specific style
sheets that ensure correct usage within any file written and read by the application. Web Settings also serves
as a reference manual, assisting Web authors in choosing the proper tags and attributes for the content of
their pages. Tags and attributes can be inserted by dragging from Web Settings to the Source Editor tab.
You can edit several tabs of Web Settings to accommodate future tags as they emerge. For a discussion of
the WebObjects tab, see the online manual Using WebObjects. You’ll find it on the application CD.
Note: Do not edit Web Settings unless you are an expert in HTML. Serious damage to your files may result.
After installing the application, make a backup copy of the Web Settings folder. As you edit the Web Settings
database, make periodic backups.
Adding new tags, attributes, enumerations, or other items to Web Settings doesn’t automatically enhance
Adobe GoLive functionality or add any icons to the Object palette. To add new tags, you must hand-code
them in the Source Editor or select them from the pop-up menus in the Outline Editor. User-added HTML
elements are accepted as correct by the Syntax Checker.
If you make an error while editing Web Settings, you can always restore basic Web Settings.
To restore basic Web Settings file:
1 Quit or exit from Adobe GoLive.
2 Open the Modules folder within the Adobe GoLive program folder, and then delete the
Web Settings folder.
3 Start Adobe GoLive. A minimal Web Settings folder is created. Any edits you made are discarded.
To view the Web Settings tabs:
To open Web Settings, choose Edit > Web Settings.
• The Global tab (
) contains options that control the internal formatting of the source code.
• The HTML tab (
) holds the complete Adobe GoLive inventory of HTML tags, covering the full scope
of HTML 3.2 and a subset of the emerging HTML 4.0 standard.
• The Characters tab (
) includes all the special characters specified by ISO 8859-1 and the HTML 3.2
standard. This enables Adobe GoLive to map user-entered special characters to the correct Web-specific
character codes.
• The CSS tab (
) offers specific style sheets for popular browsers on the major platforms. You can
choose any style sheet to serve as the root (default) style sheet for previewing pages.
368 CHAPTER 17
Web Settings
• The XML tab (
) lists Adobe GoLive and imported Document Type Definition (DTD) files.
• The File Mappings tab (
) shows how various file types, such as audio clips or graphic formats are
defined in terms of their MIME type, the application that opens them, and so on.
• The WebObjects tab (
) contains the entire scope of WebObjects-specific tags supported by Adobe
GoLive. You must install and activate the WebObjects module for this tab to appear in the Web Settings
window (if the module is not already installed).
The Global tab
The Global tab ( ) of the Web Settings window controls the general HTML syntax rules, including
options such as automatic text wrapping, indentation, and lowercase/uppercase usage. Style tags span
entire paragraphs and blocks.
You can preview any change you make to the HTML formatting preferences in the preview pane at the
bottom of the window.
You can choose from several options:
Break text: Controls HTML code wrapping when displayed in Source view.
Indent width: Sets the indentation value and the type of indention for lower-level tags displayed in
Source view.
Line break character: Specifies how line breaks are written based on your Web server platform:
• Macintosh (CR) inserts a carriage return character only (default).
• Unix (LF) inserts a line feed character only.
• Windows (CR/LF) inserts a carriage return and line feed character combination.
Tag case: Specifies how HTML tags are written:
• Upper Case uses only uppercase characters in tag names, as in <HTML>.
• Lower Case (default) uses only lowercase in tag names, as in <html>.
• Capital capitalizes the first letter of the tag name, as in <Html>.
• Database Driven writes the tag as specified in the HTML tab of Web Settings.
ADOBE GOLIVE 5.0 369
User Guide
Attribute case: Specifies how HTML tag attributes are written:
• Upper Case uses only uppercase letters in attribute names, as in <WIDTH>.
• Lower Case (default) uses only lowercase letters in attribute names, as in <width>.
• Capital capitalizes the first letter of the attribute name, as in <Width>.
• Database Driven writes the attribute as specified in HTML tab of Web Settings.
Quote attribute values: Determines whether specified values in HTML tag attributes are enclosed in
straight quotation marks:
• Always (default) inserts quotation marks around attribute values, as in
<IMG SRC="./image/advertise.gif ">.
• Except Numbers encloses all attribute values, except for numerals. In
<IMG SRC="./image/advertise.gif "> the element is enclosed in quotes, while in <hr width=580> the
number is not.
• Only if Necessary inserts quotation marks if there is a risk of ambiguity.
Color name translation: Determines whether color names are translated into mnemonics:
• Do Not uses only hexadecimal RGB values, such as “#000000” for “Black”.
• 16 Basics (default) translates the RGB values of the 16 basic colors (“#000000” through “#FFFFFF”) to
mnemonics (“Black” through “White”).
• Netscape’s translates the RGB values of colors to Netscape-specific mnemonics such as “LavenderBlush,”
if there is an equivalent.
Alignment local in paragraphs: Encloses subsequent paragraphs with a center attribute in a <CENTER> tag.
This option is active only if all document windows are closed. If this option is unchecked, alignment is specified paragraph by paragraph.
The HTML tab
The HTML tab is the heart of Web Settings. It contains the entire range of HTML tags that Adobe GoLive
can read, display, and write. They are sorted into categories by function, such as Master Containers, Forms,
and Frames.
Web Settings holds the complete set of HTML tags known to Adobe GoLive at the time of publication,
including both HTML-standard and browser-specific tags. All valid attributes, the types of values they support, and comments identifying the function of each tag are provided. HTML-standard tags include all
those specified by the HTML 2.0 and 3.2 standard publications, plus HTML 4.0 forms tags. Nonstandard
tags used to implement browser-specific features are also covered, such as the marquee tag for Microsoft
Internet Explorer. You can add new tags to Web Settings as they become available.
370 CHAPTER 17
Web Settings
Pop-up tag and attribute lists give you direct access to the database when defining a tag element
(see “Inserting new HTML tags” on page 334). In addition, you can open Web Settings at any time and use
it as a reference.
Looking up HTML tags in Web Settings
If you have any doubts about the proper use of a tag and its attributes, open the Web Settings window and
select the tag. Tag information is displayed in the Web Settings Element Inspector. If the Inspector is not
showing, choose Window > Inspector. You can view the HTML pane with the tags and attributes organized
in sections (default) or you can view all tags arranged alphabetically by right-clicking (Windows) or Control-clicking (Mac OS) in the HTML pane of Web Settings and choosing View > Flat Structure from the
context menu. You can also easily switch between the structured and flat views in the View Controller
(Window > View Controller).
To use Web Settings for reference:
1 Choose Edit > Web Settings.
2 Click the HTML tab.
3 Scroll through the list box, expand categories, and select the desired tag. The Web Settings Element
Inspector displays the structural information for that tag:
• The Comment text box identifies the function of the tag within an HTML document.
• The Structure pop-up menu displays structural information for the tag. For example, Inline Invisible
indicates that the tag encloses visible content but doesn’t display as a visible element in the browser.
(For more information, see “Editing tags” on page 372.)
• The Content pop-up menu indicates how the Source view arranges the content of a container tag—
including inline tags, attributes, and visible content. For example, normal indicates that the content of a
container tag is structured using line breaks, tabs, and spaces.
• The End tag pop-up menu tells you whether or not an end tag is required.
4 In the Web Settings window, expand the tag by clicking the symbol next to it. (If there are no attributes,
the symbol won’t appear.)
Note: You can use keyboard shortcuts to expand and collapse entries. On Windows use the left and right arrow
keys. Mac OS users should press the Command key along with the arrow keys.
5 Select an attribute to view its options in the Web Settings Attribute Inspector:
• The Attribute Is pop-up menu tells you whether the attribute is required or optional.
• The Value type pop-up menu identifies the format of the attribute—Text or URL, for example.
• The Value pop-up menu lets you select or enter a value if Create This Attribute is selected.
ADOBE GOLIVE 5.0 371
User Guide
• Some attributes expand to show their enumeration properties, which represent a fixed set of values an
attribute can assume. For example, Get and Post are the enumeration properties for the Method attribute.
If Adobe GoLive provides native support for a particular tag, these values display as menu options in
the inspector.
6 Click the Version tab to view information on compatibility with browsers and HTML versions. For more
information on the Version tab, see “Overriding default syntax error checking” on page 373.
You can jump to a specific area of the HTML tags list in the HTML tab of Web Settings by switching to the
Flat Structure view and typing a letter. Right-click (Windows) or Control-click (Mac OS) in the HTML
tab and choose View > Flat Structure from the context menu. Alternatively, you can switch between the structured and flat views in the View Controller (Window > View Controller). Then type a letter. For example, to
jump to tags starting with B, type B. The first tag starting with B is selected. This is an easy way to jump around
in the list without scrolling.
Editing HTML tags in Web Settings
The Web Settings window provides a convenient editing environment for adding, updating, or removing
tags, attributes, and their properties. The context menu available by right-clicking (Windows) or Controlclicking (Mac OS) in the HTML pane of the Web Settings window lets you easily add new tags or sections
to Web Settings. The context menu for tags and attributes lets you edit or delete those items.
Note: Before you add new items to Web Settings, be sure to check with the World Wide Web Consortium (W3C)
Web site at http://www.w3c.org to avoid using unsupported tags in your pages.
Adding and deleting items in Web Settings
You can add new sections, tags, or enumerations.
To add or delete a new item:
1 Do one of the following in the HTML tab of the Web Settings window:
• Add a new section by deselecting everything and clicking New Section (
selected is the New Section button enabled.
• Add a new tag by selecting an existing section or tag and clicking New Tag (
). Only when nothing is
).
• Add an attribute by selecting an existing attribute or its tag and clicking New Attribute (
• Add an enumeration by selecting an existing enumeration or its attribute and clicking
New Enumeration (
).
• Select an item and click Duplicate (
), or choose Edit > Duplicate, and then edit the copy.
2 With the new item selected, edit the properties in the Inspector.
).
372 CHAPTER 17
Web Settings
3 Delete an item by selecting it and pressing Delete or choosing Delete from the context menu.
Note: You can also access the commands available on the Web Settings toolbar from the context menu. Rightclick (Windows) or Control-click (Mac OS) In the Character tab of Web Settings to access the context menu.
Editing tags
If you add a new tag, you must name it in the Basic tab of the Web Settings Element Inspector, describe its
function, and set various options relating to its structure and content.
To edit a tag:
1 Create a new tag, enter its name without the enclosing greater than (>) and less than (<) characters in
the Name text box, and press Enter.
2 Enter a description in the Comment text box, and press Enter.
3 Choose one of the following from the Structure pop-up menu:
• Block creates a block-level container element that can contain other elements, such as the <BODY> tag.
• Inline Visible creates an element that has visible HTML content. This element can only occur within a
container element, such as the <IMG> tag.
• Inline Invisible creates an element that can only occur within a container element, has visible HTML
content, but isn’t visible itself (although it influences a visual property of the HTML content), such as the
<BOLD> tag.
• Inline Container creates a container element that can only occur within another container element. It can
have both non-HTML content as well as visible HTML content, such as the <APPLET> tag.
• Inline Killer is reserved for use with the <BR> tag.
4 Choose one of the following from the Content pop-up menu options to determine how Adobe GoLive
treats the content of a tag when it reads or writes HTML:
• Normal (default) instructs Adobe GoLive to treat the content as specified in the Structure menu.
• Get All Spaces instructs Adobe GoLive to read the tag without eliminating extra white space. For example,
this option allows Adobe GoLive to display spaces in a <PRE> tag.
• Core Text uses the entire content of a tag without adding or deleting any elements. For example, this
option lets Adobe GoLive read and write the non-HTML information contained in a <STYLE> tag.
5 Choose an option from the End Tag pop-up menu:
• Required specifies that the tag needs an end tag and that Adobe GoLive is supposed to read and write it.
• Optional (do not write) indicates that the tag does not necessarily need an end tag and that Adobe GoLive
is not supposed to read or write one.
• Optional (write) indicates that the tag does not necessarily need an end tag, but that you want Adobe
GoLive to add it.
ADOBE GOLIVE 5.0 373
User Guide
Controlling tag spacing in the source code
For any tag within Web Settings, you can control some basic formatting options in the Output tab of the
Web Settings Element Inspector.
To set basic formatting for the current tag:
1 Select the tag in the HTML tab of the Web Settings window.
2 In the Web Settings Element Inspector, choose a separation option:
• Outside controls the vertical spacing between the tag itself and other elements above and below it.
• Inside controls the vertical spacing between the start and end tags and their content.
3 Select the Indent content option to indent the content of the tag.
Overriding default syntax error checking
For any tag within Web Settings, the Version tab of the Web Settings Element Inspector lets you specify a
browser or HTML version and set custom attributes. Web Settings describes the behavior of browsers using
defined sets of HTML tags, attributes, and enumerations. When you create a custom tag, you can specify
whether the syntax checker will flag it as an error.
The browser sets you create in the Browser Sets Source Preferences dialog box (Edit > Preferences) let you
select multiple browser descriptions. When you work in the Source tab, every tag is verified against the tags
defined in Web Settings under the selected browsers.
The browser compatibility settings you make for a particular tag determine what happens when you choose
an option from the browser compatibility menu in the Source Editor and launch syntax checking
(see “Checking syntax” on page 327). This checking flags syntax errors, but in Outline view your choices
are directly determined by the definitions in Web Settings.
Note: The Browser Sets Source preferences and settings in the Version tab of the Web Settings Element Inspector
do not affect how Adobe GoLive writes HTML code, nor do they affect how your pages are displayed by the
selected browsers.
To edit syntax checking behavior:
1 Locate the browser or HTML version in the Version tab of the Inspector, and click the option next to it.
2 Select Can Have Any Attribute to allow attributes other than those Web Settings specifies.
Editing a new attribute
If you add a new attribute to a tag, you must name it in the Basic tab of the Web Settings Attribute Inspector,
describe its function, and set its required status and value options.
374 CHAPTER 17
Web Settings
To edit an attribute:
1 Create a new attribute, enter its name in the Attr Name text box, and press Enter.
2 Enter a description in the Comment text box, and press Enter.
3 Choose an option from the Attribute Is pop-up menu:
• Optional indicates that the attribute is not necessary for the browser to interpret the tag correctly.
• Required specifies that the attribute must be used in order for the browser to interpret the tag correctly.
• Alternate indicates that both Optional and Required are accepted. The Adobe GoLive syntax checker
won’t mark the tag as faulty if the attribute is omitted.
4 Choose an option 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 allows multiple options.
• Color permits an RGB color code only.
• URL allows a Universal Resource Locator only.
• JavaScript allows JavaScript code only.
5 Select Create This Attribute, and select a value from the Values pop-up menu:
• Create Attribute inserts the attribute into the source code when the user drags its parent tag from Web
Settings into the Source Editor or selects it from the Outline Editor pop-up menus.
• Default lets you specify the default value the attribute should have when its parent tag is inserted into the
source code.
6 Click the Version tab, and specify compatibility with a browser or HTML version, as described in the
section “Overriding default syntax error checking” on page 373.
Editing a new enumeration
If you add a new enumeration option list to an attribute, you must name each item in the Basic tab of the
Web Settings Attribute Inspector and describe its function.
To edit an enumeration option:
1 Create a new enumeration, enter its name in the Attr Name text box of the Web Settings Attribute
Inspector, and press Enter. The name you specify here is one of the values the attribute can assume.
2 Enter a description in the Comment text box, and press Enter.
ADOBE GOLIVE 5.0 375
User Guide
3 Click the Version tab, and specify compatibility with a browser or HTML version, as described in the
section “Overriding default syntax error checking” on page 373.
Add and name enumerations as necessary. All enumerations you specify for an attribute appear in the
Value pop-up menu when you select Create This Attribute in the Basic tab of the Web Settings
Attribute Inspector.
The Characters tab
HTML uses a specific notation for encoding special characters to ensure a uniform display across multiple
computer platforms. The Characters tab includes those special characters, as specified by ISO 8859-1 and
the HTML 3.2 standard. Adobe GoLive uses the content of the Characters tab to map special characters you
enter to the proper Web-specific character codes. These special characters fall into three categories:
• Basics contains often used special characters, such as quotation marks (“”), ampersand (&), greater than
(>), and less than (<).
• Characters lists the entire set of Western-language characters.
• General punctuation includes variants of spaces and dashes.
Each character appears with its HTML name, visual image, Mac OS and ISO codes, and a textual
description.
Viewing special characters
As with the HTML tags stored in Web Settings, you can view the entries in the Characters tab in
the Inspector. If a character can’t be displayed in the system font, a small box in the Char column of the
Characters tab appears instead of the character.
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.
• Mac OS doesn’t display some characters that display on other platforms. 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.
To add a special character:
1 In the Character tab of the Web Settings window, select an existing special character or a section where
you want to add the character.
2 Click New Character (
) on the toolbar.
3 Select the new character, and edit its properties in the Web Settings Entity Inspector window:
376 CHAPTER 17
Web Settings
• Enter the HTML name of the new character in the left Name text box.
• Enter the HTML code of the new character in the right Name text box, enclosing it in a leading
ampersand and a trailing semicolon.
• Enter a description in the Comment text box.
• Enter the ISO mnemonic code and its equivalent byte code in the ISO Code text boxes.
• If there is a Mac OS equivalent, select Mac, and enter the mnemonic code and its equivalent byte code.
If the character exists on Mac OS, you can see it in the preview pane.
• Select Write to write the contents of the adjoining text box into the document rather than the contents of
the Name text box.
4 Click the Version tab, and specify error checking preferences, as described in the section “Overriding
default syntax error checking” on page 373.
Note: You can also access the commands available on the Web Settings toolbar from the context menu. Rightclick (Windows) or Control-click (Mac OS) In the Character tab of Web Settings to access the context menu.
The CSS tab
The CSS tab ( ) of Web Settings contains default style sheets for all major browsers on Windows and Mac
OS. These are primarily used for previewing pages with the Layout View Controller. (See “Previewing with
cascading style sheets” on page 222.) They let you simulate how fonts and other design elements display on
Windows and Mac OS. They do not affect how Adobe GoLive writes HTML code, or what the end user sees
when visiting your site. The default style sheets contain styles with tag selectors because styles need to be
applied automatically to preview.
Note: Do not confuse these default style sheets with the style sheets that you create and reference using the
<style> tag in your HTML files.
Further options include a check box for using style sheets, a default unit menu, and options for controlling
how the Source mode formats style sheets.
You can also duplicate an item and edit it to create a user-defined style sheet in the Root Style Sheet
Inspector.
To make general settings for cascading style sheets:
1 Deselect Use Style Sheets to turn style sheets off throughout the application. This action is optional.
2 Select an option from the Default Unit pop-up menu to determine what unit the Root Style Sheet
Inspector uses.
3 Select an option from the Output pop-up menu to determine how style sheets are formatted in the
source code. The options in this menu vary the horizontal and vertical spacing between selectors and rules.
ADOBE GOLIVE 5.0 377
User Guide
Viewing the default style sheets
The default style sheets in the CSS tab of Web Settings are write-protected. You can only inspect
their properties.
To view the default style sheets:
1 Select a style sheet from the list in the CSS tab of the Web Settings window.
2 In the Root Style Sheet Inspector, click the Basic tab to view the name, system, and comments.
3 Select the Settings tab to view the screen resolution and other options, such as Can Handle Style Sheets.
4 Click the Source tab to view the source code.
Creating your own default style sheet
You can create a new default style sheet if you want more previewing options in the View Controller. The
style sheet toolbar (see “Creating a style sheet” on page 205) helps you create a style sheet.
To create a new default style sheet:
1 In the CSS tab of the Web Settings window, select the default style sheet that best suits your requirements.
2 Click Duplicate (
and properties.
) in the style sheet toolbar to create an exact copy, complete with all styles
3 Select the new style sheet, and click the Basic tab of Root Style Sheet Inspector. Enter a name, system
information, and comments. Click the Settings tab, and enter screen resolution (96 is typical for
Windows, 72 for Mac OS) in the DPI text box, and select Can Handle Style Sheets. The source tab displays
the HTML code.
4 Select what you want to edit. Use the CSS Selector Inspector to make changes as necessary. For more
information, see “Using Cascading Style Sheets” on page 205.
5 When you finish editing the new style sheet, select the adjacent Root radio button for your new style
sheet. This changes the default style sheet used when previewing all subsequent pages and sites.
6 Close Web Settings. Changes are saved automatically.
Previewing the effects of different default style sheets
The Root style sheet you select in the CSS tab of Web Settings determines the defaults used in your pages
and site. But you can use the View Controller Inspector to preview how your documents appear under different style sheets.
378 CHAPTER 17
Web Settings
To preview your pages with different default style sheets:
Click the Layout tab of your document window, and in the View Controller Inspector, select the new style
sheet from the Root CSS menu and view the effects of your new style sheet.
Note: This temporary preview affects only this document. If you want to preview routinely using the style
sheet you selected in the View Controller Inspector, you must set it as the Root style sheet in the CSS tab of
Web Settings.
The XML tab
The XML tab lists Adobe GoLive and imported Document Type Definition (DTD) files that contain XML
tags and definitions. You cannot edit the entries provided with Adobe GoLive, but you can view the defaults
or import your own DTD files.
To import a DTD file:
Right-click (Windows) or Control-click (Mac OS) in the XML tab and choose Import DTD from the context menu.
The File Mappings tab
The File Mappings tab lets you tell Adobe GoLive how to open files in the appropriate applications by double-clicking the files. GoLive provides a default set of file mappings, and you can add mappings to the set.
GoLive file mapping supports cross-platform site development by providing Mac OS file type and file creator options in Windows. By default, the columns showing these settings are hidden in Windows, but you
can show them as necessary.
To add or delete a file mapping specification:
1 Choose Edit > Web Settings.
2 Click the File Mappings tab.
3 Open a Mime type set, either the set you are adding the mapping to or the set containing the mapping
to be deleted. For example, open application/ or audio/.
4 Do one of the following:
• To add a mapping, choose Add Suffix from the context menu for the Mime type set and edit the new
mapping. The mapping added has the suffix “???,” which you need to change during the edit.
• To delete a mapping, choose Clear from the context menu for the mapping.
To edit a file mapping specification.
1 Display the Inspector.
ADOBE GOLIVE 5.0 379
User Guide
2 Choose Edit > Web Settings.
3 Click the File Mappings tab.
4 Open the Mime type set containing the mapping and select the mapping.
5 Make changes in the File Info Suffix Inspector as necessary:
• To change the FTP method used when the file is uploaded or downloaded, choose a transfer option. The
default option is Text, the standard method for HTML pages.
• To change the application launched when the file is double-clicked in Mac OS, either specify the file type
and file creator or click the Browse button next to the Application text box in the File Info Extension
Inspector, browse to the application, and click Open. The current application is listed in the Application
column of the File Mappings tab. If it is “Default,” it is the application that would be launched if you
double-clicked on the Mac OS desktop.
• To change the application launched when the file is double-clicked in Windows, click the Browse button
next to the Application text box in the File Info Extension Inspector, browse to the application, and click
Open. The current application is listed in the Application column of the File Mappings tab. If it is “Default,”
it is the application that would be launched if you double-clicked on the Windows desktop.
To show or hide columns on the File Mappings tab:
Choose an item from the context menu for any of the column heads of the tab. You can show all the columns, hide all the columns, or show a selection of columns.
To use Internet Control Panel mappings instead of GoLive mappings (Mac OS):
Select Use Internet Control Panel in the File Mappings tab.
Note: If you add or edit a mapping with the same filename suffix as one of the mappings in the Internet Control
Panel while you are using the Internet Control Panel mappings, your mapping will be overwritten.
The WebObjects tab
The WebObjects tab ( ) is only visible if you have installed and enabled the WebObjects module in
Adobe GoLive preferences. The WebObjects tab displays all WebObjects-specific tags supported by Adobe
GoLive. You can view, but not edit entries. The WebObjects development environment provides a powerful
way to integrate database information in Web sites, and to develop a wide variety of server applications for
e-commerce and other online uses. See the documentation that accompanies WebObjects for detailed
instructions on incorporating WebObjects technology and using WebObjects-specific tags in a Web site.
381
Chapter 18: Viewing Web Sites
About views
Views are graphical representations of a site’s pages and the links connecting them. There are three views
of actual sites and one of site designs. The links, navigation, and structure views show the actual site.
• The links view shows the site’s pages and all the hyperlinks that connect them.
• The navigation view shows the site’s navigation hierarchy—the tree-like logical structure that underlies
its web of hyperlinks.
• The structure view shows the site’s file hierarchy—the tree-like structure of folders, subfolders, and
their contents.
• The design view shows a storyboard of a prototype site or subsite.
You display the links, navigation, and design views by choosing, respectively, Links View, Navigation View,
and New Site Design from the Design menu. You can also display the navigation view by creating a site
report. Site reports are also displayed in structure views. For information on the uses of the links view, see
“About links views” on page 30. On the navigation views, see “About navigation views” on page 31
and “Viewing site reports” on page 202. On the uses of the structure view, see “Viewing site reports” on
page 202. On the uses of the design view, see “About site designs” on page 453
Views usually have a single pane, but you can also display up to four special-purpose panes on the periphery of this main pane.
Using peripheral panes
You can display up to four special-purpose panes on the periphery of the main pane of a view.
About peripheral panes
Views provides additional specialized views in four panes at the top, bottom, left, and right of the
main pane:
Panorama pane This pane is a bird’s-eye view of the entire site or site design. The view contains a view box
corresponding to the current view in the main pane. You can move the main view around the site by moving the box. You can do anything with the panorama pane that you can do with the main view—for example, select a page or drag a page to another page in a navigation view to make it that page’s child or parent.
The panorama pane is available in all views.
382 CHAPTER 18
Viewing Web Sites
Scratch pane This pane shows two kinds of files stored in the root folder and listed in the Files tab of
the primary site window: HTML pages that aren’t part of the site’s navigation hierarchy and media files
that aren’t referenced on any HTML page listed in the Files tab. The scratch pane is available only in
navigation views.
You can drag HTML pages from a navigation view’s scratch pane to its central pane, You use a navigation
view’s scratch pane as you would its central pane, dragging a page to a target page in the central pane and
positioning it so that it becomes the parent, child, or sibling of the target page. Similarly, you can build up
partial trees in the scratch pane and drag them to target pages. For information, see “Adding empty pages
and pending links to a hierarchy” on page 34 and “Rearranging the parts of a hierarchy” on page 36.
Reference pane This pane shows media objects embedded in the selected HTML page or pages because the
page references the files containing the objects. By moving the selection from page to page you can easily
browse the embedded objects. The reference pane does not show media files hyperlinked to the HTML
page—for example, a large image file hyperlinked to a thumbnail version of the same image embedded in
a page. The reference pane is available in all views.
Pending pane This pane shows pending links from the selected page or pages—that is, child or sibling pages
that have not been hyperlinked to the selected page or pages. The pending pane is available in navigation
views and design views.
In practice, you would probably open only one or two panes at a time, depending on your immediate need.
A
B
E
C
D
A. Panorama pane B. Main pane C. Reference pane D. Scratch pane E. Pending pane
ADOBE GOLIVE 5.0 383
User Guide
The view shown has a wide orientation. If a view’s orientation is tall, the panorama pane is on the left, the
scratch pane on the right, the reference pane above, and the pending pane below. For information, see
“Changing the orientation of a view” on page 34.
Showing peripheral panes
You can enlarge or reduce a peripheral pane, changing its size relative to the size of the central pane. After
you show a peripheral pane in a view, that pane, in its current size, becomes part of the default view until
you hide it. For information, see “Customizing views” on page 389.
The peripheral panes of a view change their location when the orientation of the view changes. For example, the scratch pane appears on the right in tall view and the bottom in wide view. For information, see
“Changing the orientation of a view” on page 34.
384 CHAPTER 18
Viewing Web Sites
To show or hide a peripheral pane:
1 Click a view tab.
2 Choose the pane from the tab menu. Panes showing are checked on the menu. Choosing a checked pane
hides the pane.
Note: You can also show and hide peripheral panes with the View Controller. See “Using the View Controller”
on page 387.
To enlarge or reduce a peripheral pane:
1 Show the pane.
2 Drag the inside border of the pane toward or away from the central pane.
It simplifies site building to use the scratch pane for building site modules (partial trees) and the central
pane for assembling them. For this purpose, enlarge the scratch pane to the size of the central pane.
Controlling the view
You can use a miniature view of the whole site or site design to help you move around in it, zoom in on a
particular area, focus on a particular subtree, spotlight specific items, and so on. This sections gives details.
Adobe GoLive also provides a View Controller that duplicates some of these functions and provides
advanced view control functions. For information, see “Using the View Controller” on page 387.
Moving the view
You can use the panorama pane or Site Navigator to move the view in the main central pane smoothly to
distant parts of the site or site design. For small movements, you may find the scroll bars adequate.
Both the panorama pane and Site Navigator show a miniature of the complete site with a view box representing the portion of the site currently in view, and both let you move the view by dragging the box. However, the panorama pane is an actual view, not just a picture of the view, so you can work with objects in it
even if they aren’t visible in the central pane. For example, you can drag a page in the panorama pane that
is outside the central pane into a location in the central pane.
To move the view to another part of the site:
1 Do one of the following:
• Show the panorama pane.
• Choose Window > Site Navigator.
ADOBE GOLIVE 5.0 385
User Guide
2 Do one of the following:
• Drag the view box to another part of the site or design. (The view in the central pane moves with the box.)
• Select a file entirely outside the view box—that is, one that doesn’t also appear inside the box.
(The view in the central pane scrolls to include the file.)
Magnifying and reducing the view
You can choose from a menu of magnification percentages or click to zoom in on a particular area. In either
case, you work separately on the main central pane or on any of three peripheral panes: scratch, reference,
or pending. You can also use a slider for precision magnification control of the central pane.
To magnify or reduce the view with a Zoom menu:
Click the button at the bottom left corner of the central or peripheral pane (
magnification level from the menu that pops up.
), and choose a
To zoom in on a particular area:
1 Hold down Shift (Windows) or Option (MacOS). If the pointer is in a pane you have not already zoomed
in on, it changes to a plus ( ). Otherwise it changes to a minus ( ).
2 Do one of the following in either the central pane or a peripheral pane:
• Move the pointer to the area and click. The magnification changes to 200% when you do this the first
time. It changes to 100% when you do it again in the same pane.
• Draw a rectangle defining the area and release. The area enlarges to fill the pane. You can do this repeatedly, until the magnification reaches 500%.
You can use the Site Navigator both for focusing the view on a particular area and for magnifying it.
This has the same effect as zooming it.
To magnify or reduce the view with the Site Navigator:
1 Choose Window > Site Navigator.
2 Do one of the following:
• Click the zoom in (
) or zoom out (
) button.
• Drag the zoom slider.
• Enter the percentage of magnification or reduction you want, and press Enter (Windows) or
Return (Mac OS).
386 CHAPTER 18
Viewing Web Sites
Centering views and displaying partial trees
The Move to Center command limits a links view to a file and its incoming and outgoing links. The Display
Partial Tree command limits a navigation view to a partial tree or partial trees—a selected page and its logical descendents (children, grandchildren, and so on) or selected pages and their descendents.
The most basic way to limit a view is by folding and unfolding it. For information, see “Expanding and collapsing views” on page 32. You also can limit a view by using the View Controller to vary and filter it.
For information, see “Varying the view of links” on page 388 and “Filtering the contents of the view” on
page 389.
To limit the view to a file and its incoming and outgoing links:
1 Select a file in the central pane of a links view.
2 Choose Design > Move to Center. The view is reduced to the file you selected and its incoming and
outgoing links.
3 If you want to center the view on another file, select it and choose Design >Move to Center again.
Just selecting the file won’t change the view.
To display only partial trees:
1 Select one or more pages in the central pane of a navigation view.
2 Choose Design > Display Partial Tree. The view is reduced to the pages you selected and their logical
descendents (subtrees).
3 Select other pages to view their subtrees as necessary. You continue viewing subtrees until you choose
Design > Display Partial Tree again.
Spotlighting page groupings in navigation view
Spotlighting a navigation view is a versatile alternative to centering it. Spotlighting lets you to focus on
specific pages without removing other pages from the view.
You can spotlight several types of page groupings:
• Family spotlights a selected page, its parent page, and its children.
• Incoming spotlights any page containing the source of a hyperlink to the selected page.
• Outgoing spotlights any page containing the destination of a hyperlink from the selected page.
• Pending spotlights all pending links in the site.
• Collection spotlights all pages in the site in a selected collection of pages. For information,
see “Spotlighting collections” on page 405.
ADOBE GOLIVE 5.0 387
User Guide
Spotlighting pending links uses arrows to provide especially detailed information.
Arrows showing pending links
To spotlight groups of pages in a navigation view:
1 Expand the navigation view as necessary to show the pages you want to spotlight.
2 Do one of the following:
• Select a page and choose Spotlight Family, Spotlight Incoming, or Spotlight Outgoing from the
Navigation tab menu.
• Choose Spotlight Pending from the Navigation tab menu.
3 Do either of the following as necessary:
• Select another file to move the spotlight.
• Choose another spotlight command to change the type of spotlight.
Note: You can also spotlight with the View Controller.
Using the View Controller
You use the View Controller to control display details in any Adobe GoLive window. With table-style tabs,
the View Controller controls the display of columns. With view tabs, it controls a wide variety of graphical
features, the particular features depending on the tab.
You can use the View Controller either to make adjustments to a view as you are using it or to customize it
for long-term use—that is, to alter its factory defaults. For information, see “Customizing views” on
page 389.
388 CHAPTER 18
Viewing Web Sites
To display the View Controller:
1 Choose Window > View Controller.
2 Click a tab in any window. The view controls vary with the tab.
Varying the view of links
You can simplify a links view by showing only incoming links or only outgoing links. You can also focus
the view on a single path that you are exploring by expanding links, automatically collapsing other paths
of links.
To vary the view of link types and link paths:
1 Display a links view.
2 Click the Links tab of the View Controller.
3 Select or deselect (show or hide) incoming links and outgoing links.
4 Select multiple or single link paths.
Changing the display of the view
You can change display settings for any view tab. If the tab shows peripheral panes as well as the central
pane, changes apply only to the active pane.
With site views, a significant change you can make is from the default graphical view to outline view. (Outline view is a hierarchical display of folders, subfolders, and files like the one in the Files tab.) Use outlines
to show more detailed and compact representations of the files in the central pane or a peripheral pane.
To change the display for a site or site design view:
1 Display a site view or site design view.
2 Click the Display tab of the View Controller.
3 Click the pane you want to change.
4 Do any of the following:
• Show the site view graphically or in outline. Site design views don’t appear in outline form.
• Show items in the view as icons, thumbnails, frames, or ovals. Ovals are oval only if the frame size is wide.
Otherwise they are circles.
• Show item labels as page titles or filenames.
• Change the cell size and press Enter.
• Change the frame size.
ADOBE GOLIVE 5.0 389
User Guide
• Click the Item Color field to display the Color palette. The color you choose is used for the frames of
items, and a lighter tint of it is used for the fill.
In site design view, item labels can also be design names. For information on this and other changes you
can make only in site design views, see “Controlling the view” on page 469.
Filtering the contents of the view
Filtering a view is eliminating certain types of objects from it—for examples, media files or cyclic links. You
can filter navigation, links, and structure views. If the view shows peripheral panes as well as the central
pane, the filter applies only to the active pane.
Filtering is particularly useful in the central pane of links views, as a way of simplifying the view of
complex sites.
To filter a view:
1 Click the Filter tab of the View Controller.
2 Select or deselect (show or hide) any combination of items in the view.
Customizing views
When you change a setting in the View Controller, the change will persist the next time you display the
same type of view—for example, when you display another navigation view. You can use this feature to
customize your site views and site design views.
You use other controls to customize the color coding of site views.
To change color coding in site views:
1 Do one of the following:
• To change colors for the active site only, click the Site Settings button (
) on the toolbar. Or choose
Site > Settings, click Design Colors in the left pane, and select Site Specific Settings.
• To change colors for all sites, choose Edit > Preferences, expand Site in the left pane, and click Design
Colors in the left pane.
2 Click the color field for any item you want to change.
3 Change the color in the Color dialog box, and click OK in the box.
4 Click OK.
390 CHAPTER 18
Viewing Web Sites
Using the In & Out Links palette
If you want to view the links to or from a page, or follow a path of links from this starting point, you can
do it without displaying a links view in a Links tab and finding the page there. Instead, you simply select
the file and display the separate In & Out Links palette.
Viewing links to and from a page
You can use the In & Out Links palette with any page in the site folder or site data folder—that is, with any
page listed in the Files, Navigation, Links, or Extras tabs in site windows, and any page listed in the Design
tab of site design windows.
You can also use the palette with the Errors tab, to list all the pages linked to a missing file. You can use the
palette’s point-and-shoot button to change the links to a missing file from all the pages in the list at once.
(For information, see “Checking the site for missing or orphan files” on page 426.)
To view the links to and from a specific page in the In & Out Links palette:
1 Click the tab containing the page, either the Files, Navigation, Links, or Extra tab of a site window or the
Design tab of a site design window.
2 Do one of the following:
• Select the page.
• Open the page in a document window.
3 Click the Open In & Out Links Palette button (
) on the toolbar, or choose Window > In & Out Links.
Incoming links to the page appear on the left, and outgoing links from the page appear on the right.
To follow a path of links in the In & Out Links palette:
1 Select an incoming or outgoing link in the In & Out Links palette. The file you selected moves to the
center of the palette, and its incoming and outgoing links are displayed.
2 Repeat the step as often as necessary.
To limit the types of links appearing in the In & Out Links palette:
1 Choose Palette Options from the In & Out Links palette menu.
2 Select items to show as appropriate. (Unselected items are hidden.)
3 Click OK.
ADOBE GOLIVE 5.0 391
User Guide
Viewing pages that use a URL or other site resource
For a media file listed in the Files tab or a dynamic component or stationery file listed in the Extras tab, you
can use the In & Out Links palette to list all the pages referencing it. You can do the same for any URL or
e-mail address in the External tab. You can use the palette’s point-and-shoot button to change the references from all the pages at once. For information on using the point-and-shoot button to change links and
references, see “Linking files” on page 15.
You can also use the In & Out Links palette to list the pages using a color listed in the Colors tab or a font
set listed in the Fontsets tab.
To view site usage of a media, stationery, or dynamic component file:
1 Click the Open In & Out Links Palette button (
) on the toolbar, or choose Window > In & Out Links.
2 If necessary, do one of the following to display the file:
• Open a media folder in the Files tab.
• Open the Components or Stationery folder in the Extras tab.
3 Select the file.
To view site usage of an item in the External, Colors, or Fontsets tab:
1 Click the Open In & Out Links Palette button (
) on the toolbar, or choose Window > In & Out Links.
2 Select the item in the tab, opening a group or folder first if necessary.
393
Chapter 19: Managing Web Sites
Maintaining a site and its resources
The tabs of the primary site window contain a variety of resources for developing and maintaining the site.
About sites and site resources
In Adobe GoLive, a site is a collection of files on a local drive that are used as resources for developing and
maintaining a Web site on a public server. Visitors to the public site will view some but not all of these files;
specifically, they will view only the files that would appear in the central pane of a links view of the site.
These files are the home page, pages hyperlinked directly or indirectly to the home page, and media files
referenced by any of these pages.
Visitors will not view the rest of the files, and normally these other files will not be not uploaded to
the server.
The files comprising the site include the site file and the contents of two folders: the root folder and the site
data folder.
• The site file is viewable as the site document in the various tabs of the primary site window.
• The contents of the root folder are listed in the Files tab of the primary site window.
• The contents of the site data folder are listed in the Extras tab of the primary site window.
Files tab and Extras tab in a site window
Visitors to the site view only files in the root folder, either all the files in the folder or the subset of these files
that is referenced in the visitable site.
394 CHAPTER 19
Managing Web Sites
Working with folders
In the primary site window, arrange files in folders to keep them in order. For example, put separate folders
in the Files tab for pages, images, and animations. If you work within Adobe GoLive to do this, links and
file references are rewritten automatically to reflect the new location.
Important: You can use Adobe GoLive to move files from your system desktop to the site window. However, if
you move site files from one folder on the desktop to another folder on the desktop, link and reference information is not updated.
Similarly, use the primary site window to arrange nonfile items in groups. (A group is a type of folder stored
within the site file rather than within another folder.) Items in the Files and Extras tabs go in regular folders.
Items in the Designs, Externals, Colors, Fontsets, and Custom tabs go in groups.
To create a folder (group or regular folder):
1 Click the tab where you will put the folder.
2 If you want the folder you are creating to be subordinate to an existing folder in the tab, select the
existing folder.
3 Do one of the following:
• Click the New Folder button (
) on the toolbar.
• Choose Site > New > Folder.
• Drag the Folder icon from the Site tab ( ) of the Object palette to the tab where you want to put the
folder. You can put the icon in a folder listed in the tab or in the folder one level up from the folder displayed
in the tab, using the same technique you use for moving a file to a such a folder.
The new folder is named “untitled folder” or “untitled group.” The name is selected for you.
4 Type a new name.
5 Press Enter.
You can also rename a folder in the Inspector. The Folder Inspector is also useful for choosing Publish
options and assigning status labels. (For information, see“Assigning status labels” on page 403.)
6 Move items into the folder as appropriate.
Note: A folder named New Files is created automatically in the Files tab when you add files to the navigation view of a site for the first time. You can change the default name New Files in site preferences.
ADOBE GOLIVE 5.0 395
User Guide
To move a file or object to a folder (group or regular folder):
1 Do one of the following:
• Drag the file or object into the folder. Drag a file into a regular folder and an object into a group.
If you want the target folder to open so that you can see its contents, pause over its icon before releasing.
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 “up one level” button (
) at the top of the tab. Pause to open the folder if you
want to see its contents.
• For files only, select the target folder, choose Site > Explorer > Add Files (Windows) or Site > Finder >
Add Files (Mac OS), select the file, click Add, and click Done. You can also use this method to add a selection of files, a folder, or a selection of folders.
2 If you are moving a file containing hyperlinks or file references, click OK in the Move Files dialog box to
update them. All files affected by the move are listed in the dialog box.
Important: If you exclude any file from updating, broken links and invalid file references may result.
To open the desktop folder containing a file or folder in the primary site window:
1 Select the file or folder in the primary site window. You can select only regular folders and files, not
groups or objects in groups.
2 Do one of the following:
• Click the Reveal Item button (
) on the toolbar.
• Choose Site > Explorer > Reveal Object (Windows) or Site > Finder > Reveal Object (Mac OS).
396 CHAPTER 19
Managing Web Sites
Deleting files
When you delete a file or folder from the site, you send it to a Site Trash folder or to the system Recycle Bin
or Trash. The default destination is Site Trash. Files moved to Site Trash can be moved from there to the
system Recycle Bin or Trash or recovered. Deleting objects and groups removes them entirely from
the system.
For many purposes, updating the Files or Extras tab or removing unused objects from the External, Colors,
or Fontsets tab is preferable to deleting the file or object. For information, see “Updating tabs in the site
window” on page 397 and “Removing unused references, colors, and fontsets” on page 398.
To delete a file, regular folder, object, or group:
1 Select the item.
2 Do one of the following:
• Click the Delete Selected Item button(
) on the toolbar.
• Press Delete (Windows) or Command-Delete (Mac OS).
• Choose Edit > Delete.
3 If you are asked to confirm the deletion, click Yes.
Note: You can also drag a file or folder directly the system Recycle Bin or Trash, and you can establish a Site
preference for moving ordinary deletions there directly.
To recover a file from the Site Trash or move it to the system Recycle Bin or Trash:
1 If necessary, show the right pane of the primary site window. (Click (
of the window.)
) in the scroll bar at the bottom
2 Click the Extras tab.
3 Open the Site Trash folder.
4 Do one of the following:
• To undo a deletion, drag the file you want to recover back to its previous location in the Files tab.
• To move a file or folder to the Recycle Bin (Windows) or Trash (MacOS), delete it as you would if it were
in the Files tab, or drag it to the Recycle Bin or Trash.
To change the destination of file and folder deletions:
1 Choose Edit > Preferences.
2 Click Site in the left pane.
3 Select a trash option.
4 Click OK.
ADOBE GOLIVE 5.0 397
User Guide
Updating tabs in the site window
You can update the Files, Extras, and Designs tabs so that they reflect the actual site—that is, the contents
of the root folder (Files), the site data folder (Extras), or the Designs subfolder of the site data folder
(Designs). This may involve adding files to the tab, removing files, or both. Updating is useful if you have
been working with files in one of these folders outside of Adobe GoLive—for example, dragging a file from
the desktop to the root folder rather than dragging it into the Files tab.
Similarly, if you are connected to an FTP or WebDAV server, you can update the FTP or WebDAV tabs to
reflect the contents of the current directory on the server.
When you update the External, Colors, or Fontsets tab, all the pages in the root folder are scanned for the
corresponding objects, and any object found on a page but not listed on the tab is added to the list. Items
listed but not found remain in the list.
When you import a site, the Files, External, Colors, and Fontsets tabs are updated automatically to
provide resources for further site development. As you develop the imported site further, you should update
these tabs to reflect these developments.
To update the Files, Designs, or Extras tab:
1 Do one of the following:
• To update the Files tab, Designs tab, or Extras tab, click the tab.
• To update a folder in the Files tab, click the Files tab and open the folder.
2 Do one of the following:
• Click the Update button (
) on the toolbar.
• Choose Site > Rescan Folder where Folder is the name of the site root folder or one of its subfolders in the
Files tab and the name of the site data folder in the Extras tab.
• Choose Site > Update Designs List.
To update the FTP or WebDAV tab:
1 Connect to the FTP or WebDAV server.
2 Open the server directory you want to update.
3 Do one of the following:
• Click the Update button (
• Choose Site > Update.
) on the toolbar.
398 CHAPTER 19
Managing Web Sites
To update the External, Colors, or Fontsets tab:
1 Click the tab.
2 Do one of the following:
• Click the Update button (
) on the toolbar.
• Choose Site > Get References Used, Site > Get Colors Used, or Site > Get Fontsets Used. The command
displayed on the Site menu depends on the tab you have clicked. The Get References Used command is
displayed when you click the External tab.
If the scan finds new URLs or addresses that need to be listed in the External tab, a New URLs or New
Addresses group for them is created in the tab. Similarly, New Colors or New Font Sets groups are created
in the Colors or Fontsets tabs if new colors or font sets are found.
Removing unused references, colors, and fontsets
Updating can add objects used on a site page to the External, Colors, and Fontsets tabs, but it can’t remove
unused objects. For this you use separate “Remove Unused” commands.
Important: Be careful. Removing URLs, e-mail addresses, colors, and font sets deletes them with no
recovery option.
To remove unused references, colors, and font sets:
1 Click the External, Colors, or Fontsets tab.
2 Choose Site > Remove Unused Objects where Objects is References in the External tab, Colors in the
Colors tab, and Fontsets in the Fontsets tab.
Cleaning up the site
The Clean Up Site command combines a number of functions in a single customizable routine:
• Updating tabs in the site window.
• Removing unused references, colors, and font sets.
• Adding used files and removing unused files (Used means “referenced on some page in the root folder.”
Unused means “not referenced on any page in the root folder.)
The first two functions can be performed separately. The third is unique to the Clean Up Site command.
Note: Adding used files and removing unused files changes the contents of the Files tab, as does updating the
Files tab. However, updating changes only the contents of the tab, not the contents of the root folder it represents.
ADOBE GOLIVE 5.0 399
User Guide
To customize the Clean Up Site routine:
1 Do one of the following:
• To customize the routine for the active site only, click the Site Settings button (
) on the toolbar or
choose Site > Settings. Then click Clean Up Site in the left panel, and select Site Specific Settings.
• To customize the routine for all sites, choose Edit > Preferences, expand Site in the left pane, and click
Clean Up Site in the left panel.
2 Select options as follows:
• To update the Files tab, select Rescan Root Folder. To update the External, Colors, or Fontsets tab, select
Add Used External References, Add Used Colors, or Add Used Fontsets. For information, see “Updating
tabs in the site window” on page 397.
• To remove unused items from the External, Colors, or Fontsets tab, select Remove Unused External
References, Remove Unused Colors, or Remove Unused Fontsets. For information, see “Removing unused
references, colors, and fontsets” on page 398.
• To add used files to the root folder or remove unused files to the trash, select Add Used Files or Remove
Unused Files.
• Select Show Options Dialog if you want to display the Clean Up Site dialog box every time you choose
the Site > Clean Up Site command. This will undo the Don’t Show Again selection in the Clean Up Site
Options dialog box.
3 Click OK.
To clean up a site:
1 Choose Site > Clean Up Site.
400 CHAPTER 19
Managing Web Sites
2 If the Clean Up Site Options dialog box appears, customize the options as necessary. (They are described
in the customizing procedure above.)
3 Select Don’t Show Again or Set as Default as appropriate. For information, see “Establishing site settings”
on page 406.
4 Click OK.
Updating thumbnails
When you edit and save an HTML file, its thumbnail is stored in the site file. You can view the thumbnail
in the Content tab of the File Inspector, and pages can also be displayed as thumbnails in a navigation view,
links view, or design view.
Alternatively, you can create thumbnails for all the pages in a site at once. Updating content thumbnails in
this way is useful when you are importing a developed site and want thumbnails for all its pages available
in the navigation view of the site before you edit any one of them.
To update thumbnails for all HTML files in a view:
1 Display a view whose pages you want to show as thumbnails, either a navigation view, links view, structure view, or design view. (The update is good for all views that are set to show pages as thumbnails, not
just the view you display in this step.)
2 Make sure that items in the view are set to be shown as thumbnails. (If necessary, display the View
Controller, click the Display tab, and select Thumbnails under Show Items As.)
3 Choose Design > Update Thumbnails. The update process will take longer if there are more pages
to update.
Providing names and paths for files
You can customize the way Adobe GoLive constrains filenames to appropriate patterns and represents
file paths.
Changing filename constraints
The Filename Status column in the Files tab shows files whose filenames don’t observe the filename constraints you prefer. Adobe GoLive provides a number of constraint sets, or you can provide your own sets.
Adobe GoLive’s default set is the one for your own file system, either Windows 98/NT/2000 or Mac OS. Its
other sets are Unix, DOS/Windows 3.1, GoLive standard, GoLive small caps, and GoLive strict. The three
GoLive sets are described in Site Filename Constraints preferences.
The Filename Status column in the Files tab may be hidden. For information, see “Working with site windows” on page 26.
ADOBE GOLIVE 5.0 401
User Guide
To change filename constraints:
1 Do one of the following:
• To change filename constraint for the active site only, click the Site Settings button (
) on the toolbar
or choose Site > Settings. Then click Filename Constraints in the left panel, and select Site Specific Settings.
• To change filename constraints for all sites, choose Edit > Preferences, expand Site in the left pane, and
click Filename Constraints in the left panel.
2 Choose a set of constraints from the Selected Constraints menu.
3 Click OK.
To add a set of filename constraints:
1 Do one of the following:
• To add a set for the active site only, click the Site Settings button (
) on the toolbar or choose Site >
Settings. Then click Filename Constraints in the left panel, and select Site Specific Settings.
• To add a set for all sites, choose Edit > Preferences, expand Site in the left pane, and click Filename
Constraints in the left panel.
2 Choose a set of filename constraints from the Selected Constraints menu.
3 Click Duplicate. This creates a new duplicate set. You can delete this set, before or after you rename and
edit it. You can’t delete the original.
4 Type a name for the new set in the Selected Constraints text box.
5 Edit the set in the other text boxes as necessary.
6 Click OK.
About absolute link paths
Site pages contain paths to a variety of linked files: other pages in the site (<HREF>), images displayed on
the page (<IMG>), media items embedded in the page (<EMBED>), and so on. When you make such a
path absolute, the entire path from the root folder to the linked file is provided. Otherwise only a relative
path is provided.
Example A page /root/pages/info/page.html (where root is the name of the root folder) contains 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.
402 CHAPTER 19
Managing Web Sites
• 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 HTML 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; that is, a previewing browser has no way of locating this root folder.
Note: An absolute path in Adobe GoLive is not a full path from the file system root or a fully qualified URL.
Setting up absolute link paths
You can specify absolute paths for all new links or for specific links.
To make all new link paths absolute:
1 Choose Edit > Preferences, expand General, and click URL Handling in the left panel.
2 Select Make New Links Absolute.
3 Click OK.
To make a specific link path absolute:
1 Open the page containing the link or reference in a document window.
2 Display the Inspector.
3 Select the link.
4 Click the Absolute Link button (
)to the right of the Source or URL text box in the appropriate
Inspector or dialog box—for example, in the Basic tab of the Image inspector or the Link tab of the
Text Inspector.
ADOBE GOLIVE 5.0 403
User Guide
Providing page status information
You can provide status information about individual pages either by labeling them or by assigning them to
collections. You provide status information about pages in a collection by giving the collection a significant
name such as “Reviewed.”
A page can have only one label. Because it can belong to multiple collections, the collection approach permits more complex status information.
Assigning status labels
Adobe GoLive comes with the default color-coded file status labels “Essential,” “Hot,” “In Progress,” “Cool,”
“Personal,” “Project 1,” and “Project 2.” (The same default labels appear in the Mac OS Finder.) Colorcoded files appear in navigation views, links views, and design views. In Windows, you can edit any of these
labels—delete, rename, or recolor it. In either Window or Mac OS, you can add a new label. You can assign
any one status to any file.
Note: Adobe GoLive also uses the term “status” to indicate the state of links and references at a site—for
example, in the Status column of the Files tab. For information, see “Checking the site for pages with errors” on
page 426. Be careful not to confuse these two types of file status.
Sometimes individual files have multiple statuses, for example, both “In Progress” and “Personal.” If you
need multiple labels for your files, use collection labels instead of status labels. For information, see “Creating a collection” on page 404.
To add or edit a file status:
1 Do one of the following:
• To add or edit a status for the active site only, click the Site Settings button (
) on the toolbar or choose
Site > Settings. Then click Status in the left panel, and select Site Specific Settings.
• To add or edit a status for all sites, choose Edit > Preferences, expand Site in the left pane, and click Status
in the left panel.
2 Do one of the following:
• To add a new label, click New. A new white label appears with the name “New Label.”
• To edit an existing label, select it.
In Mac OS, you can edit the default labels in the Finder preferences.
3 Perform any of the following edits:
• Type another name for the label.
• Click the color field and change the color of the label.
• Click Delete to delete the label.
404 CHAPTER 19
Managing Web Sites
4 Click OK.
To assign a status to a file:
1 Select the file in the Files tab, Extras tab, Navigation tab, or Links tab.
2 Click the File tab in the File Inspector.
3 Choose a status for the file from the Status menu.
Creating a collection
A collection is a set of page files identified in a navigation, links, or design view. Collections are identified
by name and spotlighted by color. You can start with an empty collection and add pages to it or start with
the pages, making them a collection all at once.
To create an empty collection:
1 Choose Design > Edit Collections.
2 Click New Collection. The collection is given the name “New Collection.”
3 Edit the collection—rename it or color-code it.
4 Click OK.
To create a collection from a selection of page
Was this manual useful for you? yes no
Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

Download PDF

advertisement