Adobe GoLive 6.0- P1 docx

Classroom in a Book

®

www.adobe.com/adobepress

© 2002 Adobe Systems Incorporated. All rights reserved.
Adobe® GoLive® 6.0 Classroom in a Book®
This book, 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 book 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 book.
Except as permitted by such license, no part of this documentation 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 are for demonstration purposes only and are not intended to refer to any actual organization
except as noted.
Adobe, the Adobe logo, Acrobat, the Acrobat logo, ATM, Adobe Type Manager, Classroom in a Book, GoLive, Illustrator,
ImageReady, LiveMotion, Photoshop, and Adobe Premiere are either registered trademarks or trademarks of Adobe Systems
Incorporated. Apple, Mac, Macintosh, and QuickTime are trademarks of Apple Computer, Inc. registered in the U.S. and other
countries. QuickTime and the QuickTime logo are trademarks used under license. The QuickTime logo is registered in the U.S. and
other countries. Microsoft, Windows, and Windows NT are either registered trademarks or trademarks of Microsoft Corporation
in the U.S. and/or other countries.

Java, Java Applet, and JavaScript and are trademarks or registered trademarks of Sun Microsystems,
Inc. in the United States and other countries.

Macromedia and Flash are trademarks or registered trademarks of Macromedia, Inc. in
the United States and/or other countries. SVG is a trademark of the World Wide Web consortium. Arial is a trademark of The
Monotype Corporation registered in the U.S. Patent and Trademark Office and certain other jurisdictions. Helvetica is a registered
trademark of Linotype-Hell AG and/or its subsidiaries. All other trademarks are the property of their respective owners.
Contains an implementation of the LZW algorithm licensed under U.S. Patent 4,558,302.
Written and designed at Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.
Adobe Press books are published by Peachpit Press, Berkeley, CA.
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.
Printed in the U.S.A.
ISBN 0-201-78719-9
9 8 7 6 5 4 3 2 1

iii

Contents

Getting Started

About Classroom in a Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Installing Adobe GoLive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Installing the Classroom in a Book fonts . . . . . . . . . . . . . . . . . 2
Copying the Classroom in a Book files . . . . . . . . . . . . . . . . . . . 3

Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Adobe certification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Lesson 1

Developing Web Sites with Adobe GoLive 6.0

About this lesson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
The GoLive workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Creating a new site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Adding files and folders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Designing a first Web page . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Previewing a Web page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Creating a second Web page . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Creating a third Web page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Creating links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Comparing the files on your desktop with the
site files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Managing sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Review questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Review answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Lesson 2

Getting to Know the Work Area

About this lesson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Opening and viewing a site . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Using the document window . . . . . . . . . . . . . . . . . . . . . . . . . . 71

CONTENTS

iv

Using the toolbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Creating a custom workspace . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Using the Objects palette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Using the Inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Using context menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Setting GoLive preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Previewing in GoLive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Previewing in a Web browser . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Using Hints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Review questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Review answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Lesson 3

Designing Web Pages

About this lesson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Creating a new Web site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Adding files to the Web site . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Creating a component to be used as a
navigation bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Designing the home page . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Creating a custom color palette and adding color

to text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Adding a component to an existing Web page . . . . . . . . . 137
Updating the custom color palette . . . . . . . . . . . . . . . . . . . . 138
Designing a Web page using floating boxes . . . . . . . . . . . . 139
Editing a component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Previewing in GoLive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Review questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Review answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149

Lesson 4

Working with Text and Tables

About this lesson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
About converting layout grids to tables . . . . . . . . . . . . . . . 156
Creating a new Web page . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

v

Adding text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Adding a table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Applying fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Capturing a table style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Editing text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Converting a layout grid to a table . . . . . . . . . . . . . . . . . . . . 190
Previewing in GoLive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Exploring on your own . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Review questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Review answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

Lesson 5

Creating Navigational Links

About this lesson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
About links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Opening a site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Creating a navigational link from a graphic . . . . . . . . . . . . 201
Testing a link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Creating anchors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Testing anchors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Creating hypertext links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Creating an action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Using image maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Setting preferences for link warnings . . . . . . . . . . . . . . . . . . 231
Finding and fixing broken links . . . . . . . . . . . . . . . . . . . . . . . 232
Previewing links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Review questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Review answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

Lesson 6

Using Smart Objects

About this lesson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
About Smart Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Using Smart Photoshop objects . . . . . . . . . . . . . . . . . . . . . . . 243
Using Smart Illustrator objects . . . . . . . . . . . . . . . . . . . . . . . . 253

Using Smart LiveMotion objects . . . . . . . . . . . . . . . . . . . . . . 254

CONTENTS

vi

Editing a variable in a Smart Photoshop image . . . . . . . . . 256
Review questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Review answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Lesson 7

Working with Frames

About this lesson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
About frame sets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Creating a frame set . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Making changes to the frame set . . . . . . . . . . . . . . . . . . . . . 270
Setting up the content frames . . . . . . . . . . . . . . . . . . . . . . . . 273
Adding content to frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Creating targeted links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Creating a return link to the home page . . . . . . . . . . . . . . . 278
Linking the frame set to your home page . . . . . . . . . . . . . . 280
Adding an action to always load the frame set . . . . . . . . . 281
Previewing in a Web browser . . . . . . . . . . . . . . . . . . . . . . . . . 283
Review questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Review answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

Lesson 8

Creating Rollovers

About this lesson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Opening the home page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Adding a floating box to hold a rollover button . . . . . . . . . 294
About naming rollovers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Creating a Smart rollover button . . . . . . . . . . . . . . . . . . . . . . 298
Adding an image to a floating box . . . . . . . . . . . . . . . . . . . . 301
Creating a drop-down menu . . . . . . . . . . . . . . . . . . . . . . . . . 302
Previewing in a Web browser . . . . . . . . . . . . . . . . . . . . . . . . . 310
Review questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Review answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311

vii

Lesson 9

Creating Animations

About this lesson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
Working with floating boxes . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Animating a floating box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Animating multiple floating boxes . . . . . . . . . . . . . . . . . . . . 334
Adding actions to animations . . . . . . . . . . . . . . . . . . . . . . . . 338
Creating a new scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Adding an action to play the scene . . . . . . . . . . . . . . . . . . . . 345
Previewing in a Web browser . . . . . . . . . . . . . . . . . . . . . . . . . 346

Exploring on your own . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Review questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Review answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

Lesson 10

Using Actions and JavaScript

About this lesson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Creating head actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Using actions to manipulate floating boxes . . . . . . . . . . . . 360
Creating actions on call . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
Assigning JavaScript scripts to page elements . . . . . . . . . . 376
Review questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Review answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380

Lesson 11

Creating Forms

About this lesson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
About forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Creating the Personal Information section of
the form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Storing frequently used objects . . . . . . . . . . . . . . . . . . . . . . . 402
Adding an image that spans two columns . . . . . . . . . . . . . 405
Adding radio buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
Modifying a list box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409

Adding a clickable image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411

CONTENTS

viii

Adding a Reset button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Changing the main table’s border and cell spacing . . . . . 414
Creating a tabbing chain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
Review questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Review answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

Lesson 12

Using Cascading Style Sheets

About this lesson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
About style sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
Exploring style sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Working with styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Creating a style sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441
Saving and linking a style sheet . . . . . . . . . . . . . . . . . . . . . . . 444
Linking and unlinking a style sheet to multiple pages . . . 446
Creating a class style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447
Importing an external style sheet . . . . . . . . . . . . . . . . . . . . . 449
Duplicating a style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450
Changing the background color . . . . . . . . . . . . . . . . . . . . . . 451
Previewing the results in current browsers . . . . . . . . . . . . . 453
Review questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455

Review answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455

Lesson 13

Combining Adobe LiveMotion Animations
with QuickTime Movies

About this lesson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460
Opening the composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
Setting up labels for behaviors . . . . . . . . . . . . . . . . . . . . . . . . 463
Adding behaviors to play movies . . . . . . . . . . . . . . . . . . . . . 467
Exporting the composition . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
Integrating the composition with QuickTime movies . . . 470
Adding special effects to QuickTime movies . . . . . . . . . . . 479
Review questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
Review answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489

ix

Lesson 14

Managing Web Sites

About this lesson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494
About Adobe GoLive Web site management . . . . . . . . . . . 494
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Importing an existing site into GoLive . . . . . . . . . . . . . . . . . 496
Exploring the site in the site window . . . . . . . . . . . . . . . . . . 499
Reviewing the expanded site window . . . . . . . . . . . . . . . . . 502

Correcting errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505
Managing folders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511
Adding new pages to your site . . . . . . . . . . . . . . . . . . . . . . . . 514
Solving the site hierarchy . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515
Changing the Navigation view . . . . . . . . . . . . . . . . . . . . . . . . 517
Creating new pages in the Navigation view . . . . . . . . . . . . 525
Changing all links and file references . . . . . . . . . . . . . . . . . . 529
Cleaning up a site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531
Exploring on your own . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532
Review questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533
Review answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533

Lesson 15

Creating Design Diagrams

About this lesson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538
About design diagrams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539
Looking at the first design diagram . . . . . . . . . . . . . . . . . . . 543
Creating a new design diagram . . . . . . . . . . . . . . . . . . . . . . . 544
Adding sections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548
Adding color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
Adding pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552
Adding objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 558
Adding a SWF animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
Aligning and distributing objects . . . . . . . . . . . . . . . . . . . . . 567
Adding annotations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569
Adding items to every page . . . . . . . . . . . . . . . . . . . . . . . . . . 571
Labeling the diagram levels . . . . . . . . . . . . . . . . . . . . . . . . . . 575

CONTENTS

x

Printing and exporting a design diagram . . . . . . . . . . . . . . 577
Anchoring a design diagram . . . . . . . . . . . . . . . . . . . . . . . . . . 578
Submitting a design diagram . . . . . . . . . . . . . . . . . . . . . . . . . 580
Review questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582
Review answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582

Index

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583
1
ADOBE GOLIVE 6.0
Classroom in a Book
Getting Started
We lcome to Adobe
®
GoLive
®
6.0—the complete solution for Web site design, develop-
ment, and management for novices and professionals alike. GoLive provides easy-to-use
site design tools, site-building tools, editors, and powerful site-management features
that help you develop professional-quality Web sites quickly and easily. Integrate your
Web design and development work seamlessly with other applications, including
Adobe Photoshop
®
, Adobe Illustrator

®
, and Adobe LiveMotion
®
. Create rollovers and
animations easily, and add Macromedia
®
Flash
™
(SWF) files and QuickTime movies to
your Web pages.
About Classroom in a Book
Adobe GoLive 6.0 Classroom in a Book
®
is part of the official training series for
Adobe graphics, Web, and publishing tools developed by experts at Adobe Systems. The
lessons are designed to let you learn at your own pace. If you’re new to Adobe GoLive,
you’ll learn the fundamental concepts and features that you’ll need to master the program.
If you’ve been using GoLive for a while, you’ll find Classroom in a Book teaches many
advanced features, including tips and techniques for using this exciting Web design tool.
The lessons in this edition include new information on the GoLive workflow, customizing
the work area, converting layout grids to tables, creating stationery, spell checking, using
variables with Smart Objects, adding date and time stamps, creating HTML styles, and
working with Smart rollovers. Additionally all lessons have been revised to incorporate
updated information on GoLive 6.0 commands and tools. The all-new Lesson 15,
“Creating Design Diagrams,” shows you how to use the powerful presentation and Web
site creation tool to lay out the structure or architecture of a site before you create pages.
You can develop multiple prototype design diagrams as you build and revise a site. You
can present design diagrams in print or online in Adobe PDF or SVG format for review.
When you are ready to work with real pages, you can convert the design diagram’s pages
to editable HTML pages in a site.

Although each lesson provides step-by-step instructions for creating a specific project,
there’s room for exploration and experimentation. You can follow the book from start to
finish, or do only the lessons that correspond to your interests and needs.
2
Getting Started
Prerequisites
Before using the Adobe GoLive 6.0 Classroom in a Book, you should have a working
knowledge of your computer and its operating system. Make sure that you know how to
use the mouse and standard menus and commands, and also how to open, save, and close
files. If you need to review these techniques, see the printed or online documentation
included with your Windows or Mac OS documentation.
Installing Adobe GoLive
Before you begin using the Adobe GoLive 6.0 Classroom in a Book, make sure that your
system is set up correctly and that you’ve installed the required software and hardware.
You must purchase the Adobe GoLive software separately. For system requirements and
complete instructions on installing the software, see the ReadMeFirst.pdf file on the appli-
cation CD.
Installing the Classroom in a Book fonts
To ensure that the lesson files appear on your system with the correct fonts, you may need
to install the Classroom in a Book font files. The fonts for the lessons are located in the
Fonts folder on the Adobe GoLive 6.0 Classroom in a Book CD. If you already have these
fonts on your system, you do not need to install them. If you have ATM
®
(Adobe Type
Manager
®
), see its documentation on how to install fonts. If you do not have ATM, install
it from the Classroom in a Book CD.
To install the Classroom in a Book fonts:
1

Insert the Adobe GoLive 6.0 Classroom in a Book CD into your CD-ROM drive.
2
Install the font files from the CD to your hard drive according to your operating system:
•
In Windows (other than Windows XP), open the AT M folder on the CD located in
Fonts\Win Fonts\CIB Font Installer\. Double-click the ATM installer, setup.exe, and follow
the on-screen instruction to install ATM and the fonts. Fonts install automatically when
you install ATM.
3
ADOBE GOLIVE 6.0
Classroom in a Book
•
In Windows XP, navigate to your Adobe common fonts folder, typically in C:\Program
Files\Common Files\Adobe\Fonts\on your hard drive. On the Adobe GoLive 6.0 Classroom
in a Book CD, open the Fonts\Win Fonts\CIB Font Installer\ATM\fonts\ folder. Choose
Edit > Select All to select all the fonts in the fonts folder. Drag the files from the fonts folder
to the C:\Program Files\Common Files\Adobe\Fonts\ folder on your hard drive. Do not use
ATM to install t he fonts.
•
In Mac OS (other than Mac OS X), from the desktop navigate to the folder on the CD
located in Fonts/Mac Fonts/CIB Font Installer/ATM® 4.6.1 + Fonts Installer/. Open the
folder ATM® 4.6.1 + Fonts Installer, double-click the ATM 4.6.1 + Fonts Installer appli-
cation, and follow the on-screen instructions.
•
In Mac OS X, open the Library/Fonts/ folder on your hard drive. On the Adobe GoLive
Classroom in a Book CD, navigate to the folder Fonts/Mac Fonts/CIB Font Installer/ATM®
4.6.1 + Fonts Installer/Fonts. Open the Fonts folder, and choose Edit > Select All. Drag the
fonts to the Library/Fonts/ folder on your hard drive. You can drag the grouped font files,
but you can't drag the entire Fonts folder to your hard drive.
You can also install the Classroom in a Book fonts by copying all of the files in the Fonts

folder on the Adobe GoLive 6.0 Classroom in a Book CD to the Program Files/Common
Files/Adobe/Fonts (Windows) or System Folder/Application Support/Adobe/Fonts
(Mac OS). If you install a Type 1, TrueType, OpenType, or CID font into these local Fonts
folders, the font appears in Adobe applications only.
Copying the Classroom in a Book files
The Classroom in a Book CD includes folders containing all the electronic files for the
lessons. Each lesson has its own folder, and you must copy the folders to your hard drive
to do the lessons. To save room on your drive, you can install only the necessary folder for
each lesson as you need it and remove it when you’re done.
To install the Classroom in a Book files:
1
Insert the Adobe GoLive 6.0 Classroom in a Book CD into your CD-ROM drive.
2
Create a folder named GL_CIB on your hard drive.
3
Copy the lessons that you want to the hard drive:
•
To copy all of the lessons, drag the Lessons folder from the CD into the GL_CIB folder.
•
To copy a single lesson, drag the individual lesson folder from the CD into the GL_CIB
folder.
If you are installing the files in Windows, you need to unlock them before using them. You
don’t need to unlock the files if you are installing them in Mac OS.
4
In Windows, unlock the files that you copied:
•
If you copied all of the lessons, double-click the unlock.bat file in the GL_CIB/Lessons
folder.
•
If you copied a single lesson, drag the unlock.bat file from the Lessons folder on the CD

into the GL_CIB folder. Then double-click the unlock.bat file in the GL_CIB folder.
Note: As you work through each lesson, you’ll overwrite the Start files. To restore the original
files, recopy the corresponding Lesson folder from the Classroom in a Book CD to the GL_CIB
folder on your hard drive.
Additional resources
The Adobe GoLive 6.0 Classroom in a Book is not meant to replace documentation that
comes with the program. Only the commands and options used in the lessons are
explained in this book. For comprehensive information about program features, refer
to these resources:
•
The Adobe GoLive 6.0 User Guide, included with the Adobe GoLive software. This guide
contains a complete description of all features.
•
Online Help, an online version of the User Guide. You can view the online Help by
choosing Help > GoLive Help.
•
Hints, which are brief, informative descriptions of icons on the toolbars, document
window, and Objects palette. Hints appear in the Hints palette, which also provides links
to related topics in the online Help. For more information, see “Using Hints” on page 90.
•
The Adobe Web site (www.adobe.com). You can view the Adobe Web site by choosing
Help > Adobe Online, if you have a connection to the World Wide Web.
5
ADOBE GOLIVE 6.0
Classroom in a Book
Adobe certification
The Adobe Training and Certification Programs are designed to help Adobe customers
improve and promote their product proficiency skills. The Adobe Certified Expert (ACE)
program is designed to recognize the high-level skills of expert users. Adobe Certified
Training Providers (ACTP) use only Adobe Certified Experts to teach Adobe software

classes. Available in either ACTP classrooms or on-site, the ACE program is the best way
to master Adobe products. For Adobe Certified Training Programs information, visit the
Partnering with Adobe Web site at .

1

Developing Web Sites with
Adobe GoLive 6.0

This lesson gives you an overview of the
Web site development process with Adobe
GoLive and introduces you to key features
of the application. During this lesson
you’ll create a simple Web site that
includes a home page and two linked
pages. The pages incorporate formatted
text, GIF images, rollovers, and a Quick-
Time movie. As you progress through the
other lessons in this book, you’ll look at
these tasks in more detail.

LESSON 1

10

Developing Web Sites with Adobe GoLive 6.0

About this lesson

In this lesson you’ll do the following:

•

Review the tasks involved in developing a Web site and Web pages using Adobe GoLive.

•

Create a new Web site using the GoLive Site Wizard.

•

Add folders and files to a site.

•

Import existing Web pages into a site and create a new page.

•

Add images and text to a Web page.

•

Create rollovers so objects on a page change as you move the mouse over them.

•

Create stationery.

•

Work with a table.

•

Add a QuickTime movie.

•

Add navigational links to text and images.

•

Preview Web pages in GoLive and in a Web browser.

•

Examine the relationship of the files you see in the site window with the organization
of files on your desktop.
This lesson takes approximately 90 minutes to complete. Although the lesson is long, it
provides an important overview of the site building process and an introduction to the
basic tools in GoLive that simplify and expedite this process. Most of the tasks introduced
in this lesson will be covered in more detail in subsequent lessons, so relax and enjoy
building your first Web site with GoLive. Don’t worry about memorizing the details of
each task; you’ll revisit them in later lessons.
If needed, copy the Lessons/Lesson01/ folder onto your hard drive. As you work on this
lesson, you’ll overwrite the start files. If you need to restore the start files, copy them from
the

Adobe GoLive 6.0 Classroom in a Book

CD.

Note:

Windows users need to unlock the lesson files before using them. For more information,
see “Copying the Classroom in a Book files” on page 3.

11

ADOBE GOLIVE 6.0

Classroom in a Book

The GoLive workflow

Creating a Web site that contains multiple pages is a complex task that is made much
simpler by the creation and management tools in GoLive. Before you begin, you can make
the task even easier by planning your Web site, thinking about your workflow, and under-
standing how GoLive can help you at each step of the way.
The following brief informational overview will help you understand how the different
GoLive tools relate to the process of building Web pages and Web sites, and the subse-
quent hands-on tasks will give you experience in building a simple Web site and adding
content to Web pages.

Before you begin

Before you begin building your Web site, it’s best to have a basic design or hierarchy in
mind. You can sketch out a plan using paper. You can use the GoLive site design diagram
feature that allows you to design both simple and complex sites, and when you are ready

to work with live pages, converts the pages to actual HTML pages in a site. If you already
have a site in GoLive or imported into GoLive, you can manually add pages to the site,
setting up the page hierarchy and links as you go, or you can add pages and move pages
around using the



Navigation view

.


For information on creating a design diagram, see Lesson 15, “Creating



Design



Diagrams.” For information on adding material to existing sites, see Lesson 3, “Designing
Web Pages” and Lesson 14, “Managing Web Sites.”

LESSON 1

12

Developing Web Sites with Adobe GoLive 6.0

Working in the site window

Whether you are working on a single Web page or a complex, multipage Web site, you
should always work in the GoLive site window. Although you can design and build Web
pages outside of the site window (using the File > New Page command to create a page
without creating a site), the site window is key to the building and management tools in
GoLive. If you work outside the site window, for example, GoLive will not automatically
check links and update them for you. Think of the site window as your desktop work area.

GoLive site window

You create a GoLive Web site using the New Site command. The GoLive Site Wizard
automatically opens the GoLive site window, creates a home page for your site, and sets
up folders to hold site resources and settings. Whether you create a blank site, import files
from an existing Web site, or use one of the GoLive site templates, the Site Wizard will
walk you through the process.
For more information on using the site window, see Lesson 2, “Getting to Know the
Work Area.”

13

ADOBE GOLIVE 6.0

Classroom in a Book

Working in a team or on your own

With GoLive 6, you have a powerful additional tool—the Adobe Web Workgroup Server.
If you’re working in a team environment, the Web Workgroup Server gives your entire
team access to a site and its files for a seamless interactive workflow. It lets team members
check out files, and prevents other team members from making changes until the files are

checked back in. And when files are checked back in, it automatically verifies and updates
any changed link references. Additionally, the Adobe Web Workgroup Server provides
version control. Each time a file is checked in, the Adobe Web Workgroup Server saves a
separate version of the file—you can compare source code in different versions and revert
to any version at any time.

Even if you aren’t working in a team environment, you can use the Adobe Web Workgroup
Server as a single user to take advantage of the version control features.

For information on setting up and using a workgroup site, see the

Adobe Web Workgroup
Server User Guide

.

Adding pages and page content

Once you have created a site with a home page (named index.html by default), you’ll
probably need to add more pages, images, and other media files. GoLive makes it easy—
simply drag existing files into the site window or use the Import command. If you need a
blank page, drag a Generic Page icon from the Site set of the Objects palette into the site
window or create a new page using the New Page command.
When you’re designing pages within a Web site, consider using reusable templates, statio-
neries, components, and library objects. These not only save you design and construction
time, but they add consistency to your design.

•

Templates are predesigned page layouts that you can use as the basis for new pages.

When you update a template, you automatically update all pages based on that template.

•

Stationery is similar to a template, except that pages based on stationery aren’t linked
to the source. In other words, if you update a stationery file, any pages you developed
based on that stationery won’t be updated.

LESSON 1

14

Developing Web Sites with Adobe GoLive 6.0

•

Components are HTML source files that you can add to a page as a single object. For
example, a navigation bar that contains buttons, images, and text can be saved as a
component and used on each page of a site to give a consistent look to pages. As with
templates, whenever you update a component, all the pages that use the component are
updated automatically.

•

Library objects, like components, are source files that you can add to a page as single
objects. Unlike components, library objects don’t remain linked to their source files
when they are added to a page. You collect library objects either in the Library tab in the
site window or in the Library set in the Objects palette. Library objects are not limited to
HTML—for example, you can drag snippet files (SSI files) from the site into the
Library tab.

GoLive keeps track of a variety of other reusable site assets, including external URLs,
e-mail addresses, and site colors. For more information on using reusable site objects, see
Lesson 3, “Designing Web Pages.”

Laying out Web pages

In GoLive, you can build simple or complex professional-quality Web pages without
writing any source code. You can lay out pages using layout grids, tables, floating boxes,
or frame sets by simply dragging these objects from the Objects palette into a Web page.
GoLive writes all the code for you.

•

Layout grids let you create table-based designs without having to deal with cells, rows
and columns in HTML tables. And when you’re finished, you can easily convert a layout
grid to a table that has less HTML code.

•

HTML tables are useful for positioning items on a page in much the same way as layout
grids, but tables are more challenging to use. Tables are also used whenever information
needs to be organized in columns or rows.

15

ADOBE GOLIVE 6.0

Classroom in a Book

•

Floating boxes, based on Dynamic Hypertext Markup Language (DHTML), allow you
to specify absolute positioning, overlap text and images, and add animations. Because you
can attach JavaScript actions to floating boxes, they are often used to show and hide infor-
mation based on mouse movements.

A.

Layout grid

B.

Floating box

C.

Table icons
in the Basic set of the Objects palette

You can also import Web pages created in other applications. For example, you can
include a sliced Adobe Photoshop image (.psd) in your site window. When you drag the
.psd file into your document window, GoLive converts the slices to Web-formatted images
(.gif or .jpeg) and creates an HTML table to hold those images in place on the Web page.
For more information on laying out pages, see Lesson 3, “Designing Web Pages.”

Designing pages in other applications

While you can create Web pages in GoLive, you can also use other applications, such as
Adobe Photoshop, Adobe ImageReady®, Adobe Illustrator, and Adobe LiveMotion to
create images for rollovers and graphics, and even to build entire Web pages.

•

To create a design that is mostly graphics, consider using Photoshop to create graphics
and lay out pages.

•

To create a design that is mostly HTML with some graphics, consider using Photoshop
to create graphics and GoLive to lay out the Web pages.
In GoLive 6.0 you can place non-optimized images (Photoshop and Illustrator files)
directly on a Web page and let GoLive automatically convert them into Web-formatted
graphics. See Lesson 6, “Using Smart Objects.”

•

To create images for complex rollovers and animations, consider using ImageReady.
A B C

LESSON 1

16

Developing Web Sites with Adobe GoLive 6.0

•

To create Macromedia Flash navigation elements, consider using LiveMotion for
authoring in the SWF file format. There are benefits—such as adding interactivity—to
creating navigational elements in LiveMotion even if the output is GIF or JPEG.

•

To create a page based on sliced images, consider using ImageReady or Photoshop
(ImageReady has more slicing options than Photoshop).

Working with text

You can type directly onto a Web page; you can type in a text box, a table cell, a floating
box; and you can paste or drag text onto a page from another application. You can apply
formatting—color, font, type size, and alignment, for example—to individual words or
blocks of text. You can format text into lists and indented paragraphs.
GoLive provides three ways for formatting text on your Web page:

•

You can apply HTML text attributes using the toolbar and the Type menu. The toolbar
includes attributes for headings, paragraphs, bold, italic, teletype, alignment, text size and
color, and numbered and bulleted lists. This is an easy way to apply formatting to small
chunks of text.

•

You can save HTML text attributes applied using the toolbar and Type menu in the
HTML Style palette, so that you can quickly and easily apply the same formatting to other
text on other pages. HTML Styles are not linked to the text, however, so changing a style
does not automatically update any text that the style has already been applied to.

•

You can use cascading style sheets (CSS) to obtain the greatest consistency and control
over text formatting and presentation. Cascading style sheets let you define text-
formatting attributes on a style sheet that instructs Web browsers to reuse these attributes
whenever text refers to them. Because the code is written once as an internal style sheet
or as an external style sheet, CSS also saves download time. When you change a style in a
cascading style sheet, all pages containing text that refers to the style are updated
automatically.

17

ADOBE GOLIVE 6.0

Classroom in a Book

Consider structuring text first with HTML elements so you can be sure that a page will
still look good in older browsers that don’t support CSS. Use the Paragraph Format pop-
up menu on the toolbar to add structure to text by applying HTML headings and other
structural elements. Then create a style sheet and use the CSS Selector Inspector to set up
tag selector styles that build upon the structure elements, adding color, fonts, and so on
to each style. Because different browsers support CSS attributes differently, it is important
to check your pages in various browsers. Remember also that users can turn off support
for cascading style sheets or override the styles of a page with their own CSS file.
Text formatted using HTML structure elements
A. Heading 1 B. Emphasis attribute for inline text C. Bulleted list
Adding interactivity to pages
You can add images, sound, movies, and animations to liven up Web pages.
• Rollovers and image maps are easy to create. Use an approved naming convention for
the image files, and after you link the first rollover image, GoLive automatically links the
remaining image files.
• Movies are easily added with the QuickTime movie editor included with GoLive.

• Place nonoptimized source files for images or animations directly on your pages using
Smart Objects, and GoLive converts the files into Web-formatted graphics. When you
resize or make other changes to the graphic on your page, GoLive uses the original source
file to generate a new Web-formatted version.
A
B
C