Sams Teach Yourself Adobe GoLive 6 in 24 Hours 0672323567, 9780672323560, 9780768659078

Citation preview

---

Jennifer Smith Lynn Grillo Adam Pratt

Teach Yourself

Adobe

®

GoLive 6 ™

in

24

Hours

800 East 96th St., Indianapolis, Indiana, 46240

Sams Teach Yourself Adobe GoLive 6 in 24 Hours Copyright © 2002 by Sams Publishing All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions. Neither is any liability assumed for damages resulting from the use of the information contained herein. International Standard Book Number: 0-672-32356-7 Library of Congress Catalog Card Number: 2002100938 Printed in the United States of America

03 02

4

3

Jennifer Kost-Barker

DEVELOPMENT EDITOR Jonathan Steever

MANAGING EDITOR Charlotte Clapp

PROJECT EDITOR Carol Bowers

PRODUCTION EDITOR Chip Gardner

INDEXER Eric Schroeder

PROOFREADER Jessica McCarty

TECHNICAL EDITOR

First Printing: March 2002 04

ACQUISITIONS EDITOR

Steve Moniz 2

1

Trademarks

TEAM COORDINATOR Amy Patton

All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark.

INTERIOR DESIGN

Warning and Disclaimer

PRODUCTION

Every effort has been made to make this book as complete and as accurate as possible, but no warranty or fitness is implied. The information provided is on an “as is” basis. The authors and the publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book.

Gary Adair

COVER DESIGN Aren Howell Mark Walchle

Contents at a Glance Introduction

Part I Getting Started with GoLive Hour 1

Understanding the GoLive Interface

1

5 7

2

Creating a Site File

25

3

Creating a Web Page

49

Part II Designing a Home Page Hour 4

73

Formatting and Stylizing Text

75

5

Using Graphics on a Web Page

103

6

Designing Pages with Tables

129

7

Designing Pages with the Layout Grid

155

8

Designing Pages with Floating Boxes

175

Part III Building a Web Site Hour 9 10 11

Using GoLive’s Site Management Tools

193

Using Components, Stationeries, Library Snippets, and Page Templates

213

Designing Pages with Frames

233

Part IV Adding Interactivity to a Web Page Hour 12

191

253

Designing Forms for User Feedback

255

13

Using JavaScript Actions

273

14

Creating DHTML Animations

295

15

Using Plug-ins and Multimedia Content

317

Part V Using Advanced Features Hour 16

333

Using the QuickTime Editor

335

Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects

359

18

Formatting Text with Cascading Style Sheets

377

19

Controlling How GoLive Writes HTML

401

20

Creating a Site Diagram

419

17

Part VI Publishing and Maintaining Your Web Sites Hour 21

439

Working with Source Code in GoLive

441

22

Cleaning Up Your Web Site

465

23

Uploading Your Web Site to Your Web Server with FTP

483

24

Making Your Web Site Search Engine Ready

501

Index

511

Contents Introduction

Part I Getting Started with GoLive 1 Understanding the GoLive Interface

1

5 7

Exploring the GoLive Interface ..............................................................................8 The GoLive Workspace ..........................................................................................8 The Document Window......................................................................................9 The Objects Palette ..........................................................................................10 The Toolbar ......................................................................................................11 The Inspector ....................................................................................................12 The Site Window ..............................................................................................13 Customizing Palettes..............................................................................................14 Tear Off Tabs ....................................................................................................15 Docking Palettes ..............................................................................................15 Creating Your Own Workspace..............................................................................16 Menus ....................................................................................................................17 Keyboard Shortcuts ..........................................................................................17 Using Contextual Menus ......................................................................................18 Preferences, Modules, and Browsers ....................................................................19 Setting the General Preferences ......................................................................19 Turning Modules On and Off ..........................................................................21 Other Items You Will Need....................................................................................21 Plug-ins ............................................................................................................21 Summary ................................................................................................................22 Q&A ......................................................................................................................22 Quiz........................................................................................................................23 Quiz Answers ........................................................................................................23 Exercises ................................................................................................................23 2 Creating a Site File

25

Single- and Multiple-User Web Sites ....................................................................26 Understanding How GoLive Manages Web Sites ................................................27 Creating a Web Site from Scratch ........................................................................28 Creating a Web Site from an Existing Folder........................................................30 Creating a Web Site by Importing from a Server..................................................31 Downloading a Site from an HTTP Server ..........................................................34 Creating a Web Site from a Site Template ............................................................36

vi

Sams Teach Yourself Adobe GoLive 6 in 24 Hours

Examining Basic Site Window Functionality........................................................37 Using the Site Window ....................................................................................38 Adding Resources to Your Web Site......................................................................40 Adding Files from the Site Menu ....................................................................41 Drag and Drop into the Site Window ..............................................................42 Copy Files and Refresh View ..........................................................................43 Managing Your Web Site in the Site Window ......................................................44 Move Files and Folders in the Site Window ....................................................44 Rearrange Files and Folders with GoLive’s Site Window ..............................44 Add New Files and Folders ..............................................................................45 Delete Files and Folders ..................................................................................45 Rename Files and Folders ................................................................................46 Summary ................................................................................................................46 Q&A ......................................................................................................................47 Quiz........................................................................................................................47 Quiz Answers ........................................................................................................48 Exercises ................................................................................................................48 3 Creating a Web Page

49

Understanding the Fundamentals of HTML..........................................................50 HTML Tags ......................................................................................................50 Attributes ..........................................................................................................50 Values................................................................................................................51 Making a New Page ..............................................................................................53 The Document Window and Its Tabs ....................................................................55 Viewing the Source Code ......................................................................................56 Viewing a Page in Layout and Source Simultaneously ..................................57 Using the HEAD Pane ..........................................................................................59 Giving Your Page a Title ..................................................................................59 Using GoLive HEAD Tags ..............................................................................61 Setting the Width of Your Page..............................................................................62 Setting the link, alink, and vlink Colors................................................................64 Setting the Page Background Color ......................................................................65 Previewing Your Page ............................................................................................66 Previewing in GoLive ......................................................................................66 Previewing in Your Browser ............................................................................67 Summary ................................................................................................................69 Q&A ......................................................................................................................69 Quiz........................................................................................................................69 Quiz Answers ........................................................................................................70 Exercises ................................................................................................................71

Contents

Part II Designing a Home Page 4 Formatting and Stylizing Text

vii

73 75

Importing Text into Your Web Page ......................................................................76 Copying and Pasting Text ................................................................................76 Opening a Page Exported from a Word Processor ..........................................78 Dragging from a Text Document or Another HTML Page..............................79 Typing Directly onto Your Page ......................................................................80 Viewing Your Text with the View Palette ........................................................82 Formatting and Stylizing Text ..............................................................................83 Aligning Text ....................................................................................................83 Creating Headers ..............................................................................................84 Applying Bold, Italic, or Teletype Styles to Text ............................................85 Setting the Font Size ........................................................................................85 Changing Text Color ........................................................................................86 Creating Lists from Text ........................................................................................87 Adding Web Page Fonts ........................................................................................89 Using Font Sets ................................................................................................90 Creating Hyperlinks from Text ..............................................................................92 Creating an E-mail Link ..................................................................................92 Setting the Auto Add mailto Preference ........................................................92 Linking to Another Page Within Your Site ......................................................93 Linking to a Page Not in Your Site ..................................................................95 Using Anchors to Link to a Particular Spot on Your Page ..............................95 Spell Checking Your Document ............................................................................98 Summary ................................................................................................................99 Q&A ......................................................................................................................99 Quiz......................................................................................................................100 Quiz Answers ......................................................................................................101 Exercises ..............................................................................................................101 5 Using Graphics on a Web Page

103

Selecting the Proper Image Type ........................................................................104 Resolution Issues ................................................................................................104 Selecting the Proper Image Type ........................................................................106 Adding Images to the Site File ............................................................................109 Adding an Image to a Web Page ........................................................................111 Resizing an Image................................................................................................115 Aligning Images and Text....................................................................................116 Adding Space Around an Image ....................................................................118 Adding a Background Image to a Web Page ......................................................119 Drag and Drop Your Background Image........................................................121

viii

Sams Teach Yourself Adobe GoLive 6 in 24 Hours

Linking Images to Other Pages ..........................................................................122 Using Image Mapping ........................................................................................123 Summary ..............................................................................................................125 Q&A ....................................................................................................................125 Quiz......................................................................................................................126 Quiz Answers ......................................................................................................126 Exercises ............................................................................................................127 6 Designing Pages with Tables

129

Adding a Table to Your Web Page ......................................................................130 Adjusting the Basic Table Attributes ..................................................................131 Setting the Dimensions of Your Table............................................................132 Setting the Appearance of Your Table ............................................................133 Working with Cells ..............................................................................................135 Selecting Cells ................................................................................................135 Selecting Rows and Columns ........................................................................137 Adding Rows and Columns............................................................................137 Deleting Rows and Columns..........................................................................138 Spanning Cells................................................................................................139 Coloring Cells, Rows, and Columns ..............................................................140 Formatting Text in Cells, Rows, and Columns ..............................................141 Setting the Width and Height of Individual Cells ..........................................142 Using Table Styles ..........................................................................................143 Using Tables to Structure Your Web Page ..........................................................144 Example 1: Using Nesting Tables to Create a Design ..................................144 Example 2: Using a Layout Grid Inside a Table............................................146 Example 3: Using a One-Cell Table Inside Another Table ............................147 Example 4: Using Multiple Tables ................................................................148 Importing Text into Tables ..................................................................................150 Sorting Data in Tables ........................................................................................151 Summary ..............................................................................................................152 Q&A ....................................................................................................................152 Quiz......................................................................................................................153 Quiz Answers ......................................................................................................153 Exercise................................................................................................................154 7 Designing Pages with the Layout Grid

155

Adding a Layout Grid to Your Page ....................................................................156 Investigating a Grid..............................................................................................157 Adjusting the Basic Grid Attributes ....................................................................158 Adjusting the Gridlines ..................................................................................160 Aligning the Grid on the Page........................................................................162 Applying a Background Color to the Grid ....................................................162

Contents

ix

Adding Objects to the Grid..................................................................................163 Aligning Objects on the Layout Grid ..................................................................167 Using the Align Palette ..................................................................................167 Optimizing a Layout Grid....................................................................................170 Summary ..............................................................................................................171 Q&A ....................................................................................................................171 Quiz......................................................................................................................172 Quiz Answers ......................................................................................................173 Exercises ..............................................................................................................173 8 Designing Pages with Floating Boxes

175

Considering Web Browser Compatibility with Floating Boxes ..........................176 Adding and Adjusting Floating Boxes ................................................................177 Adding Floating Boxes to Your Web Page ....................................................178 Stacking Floating Boxes on Top of Each Other ............................................182 Adding Text and Graphics to a Floating Box......................................................183 Managing Floating Boxes with the Floating Boxes Palette ................................185 Locking and Unlocking Floating Boxes ........................................................185 Hiding and Showing Floating Boxes ............................................................186 Converting Floating Boxes to a Layout Grid ......................................................186 Summary ..............................................................................................................187 Q&A ....................................................................................................................188 Quiz......................................................................................................................188 Quiz Answers ......................................................................................................189 Exercises ..............................................................................................................189

Part III Building a Web Site 9 Using GoLive’s Site Management Tools

191 193

Managing Files in GoLive’s Site Window ..........................................................194 Managing Site Files........................................................................................194 File Organization ............................................................................................197 Adding Files to a Site File..............................................................................198 External Tab: Using E-mail Addresses in Your Web Site....................................198 Linking an Image or Text to an E-mail Address ............................................198 Managing E-mail Addresses ..........................................................................199 Adding Addresses Directly to the External Tab ............................................199 Managing and Checking External Links in Your Web Site ................................200 Eliminating Unreferenced E-mail Addresses and External URLs ................201 Checking External Links ................................................................................202 Using the Site Tab ..........................................................................................202 Changing References......................................................................................202

x

Sams Teach Yourself Adobe GoLive 6 in 24 Hours

Organize and Keep Track of Used Colors in Your Site ......................................204 Finding Used Colors in a Site ........................................................................204 Adding Colors to a Site ..................................................................................205 Applying Site Colors to Your GoLive Page ..................................................206 Keeping Track of Used Font Sets in Your Site....................................................206 Summary ..............................................................................................................209 Q&A ....................................................................................................................209 Quiz......................................................................................................................209 Quiz Answers ......................................................................................................210 Exercises ..............................................................................................................210 10 Using Components, Stationeries, Library Snippets, and Page Templates

213

Comparing Stationeries, Components, Libraries, and Page Templates ..............214 Before We Start: Site Extras ................................................................................215 Creating and Applying Stationeries as Template Files........................................217 Creating and Applying Components as Dynamic Page Elements ......................220 Storing and Reusing Site Library Snippets ........................................................224 Using the Library Button on the Objects Palette ................................................226 Using Templates ..................................................................................................227 Applying the Template ..................................................................................229 Summary ..............................................................................................................231 Q&A ....................................................................................................................231 Quiz......................................................................................................................231 Quiz Answers ......................................................................................................232 Exercises ..............................................................................................................232 11 Designing Pages with Frames

233

Creating Frame Sets ............................................................................................234 Editing Basic Frame Set Attributes ....................................................................235 Assign Pages to the Frames in Your Frame Set ..................................................237 Targeting Pages from Within Your Site ..............................................................241 Targeting Links to Pages Outside Your Site ........................................................244 Targeting Two Frames with One Link ................................................................246 Using Base URL ............................................................................................247 Summary ..............................................................................................................248 Q&A ....................................................................................................................249 Quiz......................................................................................................................249 Quiz Answers ......................................................................................................250 Exercises ..............................................................................................................250

Contents

Part IV Adding Interactivity to a Web Page 12 Designing Forms for User Feedback

xi

253 255

Understanding How Forms Work ........................................................................256 Starting with a Form Container ..........................................................................257 Creating a Table for a Form ................................................................................257 Adding Text Entry Fields to a Form....................................................................259 Adding Radio Buttons and Check Boxes to Your Form......................................261 Adding Radio Buttons ....................................................................................261 Adding Check Boxes......................................................................................262 Adding Pop-Ups and List Boxes to Your Form ..................................................264 Adding a Large Text Area for Comments ..........................................................265 Adding a Submit and Reset Button to a Form ....................................................266 Making Your Form E-mail You the Results ........................................................268 Summary ..............................................................................................................270 Q&A ....................................................................................................................270 Quiz......................................................................................................................270 Quiz Answers ......................................................................................................271 Exercises ..............................................................................................................271 13 Using JavaScript Actions

273

Using Objects from the Smart Section ................................................................274 Setting Up and Using the Modified Date Object ..........................................274 Setting Up an Image Rollover........................................................................275 Adding a Link to a Rollover ..........................................................................277 Adding a URL Pop-Up ..................................................................................278 Using Actions ......................................................................................................281 Adding an Open Window Action ..................................................................281 Adding a Close Window Action to Your Page ..............................................286 Adding a Set Image URL Action ..................................................................287 Locating and Installing GoLive Actions..............................................................290 Summary ..............................................................................................................291 Q&A ....................................................................................................................291 Quiz......................................................................................................................292 Quiz Answers ......................................................................................................293 Exercises ..............................................................................................................293 14 Creating DHTML Animations

295

What Is DHTML?................................................................................................296 Recording a Simple DHTML Animation ............................................................296 Using the Timeline Editor to Edit Your Animation ............................................300

xii

Sams Teach Yourself Adobe GoLive 6 in 24 Hours

Using Actions in Your Timeline ..........................................................................302 Animating Multiple Floating Boxes ....................................................................304 Triggering a Scene to Play ............................................................................311 Summary ..............................................................................................................313 Q&A ....................................................................................................................313 Quiz......................................................................................................................314 Quiz Answers ......................................................................................................315 Exercises ..............................................................................................................315 15 Using Plug-ins and Multimedia Content

317

Deciding Whether Plug-in Technology Is Appropriate for Your Web Site ........318 How to Set Up GoLive to Preview Your Plug-in Content ..................................319 Adding a QuickTime Movie to Your Web Page ..................................................320 Adding Flash Content to Your Web Page ............................................................322 Adding RealVideo Content to Your Web Page ....................................................324 Adding SVG Content to Your Web Page ............................................................327 Adding Generic Plug-in Content to Your Web Page ..........................................328 Summary ..............................................................................................................329 Q&A ....................................................................................................................329 Quiz......................................................................................................................329 Quiz Answers ......................................................................................................330 Exercises ..............................................................................................................331

Part V Using Advanced Features 16 Using the QuickTime Editor

333 335

Making Sure That Your Computer Is Ready for QuickTime ..............................336 Understanding the QuickTime Editor Interface ..................................................337 The Timeline Defined ....................................................................................339 About Tracks ..................................................................................................339 Adding Additional Sound and Video Tracks to Your QuickTime Movie............342 Adding Sound to a Movie ..............................................................................343 Making Adjustments to the Tracks on the Timeline............................................344 Naming a Track ..............................................................................................344 Adjusting the Start Time ................................................................................344 Adjusting the Duration Time..........................................................................344 Working with Sample Tracks ........................................................................345 Saving and Exporting Movie Files for the Web ..................................................348 Flattening a Movie..........................................................................................348 Exporting a Movie for the Web......................................................................348 Settings ..........................................................................................................349 Filter................................................................................................................352 Size ................................................................................................................353 Sound Settings ................................................................................................354

Contents

xiii

Compressing Music for the Web ....................................................................354 Compressing Sound Used for Narration ........................................................355 Summary ..............................................................................................................356 Q&A ....................................................................................................................356 Quiz......................................................................................................................357 Quiz Answers ......................................................................................................357 Exercises ..............................................................................................................357 17 Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects

359

Using the Photoshop/ImageReady Smart Objects ..............................................361 Using Smart Illustrator Objects ..........................................................................365 Using the Smart LiveMotion Objects ..................................................................369 Setting the Export Format in LiveMotion ......................................................369 Opening Files in Their Native Application ....................................................370 Using Variables in Smart Objects ..................................................................370 Using Text To Banner ....................................................................................372 Using the Generic Smart Image ....................................................................373 Summary ..............................................................................................................374 Q&A ....................................................................................................................374 Quiz......................................................................................................................375 Quiz Answers ......................................................................................................375 Exercises ..............................................................................................................375 18 Formatting Text with Cascading Style Sheets

377

Creating Style Sheets in GoLive ........................................................................378 Types of Style Sheet Selectors ............................................................................378 Element Selectors ..........................................................................................378 Using Classes for Style Sheets ......................................................................380 Creating an ID Tag ........................................................................................382 Defining Fonts with Style Sheets ........................................................................384 Defining Text Attributes with Style Sheets ........................................................385 Adjusting Margins in Style Sheets ................................................................388 Applying Style Sheets to Existing Pages ............................................................389 Working with External Style Sheets in Sites ................................................390 Avoiding Web Browser Incompatibilities with Style Sheets ..............................392 Using Netscape CSS Fix......................................................................................395 External Style Sheet Priority ..............................................................................395 Summary ..............................................................................................................397 Q&A ....................................................................................................................397 Quiz......................................................................................................................398 Answers................................................................................................................398 Exercises ..............................................................................................................398

xiv

Sams Teach Yourself Adobe GoLive 6 in 24 Hours

19 Controlling How GoLive Writes HTML

401

Understanding the Web Settings Window ..........................................................402 The Global Tab ..............................................................................................402 The Markup Tab ............................................................................................402 The Browser Profiles Tab ..............................................................................403 Setting General HTML Preferences ....................................................................404 Using the Global Tab ..........................................................................................405 Indent With ....................................................................................................405 Line Break Character......................................................................................406 Tag Case ........................................................................................................406 Attribute Case ................................................................................................406 Quote Attribute Values....................................................................................407 Color Name Translation ................................................................................407 CSS-Default Unit............................................................................................407 CSS Output ....................................................................................................408 Changing Default Attributes of Elements with the Markup Tab ........................408 Changing the Default Image Settings ............................................................411 Adjusting How GoLive Previews with the Browser Profiles Tab ......................412 Summary ..............................................................................................................415 Q&A ....................................................................................................................416 Quiz......................................................................................................................416 Quiz Answers......................................................................................................416 Exercises ..............................................................................................................417 20 Creating a Site Diagram

419

Creating a Site Diagram ......................................................................................420 The Design Tabs ............................................................................................421 Anchoring a Site ............................................................................................422 Creating Sections, Pages, and Groups ................................................................423 Starting the Diagram ......................................................................................424 Grouping Pages ..............................................................................................426 Annotating the Diagram ......................................................................................427 The Annotation View......................................................................................430 Adding Content to the Pages ..............................................................................430 Merging the Site Diagram with Your Existing Site ............................................431 The Staging Tools ..........................................................................................431 Checking the Site Diagram ............................................................................432 Fixing Errors in a Site Diagram ....................................................................432 Submitting a Diagram to a Site ......................................................................433 Recalling a Diagram from a Site....................................................................433 Creating a Collection ..........................................................................................434 Using the Master Tab ..........................................................................................435 Summary ..............................................................................................................436 Q&A ....................................................................................................................436

Contents

xv

Quiz......................................................................................................................437 Quiz Answers ......................................................................................................437 Exercises ..............................................................................................................437

Part VI Publishing and Maintaining Your Web Sites

439

21 Working with Source Code in GoLive

441

Editing HTML in the Source Editor....................................................................442 Using the HTML Outline Editor to Change Source Code ..................................446 Using the Split Layout and Source View ............................................................450 Using the Markup Tree ........................................................................................451 Using the Source Code Palette ............................................................................451 Finding Code with the Element Finder ..............................................................453 The Element Finder Defined ..........................................................................454 Using Source Preferences to Change the Appearance of Source Code ..............458 The Basic Source Preferences ........................................................................458 Changing the Browser Compatibility Selections ..........................................459 Font Preferences for the HTML Source Editor..............................................459 Colors—Setting the Preference for Syntax Highlighting ..............................460 Changing the Color Preferences ....................................................................461 Printing the Source Code ....................................................................................461 Summary ..............................................................................................................462 Q&A ....................................................................................................................462 Quiz......................................................................................................................463 Quiz Answers ......................................................................................................463 Exercises ..............................................................................................................463 22 Cleaning Up Your Web Site

465

Finding Errors and Link Warnings ......................................................................466 Filtering Bugs ......................................................................................................467 Fixing Errors ........................................................................................................468 Viewing Missing Files....................................................................................469 Reviewing Orphaned Files ............................................................................470 Editing Your Site with the In & Out Links Palette..............................................471 Using the Change References Feature ................................................................473 Using Find & Replace ........................................................................................474 Using Find Within a File ................................................................................475 Using Additional Find Options ......................................................................475 Using Find & Replace Within a File..............................................................475 Using Find Within an Entire Site ..................................................................476 Using Find & Replace Within an Entire Site ................................................478 Cleaning Up Your Site with the Clean Up Site Function ....................................478 Adding Used Items ........................................................................................479 Removing Unused Items ................................................................................479 Default Settings ..............................................................................................480

Summary ..............................................................................................................480 Q&A ....................................................................................................................481 Quiz......................................................................................................................481 Quiz Answers ......................................................................................................482 Exercises ..............................................................................................................482 23 Uploading Your Web Site to Your Web Server with FTP

483

Acquiring a Domain Name..................................................................................484 Finding a Web Hosting Provider ........................................................................484 Understanding How FTP Works..........................................................................485 Entering Your FTP Preferences ..........................................................................486 Setting Your FTP Upload Preferences ................................................................488 Uploading Your Web Site to Your Web Server ....................................................490 Maintaining Your Web Site with GoLive’s FTP Features ..................................491 Using the Incremental Upload Command......................................................492 Using the Upload Modified Items Command ................................................492 Using the Upload Selection Command ..........................................................492 Using the Upload All Command ....................................................................492 Uploading New Files to Your Web Server ....................................................493 Using GoLive’s Standalone FTP Browser ..........................................................494 Troubleshooting Network Problems with the Network Status Window ............496 Summary ..............................................................................................................497 Q&A ....................................................................................................................497 Quiz......................................................................................................................498 Quiz Answers ......................................................................................................498 Exercises ..............................................................................................................499 24 Making Your Web Site Search Engine Ready

501

Understanding What Common Search Engines Are Looking For ......................502 Behind the Scenes ..........................................................................................502 Create a Sensible Title ........................................................................................502 Adding Appropriate Keyword Meta Tags to Your Pages ....................................503 Selecting Keywords ........................................................................................503 Creating a Clear Description for Your Page ........................................................506 Avoiding Common Errors....................................................................................507 Promoting Your Web Site to the Search Engines ................................................507 Making Your Web Site Known to Directories ....................................................508 Summary ..............................................................................................................508 Q&A ....................................................................................................................508 Quiz......................................................................................................................509 Quiz Answers ......................................................................................................509 Exercises ..............................................................................................................509 Index

511

Foreword The latest and best release of GoLive owes a large debt to the tireless efforts of Adam Pratt, Lynn Grillo, and Jennifer Smith. Each has been a leader in the GoLive community, and all have contributed invaluable product feedback. Lynn Grillo and Adam Pratt have been members of the GoLive Advisory Council for several years and have created GoLive tutorials for Adobe, and Jennifer Smith is an Adobe Certified Trainer who has also completed her Adobe Certified (ACE) qualifications. She is one of the preferred Adobe GoLive trainers and leads numerous training sessions while representing Adobe Systems. Their real-world experience with GoLive and their passion for sharing their broad knowledge of best practices for Web development will help you get the most out of your Web authoring. It’s always a pleasure to work with those who are dedicated, and Adam Pratt, Lynn Grillo, and Jennifer Smith are three of the most dedicated people I’ve worked with. I know you’ll find this book to be an excellent guide as you start authoring rich, dynamic Web or wireless content with Adobe GoLive 6. It is with great pleasure that I introduce Sams Teach Yourself GoLive 6 in 24 Hours. Diana C. Helander Sr. Product Marketing Manger, GoLive Adobe Systems Incorporated

About the Authors JENNIFER SMITH is founder of American Graphics Institute (www.graphicsinstitute.com). Her background as an Art Director and Designer, combined with experience in HTML coding, offers a unique combination that translates the tools in GoLive to terms that can be understood. Jennifer consults major companies on products that range from page layout to Web graphics editing applications. She presents regularly at seminars and conferences on how to effectively create Web pages. LYNN GRILLO is a Web Community Specialist for Adobe Systems. Prior to that she was a principal of Amenco, (http://www.amenco.com), a Web development company in New Jersey. At Amenco, she oversaw all aspects of Web site creation, from concept and planning to deployment and launch. She was instrumental in founding The XXII Group (http://www.XXII.com), a small international consortium of Internet professionals, and today remains the presiding member. Lynn is the proud mother of a beautiful little boy, Niccolo. ADAM PRATT is an Application Engineer for Adobe Systems, where he works with Web products such as Adobe GoLive, Adobe LiveMotion, and Adobe Photoshop. He is also a principal of Exotype, Inc., a Chicago-based Web design, development, and hosting company. He has also been using GoLive since version 1.0 and has a wealth of experience in using, training, and supporting this powerful software.

Dedication Jennifer Smith This book is dedicated to my father, Joseph J. Kelly, who raised six children and taught me the value of hard work and appreciation of everything in life. I thank him and love him dearly for passing on to me his humor and intelligence. Also to my mother, Mary A. Kelly, who always had faith that I would make something of myself, and for passing on to me her creativity. See Mom and Dad—I can have an Art degree AND make a living! Lynn Grillo Dedicated to Joe and Nicco. Special thanks to the whole Sams crew. Adam Pratt To my wife, Cindy, for her unfailing support and enduring patience.

Acknowledgments To my whole family, Chris Smith (Author of Sams Teach Yourself Acrobat), Kelly, my lovely daughter, Alex, my always-happy son, and my bundle of joy, baby Grant. Without their sacrifices and helping with laundry, my words would never have made it on paper. Thanks to Jon Steever. You are always right (almost) and I greatly appreciate your input. (He is checking even this copy to make sure that it is right!) Chip Gardner, your input was greatly appreciated as well, but since Jon is a fellow Pennsylvanian, he gets listed first. For anyone on the Alpha List for GoLive 6, thanks for the great resource of answers to very intense questions. I feel that together we brought Adobe GoLive into being an even more superior Web editor. A very special thanks to editor Jennifer Kost-Barker. New mom (we had babies days away from each other) and busy person, who was ever-so-patient, even beyond deadlines. If it wasn’t for your cheery attitude and gentle persuasion I might not have been able to complete this project. Keep the ever-positive attitude! Thanks to the perfect (wow, perfect?) Technical Editor Steve Moniz, author of many Dreamweaver books. Who better to evaluate and check my work and add input? See, GoLive IS better. Thanks for a job well done.

Tell Us What You Think! As the reader of this book, you are our most important critic and commentator. We value your opinion and want to know what we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way. You can e-mail or write me directly to let me know what you did or didn’t like about this book—as well as what we can do to make our books stronger. Please note that I cannot help you with technical problems related to the topic of this book, and that due to the high volume of mail I receive, I might not be able to reply to every message. When you write, please be sure to include this book’s title and author as well as your name and phone number or e-mail address. I will carefully review your comments and share them with the author and editors who worked on the book. E-mail: Mail:

[email protected]

Mark Taber Associate Publisher Sams Publishing 800 East 96th Street Indianapolis, IN 46240 USA

Introduction Coming from a print and design background the transition into Web page creation for me was both exciting and difficult at the same time. I guarantee you will love the interactivity and the speed in which you can respond to new marketing needs and corrections on the Web. Now with the advances in Adobe GoLive 6, you can have a practically seamless transition into the Web world. Whether you come from a coding or a design background, GoLive 6 satisfies all needs and all levels of expertise. You might think it’s unrealistic to learn such complex software in a single day, but Sams Teach Yourself Adobe GoLive 6 in 24 Hours will teach you about the most important features of the software in 24 easy one-hour lessons. For the sake of comprehension, we recommend reading only one or two chapters per day and spending some time using and reviewing the skills you acquire before moving on.

What This Book Assumes This book is intended for everyone from beginners who have never created a Web page, to intermediate users who have experience in designing Web sites but have never before used GoLive. We do assume that you are comfortable using a computer, opening and saving files, and that you are familiar with the basic ideas of building Web pages, such as Web graphics and hyperlinks. It’s easy to learn Adobe GoLive 6 because each hour-long lesson is full of step-by-step instructions, screenshots, tips, and tricks.

How This Book Is Organized Part I, “Getting Started with GoLive” (Hours 1–3) The first three lessons will familiarize you with the GoLive work environment, creating new Web sites, and creating new Web pages. You’ll also learn how to change your preferences and enable GoLive modules for maximum productivity.

Part II, “Designing a Home Page” (Hours 4–8) These five hours will teach you how to use the fundamental building blocks of any Web page: text, graphics, tables, layout grids, and floating boxes. These basic page-building skills will be the basis of all Web-page designs you do in the future.

2

Sams Teach Yourself Adobe GoLive 6 in 24 Hours

Part III, “Building a Web Site” (Hours 9–11) By now, you will have learned how to build individual Web pages. These three chapters will teach you how to combine those Web pages into Web sites. You’ll learn how to use GoLive’s site management tools, make your designs consistent and efficient, and use HTML frames for site navigation.

Part IV, “Adding Interactivity to a Web Site” (Hours 12–15) These four hours explain how to add more exciting and interactive content to your Web pages. You’ll learn how to design forms, use JavaScript actions, and create amazing DHTML animations. You’ll also learn how to place multimedia plug-in content on a Web page.

Part V, “Using Advanced Features” (Hours 16–20) Part V covers some of the advanced features of GoLive 6 including the QuickTime Editor, Smart Object integration with Adobe Photoshop, Adobe ImageReady, Adobe Illustrator, and Adobe LiveMotion. You’ll also learn about site mapping with the site diagrams, Cascading Style Sheets, and controlling HTML source code. These lessons will teach you to be more productive and give you more control over your Web sites.

Part VI, “Publishing and Maintaining Your Web Sites” (Hours 21–24) The last four hours of the book will teach you how to prepare your Web site for public release. You’ll learn how to clean up your site, upload to your Web server with FTP, and promote your site to search engines.

Conventions Used in This Book This book uses the following conventions: Text that you type or see onscreen appears in monospace.

A Note presents interesting information related to the discussion.

Introduction

A Tip offers advice or shows you an easier way to do something.

A Caution alerts you to a possible problem and gives you advice on how to avoid it.

What’s on the Web Site? On the Web site, you will find downloadable, compressed archives containing the files that are occasionally called for to complete certain exercises in this book. All files are organized by hour numbers for ease in locating them. You’ll also find necessary book updates and some helpful links on our Web site. To get to the Web site, point your Web browser to http://www.golivein24.com/.

3

PART I Getting Started with GoLive Hour 1 Understanding the GoLive Interface 2 Creating a Site File 3 Creating a Web Page

HOUR

1

Understanding the GoLive Interface Get ready to make the leap into Web publishing! For both the newcomer and the professional Web developer alike, Adobe GoLive 6 is the most powerful, yet easy-to-use tool available. This hour is dedicated to getting you started with the program. We begin by exploring the GoLive interface and then discuss the GoLive workflow and how to adjust the application to accommodate your specific needs. Then we plunge you into Hour 2, “Creating a Site File,” where you’ll start creating a Web site. In this hour, you • Get familiar with the GoLive windows and palettes • Learn how to customize GoLive to your liking • Discover the menus and keyboard shortcuts • Learn to use contextual menus • Learn how to set some basic preferences • Learn how to turn on and off modules • Determine what other items you’ll need, such as plug-ins and QuickTime

8

Hour 1

Exploring the GoLive Interface What is an interface? The interface is the collection of buttons, tools, and menus that you see and use in a software application such as Adobe GoLive 6. GoLive’s specific type of interface is called a Graphic User Interface (GUI), meaning it is based on visuals, such as icons, rather than text. GoLive’s interface makes use of a number of tabbed floating palettes with which users of other Adobe products will already be familiar. Although GoLive is flexible enough to enable you to work in several different ways, many users choose it for its easy-to-use Layout mode. In Layout mode, you type onto the page, add images and multimedia, and then move things around the page until it looks the way you want it to. That’s called WYSIWYG authoring (pronounced whizzy-wig), which stands for “What You See Is What You Get.” Meanwhile, with every move you make, GoLive writes the HTML behind the scenes for you. HTML stands for Hypertext Markup Language, the set of instructions used by Web pages that tells a browser how to display the contents of the page.

The GoLive Workspace Working efficiently in GoLive is dependent on utilizing its many windows and palettes in a logical way. The first thing you should do is to take a look at the default workspace and become familiar with the function of each of the various tools at your disposal. Even though you can set up your own workspace the GoLive engineers laid out the program in a sensible way, so the default setup is one that users often stick with. When GoLive 6 is launched, a window, shown in Figure 1.1, appears. This offers you the opportunity to start a new page, new site, or to open an existing HTML document. For our purposes we will uncheck the box, show this screen at startup, and then click New Page. When you open GoLive every time thereafter, this is what you’ll see (as shown in Figure 1.2).

GoLive for Windows works best with the application window maximized. This expands the main window to the full width of the screen, enabling you to move the windows and palettes within it around more easily. To maximize the application window, double-click its title bar.

Understanding the GoLive Interface

9

FIGURE 1.1 As an aid to new users, a window will appear in GoLive each time it is launched. It can be changed to not appear by unchecking Show This Screen at Startup box.

1

The Toolbar

The Document window

The Objects palette

FIGURE 1.2 The default GoLive workspace consists of the Toolbar, a Document window, and several palettes, including the Objects palette and Inspector palette.

The Site window

The Inspector palette

The Document Window The Document window is what becomes a Web page. You create a new page by choosing File, New from the menu, or by pressing Command+N (Mac) or Control+N (Windows). Hour 3, “Creating a Web Page,” is completely devoted to the use of the Document window.

10

Hour 1

It is important for you to begin to note the routine you find yourself repeating time and again. You select an object (represented by an icon) from the Objects palette, place it onto your page (the Document window), and then configure it using the Inspector palette. This process will become clearer to you as you proceed with the lessons in this book.

The Objects Palette To open the Objects palette, select Window, Objects from the menu or press Control+2 (Windows) or Command+2 (Mac) (see Figure 1.3). FIGURE 1.3 Clicking the buttons across the top of the Objects palette reveals the icons that represent objects you will use to build your Web page.

The Objects palette is grouped together with the Color palette, which is explained later in this book. For now, let’s look at the 11 buttons that comprise the Objects palette. Each button reveals a collection of icons. They are Basic, Smart, Forms, Head, Frames, Dynamic Content, Site, Site Extras, Diagram, WML, and Library. To see the label of any button, simply rest your cursor on top of the button, and the label will appear (see Figure 1.4). FIGURE 1.4 To determine the name of a tab, simply rest your cursor on the button and the name will pop up.

Because of limitations on the size of the Objects palette, you might not be able to see all the tabs available. If this is the case arrows appear to the left or right of the tabs, as shown in Figure 1.5. Simply click the arrow to slide the tabs back and forth as needed. In each section you will find a complete set of icons, each of which performs a separate function. Resting your arrow cursor on top of an icon reveals its name in the bottom-left corner of the palette. To use an icon, drag and drop it onto your page, or double-click the icon to insert the associated object at the location of your cursor.

Understanding the GoLive Interface

FIGURE 1.5 If you do not see all the Object buttons, you can click the arrows to slide them to the left or right as needed.

The Objects palette, like all palettes in GoLive, employs a palette menu that is revealed by clicking the small, right-facing arrow at its top-right corner. The palette menu lists all the sections in the palette, enabling you to choose one by selecting it from the list, and often offers additional options as well (see Figure 1.6). FIGURE 1.6 GoLive palettes employ what Adobe calls a palette menu, accessible by clicking the right-facing arrow at the top right of the palette title bar.

For those users who are more advanced in coding, note that in the fly-out menu there are options available that enable you to configure the icons that appear in the palette (see Figure 1.7). In other words, if you switch configurations you might see some inappropriate icons disappear. If you are not familiar with the different configurations, stay with the GoLive configuration.

The Toolbar The context-sensitive Toolbar enables you to perform dozens of functions easily. If you are working on text, the Toolbar gives you a set of text tools to use. The most commonly performed functions for the tasks at hand are placed in the Toolbar. Figure 1.8 shows several of the faces of the GoLive Toolbar, and the practical usage of the Toolbar will be explained in detail later in this book.

11

1

12

Hour 1

FIGURE 1.7 Advanced users can configure what objects appear in the palette.

The Text Toolbar

FIGURE 1.8 The different faces of the GoLive Toolbar.

The Site Window Toolbar

The Objects Toolbar

The Inspector One of the most important and powerful palettes in GoLive is the Inspector. This one little window enables you to set the attributes for a myriad of objects such as images, tables, and text. Like the Toolbar, the Inspector is context sensitive, and changes its content to reflect the task at hand. Therefore, if you are working on text, the Inspector becomes the Text Inspector. If you are working on an image, it becomes the Image Inspector, and so on (see Figure 1.9). When you place an object from the Objects palette onto your page, you will nearly always go next to the Inspector to structure the object exactly the way you want it. We will examine how to use the Inspector more deeply as we begin placing elements onto pages in Hours 3 through 8, “Designing Pages with Floating Boxes.”

Understanding the GoLive Interface

FIGURE 1.9 The Inspector is context sensitive, offering a set of attributes for the object you are working on.

1

The Site Window Consider the Site window your personal office assistant. It is split up into two vertical panes; one pane keeps track of the items in the Web site’s Root folder, the folder that houses your pages and images. The other pane chronicles the items in the site’s Data folder, such as the stationery and File Transfer Protocol (FTP) information. To differentiate between the two panes in this book, we refer to them as the Site pane and the Data pane. By default, when a new Site window is created, the Data pane is closed. To open the Data pane, click the right-and-left–facing icon at the bottom right of the Site window (see Figure 1.10). To close the Data pane, click the icon again. Data pane hidden

FIGURE 1.10 The double-facing arrow icon at the bottom-right corner of the Site window toggles the Data pane opened and closed.

13

The Data pane toggle

Data pane showing The Data pane toggle

14

Hour 1

To create a new Site File, choose File, New Site, and then select one of the following options: • Choose Single User or Workgroup. Unless you are working in a workgroup with many others, you would choose Single User. We will discuss Workgroup in Hour 2. • Choose Blank if you are starting a new Web site. • Choose Import from Folder if you want to bring a site that already exists into GoLive. • Choose Import from FTP Server if you want to download a site from a server. • Choose Copy from Template if you want to create a site based on a site template. Detailed instructions for completing these steps can be found in Hour 2.

Customizing Palettes There are a number of palettes in GoLive in addition to the Objects and Inspector palettes, some of which open by default when you first use the program. All the palettes can be opened by accessing the Window menu. The palettes are grouped together into logical units. GoLive makes use of Adobe’s patented tabbed palettes, affording users the ability to break apart grouped tabs into individual palettes, or to group other tabs together to form customized palettes. For example, by default, the Objects and the Color palettes are grouped together. To use one or the other, you simply click its tab, which brings it to the forefront (see Figure 1.11). FIGURE 1.11 Clicking a tab in a palette group brings that palette to the forefront.

Understanding the GoLive Interface

Tear Off Tabs If you would prefer, you can choose any tab in a grouped palette and drag it out of its group. A tab can be dragged into another palette group, or it can become a palette of its own (see Figure 1.12). Dragging the tab...

A customized palette is born

FIGURE 1.12 Drag a tab out of its palette group and into another to create a customized palette.

Docking Palettes With so many palettes, your screen can become pretty cluttered at times. GoLive gives you the option of docking your palettes so just the tab is visible on your screen. To dock a palette, click the tab of the palette and drag it to any side of your screen as shown in Figure 1.13. To undock the palette, drag the tab back out into the workspace. FIGURE 1.13 Dock palettes in the upper-right side of your screen to reduce clutter.

Docked objects and Inspector palettes

15

1

16

Hour 1

This shortcut is found on the Mac only: • Click the Collapse box in the upper right of any palette to close it into a thin bar. Click the Expand box to open it again. • Drag a Document window to the bottom of the screen to dock it as a pop-up tab. These shortcuts are found on Windows: • Double-click the Toolbar title bar to undock or dock the Toolbar. • Double-click a Document window title bar to maximize the window.

Windows users, if your document window gets stuck behind the main application window, choose Window, Cascade to bring it back out.

Creating Your Own Workspace We have been reviewing the GoLive default workspace and all the palettes that open with it, but you can customize and even save your own workspace. By creating your own custom workspace you can choose which palettes are visible and where they appear on your screen.

, TO DO

To Do: Creating Your Own Workspace In this section you will create your own workspace, save it, and recall it. 1. Because you probably haven’t decided on a workspace yet, simply open two palettes, the Objects and Inspector. Close the others and position the two remaining palettes to the left side of your screen. 2. From the Window menu select Workspace, Save Workspace. Type the name of your workspace. Call it “Hour 1.” Now that we have saved the workspace, we will return to the default and then back to our own saved workspace. 3. From the Window menu select Workspace, default Workspace. This returns you to the GoLive default Workspace.

,

4. Now, to test our workspace, select your new workspace from the Window, Workspace menu, as shown in Figure 1.14.

Understanding the GoLive Interface

FIGURE 1.14 Rearrange the palettes to your workspace by recalling the saved setting in the Window menu.

Menus Although GoLive offers a plethora of palettes to help you work, don’t overlook all the features and functions that can be accessed through the application menus. You’ll notice that many menu items have keyboard shortcuts assigned to them to make using frequent commands easy.

Keyboard Shortcuts If there is no shortcut assigned to a menu item that you use frequently, GoLive has the built-in capability for you to designate your own keyboard shortcut. You can change the shortcuts that are assigned by default to those you prefer, and you can even create sets of shortcuts and save them.

, , TO DO

To Do: Assigning Keyboard Shortcuts To designate a keyboard shortcut for a menu item, complete the following steps: 1. Choose Edit, Keyboard Shortcuts, or press Shift+Option+Command+K (Mac) or Shift+Alt+Control+K (Windows) to open the Keyboard Shortcuts window. 2. In the Keyboard Shortcuts window, choose the set you want to customize from the Selected Set pop-up menu (see Figure 1.15).

17

1

Hour 1

,

18

FIGURE 1.15 Choose a set from the Selected Set pop-up.

3. Click the item name from the list in the main window to which you want to apply the new shortcut. 4. Place your cursor into the Press New Shortcut input field, and press the keyboard combination you want to use.

,

5. Click Assign. You can make as many sets as you want by clicking on the New Set button and even base a new set on an old one. Shortcut sets take effect immediately upon closing the Keyboard Shortcuts window.

Using Contextual Menus Adobe GoLive 6 supports contextual menus. In fact, some functions can be found only in the contextual menus. There are many goodies in there, and if you get in the habit of using them, you’ll wonder how you ever did without them! On Windows systems, contextual menus are accessed by right-clicking, whereas they are accessed on Mac by Control+clicking. You will find varied items in the menus according to what window you are in when you access the function. For example, clicking on a Document window affords you one set of options, whereas clicking on the Site window yields another set (see Figure 1.16). After you access the contextual menu, left-click your selection to select it (Windows) or simply select the function of your choice and release the mouse (Mac).

Understanding the GoLive Interface

FIGURE 1.16 Contextual menus offer up differing functions depending on the window you’re in where you access the menu. On the top, a contextual menu from the Document window. On the bottom, a contextual menu from the Site window.

Preferences, Modules, and Browsers Adobe GoLive enables you to customize your preferences so that you can work in the way that is most comfortable for you. Additionally, GoLive ships with several modules that can be turned on or off according to your personal needs. To open the Preferences panel, choose Edit, Preferences from the menu, or press Command+K (Mac) or Control+K (Windows) (see Figure 1.17).

Setting the General Preferences The Preferences panel is divided into two sections. The pane on the left lists the preference selection, and the pane on the right gives you the options for that selection. To expand the choices under a heading, click the plus sign (Windows) or the shaded triangle (Mac) to the left of the heading. The first choice you should make is what you want GoLive to do when you launch the application. The default setting is Create New Document, which creates a new page each time you open the program. There are two other options available in the At Launch popup (see Figure 1.18).

19

1

20

Hour 1

FIGURE 1.17 The Preferences panel.

FIGURE 1.18 Choose an option from the At Launch pop-up.

• Create New Page will create a new blank page every time GoLive is launched. • Show Intro Screen will open the initial window that asks you whether you would like to create a new page, site, or an existing document. • Do Nothing—Does nothing. This is often a logical choice because GoLive offers an Open Recent Files menu item in the File menu. Open Recent Files makes it easy to open a site you’ve been working on after GoLive is already open. By default, GoLive is set to open pages in Layout mode. If you prefer, you can choose another option from the Default Mode pop-up.

Understanding the GoLive Interface

21

Turning Modules On and Off GoLive utilizes modules to add functionality to the program. There might be some modules that you do not need, and turning them off decreases the amount of memory required by the application. To turn modules on or off, select Modules in the left pane of the Preferences panel. Then, select a module in the right pane, and click the arrow at the bottom of the window to reveal a description of the selected module (see Figure 1.19). FIGURE 1.19 Clicking the arrow reveals a description of the selected module.

To turn on a module, select the check box next to it; to turn off a module, deselect it. You must restart GoLive for your change to take place.

Other Items You Will Need For GoLive to work properly, you must install a few additional items. For example, GoLive requires installation of Apple’s QuickTime software, which is included on the Adobe GoLive installation CD.

Plug-ins Plug-ins are little applications that reside in your browser’s Plug-ins folder and add functionality to the browser. Some popular plug-ins are Adobe’s PDF Viewer, which enables PDF files to be read in a browser, and Macromedia’s Shockwave plug-in that enables you to see Flash movies online. To gain the same functionality in GoLive, you copy those plug-ins into the GoLive Plug-ins folder.

1

22

Hour 1

, TO DO

To Do: Installing Plug-Ins into GoLive To install plug-ins into GoLive, follow these steps: 1. Locate the Plug-ins folder in your browser or browsers. 2. Find the Plug-ins folder located inside the Adobe GoLive application folder. 3. Option+drag (Mac) or Control+drag (Windows) the plug-ins from the browser’s Plug-ins folder to the GoLive Plug-ins folder (see Figure 1.20)

FIGURE 1.20 Locate the GoLive Plug-ins folder and copy the plug-ins from your browser into it.

Summary In this hour, you were introduced to the tabbed palettes, windows, and other tools that you will use to create Web sites in Adobe GoLive. We discussed how to set up GoLive to your liking by customizing palette groups and keyboard shortcuts, as well as by setting some general preferences and saving custom workspaces. You also learned how to maximize your workspace by docking palettes and using contextual menus. Finally, you were instructed to install necessary items that GoLive requires to run properly. With this information under your belt, you are ready to dive in and begin creating fantastic Web sites!

Q&A Q I moved all my palettes around, and put some of the tabs into other palette groups. Now I wish I hadn’t. Is there any way to get them back to the way they were? A Yes! Simply choose Default Workspace from the Window Workspace menu.

Understanding the GoLive Interface

Q Every time I open GoLive I get a new blank page that I don’t need. Do I have to use it? A No, you do not have to use that page. Simply close it and go on with your work. If you want to stop the page from appearing every time you start GoLive, choose Edit, Preferences from the menu, then select one of the other options available in the At Launch pop-up.

Quiz 1. How do you dock a palette? a. Control+click the title bar b. Drag the tab on top of the toolbar c. Drag the tab to any side of the screen 2. What does HTML stand for? a. Hypertags Mime Language b. Hypertext Markup Language 3. Which window is split into two vertical panes? a. The Document window b. The Objects palette c. The Site window d. The Inspector palette

Quiz Answers 1. c. Drag the tab to any side of the screen 2. b. HTML stands for Hypertext Markup Language 3. c. The Site window splits into two vertical panes

Exercises To familiarize yourself with the tools you will be using in GoLive, take some time to explore the interface. The following exercises will help you become comfortable with your new workspace. 1. Open GoLive and look at each section in the Objects palette. Run the cursor over each icon and read the icon’s name as it appears in the lower-left corner. Open a

23

1

24

Hour 1

page and drag some objects onto it—take note of how the Inspector palette and Toolbar change according to the item you have selected. 2. Drag some tabs out of their palette group and then drag them back. Dock the palettes to the side of the screen, and then undock them. Finally, prepare to begin working by copying the plug-ins from your browser into the GoLive Plug-ins folder and installing QuickTime 5 if you haven’t already done so.

HOUR

2

Creating a Site File What is a Web site? Most Web pages are not built alone. That would lead to a pretty dull source of information. A Web site is a collection of pages that are linked together through hyperlinks. A hyperlink is a reference (link) from some point in one HTML document to (some point in) another document or another place in the same document. Just like a well-organized publication, a Web site needs to have a Cover. This is typically named index.html or default.html; ask your service provider which is required for your site. It also needs some sort of organization like a table of contents. This will help direct the viewer to the information he or she seeks. This, of course, requires organization and planning. In this hour we will first look at your competitors and how they organize their sites, and then we will show you how to create a site. We will either plan with a pencil and paper or use the diagrams feature discussed in Hour 20, “Creating a Site Diagram,” to give you a clear path to follow. Preplanning is essential or you will lose track of where to place new information and create a navigation nightmare. Viewers will then become frustrated and leave your site for lack of a clear direction.

26

Hour 2

During this hour, you’ll learn that GoLive is more than just an HTML editor. GoLive is a Web site builder that manages resources such as Web pages, Web graphics, and hyperlinks. In this version GoLive has provided a Site Wizard. This Wizard will take you through a step-by-step process to create a new site. After making the initial decision whether you are creating a single- or multiple-user site, you are given the opportunity to choose one of four ways to create a site. Because all are important to understand, we’ll cover all four of them. Don’t worry if you don’t have the resources to create your own site at this time. Learn the techniques to building a site so that when you are ready to create your pages you can have the skills to organize them into a site. During Hour 2, you’ll learn • The difference between a single-user and multiple-user Web site • How GoLive manages Web sites • How to create a Web site from scratch • How to create a Web site from an existing folder • How to create a Web site from a Site Template • How to create a Web site from an FTP server • How to examine basic Site window functionality • How to add resources to your Web site • How to manage your Web site in the Site window

Single- and Multiple-User Web Sites You will notice that when we first choose File, New Site, to create a site you are asked to determine whether you are working on a single- or multiple-user site. Let’s straighten out what this means before progressing further into the Site Wizard. Typically, an individual would set up a site as a single-user, meaning that there are no restrictions to downloading pages or images from the server. This is fine for organizations where only a select few individuals have access to the site and communicate clearly to each other in the process of editing pages. The need for a multiple-user site occurs when a team plans on working collaboratively on a site. You might want to set up a site for multiple users if the server manages the site by checking in and checking out assets, thereby avoiding the occurrence of two people making different revisions to the same page. Creating a workgroup site involves setting up a workgroup server and using the Webdev technology available in GoLive. We will not be completing step-by-step instructions for this technology because it is at an advanced level of server management. Keep it in mind for future reference, however, and check out the Web site http://www.webdav.org for further information.

Creating a Site File

27

Understanding How GoLive Manages Web Sites Working on a Web site takes time and involves organizing and managing lots of individual files and making sure that your HTML is correct. GoLive’s site management tools are truly remarkable and will save you countless hours of your precious time. To manage the files in your Web site, GoLive stores four items (three folders and one site file) on your hard drive: • Site Root Folder—The Site Root folder is where you store the HTML, GIF, and JPEG files that are used in your Web site. To make site management easy, it is critical that you keep all these files in this folder instead of scattered around your hard drive. The contents of this folder are part of what the Site File tracks for you. The Site Root folder corresponds to the Site pane (left side) of the Site window. • Site Data Folder—This folder is created automatically when you create a new site with GoLive. It stores files that are used by more advanced features such as Stationery and dynamic Components. The files saved in the Site Data folder enable GoLive to work some of its behind-the-scenes magic for you in the Data pane (right side) of the Site window, so until you’re a power user, we suggest leaving this folder alone. • GoLive Site Settings Folder—The site settings are essentially preferences and settings for various site items, such as how URLs (links) are handled and the organization of the site tabs. We will cover this topic in more detail in Hour 9, “Using GoLive’s Site Management Tools.” • GoLive Site File—GoLive’s native file format for Web pages is HTML. That means Web pages created with GoLive are always ready to view in a Web browser. At the same time, GoLive creates a Site file for every site you work on using GoLive. The Site file is an inventory of all the HTML pages, Web graphics, and folders in your Web site. Site files in GoLive 5.0 are cross-platform, which means that the same Site file can be used on a Macintosh or a Windows computer. The most important thing to remember about these four items is that they should always stay together on your hard drive. If you copy or move only one or two, but not all three of these items, you will experience problems. Figure 2.1 shows examples of how these files will look on your computer’s hard drive. In this section we will discuss in detail the four ways in which you can create a GoLive site.

2

28

Hour 2

FIGURE 2.1 When you create a new Web site using GoLive, you will see these four items on your hard drive.

Whether you have an existing site or not, you will want to learn how to create a new site from scratch in GoLive. It’s easy and provides you with a clean foundation for adding existing or creating new pages. If you have an existing Web site located on your hard drive, you can also create a GoLive site from it. This means that any collection of HTML pages, no matter how they were created, can be collected into a GoLive site. We will also teach you how to download an entire site from FTP and HTTP servers. This phenomenal feature enables you to access and download an entire Web site off of the server to your hard drive. And last, but not least, new users might want to take advantage of Site Templates, which help you organize and design a Web site using supplied examples available in GoLive. Instruction about taking advantage of Site Templates is also covered in this hour.

Creating a Web Site from Scratch If you’re starting a Web site from scratch, you’ll want to create a new blank Site file in GoLive to manage everything. It might not seem necessary to you at this time, but let’s set up a scenario to show you why: You create your first home page. On it is a well-designed navigation bar. Your site grows to 20-plus pages (this happens quickly!). Now the navigation bar needs to be updated to accommodate more information. This can be done several ways. • Method 1: Conventionally. Go into each page and manually update each page and its links. • Method 2: Use a Site file and change it one time, which in turn will update all files using it.

Creating a Site File

29

Personally, I prefer Method 2 because using a site helps to make sure that your links are accurate and that images and pages are not missing, as well as making your job of building Web pages much easier. The investment in time will be well worth it.

, TO DO

To Do: Creating a New Blank Site Creating a Web site from scratch in GoLive is the easiest method of the four possibilities and takes only a moment. To create a new Web site from scratch, follow these steps: 1. Choose File, New Site; the Site Wizard will appear, and then select Single User. When the Options for Local Sites appears, choose the radio button for Blank Site. GoLive will then prompt you to name your Web site. 2. Give your Web site a name and make sure that the Create Project Folder option is turned on, as seen in Figure 2.2. This will automatically create a central folder to help keep your site information together. Click the Next button. FIGURE 2.2 Name your new site appropriately. It will also be the name of the new project folder.

3. In the next window specify the new Site Location. GoLive will create an appropriately named project folder for your site, but you still need to browse to an appropriate location on your hard drive to save the site.

,

4. Even though you might not think you are ready for anything advanced, checking the Advanced button gives GoLive users options, including the capability to make your GoLive site case sensitive. This is not a bad option to consider because on a typical server Sales.html will not be recognized by a link looking for sales.html. If this is important to you, select the box to Check URL’s case sensitive. Click OK to return to the Site Location Window. 5. Select the Finish button. A new Site window complete with an index page will appear, as shown in Figure 2.3.

2

Hour 2

,

30

FIGURE 2.3 Creating a new blank site opens a new Site window with a default home page.

,

Creating a Web Site from an Existing Folder For those of you who already have an existing site, you can follow these steps to turn it into a GoLive site. If you don’t have an existing site and want to follow along, you can find a sample site at www.golivein24.com. It doesn’t matter what software you used to start your Web site. You can smoothly transition HTML pages from any creation program, including hand-coded pages into GoLive to maintain and add on to your Web site.

, TO DO

To Do: Creating a Site File from an Existing Web Site To create a GoLive Site file from a folder containing pages in your site, follow these directions: 1. Choose File, New Site. Select Single User, in the initial Site Wizard window, and then click the Next button. Choose Import from Folder from the Options for Local Sites window. 2. In the top half of the Import Site Folder window, you see a folder icon and a message that says, “Click Browse to select the folder of existing files.” Click the Browse button below that field and select the folder on your hard drive that contains the existing Web pages.

,

If you have an existing home page (either index.html or default.html, depending on your server) you can skip step 2 and simply click the bottom browse button to select the page. GoLive will automatically select all other assets that are in the same folder as your main page. When completed, click the Next button.

,

Creating a Site File

31

3. Now click the second Browse button in the same window to select the Home page of your existing site. This is generally the index.html or default.html page. 4. If you do not have a home page you can check the box in the lower right of the window to automatically create a generic home page. Then click the Next button. 5. Click Browse to locate where you want to save the .site file. Make sure to save the Site file in the same location as the folder with the home page in it (Root folder), but not inside the Site Root folder. Click the Finish button. The final set of Site files created should be similar to those shown in Figure 2.4.

FIGURE 2.4 The Import Site option automatically creates all necessary files for you to build and maintain your site from existing files in GoLive.

,

6. If the Web site is large and contains hundreds or thousands of pages, it might take GoLive a while to import all that information even on a fast computer. When the import process is complete, you will see a new Site window in GoLive. So far, you’ve learned two of the four ways to create or collect Web pages into a Web site using GoLive. GoLive’s site management tools really unleash the power of this great software and the next example is no exception.

Creating a Web Site by Importing from a Server Web sites are frequently unruly projects that change hands many times during their lifetime. If it hasn’t happened already, it’s quite likely that one day you will work on a Web site that was started by another person. It’s entirely possible you will become responsible for a Web site that was created on somebody else’s computer with some other software. Even worse, the only existing copy of the Web site might be on a Web server somewhere but not on a local hard drive. This means that the original designer cannot give you an up-to-date copy of the Web site on a floppy disk or CD-ROM. The good news is that GoLive has two solutions for this situation. You can use GoLive to download the entire Web site from the FTP server or HTTP server.

2

32

Hour 2

Here are some useful definitions: • TCP/IP—The transfer method for sending files over the Internet. TCP/IP provides packet routing, fragmentation, and reassembly. • URL (Universal Resource Locator)—A standard for specifying the location of an object on the Internet, such as a file. URLs are used in HTML documents to specify the target of a hyperlink, which is often another HTML document (possibly stored on another computer). • FTP (File Transfer Protocol)—Enables a user on one computer to transfer files to and from another computer over a TCP/IP network. Also the client program the user executes to transfer files. • HTTP (Hypertext Transfer Protocol)—The client-server TCP/IP protocol used on the World Wide Web for the exchange of HTML documents.

What does this mean? If you have password information you can download an entire Web site from the FTP server. GoLive assembles the site into a matching site on your computer enabling you to make changes and upload your files back to the server when ready. The capability to download a new site from an HTTP server is not only a great way to download an entire site to your hard drive without password information, but can also be used as a great learning tool. This feature enables you to just type a URL and download all linked pages to it. Be careful though, if you pick a massive site this could take a very long time. In this section we will create a new site using an FTP and HTTP server.

, TO DO

To Do: Creating a Site File from an FTP Server There are several steps and many settings involved in importing a Web site via FTP into GoLive, but after you have downloaded a Web site once, you won’t have to go through those steps again. Make sure that you have access to the Internet on your computer and follow these steps: 1. To download a Web site into a new GoLive Site File via FTP, choose File, New Site. After specifying in the Site Wizard Single User site, click Next and select Import from Server in the Site Options window.

,

2. The Importing from a Remote Server window appears. Select FTP and click the Next button. 3. A Logging on to the FTP Server window appears as shown in Figure 2.5.

33

,

Creating a Site File

FIGURE 2.5 In the Logging on to the FTP Server window you are required to enter security information to access a site.

2

4. The first field to complete in the Import Site from FTP Server dialog box is server address. This server address is provided by your Web-hosting provider or system administrator, and will probably be something like ftp.adobetraining.com. 5. Skip the Directory field for now and enter your username in the Username field. Your hosting company or network administrator can provide your username. 6. Now type your password into the Password field. Check the Save check box for future use. Your hosting company or network administrator should also provide your password. 7. When you have the Server, Username, and Password fields completed, click the Browse button next to the Directory field.

When you click the Browse button, you must be connected to the Internet. If you use a modem and you are not already online, GoLive attempts to dial your ISP and connect to the Internet for you.

,

8. Another window will open directing you to locate the home page from the server, as shown in Figure 2.6. Select the directory on the Web server that contains your Web site and then select your home page. It is probably named something like index.html or default.htm. When selected click OK. 9. When all the fields have been completed correctly, the dialog box should look something like Figure 2.7. Click the Next button.

Hour 2

,

34

FIGURE 2.6 Locate and select the home page of the site you want to download.

FIGURE 2.7 When completed, the Logging on to the FTP Server window should look something like this.

10. Name this site and click next.

,

11. Browse to locate a place to save this site. As soon as you click the Finish button GoLive starts downloading the site. When you’re finished downloading the site from the FTP server, you can edit and save updates on your system, and use the same security access information to upload your files back to the FTP server. Uploading your revised site to the server is discussed in Hour 23, “Uploading Your Web Site to Your Web Server with FTP.”

Downloading a Site from an HTTP Server GoLive 6 gives you have the ability to download a Web site by typing the URL. Not only is this helpful when accessing a site without the necessary security information, but it

Creating a Site File

35

also provides an excellent learning tool. Looking at how other sites are created can inspire your own new ideas! In this section we will download a site using the Download from HTTP server feature. This can be time consuming if you select a large site, so we will provide you with a small site for practice.

, TO DO

To Do: Creating a Site File from an HTTP Server Follow these steps to download a site from an HTTP server. 1. To download a Web site into a new GoLive Site File via HTTP, choose File, New Site. After specifying in the Site Wizard Single User, click the Next button and select Import from Server in the Site Options window. 2. The Importing from a Remote Server window appears. Select HTTP and click the Next button. 3. In the Importing a Site from HTTP window enter the URL of the site you want to download. Type http://www.adobetraining.com/, as shown in Figure 2.8. FIGURE 2.8 Enter a valid URL to download a site from an HTTP server.

,

4. Carefully select your options. Make a decision about how many levels you want to download. As shown in the following diagram, a level represents the depth of the links in the site. Generally, the more levels, the more time it will take to download. In this exercise the site we are downloading only has one level, but we will still play it safe and keep levels at 1. If you are confident that you need an entire site and have the time to wait, you can select the entire site option. See Figure 2.9. 5. To avoid taking pages that are not necessarily needed leave Only Get Pages Under Same Path and Stay on Same Server checked. Click the Next button.

2

Hour 2

,

36

FIGURE 2.9 Each level represents a level of linked pages in the site.

index.html

level 1

sales.html

about.html

places.html

support.html

level 2

level 3

6. In the Naming the Site window, name the site adobetraining and leave the Create project folder box checked. Click the Next button.

,

7. In the Specify the New Site’s Location, choose an appropriate place on your hard drive to save this site. Click the Finish button. When you have completed all the steps in the Site Wizard, you should have the site downloaded. This includes Web pages, images, style sheets, and other necessary assets.

Creating a Web Site from a Site Template GoLive 6 has a feature that enables you to create a new Web site based on a preexisting Site Template. The Site Template can include both graphical elements as well as a navigational scheme. These Site Templates are very handy for new Web designers who want to learn by example or for veteran Web designers who want to create Site Templates to be used by their coworkers. GoLive 6 comes with several Site Templates and you can even create your own by saving sample Web sites in the Site Templates directory inside the GoLive directory.

Creating a Site File

37

, TO DO

To Do: Creating a Site File from a Site Template To create a new site from a Site Template, follow these simple directions: 1. Choose File, New Site. In the Site Wizard select Single User, and then click the Next button. 2. In the Options for the Local Site Window choose Copy from Template and click the Next button. 3. In the next window you see the standard templates provided to you in GoLive. Note in Figure 2.10 that you can preview what the site looks like on the right when the site is selected. Select any template and type a new site name in the text box at the bottom of the window. Click the Next button. FIGURE 2.10 In the Copying a Site Template window you can view a thumbnail of a sample page and a small rendition of the site map.

,

4. In the Specifying the Sites New Location window, browse to find a location to save this site. GoLive creates a new Web site based on the Site Template and saves it on your hard drive. You can now start customizing the graphics and content of the site.

Examining Basic Site Window Functionality You have now learned the four ways to create a Web site in GoLive. Knowing how to combine multiple Web pages into a Web site with GoLive opens a new world of possibilities with this powerful application. However, this power and flexibility can also wreak havoc on your Web site if you don’t understand how GoLive’s site management works. To make sure that you understand the basic functionality of GoLive’s Site window, we’ll spend the rest of this hour briefly discussing its main features. Most of the following features have entire chapters dedicated to them. See the references in each section to learn more.

2

38

Hour 2

Using the Site Window An important aspect of the Site window is that you should open a site’s Site file instead of individual HTML pages before editing a Web site in GoLive. By opening the Site file first and doing all your editing, creating, and site management within the Site window, you are much less likely to experience problems with incorrect HTML code, broken links, and similar errors. Creating, editing, and moving HTML pages in your computer’s file system instead of within GoLive’s Site window is a quick recipe for disaster! With that warning behind us, let’s look at the main features of the Site window. The first thing you should notice is the row of tabs across the top of the Site window as shown in Figure 2.11. The first tab on the left is the Files tab, and it is where you will spend most of your time working on Web sites. FIGURE 2.11 The Site window is split vertically into the Site pane (left side) and the Data pane (right side). Refer to Hour 1, “Understanding the GoLive Interface,” for more details.

The Site window consists of ten different tabs. Each section is described in the following list: • Files tab—The Files tab should feel very familiar because it mimics the behavior of the Macintosh Finder and the Windows Explorer. The Files tab has features just like your operating system, such as files, folders, and subfolders. It even enables you to move, duplicate, rename, and delete files and folders from your Web site’s file structure. • External tab—The second tab of the Site window is the External tab. This tab helps you inventory and manage all the external references in your Web site, including e-mail addresses and Web site URLs. To learn more about the External tab, check out Hour 9, “Using GoLive’s Site Management Tools.” • Diagrams tab—The third tab of the Site window is the Diagrams tab. The Diagrams tab is a unique feature that is useful for planning, mapping, and building Web sites. It’s especially helpful for people who prefer to organize their Web sites in a visual way. You can learn more about this part of the Site window in Hour 20.

Creating a Site File

39

• Colors tab—The fourth tab is the Colors tab. You’ve probably already guessed, but this tab enables you to track all the colors used in your Web site’s HTML. More information about the Colors tab can be found in Hour 9. • Font Sets tab—The fifth tab of the Site window is for font sets. This feature provides a brief overview of the fonts and font sets used throughout your Web site. More detailed information is available in Hour 9. • Library tab—The last tab in the Site pane of the Site window is the Library tab. This section of the Site window enables you to store custom snippets of layout and source code. For more details about the Custom tab see Hour 10, “Using Components, Stationeries, Library Snippets, and Page Templates.” Before we’re done browsing the Site window functionality, we need to look at four more tabs. If they are not already visible on the right half of the Site window, reveal these additional tabs by clicking the double-arrow in the bottom-right corner of the Site window. This reveals the Extras, Errors, FTP, and WebDAV tabs. • Extras tab—The Extras tab contains Folders for Components, Diagrams, Library items, Site Trash, Smart objects, Stationery pages, and Templates. The Site Trash is where GoLive places files that you delete from the Files tab and behaves just like the Macintosh Trash can or the Windows Recycle Bin. The Site Trash and deleting files are covered in more detail in Hours 10 and 22, “Cleaning Up Your Web Site.” The Components and Stationeries and Library folders are explained thoroughly in Hour 10. Site Diagrams are covered in Hour 20. Smart Objects are native Photoshop, Illustrator, or LiveMotion files that are linked to optimized images used in our site and are discussed in Hour 17, “Using Photoshop/ImageReady, Illustrator, and LiveMotion Smart Objects.” • Errors tab—The Errors tab of the Site window is where GoLive keeps track of all the errors it finds in your Web site. Examples of the kinds of errors it will find for you include missing files, broken links, and orphaned files. To learn more about the Errors tab and how to fix errors, check out Hour 22. • FTP tab—The third tab of the Data pane is the FTP tab, which enables you to upload files to your Web server and download files to your local hard drive. Although there are several other FTP utilities available, we recommend using GoLive’s built-in FTP functionality because of its ease of use. Using its integrated FTP tools, GoLive enables you to upload your entire Web site in just a few clicks of the mouse and makes long-term maintenance updates very easy. Read Hour 23, “Uploading Your Web Site to Your Web Server with FTP,” for a comprehensive discussion of these functions.

2

40

Hour 2

• WebDAV tab—The WebDAV tab of the Site window offers integrated WebDAV functionality inside GoLive. Because of the advanced technical nature of WebDAV technology, this functionality is not covered in this book. You can learn more about WebDAV at http://www.webdav.org.

When your site is created you can double-click pages in the Site window to open and edit them in GoLive. This also works with images, but be careful— they launch in their creator application.

We hope that whirlwind tour of the Site window is enough to get your feet wet and help you feel more comfortable with its powerful features. Before this hour is over, you’ll also learn how to add resources such as Web graphics to your Web site and how to manage those files after they are imported into your GoLive Site file. Without further ado, let’s move on.

Adding Resources to Your Web Site A good Web site is always under construction. This means you frequently add new pages and graphics for your visitors to see. To update your Web site, you probably incorporate files from many other applications such as image editing software and maybe even a digital video application.

Remember that you should always have your Site window open when working on a Web site in GoLive. This will help the process of adding resources to your Web site go smoothly. Many people prefer to place the Site window across the bottom of the monitor and the page they are working on the top. You can also click the Select Window icon, shown in Figure 2.12, to toggle between the open page and Site window.

FIGURE 2.12 Use the Select Window button to toggle between the page and the Site windows.

Creating a Site File

41

There are several different ways to add files to your Web site, so let’s look at them now.

Adding Files from the Site Menu A simple way to add multiple files and folders to your Web site is to use the Import Files to Site menu item under File.

, TO DO

To Do: Adding Files and Folders to Your Web Site from the File Menu To add files and folders to your Web site, follow these steps: 1. Make sure that your Site window is the foremost window and click the folder in the Files tab of the Site window where you want the files you are about to add to be copied. 2. Choose File, Import, Files to Site and you will see the Add to Site dialog box, as shown in Figure 2.13. FIGURE 2.13 Use this dialog box to add files and folders to your Web site.

3. To add single files to your Web site, locate them on your hard drive in the top half of the dialog box. When you have a file selected, click the Add button on the right edge of the dialog box.

,

4. If you want to add more files to your Web site, proceed to locate and select them on your hard drive. Then click the Add button again to add that file to the list of files to add to your Web site. 5. You should notice that every time you select a file and click Add, the file is added to the list in the bottom half of the dialog box. It’s like creating a To Do list for GoLive to import when you are done.

2

Hour 2

,

42

,

6. When you have completed your list of files to add to your Web site, click the Done button and GoLive adds the files you chose to your Web site. Notice that GoLive does not move your files, but actually copies the files from other places on your hard drive into your Site Root Folder.

To add an entire folder of files, select the folder and click the Add button. GoLive will add the entire folder to your site when you click Done.

Before you’re done examining these features, take note of the Remove, Remove All, and Cancel buttons in the bottom-right corner of the Add Files dialog box. If you accidentally selected a file or folder to add to your Web site and it is listed in the bottom half of the dialog box, just select that file or folder and click the Remove button. This does not delete the selected files, but merely removes them from the list of files to add to the site. GoLive also enables you to remove all the files and folders in the add list by clicking the Remove All button. This is handy if you made some mistakes or lost track of what you were adding and want to start over again. Finally, for those times when you decide that you do not want to add any files at all, just click the Cancel button and you will be returned to your Site window without adding any files.

Drag and Drop into the Site Window Although some people prefer using the Add Files command to add resources to their Web sites, other GoLive users, including the authors of this book, favor the drag-anddrop method. To add files and folders to your Web site in an intuitive and visual way, drag them from the Macintosh Finder to the Files tab of the Site window, as shown in Figure 2.14. FIGURE 2.14 You can easily drag and drop files into the Files tab of the Site window.

Creating a Site File

43

GoLive might ask your permission to update HTML pages as necessary, but GoLive does all the work for you. As in the Add Files method, GoLive copies the files into your Site Root folder instead of moving the files when you use drag and drop to add files to the Site window. This way you still have a backup of the files in their original locations on your hard drive. This drag-and-drop capability is also available to Windows users, just make sure that you do not have your application window set at maximize. If you can see the GoLive Site window and files and folders in your hard drive at the same time, you can add files by using the same drag-and-drop method. Just drag the files and folders from your desktop, a directory, or the Windows Explorer to the Files tab of the Site window.

Copy Files and Refresh View At the risk of overwhelming you with possibilities, we want to teach you one more useful way to add files to your Web site. To create your Web graphics you probably use an image editing application such as Adobe Photoshop, Adobe ImageReady, or Adobe LiveMotion. When you save your Web graphics from your graphics applications you can save them directly into your Site Root Folder. However, when you switch from your graphics application to GoLive, you will see that GoLive has not yet recognized the new graphics you just saved. Essentially, you have saved these new graphics behind GoLive’s back and you need to make GoLive aware of the new files. To force GoLive to recognize the new files, make the Files tab of the Site window active and choose the Refresh View from the Site menu or choose the Refresh View tool from the Site Toolbar as shown in Figure 2.15. FIGURE 2.15 Use the Refresh View tool to update your listing of files in the Site window.

It might take GoLive a few seconds to refresh your entire Web site, but when it’s finished, you will see your new files listed correctly in the Files tab of the Site window. Well, that covers it for strategies of adding files to your Web site. Feel free to use the methods with which you feel most comfortable. Regardless of the method you choose, the end results are always the same.

2

44

Hour 2

Managing Your Web Site in the Site Window When you’ve successfully added your files to your Web site’s Root folder, you should be able to see them in the Files tab of the Site window. Now you need to learn how to manage your files and folders within the Files tab of the Site window. Advanced site management is discussed in detail later in this book, but we’ll use the rest of this hour as a brief introduction. Following are a few basic principles for understanding Web site management using GoLive’s Site window.

Move Files and Folders in the Site Window Probably the most common mistake made by new GoLive users is moving files and folders on their hard drive instead of in the Files tab of the Site window. For example, a Macintosh user could use the Finder or a Windows user could use the Windows Explorer to rearrange files in his or her Web site. The problem with that approach is it’s too easy to break links to graphics and other HTML pages inadvertently. Instead, rearrange files only in your Site Root Folder with the Site window.

Rearrange Files and Folders with GoLive’s Site Window If you’ve ever built a Web site by hand coding your HTML or using less powerful Web site creation software, you’ll remember that moving just one graphic file or renaming one HTML file would force you to change links and references in dozens, scores, or hundreds of files! If you use GoLive’s site management features, you can feel free to rearrange files and folders in the Files tab because GoLive keeps track of all your links and graphic references. If you move files that require a change in your HTML source code, GoLive presents the warning shown in Figure 2.16 and offers to update your HTML for you! FIGURE 2.16 GoLive keeps track of your HTML, links, and file references. Move a file and GoLive will update your HTML for you!

Creating a Site File

45

GoLive’s capability to track and update your entire HTML references is a huge timesaver. Anybody who has built Web sites the old-fashioned way will love this feature!

Add New Files and Folders Most good Web sites don’t stay the same over time, so it’s likely that before long you will be adding new pages to your Web site. To add a new page to your Web site, select the Site, New, Page command and GoLive will create a new blank page for you. You can also drag a Generic Page icon from the Site tab of the Objects palette to the Files tab of the Site window as seen in Figure 2.17. FIGURE 2.17 Add a new page to your Web site simply by dragging and dropping a Generic Page icon from the Objects palette to the Files tab of the Site window.

If you already have a Web page in your site and you want other pages to be similar to that page, select the file in the Files tab of the Site window and choose the Edit, Duplicate command from the menu. After duplicating that page, you’ll probably want to rename the file in the Name field of the File tab of the File Inspector. Then, open your new file by double-clicking the file and start editing the content for that page. If you plan to create a large number of pages for your Web site that share a common design, learn more about GoLive’s robust stationery features in Hour 11, “Designing Pages with Frames.” After adding several new pages to your Web site, you might want to add some new folders to your Web site so that you can better organize all those files. Adding a new folder to your Web site is just as easy as adding a new page. Simply select the Site, New, Folder command from the menu or drag and drop a Folder icon from the Site tab of the Objects palette.

Delete Files and Folders Before we get ahead of ourselves, don’t forget that good site management can require as much deleting of old files as adding of new files. Deleting files and folders is very easy

2

46

Hour 2

with GoLive’s site management features, but please be careful not to delete anything that is actually referenced in your Web site! To delete a file or folder from your Web site, first select it with your mouse in the Files tab of the Site window. When you have the correct file selected, choose the Edit, Clear command (Mac) or Edit, Delete (Windows) from the menu bar and the selected file and folder will be moved to the Site Trash. If you need to recover files and folders from the Site Trash, drag them back to the Files tab of the Site window.

Rename Files and Folders The last basic function to note is the capability to rename files and folders in the Files tab of the Site window. Because the Site window closely mimics the operating system of the computer you use, this should be very familiar to you. To rename a file or folder, treat it exactly as you would any other file on your hard drive. Single-click the icon to select the file or folder, and then single-click the name of the object to highlight it. Now type the new name and press Enter/Return to make the change.

Don’t forget to name your files correctly. We suggest only using letters, numbers, periods, and the underscore character. Don’t use spaces, slashes, commas, colons, and other special punctuation marks. We also recommend using only lowercase to name your files. Also, don’t forget to use the correct file extension such as .html, .gif, or .jpg.

If you change the name of a file or folder that is referenced by another HTML page, GoLive politely warns you that it needs to change the HTML in any pages that reference the file or folder you are changing. Click OK in the Rename File dialog box and GoLive will complete the name change and update all necessary HTML for you!

Summary By learning about the basic functionality of GoLive’s Site window, you learn important functions that serve as the foundation for the rest of the work you will do with GoLive. You will see soon that building even a simple Web site can easily require hundreds of HTML pages, GIF, and JPEG images, and other files. That means adding files to your Web site and managing those files well is very important to a successful Web site.

Creating a Site File

47

Q&A Q Why can’t I see my files in the Files tab of the Site window? A You probably added files to your Site Root folder without GoLive recognizing the change. Make the Files tab of the Site window active and click the check mark in the Toolbar (Refresh View). You should now be able to see all your files in the Site window. Q I want to work on my Web site, but I cannot see my Site window. I only see individual Web pages. Am I doing something wrong? A Whenever you work on a Web site, open the Site File first, and then open individual Web pages by double-clicking within the Site window. Q What is the difference between the Site file and the Site window? A The Site file is the computer file that GoLive uses to manage your Web site’s resources. This file is saved on your hard drive. When you open the Site File, you see the Site window in GoLive where you perform your site management tasks.

Quiz 1. What four items should always be saved together on your hard drive? a. Web browser, e-mail program, plug-ins, and word processor. b. Site file, Site settings, Site Root folder, and Site Data folder. c. Site settings, Site sources, Site stationery, and components. 2. What’s an easy way to add new files to your Web site using GoLive? a. Write a script. b. Quit GoLive and drag the files into the Site Root folder. c. Drag and drop files into the Files tab of the Site window. 3. Can you rename files and folders after they have been placed in your Web site? a. No, absolutely not! b. Yes, but you’ll have to update the HTML in your other pages. c. Yes, and GoLive will update your HTML for you!

2

48

Hour 2

Quiz Answers 1. b. Site file, Site settings, Site Root folder, and Site Data folder. 2. c. To add new files to your Web site, drag and drop files into the Files tab of the Site window. 3. c. Yes, you can rename files and folders after they have been placed in your Web site, and GoLive will even update your HTML for you!

Exercises Understanding GoLive’s site management features is crucial to using the software effectively. To learn more about GoLive’s site management features, try these exercises: 1. Import an existing Web site into GoLive using the Import from Folder function. Find some samples on our Web site, golivein24.com, if you don’t have any of your own. 2. Using a backup or one of our sample sites, experiment with moving and renaming files and folders. Notice that GoLive always updates your files so that your HTML is correct.

HOUR

3

Creating a Web Page Web sites are made up of a series of interconnected documents (pages) that a visitor can surf through using something called hyperlinks. Hyperlinks are pieces of text or images that, when you click them, take you to another page or another area on the current page. The pages themselves are simply text documents that utilize Hypertext Markup Language (HTML) to create the links. There was a time when you needed to write HTML by hand to create even the simplest of Web pages. With the advent of applications such as Adobe GoLive, you no longer need to write all the syntax yourself. You put together the page the way you want it to look, and GoLive will write the HTML for you in the background. In this hour, you’ll learn about • The fundamentals of HTML • Creating a new Web page in GoLive • The Document window and editing modes • How to view the HTML that GoLive generates • The HEAD section

50

Hour 3

• Using a preset page width as a guide for designing • Setting basic page attributes • Previewing your page in GoLive and in a browser

Understanding the Fundamentals of HTML HTML (Hypertext Markup Language) is a page description language. HTML files describe the layout and contents of a Web page, or pages, through the use of elements called tags. If, for example, you wanted to create bold type on a Web page you would enclose the text in a tag that specifies bold, for example: Bold Type Here.

Before you can use any Web editor you should have a grasp of how an HTML page is created and the important parts to it. We will teach you enough about tags, attributes, and values in this section to get you started, but it also helps you to understand the GoLive user interface as well. For this section you will need to open a copy of Simple Text (Mac) or Notepad (Windows). You are probably thinking, “why did I invest in a Web-editing program and this book if I am going to code by hand?” Hang in there and it will come to light.

HTML Tags HTML tags are commands written between less than () signs. Both the opening and closing tags use the same command word but the closing tag carries a forward slash (/) symbol. For example, in the following code, b represents a bold tag. American Graphics, Incorporated

Every HTML document starts with the tag and ends with the tag.

Attributes Many tags have special attributes that offer other options for the tag. Attributes are added after the opening tag separated by a space. Often, you can use a series of attributes in a single tag, each separated with a space. For example, in the following code, the word border is an attribute of the tag table.

table information here

Creating a Web Page

51

Values Attributes also have values. In some cases only a few options (values) are available. Some values only accept integers. Follow the attribute with an = sign and enter a value. For example, in the following code, the 10 represents the pixel width of the table border. table information here

Not getting it yet? Think of tags, attributes, and values in everyday life. Let’s say that you are wearing pants. Think of pants as being the tag. The pants have a color. Color is the attribute. The color is blue, for example. Blue is the value.

3 , TO DO

To Do: Writing Your Own HTML In this lesson you will create a simple page to help bring to light what GoLive as a Web editor is doing in the background. 1. Launch either Simple Text (Mac) or Notepad (Windows). 2. Type the initial tags to let the Web browser know that it is reading a Web page.

Many people who do code by hand type both the beginning and end tags first and then fill in the information between the tags. This helps to avoid missing end tags.

Keep in mind that to be compliant with today’s Web standards we would need to put more information about HTML version and so forth. on this page, but we are going to keep this basic.

,

3. Type the tags for the head of the page between the opening and closing HTML tags.



Hour 3

,

52

The head is the section of a page that contains items, other than the title, that are not visible to the viewer. This can include keywords and descriptions of a page, as well as scripts for interactivity. We will not be entering anything into our head section at this point. 4. Type the opening and closing body tags after the head tag but still inside of the HTML tag.





The of an HTML document contains the items and text that are visible to the viewer. 5. Inside the body tag type the following: “This is my FIRST web Page.”

6. We will preview the page you have created and edit it some more. Save the file at a logical place in your hard drive as first.html. 7. Open the browser of your choice and choose File, Open. Browse to the location on your hard drive that contains your HTML document and open it. You should see only your text. If you see tags, go back and double-check your typing. 8. Now let’s go back to your HTML document and apply an attribute and value to an existing tag. Place your cursor after the word body in the start body tag. Enter a space and type the attribute bgcolor. Now, enter the value by typing = and type the color “yellow”.

,

9. Test this by refreshing the file in your browser. A yellow background will appear. You have successfully applied tags, attributes, and values. With that experience in mind, understand that each tag has its own collection of attributes and values. As we use GoLive the Inspector serves the purpose of knowing the attributes that you can apply to selected items and letting you change the values in Simple Text input boxes, thereby saving you the time and effort of knowing the correct tags and which attributes work with them.

Creating a Web Page

53

Making a New Page When you constructed your first Site file in Hour 2, “Creating a Site File,” GoLive automatically created a page named index.html and placed it into the Files list. If you don’t remember how to create a new Blank site, return to Hour 2 and follow the instructions to build one. Name your site Hour_3. The index.html file will become your home page. As you continue to build your Web site, you will add more pages to the Files list. Work with your Site file open as we explore two ways of placing a new page into your Web site.

, TO DO

To Do: Create a New Page To create a new page in your Files list, use one of these two methods. Remember, you should have your Site file open, and the Files tab selected. Method 1: To create a new page using the Objects palette, complete the following steps: 1. Open the Objects palette by choosing Window, Objects from the menu, or by pressing Command+2 (Mac) or Control+2 (Windows). 2. Click on the fly-out menu in the upper right to select Site. 3. Drag the Page icon from the palette to the Files tab of your Site file (see Figure 3.1). FIGURE 3.1 Drag the Page icon from the Objects palette to the Files tab of your Site file.

4. A newly created page will be named untitled.html by default. You can now type the name of your choice over the word untitled. Include .html or .htm as the extension so that it will be recognizable by a Web browser.

,

For a complete explanation of file type extensions, including those used on the Web, visit www.whatis.com.

3

Hour 3

,

54

Method 2: To create a new page from the File menu, complete these steps: 1. From the menu choose File, New, or press Command+N (Mac) or Control+N (Windows). A new untitled page will open. 2. Now you must save the page into your Site Root folder for it to appear in the Files list. Because there is no information on this page, we will choose File, Save As. 3. In the Save As dialog box, name this about.html and click the Site Folder icon to reveal a pop-up list that includes the following choices: Root folder, Stationery, Components, and Templates (see Figure 3.2). Select Root folder. This automatically brings you to the correct folder on your hard drive into which you will now save the page.

FIGURE 3.2 Click the Site icon to choose the Site Root folder root from the pop-up list.

, We strongly recommend that you do not use generic names such as page1.html and page2.html for your pages. Later, when you want to edit your pages, you will have a hard time remembering which page is which. If you have a site that has information on services and products and contains a Contact form, you could name those files services.html, products.html, and contact.html. Then the filename itself will help you determine the content of the page.

Maintain consistency in your naming structure. It is generally easiest to do so by using only lowercase letters in your filenames. Some hosting services exclude the use of spaces and certain characters that might confuse the server. Instead of spaces use the underscore character (_). Some other characters to avoid are %, \, /, :, and ?, but check with your hosting service for a complete list.

Creating a Web Page

55

By default, all newly created pages in GoLive open in Layout mode. Layout mode is the visual editor that enables you to place images, text, and multimedia elements into your page without writing any HTML code. GoLive writes it for you. We’ll briefly describe the other viewing and editing modes available to you in this hour, and you can find indepth instructions on how to use them later in this book.

The Document Window and Its Tabs Open the empty page that you created named about.html by double-clicking its icon in the Files list. You will see a series of tabs across the top of the window; a little triangle and a Page icon at the top left and a pop-up list at the bottom right. The opened page itself in Layout mode is what we refer to as the Document window (see Figure 3.3).

3 Dynamic Timeline Document Tabs

FIGURE 3.3 The Document window.

JavaScript Editor

Content Source Editor

Cascading Style Sheets

Toggle head Section Show Page Properties

Show/Hide Split Source Markup Tree

The tabs across the top of the page are used to switch between viewing and editing modes. They are • Layout—Also known as WYSIWYG (pronounced whizzy-wig) mode, which stands for “What You See Is What You Get.” Layout is the visual mode that works like a page layout program. You drag images onto the page, type text, and use GoLive grids, tables, and floating boxes to position elements exactly the way you like them.

56

Hour 3

• Frames—Frames mode enables you to drag and drop ready-made frame sets (represented by icons) from the Frames tab or Objects palette into the Frame Editor. For more on using frames, please refer to Hour 11, “Designing Pages with Frames.” • Source—This is where the HTML code is actually generated. This mode is fully editable, and changes made here are reflected in the other modes. For more on editing pages in the Source mode, please read Hour 21, “Working with Source Code in GoLive.” • Outline—Another unique and powerful way to edit your page is by using the Outline mode. The HTML tags are arranged in groups, each with a pop-up list of the attributes available for it from which you can choose. This is very handy for more advanced users who are familiar with HTML. For more on editing pages in the Outline mode, please read Hour 21. • Preview—Clicking this tab hides the grids, tables, floating boxes, and so on that you have used to place objects on your page, thus allowing you to better see what your Web page will look like in a browser. • Frame Preview (Mac only)—This mode enables you to preview frame sets. (Windows users can preview frame sets in Preview mode.)

GoLive enables you to choose the mode in which you prefer to have pages open through a setting in the preferences. By default, pages open in Layout mode. To change this, select Edit, Preferences from the menu, and then under General, select a new default mode from the pop-up list.

Viewing the Source Code Create a new page and type “Welcome to my Site.” You are using GoLive, which means you don’t have to actually write the HTML yourself, but there is no reason why you shouldn’t investigate it so that you can better understand how it works. In the Layout view, select the text Welcome, and then click the Source tab at the top of the new page to go into the Source Editor where you will view the HTML source code (see Figure 3.4).

Note that what you have selected in the Layout tab remains highlighted in the Source tab. Trust us, this will make your life easier later.

Creating a Web Page

57

FIGURE 3.4 Take a look into the Source Editor to see the HTML that GoLive writes upon creating a new page.

3 Viewing a Page in Layout and Source Simultaneously In GoLive 6, you have the ability to view the source code while working in the Layout mode in two different manners. One is through the use of the Source Code window, and the other is through the new Toggle Source Split view.

Using the Source Code Window Click the Layout tab of the Document window and open the Source Code window by selecting Window, Source Code from the menu. Take a look at the HEAD section. To reveal the HEAD portion of the page while in Layout mode, click the little triangle at the top left of the page (see Figure 3.5). A pane will open that by default has three icons inside it. This is the HEAD section of your Document window. The icons represent three tags that have been written into the HEAD section of the HTML page. FIGURE 3.5 Click the triangle at the top left of the page to open the HEAD portion of the Document window.

Now look at the Source Code window, where you will see the actual HTML that the icons represent. To aid you in seeing the complete code, select the fly-out menu in the upper right of the Source Code window and select word wrap. Click the first of the three icons and notice how the corresponding syntax is highlighted in the source code (see Figure 3.6).

58

Hour 3

FIGURE 3.6 As you select an item in Layout mode, the syntax for that element is highlighted in the Source Code window.

Changes you make in Layout mode are simultaneously made in the source code, and changes in the source code are reflected in Layout mode. One caveat: When you make a change in the Source palette, you must click back into the Layout view to see the change. This is true whether you are working with elements in the HEAD pane, or elements in the main portion (the BODY) of the Document window.

The Toggle Source Split View A great new feature in GoLive 6 is the ability to view and edit your source code in a split-screen mode. By clicking on the Toggle Source button shown in Figure 3.7 you can see everything that is going on in the background. This feature works in every mode except for the Source mode, of course. FIGURE 3.7 Click the Toggle Source Split view to view and edit the source code while working in the Layout, Frames, Outline Editor, and Layout Preview modes.

Creating a Web Page

59

Using the HEAD Pane Of the three icons in the HEAD portion of your document, the first two are META tags. The META element provides information about the HTML page to either the server or the browser. Search engines also use information in META tags as part of their method of indexing sites, along with other criteria such as the page title. (For details on how to properly use META tags to work with search engines, please read Hour 24, “Making Your Web Site Search Engine Ready.”) The third icon in the HEAD section is the TITLE tag. You have probably witnessed the workings of HEAD tags on a page and might not even have known it. Have you ever surfed to a page that had a message similar to “Our Web site has moved, we’ll take you to the new site momentarily,” and within seconds another page loaded without you ever having touched your mouse? Have you ever entered a Web site and had a little window pop open automatically while the home page was loading without having clicked on anything? These things can occur as a result of instructions being given to the browser by the page. In this section, you’ll learn how to complete several tasks using the HEAD portion of the Document window in Layout mode, including how to insert and set the attributes of a tag, and how to change the page title.

Giving Your Page a Title Every page that you create for your Web site should be given its own title. Do not confuse the title of the page with the filename; they are two different things. For example, you might want to create a page in your site that has information about your company. The title of the document might be “Welcome to American Graphics Institute,” whereas the filename might be welcome.html. What you select as a title will appear in the title bar of the browser window and is also the title when a viewer bookmarks your page for future reference. (See Figure 3.8.) Title

FIGURE 3.8 “American Graphics Institute Training,” is the title of the page.

3

60

Hour 3

Search engines such as HotBot, Excite, and AltaVista place great importance on the title of a page when indexing Web sites. We strongly suggest that you use very descriptive titles that include keywords to facilitate satisfactory search engine indexing. For example, if your site is about flea collars, you might create a page title like, “Acme Flea Collars where your dog or cat will get rid of his fleas!” Notice that we used the word fleas twice, and used dog and cat, which are good keywords for this topic. For further details, please refer to Hour 24.

When you make a new page, Adobe GoLive automatically inserts the words “Welcome to Adobe GoLive 6” in the title field at the top left of the page. You must remember to change these words to something that better indicates the actual content of your page. While in Layout mode, you can make the change on the page itself or in the Page Inspector. The syntax for the page title is written into the HEAD section of the document between the opening and closing tags.

, TO DO

To Do: Changing the Title on the Page Itself Have the about.html page open, or open a new blank page for this exercise. To change the title in the title field at the top left of the Document window, complete the following steps: 1. Click and drag the mouse to select the words in the title field (see Figure 3.9). 2. Type your new title over the current text.

,

3. Click back in the Document window.

FIGURE 3.9 Type your new title over the current text in the Title field.

, TO DO

To Do: Changing the Title in the Page Inspector You can also use the Page Inspector to alter the title. To change the title in the Page Inspector, complete the following steps: 1. Double-click on the small, blue Page icon at the top left of the Document window. 2. If it is not already open, the Page tab of the Inspector appears.

,

3. In the Page Inspector, type your title into the field called Title (see Figure 3.10).

Creating a Web Page

61

FIGURE 3.10 Type the new title into the Title field in the Page Inspector.

If you have the HEAD pane of the Document window open, clicking the TITLE icon will also reveal the Page Inspector where you can change the page title in the same way. You can also alter the page title in Source and Outline modes, or in the Source Code window. For more information on these options, please refer to Hour 21.

Using GoLive HEAD Tags Inserting tags into the HEAD pane of your document in Layout mode is a simple matter of locating the icon of the tag you desire in the Objects palette, dropping it into the HEAD pane, and then setting its attributes in the Inspector.

, TO DO

To Do: Adding a Tag to the HEAD Pane of Your Page To add a tag to the HEAD pane of your page, complete the following steps: 1. In the about.html page click the triangle next to the Page icon in the upper-left corner of the Document window, which opens the HEAD section pane. 2. Make sure that your Objects palette is open or choose Window, Objects from the menu. 3. Click the Head button of the Objects palette (see Figure 3.11). 4. Even though descriptions are discussed in much greater detail in Hour 24, we will use one at a basic level for this exercise. Drag the META icon from the Objects palette and drop it into the HEAD section pane.

,

FIGURE 3.11 The HEAD tab of the Objects palette.

3

Hour 3

,

62

If the HEAD section pane is closed, drag the icon from the Objects palette to the triangle at the top left of your Document window, which will toggle the HEAD pane open, and then drop the icon into it.

5. After the icon is placed into the HEAD pane, you need to set its attributes in the Inspector. In the Name text box enter the word description and then enter a brief description of your page in the Content text box as shown in Figure 3.12. FIGURE 3.12 Help search engines by adding a description in your Head section.

,

Setting the Width of Your Page When developing a Web site, you will have to assume some information about your audience’s system specifications, such as the following: • Monitor size and resolution • Operating system • Network • Browser type and version • Color depth For example, if you are designing a site where you know your target audience is highend users who will be accessing the pages on an intranet running Windows 2000, through Internet Explorer 5, and on 17-inch monitors, you can safely design pages to that audience’s specifications. If you are not certain, you will have to design for the lowest common denominator, which generally means designing for multiple browser versions and platforms, several operating systems, including both Windows and Mac, and for 14to 15-inch monitors at varying resolutions and color settings. You should also consider

Creating a Web Page

63

how well a page would print given the width of the design. We recommend that you use a standard page width of 580 pixels or fewer when creating your design. GoLive assists you in setting the width of your page for designing.

, TO DO

To Do: Setting Page Width Follow these steps to set your page width: 1. Have about.html open or open a new page in GoLive by choosing File, New from the menu, or typing Command+N (Mac) or Control+N (Windows). A new untitled page will open. 2. Locate the Window Size menu in the lower-right corner of the page. Pull down the list. The numbers in the list reflect the width of a page in pixels.

,

3. Click 580 from the list to design for 14- or 15-inch monitors and 780 for 17-inch monitors (see Figure 3.13).

FIGURE 3.13 To set the width of your Document window, choose 580 for 14- or 15-inch monitors, or 780 for 17inch monitors.

The Window Size menu also offers Window Settings as an option. This feature enables you to set the default size of your Document window and the position on your monitor that you would like any new page that GoLive creates to be situated.

, , TO DO

The Window Size settings are for your own use when designing in GoLive. The users’ actual browser windows are not affected by these settings. They still have the ability to resize their windows to whatever size they would like. The Window Size settings are to help you determine how your pages will look at certain widths.

To Do: Setting Default Options To set your default size and location options, complete the following steps: 1. Place your page in the position on your monitor screen where you would like all new pages to open. 2. Select a page size as described previously.

3

Hour 3

,

64

3. Select Settings from the Window Size menu in the lower-right corner of the page. 4. In the dialog box that appears, Markup Document Windows is checked, as shown in Figure 3.14. If you want the default size to apply to your site window as well, check that box.

,

5. Click the OK button.

FIGURE 3.14 Set a default size and position for future new pages through the Settings window.

Every time you create a new document it will be in the same position and size as the document you had in the forefront when you saved the settings. If you are not happy with the new look go back to the default by choosing settings and check on the Use Default Settings button.

Setting the link, alink, and vlink Colors You might have noticed during a Web-surfing session that hyperlinks are usually in color, and that sometimes the link changes color as you click it and changes color again after you have visited the page to which the link led you. What you witnessed are the link, alink, and vlink colors. The link color is the color a link will appear before it has been clicked. The alink (active link) color appears while the mouse is clicking the link. The vlink (visited link) is the color of the link after the user has already visited it. By default, when no color is specified, most Web browsers will display links as blue, alinks as red, and vlinks as magenta. Many Web designers nowadays, however, specify these colors to compliment the color scheme used throughout the rest of the site.

Using nonstandard colors for links can potentially cause Web site visitors some confusion. For a relevant discussion on this topic visit http://www.webreference.com/dlab/books/html-pre/ 42-3.html#42-3-2.

Creating a Web Page

65

, TO DO

To Do: Changing Link Colors For this exercise you can continue using the about.html document or open a new one. If you want to change the colors of these settings, complete the following steps: 1. Open the Inspector, if it is not already open, by selecting Window, Inspector from the menu. 2. Select the small Page icon at the top left of the page by clicking it. 3. In the Inspector, click one of the color fields showing to open the Color palette, or select Window, Color from the menu. 4. Choose one of the various tabs at the top of the Color palette and locate the color of your choice. (For more information on the usage of the Color palette, see Hour 1, “Understanding the GoLive Interface.”)

,

5. Click once on the color. The new color will replace the old one in the color well indicating the color change (see Figure 3.15).

FIGURE 3.15 Click a color field, select the color of your choice from the Color palette, and click to apply it.

Setting the Page Background Color

, , TO DO

As a default, GoLive saves you from having a dreary gray background by selecting white as the standard background of new pages. But you can change the background to the color of your choice.

To Do: Changing the Page Background Color GoLive makes it very easy for you to change the page background color in the Layout mode: 1. Open the Page Inspector, if it is not already open, by selecting Window, Inspector from the menu.

3

Hour 3

,

66

2. Click the small Page icon at the top left of the Document window. 3. In the Page Inspector, you will see the word Background and under it the word Color. Clicking the color field next to it will open the Color palette.

,

4. Click a color to apply it to the page background.

You can also apply a background color to a page by dragging and dropping a color chip from the Color palette onto the Page icon at the top left of the Document window.

You can also use a background image on your HTML page. We will not discuss that feature until you have some understanding of preparing images for the Web. For directions on how to place an image in the background of your page please see Hour 5, “Using Graphics on a Web Page.”

Previewing Your Page In subsequent hours, you will learn how to place text and images on your page, how to create hyperlinks, and much more. You will probably be eager to see what your work is beginning to look like as you go along. There are two ways for you to preview your pages, one from within GoLive and the other in a browser.

Previewing in GoLive Previewing your page in GoLive is a simple matter of clicking the Preview tab at the top of the Document (page) window (see Figure 3.16). This hides any grid lines, table outlines, and other visual layout items, while preserving the layout itself. While in Preview mode, you will not be able to make any edits, or move items around on the page. You can only look at what you have created. To edit, you must choose Layout, Source, or Outline mode. FIGURE 3.16 To preview your page in GoLive, click the Preview tab at the top of the document (page) window.

Creating a Web Page

67

On the Mac there are actually two Preview tabs at the top of the Document window. The tab at the far right is for previewing frame sets. For more information on how to build and preview frame sets, please refer to Hour 11.

Previewing in Your Browser Before you can preview a page in your browser, you need to tell GoLive which browsers you have installed on your computer, and of those, which you would like to use to preview your pages.

, TO DO

To Do: Selecting a Browser for Previewing Follow these steps to select the browsers for previewing: 1. Open the Preferences panel by selecting Edit, Preferences, Command+K (Mac), or Control+K (Windows). 2. Scroll down the left pane until you come to Browsers and select it to view the Browsers preferences. 3. Click the Find All button at the bottom of the right pane. 4. GoLive will search through your hard drive to find any browsers you have installed, and will list them in the right pane. These browsers will be available to you from the Show in Browser button in the Toolbar. To the right of each browser in the list is a check box. Select the browser that you would like to have as your default for previewing your work by clicking the check box next to the browser of your choice (see Figure 3.17). 5. Close the Preferences panel by clicking the OK button.

Multiple browsers will open when you click the default browser button if more than one is checked in the preferences.

, FIGURE 3.17 Select the browser you want as your default for previewing by clicking the check box next to it.

3

68

Hour 3

Now that you have designated the browsers you would like to use for previewing, you need to know how to switch to one of them to preview your page.

, TO DO

To Do: Previewing the Page To preview your page in the default browser you selected in the Preferences panel: 1. Open the page you want to preview. 2. Click the Browser icon at the right end of the Toolbar (see Figure 3.18). 3. The browser will open and preview your page for you.

FIGURE 3.18 The Browser Preview icon is on the far right of the Toolbar.

To preview your page in one of the other browsers you added in the Preferences, complete the following steps: 1. Open the page you want to preview. 2. Click and hold the Show in Browser button on the Toolbar. 3. Select the browser of your choice from the drop-down list (see Figure 3.19).

,

4. The browser will open and preview your page for you.

FIGURE 3.19 Select the browser of your choice from the drop-down list.

On Windows, you can install only one version of Internet Explorer, and although you can install several versions of Netscape Navigator (or Netscape Communicator), you can open only one version at a time. On Mac, you can install multiple versions of both browsers, but can open only one version of Netscape at a time. Despite these limitations, it is extremely important that you test your Web pages on both platforms—and on multiple browsers—to check for browser differences.

Creating a Web Page

69

Summary In this hour, you learned how to create a new blank HTML page and how to place or save it into the Files list of your Site file. We discussed what makes the page title different from the filename, and how to give your pages titles that include the type of descriptive keywords that search engines look for. We also worked with colors and learned how to set the text, link, active link (alink), visited link (vlink), and background page colors. You also took a peek into the source code to see the syntax that GoLive generates and learned the basics about the HEAD section. Finally, you learned how to set up GoLive to allow you to preview your pages in a browser.

Q&A

3

Q I forgot to change the name of my page when I saved it, and now it is called untitled 3.html. How can I fix it? A Select the file in the Files list and type the new name over the old one. GoLive will advise you if files linking to or from that file need to be updated. When asked, tell GoLive to go ahead and update the files. All your links will remain intact. Q I wanted to make my page background blue, so I dragged a blue color chip from the Color palette onto my blank page, but it didn’t work! What happened? A You need to drag and drop the color chip onto the Page icon at the top-left corner of the page, not into the body of the Document window.

Quiz 1. What do the terms link, alink, and vlink stand for? a. link, angled link, vertical link b. link, author link, version link c. link, active link, visited link d. link, absolute link, virtual link

70

Hour 3

2. Which three of the following tags are part of every HTML page? a.



b.



c.



d.



e.



f.



3. In Layout mode, how many ways can you change the background color of the page? a. 2 b. 3 c. 4 4. When saving an HTML page, you must use a file extension such as .html or .htm. a. True b. False 5. How do you set the viewable page width for designing your page? a. Choose a number from the pop-up in the Page Inspector. b. Choose a number from the pop-up in the lower-right corner of the page. c. Choose a number from the pop-up in the Toolbar. d. Choose a number from the pop-up in the Site window.

Quiz Answers 1. c. Link stands for hyperlink. alink is active link, the state of the link when the mouse clicks on it. vlink is visited link, the state of the link after it has been visited. 2. The three tags that are part of every HTML page are a. , and d. .

,

c.

3. a. There are two ways to change the background color of the page: Select the color in the Page Inspector, or drag and drop a color onto the Page icon in the Document window. 4. a. True, you must use a file extension such as .html or .htm when saving an HTML page. 5. b. You set the viewable width of a Document window by using the pop-up list at the bottom-right corner of the window.

Creating a Web Page

71

Exercises To learn more about GoLive’s Web features, try these exercises: 1. Surf the Internet and take note of the titles that appear in your browser’s title bar as you arrive at each new page. Could you determine the content of the page by the title alone? Try to come up with titles for your pages that reflect closely the content on the page. 2. Create a Web page, and set the background, text, link, active link, and visited link colors. Type a few words onto the page and save it. Now view the page in multiple browsers and, if possible, on several platforms (Windows and Mac).

3

PART II Designing a Home Page Hour 4 Formatting and Stylizing Text 5 Using Graphics on a Web Page 6 Designing Pages with Tables 7 Designing Pages with the Layout Grid 8 Designing Pages with Floating Boxes

HOUR

4

Formatting and Stylizing Text Remember this: A great-looking Web site without compelling content is a waste of perfectly good bandwidth. Use great care when writing your Web site, as much or more than you would employ when designing the flying, spinning logo that you hope will grab their attention. The pervasive power of the Web stems from the very fact that it was created to aid the flow, delivery, and sharing of information. Words are still the primary means of presenting thoughts. Words are valuable things that should be treated accordingly. That said, the goal in this hour is to help you format and stylize your precious text so that it is displayed to its best advantage. In this hour, you learn how to • Work with text on your Web page • Add formatting and styles to your text • Make bulleted and numbered lists • Apply font styles to text • Make hyperlinks • Check for spelling errors

76

Hour 4

Importing Text into Your Web Page As with most tasks in GoLive, placing text onto a page can be accomplished several ways. You can open your text document in the application in which it was created, and then use copy and paste to put it into GoLive. You can open text documents such as those created in SimpleText, Notepad, or BBEdit right in GoLive. (Windows users will need the .txt extension.) Many word processors such as Microsoft Word offer an “Export as HTML” option. After the file has been exported, simply open it up in GoLive. This method has the advantage of preserving much—although not always all—of your formatting. Advanced users who prefer to format text by using style sheets might prefer to bring in their text with no formatting at all. (For more on style sheets, please refer to Hour 18, “Formatting Text with Cascading Style Sheets.”) If the text has not yet been created, you can type it directly onto your page, or into a layout text box that you have placed on a layout grid on your page. After your text is on the page, you can move it around, color it, change the size or style of it, and select the font in which it will be displayed. When you have laid out your text just the way you want it, you can then run a spell check on the page to double-check for spelling errors. This section begins by first adding some text onto your page.

Copying and Pasting Text You can use any word processing application such as Microsoft Word, Corel WordPerfect, or AppleWorks to write your content. Start by creating a text document in your word processing application, and then go through the following To Do exercise.

, TO DO

To Do: Copy and Paste Text from a Word Processor To copy and paste text from your word processor, complete the following steps: 1. Select the portion of the text in your text document that you want to use on your Web page. 2. Copy the text to your computer’s internal Clipboard by choosing Edit, Copy from the menu, or by pressing Command+C (Mac) or Control+C (Windows). 3. Open GoLive if it is not opened, or switch to GoLive if it is already open.

,

4. Open the HTML page on which you want to place the text. 5. Position your cursor at the point of entry that you would like your text to appear on the page. The point of entry can be either directly in the document window, or inside of a text box you have placed on a grid in the document window.

77

,

Formatting and Stylizing Text

To place a text box on a page in GoLive, you must first add a layout grid to the page, and then place the text box onto the grid. For more details on working with layout grids, refer to Hour 7, “Designing Pages with the Layout Grid.”

,

6. Choose Edit, Paste from the menu, or press Command+V (Mac) or Control+V (Windows) to paste the copied text into the document.

When pasting text into a blank HTML page, the text will default to the top of the page and will be aligned to the left. You can change the alignment easily (see “Formatting and Stylizing Text” later this hour), but you cannot add space before the text by simply pressing the Return or Enter key multiple times. Although GoLive appears to add space, upon previewing your page you will see that the returns have been removed. That is because HTML will collapse extra returns, which are written into the source as

tags. You can, however, use Shift+Return on the Mac or Shift+Enter on Windows, which writes a
tag to add space. Use Option+Spacebar (Mac) or Shift+Spacebar (Windows) to enter a nonbreaking space. To position your text more precisely, you should consider using tables or grids to lay out your page. Please read Hour 6, “Designing Pages with Tables,” and Hour 7 for more information on tables and grids.

If you have a .txt document from which you’d like to take various selections of text, it might be easier to open it right in GoLive.

,

TO DO

To Do: Copy and Paste Text from Within GoLive To copy and paste text from within GoLive, complete the following steps: 1. In the menu select File, Open, or press Command+O (Mac) or Control+O (Windows). 2. From the dialog box, navigate through your hard drive to the .txt document that you want to open in GoLive. Select the document and click Open (see Figure 4.1).

4

Hour 4

,

78

FIGURE 4.1 Navigate through your hard drive, choose the text document you want to open in GoLive, and click Open.

, GoLive opens your .txt document in its own window. From there you can copy and paste the text you want to use on your HTML page using the steps described in the previous section.

Opening a Page Exported from a Word Processor Using a page exported from your word processing application is easy to do in GoLive if you follow a few simple rules.

, TO DO

To Do: Open an Exported Page in GoLive To open a page that you created in your word processing application in GoLive, follow these steps: 1. Open the document in your word processing application and resave it as an HTML file. You typically do this by choosing Save As from the File menu. In the Save dialog box, name the file using .html or .htm as the file extension. 2. Place the file into the Site Root folder of your Web site either by saving the file directly into the Site Root folder, copying and pasting it into the folder (PC), or dragging the file from the Mac Finder or Windows Explorer into the Site file. 3. Click the Refresh View button in the Toolbar, which prompts GoLive to add the new file in the Files list of the Site file.

,

4. Double-click the file in the Files list to open it.

You can open an individual page exported from your word processing application even if it is not part of your Site file. Simply choose File, Open and navigate through your hard drive to the file. However, if you intend to use

Formatting and Stylizing Text

79

the page as part of a site, it’s better to place it into your Site file and work with it from there.

Dragging from a Text Document or Another HTML Page You can also drag text from one document to another in GoLive. This can be done from both a text file (.txt) and an HTML file (.htm or .html).

, TO DO

To Do: Dragging Text to Another Document To do this, you need two documents: one containing the text you want to move, and the document to which you want to move it. Proceed with these steps: 1. Position the two documents next to each other on the screen. 2. Select the text that you want to move. 3. Click the mouse button down on the selected text and begin to drag it to the other page. 4. You will be able to see the insertion point of the cursor as you drag your selection onto the new page. Release the mouse button when the insertion point is where you want it to be (see Figure 4.2). FIGURE 4.2 Release the mouse button when the insertion point is where you want it to be.

, To easily see both pages simultaneously when dragging items from one HTML page to another, use the viewable width setting at the lower-right corner of the document window to size the pages to 200 pixels.

4

80

Hour 4

Typing Directly onto Your Page The simplest, most direct way of getting text onto your page is to put the cursor on the page and begin typing. But if you have even the most minimal experience with HTML you know that without the use of some additional formatting tools, your text will run as if it were in one long text path. The example shown in Figure 4.3 shows a page with and without a table. A table is just one way to format a page and is discussed in great detail in Hour 6. FIGURE 4.3 HTML pages need some formatting or else the text and images will just flow and flow.

Page without Table

Page with Table

Formatting and Stylizing Text

81

A nice feature in GoLive for new users is the layout grid. A layout grid is essentially a table, but you don’t have to think about the complexities of creating it as you add objects to your page. You will use one in this example just to get you familiar with using a text box in a layout grid, but layout grids are discussed in more detail in Hour 7. A text box creates a cell to type into and is placed on top of a layout grid. It can be moved around the page for a more precise layout.

, TO DO

To Do: Adding a Text Box To use a text box, complete the following steps: 1. Select Window, Objects from the menu. 2. Click the Basic button, which is in the first section of the Objects palette. 3. Drag the Layout Grid icon to your document window and drop it onto the page, or double-click the icon to insert it at the point of your cursor (see Figure 4.4).

FIGURE 4.4 Drag a layout grid onto your HTML page.

4

4. Drag the Layout Text Box object from the Basic section of the Objects palette onto the layout grid and drop it into position where you want it. 5. You can resize the text box by dragging one of the blue handles that appear along its edges (see Figure 4.5). If you do not see the blue handles, you might have deselected the text box. Select it again by clicking once on its border.

,

FIGURE 4.5 Drag a text box onto your layout grid and resize it.

Hour 4

,

82

,

6. When your text box is sized to your liking, place your cursor into the text box and type your text.

Viewing Your Text with the View Palette When working with text, it is important that you preview your pages in several browsers, on both major platforms, and even on different monitor sizes to see for yourself the differences between them all. Text size varies greatly from Macs to PCs, and your carefully planned layout might end up looking entirely different (read: nasty) when you see how it looks on another platform. GoLive has a little feature that simulates the differences in how text will display across browsers and platforms. It is called the View palette.

With basic HTML coding you have little control over this problem, but you learn some tricks to help in Hour 18.

, TO DO

To Do: Using the View Palette To use the View palette, complete the following steps: 1. Open an HTML page. 2. Select Window, View from the menu. 3. In the View palette, there is a Profile pop-up list of browsers and platforms. Select one and your page is temporarily altered to mimic the way it will look on that browser and platform. To remove the view, select Adobe GoLive from the pop-up list (see Figure 4.6).

FIGURE 4.6 Select the browser and platform from the popup list to get a general idea of how your page will look.

,

Formatting and Stylizing Text

83

Formatting and Stylizing Text Adding a bit of formatting and a style or two to your text can add just the right visual punch. Lines and lines of text flowing from one margin of the page to the other, with no formatting, can be difficult for the eye to follow and discouraging for the reader. Adding headings, bulleted lists, and a bold word here and there goes a long way toward making your text easier to read. This section uses standard HTML tags to create text formatting, but you can be much more consistent and create more text effects with less work by using cascading style sheets. The only drawback is that the cascading style sheets require a browser that is version 4 or higher. Follow this lesson to get familiar with text formatting in general. Then check out Hour 18 if you want more information about new ways to format your text.

Aligning Text Up on the Toolbar, you will see a number of buttons that you can use to set your text the way you want it. • To align left—Click the Align Left button on the Toolbar; or choose Type, Alignment, Left from the menu; or press Shift+Command+L (Mac) or Shift+Control+L (Windows) on your keyboard. • To align center—Click the Align Center button on the Toolbar; or choose Type, Alignment, Center from the menu; or press Shift+Command+C (Mac) or Shift+Control+C (Windows) on your keyboard. • To align right—Click the Align Right button on the Toolbar; or choose Type, Alignment, Right from the menu; or press Shift+Command+R (Mac) or Shift+Control+R (Windows) on your keyboard (see Figure 4.7). FIGURE 4.7 Aligning text to the right lines up the text at the right margin of the page or Layout text box.

4

84

Hour 4

When aligning text in HTML, the formatting will be applied to the entire paragraph. You cannot justify by line. This is not a limitation of GoLive, but rather of HTML. The
tag enables you to separate lines and align them independently.

Creating Headers Creating a header, which is akin to making a headline, is simple to do in GoLive. Header sizes range from 1–6, with 1 being the largest and 6 the smallest. Most often you will use Header 1, 2, or 3, and seldom, if ever, use 4, 5, or 6, which produce such a small headline as to be pointless. Header styles affect entire paragraphs, not merely one word or sentence.

, TO DO

To Do: Applying a Header Size To apply a header size to a piece of text, complete the following steps: 1. Select the text you want to change into a header. You can also just have your cursor in the line of text that you want to change. 2. In the Toolbar, select a header size from the drop-down list all the way to the left; or choose Type, Paragraph Format, and then a Header size (1–6) from the menu; or press Shift+Option+Command+(0–6) (Mac) or Shift+Alt+Control+(0–6) (Windows). Choosing 0 removes the header from the text (see Figure 4.8).

FIGURE 4.8 Applying Header 1 to a piece of text turns it into a large, bold headline.

, As with justification, applying a header size to text in HTML will affect the entire paragraph. This is not a limitation of GoLive, but rather of HTML. Also, if using the keyboard commands, you must use the numbers above the letters on the keyboard rather than the numerical keypad on an extended keyboard. Finally, be careful about applying other formatting—such as bold or font size 4—to text that has had a header size applied to it. This often leads to inconsistent results among various browsers.

Formatting and Stylizing Text

85

Applying Bold, Italic, or Teletype Styles to Text You might want to emphasize a word or phrase by making it bold or italicize text that is a quote. Applying styling to text in GoLive is quite simple. First, select the text to which you want to apply a style. Then choose one of these options: • To make the selection bold, click the B in the Toolbar; or choose Type, Style, Bold from the menu; or press Command+B (Mac) or Control+B (Windows) on your keyboard. • To make the selection italicized, click the I in the Toolbar; or choose Type, Style, Italic from the menu; or press Command+I (Mac) or Control+I (Windows) on your keyboard. • To make the selection teletype, click the T in the Toolbar; or choose Type, Style, Teletype from the menu; or press Shift+Command+T (Mac) or Shift+Control+T (Windows) on your keyboard. There are other style options in the Type, Style menu, including Underline, Strikeout, Superscript, Subscript, and Blink. Some of them (on Mac only) have corresponding keyboard shortcuts. To see the keyboard shortcuts, pull down the style menu and take a look at the list.

Setting the Font Size A font size of 3 is the size that a browser will display text when no particular size is specified. If you so desire, you can change the font size in GoLive. Setting the font size to 2 will display text one size smaller than the default, whereas a font size 4 will be one size larger. The font size differs from the header size in that it can be applied to a few words, or even one word, without affecting the rest of the paragraph. You can select a font size from 1 (the smallest) to 7 (the largest).

,

, TO DO

To Do: Applying a Font Size To apply a font size to a piece of text, complete the following steps: 1. Select the text. 2. Choose the size from the drop-down list in the Toolbar. You can also choose Type, Size, (1–7) from the menu. You can also elect to use a plus sign (+) or minus sign (–) to designate the size of the text. Choosing +1 means one size larger than the default size. –1 means one size smaller, and so on (see Figure 4.9).

4

Hour 4

,

86

FIGURE 4.9 Select some text and apply a font size to it using the drop-down list in the Toolbar.

, Changing Text Color You can make a header stand out even more by giving it a color, or if you have a dark background color on your page, you might need to make the text lighter.

, TO DO

To Do: Applying Color To apply color to a piece of text, complete the following steps: 1. Select the text to which you would like to add the color. 2. Control+click (Mac) or right-click (Windows) the text color cell in the Toolbar to reveal the Web safe color palette (see Figure 4.10). 3. Click the color of your choice. The color you selected is applied to the text. To change it to a different color, repeat the process. You can also Option+Click (Mac) or Shift+Click (Windows) to display the system color palette.

,

FIGURE 4.10 Control+click (Mac) or right-click (Windows) the text color cell in the Toolbar to reveal the Web safe color palette.

,

Formatting and Stylizing Text

87

Here is another way to add color to text: 1. Select the text to which you would like to add the color. 2. Click the text color cell in the Toolbar to open the Color Palette, or choose Window, Color from the menu. 3. The color palette is comprised of several individual color palettes. Select an individual color palette by clicking one of the buttons across the top of the color palette, or by choosing from the or the fly-out menu (see Figure 4.11). 4. Click the color of your choice. As long as your text remains selected, you can apply a different color to it by simply clicking another color in the palette.

FIGURE 4.11 Select an individual color palette from the fly-out menu.

4 , If you have misplaced the buttons in your Color palette, use the Palette menu to choose Show Buttons and they will reappear!

To remove color from a piece of text, choose Type, Remove Color from the menu.

Creating Lists from Text Bulleted and numbered lists are a very handy way of organizing information, particularly when you have large amounts of text to manage. Creating lists in HTML is not terribly difficult, but in GoLive it’s a no-brainer. Here’s how to do it.

,

TO DO

To Do: Making a Numbered List To make a numbered list, complete the following steps: 1. Type your list, separating each item with a return. 2. Select the list you have just typed. 3. Click the Numbered List button in the Toolbar, or choose Type, List, Default Numbered List from the menu (see Figure 4.12).

Hour 4

,

88

FIGURE 4.12 To make a numbered list, type your list, select it, and then click the Numbered List button on the Toolbar.

, , TO DO

To Do: Making a Bulleted List To make a bulleted list, complete the following steps: 1. Type your list, separating each item with a return. 2. Select the list you have just typed. 3. Click the Unnumbered List button in the Toolbar, or choose Type, List, Default Unnumbered List from the menu (see Figure 4.13).

Want to create a new line without causing it to become a list item? Use the Line Break command
Shift+Return.

FIGURE 4.13 To make a bulleted list, type your list, select it, and then click the Unnumbered List button on the Toolbar.

, , TO DO

To Do: Increasing the List Level Increasing and decreasing a list level is ideal for creating an outline where text is grouped hierarchically. To increase the list level, complete the following steps: 1. Select all the items in your list.

,

2. Click the Increase List Level in the Toolbar; or choose Type, List, Increase List Level List from the menu.

Formatting and Stylizing Text

89

TO DO

To Do: Decreasing the List Level To decrease the list level, complete the following steps: 1. Select all the items in your list.

,

2. Click the Decrease List Level in the Toolbar; or choose Type, List, Decrease List Level List from the menu.

Many GoLive users logically assume that if you click the Numbered or Unnumbered List button to create a list, you would click it again to remove the list. It doesn’t work that way. To remove a list, you must select your list and click the Decrease List Level button on the Toolbar. If the list level has been increased several times, you must click the Decrease List Level button enough times to move the selection flush to the left margin.

Adding Web Page Fonts HTML is fairly limited in terms of font usage. Sure, you can select a beautiful font to apply to the text on your page, but that in no way ensures that your visitors will see the same thing. Why? Well, for an HTML page to be displayed in a particular font, that font must be installed on the user’s computer. Although you can apply any font that is installed on your computer to the text on your pages, if the visitor to your site does not have the same font installed on his machine, the text will appear in the default font as set in the visitor’s Web browser. The default is often plain old Times New Roman. One way of dealing with this problem is to create font sets. A font set is a listing of fonts that the browser will look for on the user’s computer when a page is loaded. In this way, you have more of a chance of loading a certain font or one similar to it. If you have five fonts in your font sets, the browser will look for the first one in the list. If it is not found, it looks for the second, and so on. Often Web developers include sans serif or serif at the end of the list to ensure that the browser will find any font in that category if there is one.

Serif fonts have little tails hanging off the edge of the letters, whereas sans serif fonts do not. An example of a serif font is Times New Roman, and Arial is a sans serif font. Generally, sans serif fonts are easier to read on a computer screen and are often used for body text, but serif fonts are reserved for larger type such as headers.

4

90

Hour 4

Using Font Sets GoLive ships with a few ready-made font sets for you to use. They have conveniently included a serif set, a sans serif set, and a monospaced set. As you will see as you read further, you can edit these sets or create your own.

TO DO

To Do: Applying a Font Set To apply a font set to text, complete the following steps: 1. Select the text to which you would like to apply a font set.

,

2. Select Type, Font, preferred font set from the menu, where preferred font set is one of the sets in the list.

, TO DO

To Do: Creating and Editing Font Sets If you would like to create your own font set, you can do so by using the Font Set Editor. 1. Choose Type, Font, Edit Font Sets from the menu, or press Option+Command+F (Mac) or Alt+Shift+Control+G (Windows) on your keyboard to open the Font Set Editor. 2. Note that two groups of font sets exist. One named Default Font Sets and another named by the title of your document. Choosing Default allows the new font set to be available to any page, whereas choosing the titled page font set restricts the font set to being available only to the page currently open. 3. Choose a font name. This name will be the first choice for your font. 4. Click The Create a new Fontset button (see Figure 4.14). The new font set appears and is the same name as the font you selected under the Font Sets column. 5. To add additional fonts, click on the Add a Fontname button. These fonts are used if the previous font is not available. They go in order, so choose your preferred fonts first.

,

6. Repeat the previous step to add as many fonts as you want to your font set (see Figure 4.15). 7. Click the OK button to exit the Font Set Editor.

91

,

Formatting and Stylizing Text

FIGURE 4.14 The first step to creating a new font set is to pick the font you want selected as the first choice.

FIGURE 4.15 You can add fonts to your font sets using the Font Set Editor.

, To delete a font name from the set, select it in the Font Names list and click the Delete button (Trashcan) in the lower-right side of the Font Sets window. To delete a font set from the list of font sets, select the font set and click the Delete button.

4

92

Hour 4

Creating Hyperlinks from Text Hyperlinks are the threads that hold your site together, enabling visitors to jump from place to place at the click of their mouse. Creating hyperlinks, or links, is simple to do in GoLive. As usual, GoLive offers more than one way to approach this task. I strongly suggest that you always work in GoLive using a Site File—the file that GoLive generates that keeps track of all the other files and the links between in your Web site. (For more on creating a Site File, read Hour 2, “Creating a Site File.”) Although you can open and create links in a single HTML page in GoLive without opening the Site File, it’s best to work with your Site File open to avoid problems with your links later on. You’ll start by creating an e-mail link on your HTML page.

Creating an E-mail Link E-mail links are very useful; they enable the visitor to send feedback to the Web site owner instantly. Most surfers today have their browsers configured to open their e-mail program automatically when they click an e-mail link. Creating e-mail links in GoLive is easy. Let’s first examine the anatomy of an e-mail address. There are three parts to an e-mail address. The first part is the addressee, the person to whom the e-mail is going, and it precedes the @ sign. The second part is the @ sign, which indicates the break between the addressee and the destination. The third part, which follows the @ sign, is the destination. An e-mail link uses the HTML anchor tag just like a regular hypertext link, but is preceded by mailto: instead of http://, which is used to link to pages on the Internet. An e-mail link would look like this in HTML: Send me mail

The user clicks on the Send opens.

me mail

text and the mailform for the user’s e-mail program

Setting the Auto Add mailto Preference

, TO DO

GoLive automatically writes the mailto part of that link by setting a preference. When creating an e-mail link, all you have to do is type the e-mail address, without the mailto portion of the link, and GoLive automatically recognizes it as an e-mail address and adds the mailto for you. If you ever want to change this option, follow the steps in the next exercise.

To Do: Changing the mailto Preference To change the mailto preference, complete these steps: 1. Choose Edit, Preferences. 2. Expand the General tab and select URL Handling.

,

Formatting and Stylizing Text

93

3. Check or uncheck the box next to Auto add ‘mailto:’ to addresses.

,

4. Click OK to exit the Preferences dialog box.

, TO DO

To Do: Creating an E-mail Link To create an e-mail link in GoLive, complete the following steps: 1. Select the text that you want to use to create the link. (You can also use an image; see Hour 5, “Using Graphics on a Web Page,” for more on using images as links.) 2. Click the Link button in the Toolbar. Or, choose Special, New Link from the menu; or press Command+L (Mac) or Control+L (Windows) on your keyboard. 3. Open the Inspector, if it is not already open, by choosing Window, Inspector from the menu. 4. Type the e-mail address you want to link to into the URL field of the Link Inspector. GoLive will automatically add mailto: in front of the e-mail address to insert the correct syntax into the HTML code (see Figure 4.16). FIGURE 4.16 You type in the e-mail address, and GoLive automatically enters the mailto: needed in the syntax.

, Linking to Another Page Within Your Site There are lots of ways to create a link in GoLive. This section covers some of them.

,

, TO DO

To Do: Using the Link Button To use the Link button to add a link, complete the following steps: 1. Select the text that you want to use to create the link. (You can also use an image; see Hour 5 for more on using images as links.) 2. Click the Link button in the Toolbar. You can also choose Special, New Link from the menu; or press Command+L (Mac) or Control+L (Windows) on your keyboard. 3. Open the Inspector, if it is not already open, by choosing Window, Inspector.

4

Hour 4

,

94

4. Use one of these methods to complete the link: Point and Shoot—Click the Point and Shoot button below the URL field in the Inspector and hold the mouse button down. Drag over to the Files tab of the Site File and point at the file to which you want to link (see Figure 4.17). If the Site File is hidden, drag up to the Toolbar and point at the Selected Window button, which will bring the Site file forward, and then point to the file in the list. Let go of the mouse.

You can also access the Point and Shoot function by selecting a piece of text or an image, pressing the Command key (Mac) or Alt key (Windows), and pointing your cursor at the selection. The Point and Shoot icon appears next to the arrow cursor, at which point you can complete the point and shoot operation by dragging the line to the file to which you want to link.

FIGURE 4.17 To link using point and shoot, drag over to the Files tab of the Site File and point to the file to which you want to link.

Browse—Click the Browse button in the Link Inspector. Browse through the Site Root Folder of your site until you locate the file to which you want to link. Select the file and click the OK button. Type—Type the URL directly in the URL field of the Link Inspector.

,

Drag the file icon to the selected text—Drag the file icon of the file you want to link to, and drop it on top of the selected text. You could also drag the page icon at the top-left corner of a page, and drop it onto selected text on another page to create a link.

To have a new browser window open when a link is clicked you can use an HTML tag attribute called TARGET. GoLive makes it simple to use this attribute. When making your link, look for the drop-down list to the right of the field named Target in the Link Inspector. Simply select _blank from the list.

Formatting and Stylizing Text

95

Linking to a Page Not in Your Site To create a link to a page not in your site (an external URL), you must know the full URL of the page to which you are linking. A full URL begins with a protocol. Most often it is http://, but it might be https:// (used for secure servers), ftp:// (used for file transfers), or another protocol.

, TO DO

To Do: Linking to an External URL To make the link, complete the following steps: 1. Select the text that you want to use to create the link. (You can also use an image; see Hour 5 for more on using images as links.) 2. Click the Link button in the Toolbar; choose Special, New Link from the menu; or press Command+L (Mac) or Control+L (Windows) on your keyboard. 3. Open the context-sensitive Inspector, if it is not already open, by choosing Window, Inspector, from the menu; or by pressing Command+1 (Mac) or Control+1 (Windows) on your keyboard. 4. Type the URL into the URL field of the Link Inspector.

,

5. Press Return/Enter, or click the arrow button at the right end of the URL field for your change to be accepted.

If the URL you want to use is long and complicated, have that page open in your browser, and copy and paste it directly into the URL field of the Link Inspector. This lessens the possibility of typo mistakes.

Using Anchors to Link to a Particular Spot on Your Page Anchor links are useful in a number of situations. For example, assume that you have a Frequently Asked Questions page on which you want to list all the questions at the top of the page and link them to the answers listed below. By using anchors, you can do exactly that. You place the anchor on your page in the spot you want the link to go to, and then link to the anchor. You can also use an anchor to instruct a link to open a new page at a particular spot.

4

96

Hour 4

, TO DO

To Do: Creating a Link Using an Anchor To create a link using an anchor, complete the following steps: 1. Select the text you want to use as the link. 2. Open the Inspector, if it is not already open, by choosing Window, Inspector. 3. Click the Link button in the Toolbar. You can also choose Special, New Link from the menu or Command+L (Mac) or press Control+L (Windows) on your keyboard. 4. Click the Point and Shoot button in the Inspector, and holding the mouse down, drag to the spot on the page you want to create the anchor.

,

5. Release the mouse button.

, TO DO

To Do: Creating an Anchor Link Using Point and Shoot To use point and shoot to create a link, complete the following steps: 1. Select the text you want to use as the link 2. Command+drag (Mac) or Alt+drag (Windows) to the point where you want to place the anchor (see Figure 4.18).

FIGURE 4.18 Select text and then Command+drag (Mac) or Alt+drag (Windows) to the point where you want to place the anchor.

, With the methods used here to create anchors, names are automatically assigned to the anchor. You might have to refer to the anchor at a later time, so choose logical names and keep in mind anchor names are case sensitive.

Formatting and Stylizing Text

97

, TO DO

To Do: Adding an Anchor Link with the Palette To add a link using the palette, complete the following steps: 1. Open the Objects palette, if it is not already open, by selecting Window, Objects from the menu. 2. From the Basic section, drag an Anchor icon to your page. 3. Open the Inspector, if it is not already open, by choosing Window, Inspector. 4. Name the anchor in the Inspector. Keep the name simple and in lowercase.

,

5. Link to the anchor by using the Point and Shoot method described earlier. Besides using point and shoot, you can also type the name of an anchor directly into the Link Inspector. Anchor names are always preceded by the # symbol in the URL that links to them. If you want to create an anchor link on another page, open both the page the link will originate from and the page to which you want to link. Select the text or image from which you want to create the link, and then Point and Shoot from that page to the other. When you release the mouse, an anchor will be created. You can also drag an Anchor icon from the Basic section of the Objects palette and drop it onto a page, and then link to that anchor using point and shoot. Finally, you can link to an anchor that already exists on another page. Pages that contain anchors are identified in the Site File by a little right-facing arrow next to the Page icon. From your selection, press the modifier key to enable the Point and Shoot mechanism, and while holding down the mouse button, point at the arrow. Doing so opens a dropdown list showing the names of the anchors on that page. Continue to hold down the mouse and point until you navigate to the desired anchor. Release the mouse.

Don’t want to go through all of the mouse gymnastics to link to an anchor on another page? You can simply link to the page that contains the anchor. Follow the name in the link textbox with the # sign and the anchor name, no spaces between.

4

98

Hour 4

Spell Checking Your Document Last, but not least, run a spell check on your pages to tidy them up. You can spell check a single page or your entire site. • To spell check a page, bring that page to the front. • To spell check your site, bring the Site File to the front. If your cursor is in the middle of the page, the spell checker runs from that position. To run the spell check from the top, click the From Top check box. You can also select a portion of the text to spell check only that piece.

, TO DO

To Do: Running the Spell Check To check spelling, do the following: 1. Choose Edit, Check Spelling from the menu, or press Option+Command+U (Mac) or Shift+Control+U (Windows) on your keyboard to open the Check Spelling dialog box (see Figure 4.19).

,

FIGURE 4.19 The Check Spelling dialog box offers a number of options.

2. Choose the language you prefer from the language pop-up menu.

,

Formatting and Stylizing Text

99

3. Click Start to begin the spell check. • Change replaces the suspect word with the one in the Suggestions field. You can also choose one from the suggestion list, or correct the word by editing it yourself. • Ignore skips over the suspect word with no correction. • Ignore All skips all occurrences of that word with no correction. • Learn adds the word to your personal dictionary so that it won’t be flagged as an error any more. • Next File takes you to the next document in your site if you are spell checking the whole site.

,

Notice the little triangle at the bottom left of the Check Spelling dialog box. Clicking it reveals more options that you can choose when determining criteria for your spell check, such as “Find uncapitalized begin of sentences” and “Find repeated words.”

Summary In this hour, you learned how to import text into your Web page, and how to format and stylize your text, including how to make numbered and unnumbered lists. You also learned how to add fonts and font sets to your Web page and how to create hyperlinks. Last, but not least, you learned how to use the built-in spell checker in GoLive.

Q&A Q I tried to drag and drop some text onto my grid, but I can’t see all the text. What have I done wrong? A When you drag text onto a grid, GoLive creates a small Layout text box for you and puts the text into it. If the text requires a larger size box, you’ll see a small + (plus) sign in the bottom-right corner of the Layout text box. This visual cue tells you to resize the box to the dimensions necessary to accommodate your text. Q I made some text a header 1 so that it would stand out, but I don’t like the way it looks. How do I get rid of it? A Use the same drop-down list in the Toolbar that you used to create the header, but instead of choosing a header number, choose None.

4

100

Hour 4

Q After I added a font set to a paragraph, I decided not to use it, but I don’t know how to change it back. A Select the text from which you want to remove the font. From the menu, choose Type, Font, Default Font. This will remove the tag from the source code and will return the text to its default state. Q I made some links to other files on my hard drive using the Browse method, and then I uploaded the page. But when I went online to check the page, I got the error message 404, File Not Found. Why? A You linked to files on your hard drive, but then didn’t upload those files—you uploaded only the page containing the links. The result is a broken link and an error message. Even if you had uploaded the other files, they would have to be on the server in the same directories as they are on your hard drive. For example, if you linked to a file called myfile inside a folder called mystuff, which was inside another folder called myWebstuff, you would need to have the same folder structure on the server for the links to remain intact. GoLive calls this problem orphan files, and will help you fix it. See Hour 9, “Using GoLive’s Site Management Tools,” for more details. For more information on links, please visit the Web site at www.golivein24.com.

Quiz 1. When applying a header size to a piece of text, the formatting will affect a. Only the word. b. Only the line. c. The whole paragraph. 2. For a font that you have applied to text to appear correctly on a visitor’s computer, the visitor needs to a. Get the latest browser. b. Have a special plug-in installed in the browser’s plug-ins folder. c. Have the font installed on the computer. 3. When making a link out of a piece of text, in which order do you complete the following steps? a. Press the Link button on the Toolbar. b. Select the text you want to use to make the link. c. Point and shoot, browse, or type the URL into the Inspector.

Formatting and Stylizing Text

101

Quiz Answers 1. c. When applying a header size to a piece of text, the formatting will affect the whole paragraph. 2. c. For a font that you have applied to text to appear correctly on a visitor’s computer, the visitor needs to have the font installed on the visitor’s computer. 3. b, a, c. (To make a link out of a piece of text, select the text you want to use to make the link; press the Link button on the Toolbar; Point and Shoot, browse, or type the URL into the Inspector.)

Exercises Create a newsletter and incorporate the following formatting and styles: • Two headers of varying sizes, each in a different color • A bulleted (unnumbered) list with two levels • One paragraph justified to the right and another to the left • One font set for the headers, another for the body text • Links to other pages, including one to a Web site other than yours • Spell check your newsletter

4

HOUR

5

Using Graphics on a Web Page At its inception, the Internet was predominantly used by academics and was nothing but page after page of black text on a dreary gray background. It served the purpose of publishing information, which was generally scientific or academic in nature. There was no need for graphics beyond a few images and graphs here and there. Then designers became more involved in Web page creation and started to push the limit. Thanks to today’s modern browsers and faster speeds due to wider bandwidths, you have the opportunity to be more creative than in the past, but there are still many limitations. In this section we will talk about the limitations of size and format, and then teach you how to integrate your images into a GoLive page. In this hour we will show you how to create and place different types of images in several ways, including how to create a background image. Make sure to download the appropriate images from www.golivein24.com, before you start.

104

Hour 5

In this hour, you’ll learn about the following: • Resolution issues • Understanding which image types can be used • How to put images into your Site file • Placing an image on your page • Changing the size of an image • Aligning your image with the text • Placing a background image on your page • Adding a hyperlink to your image • Creating an Image Map

Selecting the Proper Image Type An image prepared for the Web is an entirely different animal than an image prepared for print. If you use high-resolution images, like you would for a printed piece, the file size of your image will be enormous and thus, will take a long time for viewers to access your page. Bandwidth, the bits per second (bps) transferred over the Web when a page is loaded into a browser, is of major concern to Web developers and Web surfers alike. You’ll need to compress your images and reduce the resolution to prepare them for use on the Web.

File size refers to the amount of space the file takes up on your hard drive, not the actual dimensions of the image.

Resolution Issues For Web images, dpi (dots per inch) does not matter. Many people feel that making their image 72 dpi is the proper way to adjust the file size for the Web, but that’s not necessarily true. Measuring by pixels is the answer. Don’t buy it? Follow along to see if it makes sense. The display size of an image onscreen is determined by the pixel dimensions of the image plus the size and setting of the monitor. For instance, a typical 13-inch monitor displays 640 pixels horizontally and 480 vertically. An image with pixel dimensions of

Using Graphics on a Web Page

105

640 by 480 would fill the screen. On a larger monitor with a 640 by 480 setting, the same image (with pixel dimensions of 640 by 480) would still fill the screen, but each pixel would appear larger. Changing the setting of this larger monitor to 1024 pixels by 780 pixels would display the image at a smaller size, occupying only part of the screen. So what is the answer? Measure in pixels! Again, preplanning is the key. If you decide that you are going to base your page on a 17-inch monitor, you have 780 pixels to work with. If you want an image to take up half of the viewer’s screen, resize the image in its original application to be 390 pixels wide. One quarter of the size 195 pixels, and so on (see Figure 5.1). FIGURE 5.1 Final image size should be based on the screen size you are building your page to accommodate.

5 Pixel size is really important. If you understand this concept you won’t create a navigation bar that extends beyond the viewing area, or create an image of the President/CEO where only his left eyeball is visible. Trust me, it happens. Although this is a publication on GoLive, we’re going to assume that many of you have Photoshop, any version. This tip will help you to resize images correctly. Open an image in Photoshop and choose Image Size from the Image menu. Web designers work in the top half, whereas print designers work in the bottom. It doesn’t matter what the resolution is, it is the pixel dimension at the top that matters for Web pages (see Figure 5.2). Think in fractions of your total page, and enter the values listed previously. Your image could be 3000 dpi, but if the pixel dimensions are correct, it will work and be the same file size as a 72-dpi image at the same pixel dimension.

106

Hour 5

FIGURE 5.2 When working with images to go on a Web page, it’s the pixel dimensions that matter—not dpi.

Selecting the Proper Image Type File formats for Web graphics have one thing in common: compression. Compression is a way of making files as small as possible so they load quickly. However, depending upon the format you choose to use, compression comes with a price: loss of quality. Couple that with the fact that browsers will display images of only certain file types, and your choices as a Web designer become limited. The three most common image types for the Web are • GIF (Graphics Interchange Format)—Usually pronounced with a hard “g,” but some say that it depends on the peanut butter you ate when you were a child. GIF (.gif) uses a lossless method of compression. Lossless means that during compression an attempt is made to retain the original data; don’t let that fool you into thinking that your image will look great. GIFs compress by reducing the amount of color, so you can get some odd effects in an image if color is reduced too low. GIFs support transparency. If this option is selected you will not see a white box surrounding your image in GoLive. GIFs support animation. So if you want it to move, pop-up, or blink make it a .gif. GIFs can contain a maximum of 256 colors, and must be indexed color images. The fewer colors used, the smaller the file. A good example of a GIF image is shown in Figure 5.3. • JPEG (Joint Photographic Experts Group)—A lossy compression method. To save space, JPEG compression loses parts of an image. However, unlike GIF, you can choose the level of compression used in the process. JPEG (.jpg) is the best choice for photographic images because it supports 24-bit color (16.7 million colors).

Using Graphics on a Web Page

107

JPEGs support antialiasing, which help keep smooth transitions from one color to the next. Any file, whether it is generated from a logo or photograph that has gradations (subtle shading), is best saved as .jpg. FIGURE 5.3 Images with long spans of the same color are good candidates for .gif files.

5

• PNG (Portable Network Graphics)—PNG (pronounced peeng) is a newer graphic format for compressing images that provides the best features and can replace the GIF format. I wouldn’t suggest using it, however, unless you are certain that all your viewers’ browsers support it. PNG (.png) offers variable transparency or opacity, as shown in Figure 5.5. PNG files are compressed in a lossless fashion. However, because PNG is only fully supported by the latest browsers, GIF remains the standard. PNG files will not totally supplant GIF because they do not support animation.

108

Hour 5

FIGURE 5.4 Images with lots of color shades are good candidates for .jpg files.

FIGURE 5.5 Images saved in .png format support different levels of transparency. Notice the shadow is slightly transparent.

In general, you’ll want to use GIF or PNG for graphic images, especially those containing just a few colors, such as logos. Reserve JPEG for photographs. For more info and links to resources on preparing images for the Web, visit www.golivein24.com. Now that you know what types of image formats you can use in your Web site, you can experiment by placing various graphic elements on a page. Images can even be used in the background of your page, enabling you to create winning layouts. Please keep both your Site file and the Inspector open for this entire hour. For details on how to create a Site file, please refer to Hour 2, “Creating a Site File.” To open the Inspector, select Window, Inspector.

Using Graphics on a Web Page

109

From this point forward you might see the term Optimized, as in an Optimized file. This means that an image has been reduced in file size and is saved as a file format supported by the Internet.

Adding Images to the Site File To complete the lessons in this hour, you will need images to work with. If you haven’t done this already, create a folder on your desktop named hour5_images. Then go to http://www.golivein24.com/ to download the images into the folder you just created.

GoLive has a feature called Smart Objects. Using this feature, you can open your Adobe Photoshop/ImageReady, Illustrator, and LiveMotion files for editing within GoLive. For more information on this powerful new feature, please refer to Hour 17, “Using Photoshop/ImageReady, Illustrator, LiveMotion, and Smart Objects.”

You can employ several methods for adding images to your Web site: • Add images using the menu • Drag and drop images into the Site file • Put images in the Site Root folder and update the Site file

, TO DO

To Do: Add Images to Your Site File Method One: To add images to your site using the menu, complete the following steps: 1. From the File menu, choose Import, Files to Site. 2. Navigate through your hard drive until you locate the folder you downloaded (on your desktop) named hour5_images. Open that folder and locate the file named dog.jpg.

,

3. Select the filename from the list in the top pane, and then click Add (see Figure 5.6). The file will be added to the list in the lower pane of the Add Files box. You can repeat this process as many times as necessary to select all the images you want. If you change your mind, you can select a file from the bottom pane and click Remove to take an image out of the list. For now, add only this one file. 4. Click Done.

5

Hour 5

,

110

GoLive creates a copy of the file and adds it to your site. Your original file remains untouched.

FIGURE 5.6 Select a filename from the list in the top pane, and then click Add, or double-click the filename.

Method Two: To add images to your site using drag and drop, complete the following steps: 1. In the Finder or in Windows Explorer, open the folder named hour5_images and locate the file named dog_art.gif. 2. Situate the folder window you’ll be dragging “from” next to the site window you’ll be dragging “to.” In Windows, you might need to reduce the size of the window from full screen to partial screen. 3. Drag the file from its folder and drop it into the Files tab of your Site file in GoLive. A copy of the file is added to your site (see Figure 5.7).

,

FIGURE 5.7 Drag the file from its folder and drop it into the Files tab of your open Site file in GoLive.

,

Using Graphics on a Web Page

111

The two methods we just explored both make copies of the image files and place them into the Site file. In this next method, you are placing the original file into the Site file. You can place an image from any source—including your hard drive, a CD, removable media, or by saving an image directly from your art program—into the Site Root folder of your Web site in the Finder or in Windows Explorer. Method Three: To add images to your site by placing them in the Site Root folder, complete the following steps: 1. Locate the folder on your desktop named hour5_images and open it. 2. Locate the Site Root folder of your Web site in the Finder or in Windows Explorer. 3. Drag the file named flag.gif from the hour5_images folder into your Site Root folder. 4. Switch back to GoLive. Click the Refresh View button, which has two wavy arrows on it, on the Toolbar (see Figure 5.8). GoLive rescans the Site Root folder, recognizes the new file, and adds it to the Files tab of your Site file.

FIGURE 5.8 Click the Refresh View button on the Toolbar.

, If a file needs to be moved after it has been placed into the site, open the Site file and move it from within GoLive. GoLive will track its location and update any pages affected by the move. Do not move files around in the Finder or in Windows Explorer or you will create broken links.

Now that you have placed images files into your Site file, you are ready to start brightening up your pages with them. We’ll begin simply, by placing an image onto your Web page.

Adding an Image to a Web Page As with nearly every function in GoLive, there are several methods for placing an image on your page. You will start by putting an image placeholder onto the page, and then linking the placeholder to an image.

5

112

Hour 5

, TO DO

To Do: Placing an Image Placeholder Icon on a Page To add an image placeholder to your page, complete the following steps: 1. Have a page open, perhaps the index.html page that was created with your site. 2. Open the Objects palette, if it’s not already open, by selecting Window, Objects. 3. Click the Basic button of the Objects palette. (Note that resting your pointer over a button will display the tool tip.) 4. Locate the Image icon. It’s the one with shapes on it. 5. Drag the Image icon and drop it onto the page (see Figure 5.9). FIGURE 5.9 Drag an Image icon from the Objects palette onto your Web page.

, The icon you now have on the page represents the place where the image will go. To complete the process, you must tell GoLive which image to use in that spot. Choose the Point and Shoot or Browse method to do so. The most easy, reliable, and fun method of specifying the image is Point and Shoot.

, TO DO

To Do: Selecting an Image with Point and Shoot To complete the process of placing the image on your page by using the Point and Shoot method, complete the following steps: 1. Select the image placeholder. 2. From the Inspector, click and hold the Point and Shoot button at the left end of the Source field. The button has a little coil on it.

,

3. Keeping the mouse button depressed, drag the pointer to your Site file, locate the image named dog.jpg, and point at it until it’s highlighted (see Figure 5.10). 4. When the filename is highlighted, let go of the mouse button.

113

,

Using Graphics on a Web Page

FIGURE 5.10 Use the Point and Shoot operation to assign an image to a placeholder.

, If you accidentally highlight the wrong file, don’t worry! Simply repeat the Point and Shoot process again and choose the correct file the second time. The newly chosen file will replace the incorrect one without even deleting the old one first. Also note that if the image you want is inside of a folder in the Site file, point at the folder. GoLive automatically opens the folder, enabling you to select the image.

If your Document window obstructs the Site file from view and makes it impossible for you to point at it, point instead at the Select Window icon on the Toolbar. Doing so will toggle the Site file to the front, and you can then drag to the Site file to finish your Point and Shoot process as described. Your mouse button should remain depressed during the whole Point and Shoot operation (see Figure 5.11). Also, if you can see part of the Site window sticking out from behind the other windows, moving the cursor over it during a Point and Shoot operation will bring it to the front. FIGURE 5.11 Pointing at the Select Window icon in the Toolbar during a Point and Shoot operation toggles between the Site file and the Document window.

5

114

Hour 5

You can skip the Inspector! Command+click Point and Shoot (Mac) or Shift+Click Point and Shoot (Windows) right from the image icon to the image in the Site menu.

, TO DO

To Do: Selecting an Image with Browse The second method for linking an image to an image placeholder is to browse through the folders on your hard drive until you locate the file. To select an image using the Browse method, complete the following steps: 1. Select the image placeholder for which you want to designate an image. 2. In the Inspector, click the Basic tab. 3. Click the Browse button to the right of the Source field. It has a little folder icon on it (see Figure 5.12). FIGURE 5.12 The button with the folder icon on it is the Browse button.

4. A dialog box will appear, enabling you to browse through your hard drive to your Site Root folder. Locate the image file named lab.png and select it.

,

5. Click Open.

Not seeing the whole address because of the size limitation of the text input box? Click the Inspector’s fly-out menu in the upper right of the palette, and select Edit. A separate, larger window will appear that you can use to view and edit the location.

Yet another way of putting an image on your page is by using Drag and Drop. This method does not require using an image placeholder at all. Instead, you situate your Site

Using Graphics on a Web Page

115

file and your Document window next to each other and simply drag the image from the Files list and drop it onto the page (see Figure 5.13). FIGURE 5.13 Drag images from the Files list and drop them onto the page.

In addition to placing an image directly onto a page, you can put it inside a table cell, onto a layout grid, or inside a floating box. For details on how to use these three elements, please refer to Hours 6, “Designing Pages with Tables,” 7, “Designing Pages with the Layout Grid,” and 8, “Designing Pages with Floating Boxes.”

Resizing an Image To resize your image, click it to display the three resize handles situated at the right side, bottom, and bottom-right corner. Drag a handle until the image is the size you want it to be. (The cursor will turn to a little blue arrow when it’s hovering over one of the pull areas.) To drag proportionately, hold down the Shift key before dragging. You can also type the dimensions into the Height and Width fields in the Image Inspector’s Basic tab (see Figure 5.14). An image that has been resized will have a little square in the bottom-right corner. To restore the image to its original size, click the matching square in the Basic tab of the Image Inspector (see Figure 5.15).

We strongly suggest that you don’t use GoLive to resize your images. Browsers will display your image at any size you tell them to, but they still must download the entire image first. If you’ve made an image larger, it

5

116

Hour 5

might appear blurred or pixilated; if you’ve reduced it, your viewer still uses the same bandwidth to download it as if it were full size. You’ll enhance your page’s speed and look dramatically if you prepare your images at the correct size in an illustration program such as Adobe Photoshop before placing them on your Web pages.

FIGURE 5.14 You can type the dimensions into the Height and Width fields in the Image Inspector’s Basic tab.

FIGURE 5.15 To restore an image to its original size, click the square in the Basic tab of the Image Inspector.

Aligning Images and Text If you drop an image onto a completely empty page, it will justify to the left margin by default. You can center the image very simply by clicking the Center Justify button in the Toolbar. Or, you can justify the image to the right margin by clicking the Right Justify button.

Using Graphics on a Web Page

117

However, when you drop an image onto a page that already has text or other elements on it, the image might push the text around in such a way that doesn’t always look very nice (see Figure 5.16). That’s where alignment options come in handy. FIGURE 5.16 An image at the default alignment.

, TO DO

To Do: Aligning an Image to the Left or Right of Text To align the image to the right or left of text, complete the following steps: 1. Place the image named Doggie_art.gif anywhere on your page. 2. Open the file doggie.txt located in the hour5images folder named. Copy and paste the text next to the picture. 3. Click the image to select it. 4. At the bottom of the Inspector is an Alignment drop-down menu. To align the image to the right of the text, choose Right from the menu. To align the image to the left of the text, choose Left. Play around with the other options in the menu to see the different effects you can produce (see Figures 5.17 and 5.18).

,

FIGURE 5.17 An image aligned to the left of the text.

5

Hour 5

,

118

FIGURE 5.18 An image aligned to the right of the text.

, Adding Space Around an Image You might like to add some space around your image so that other elements, such as text, do not butt up against the edges of the picture. You can add such space by using Hspace and Vspace, which stand for horizontal space and vertical space, respectively. They enable you to add padding around your image. You designate the amount of space you want in pixels.

, TO DO

To Do: Add Space Around the Outside of Your Image To add some padding around your image, complete the following steps: 1. Click the image to select it. 2. Click the More tab of the Inspector. 3. In the Hspace and Vspace input fields, type the number of pixels you want to add as padding around your image. Hspace adds padding to the sides of the image, whereas Vspace adds padding to the top and bottom (see Figure 5.19).

FIGURE 5.19 Add some space (in pixels) around your image by typing a number into the Hspace and Vspace fields.

,

Using Graphics on a Web Page

119

Want to add space to just one side instead of both at the same time? Consider creating the image with extra space on one side in the original application.

In the Basic tab of the Inspector, you’ll see an Alt Text field. You should type a word or two that describes the image into this field. For example, if you’ve a placed a logo for Adobe GoLive on your page, Alt Text could be “Adobe GoLive Logo.” This places an alt tag in the HTML code, which does several things. It’s used to alternatively display text when an image is not shown; for example, on handheld computing devices and text-based browsers used by the visually impaired. This text can also be seen as the page loads.

Adding a Background Image to a Web Page At this point check to see if you have all the images from the hour5images folder imported into your site. If not, use one of the methods we went through earlier to have them accessible for the next exercises. Some Web pages have a nice background texture or even a large but subtle image behind the text. Adobe GoLive makes it a snap to place such a background image on a page. The following are the three common ways to add a background image to your Web page: • Using Point and Shoot • Using the Browse button • Using drag and drop Begin by opening a page. Perhaps you can continue working on our index.html page. From the Inspector, you have two ways to place the image: the Point and Shoot method and the Browse method.

If you plan to use a background image on your page, remember to make it subtle. If it’s too bright or busy, it might interfere with a visitor’s ability to read the text.

5

120

Hour 5

, TO DO

To Do: Selecting a Background Image with Point and Shoot To place an image in the background of your page using the Point and Shoot method, complete the following steps: 1. Have a page open, perhaps the index.html from our Site file. 2. Click the Page icon at the top left of the Document window. 3. Click the Image check box in the Page tab of the Inspector (see Figure 5.20). FIGURE 5.20 Click the Image check box in the Page tab of the Inspector.

4. At the left side of the input field is the Point and Shoot icon, which resembles a coil. Click and hold down on this icon. 5. Keeping the mouse depressed, drag the pointer to your Site file, locate the image named bg_fur.gif in the Files list, and point at it until it’s highlighted.

,

6. After the file is highlighted, let go of the mouse button. The image will be placed into the background of your page.

, TO DO

To Do: Selecting a Background Image with Browse To select the background image by browsing through the folders on your hard drive, complete the following steps: 1. Click the Page icon at the top left of the Document window. 2. Click the Image check box in the Page tab of the Inspector. 3. Click the Browse button at the right side of the input field. It has a little folder icon on it.

,

4. A dialog box will appear, enabling you to browse through your hard drive to your Site Root folder and to the desired image. Try bg_tall.jpg. When you locate the image file, select it and click Open. It will be placed into the background of your page.

Using Graphics on a Web Page

121

Images used in the backgrounds of HTML pages are tiled, meaning that they repeat endlessly. Small images are usually designed to tile seamlessly, giving the appearance of one large image, similar to the way wallpaper looks. If you prefer to use a large image that you don’t want to repeat, you must make a choice. You can make the dimensions of the image large enough to cover the whole page, so any repeat will occur off the page and won’t be seen. Or you can use a floating box to place your image on the page. For more on floating boxes, please refer to Hour 8. Cascading Style Sheets, which are discussed in Chapter 18, also offer background repeat options.

Drag and Drop Your Background Image An easy way to place an image in the background of your page is by using drag and drop. To do this you must situate your Site file and your Document window so that you can see them both.

, TO DO

To Do: Selecting a Background Image with Drag and Drop To drag a background image to your page, complete the following steps: 1. Have a page open. 2. Select an image from the Files list in your Site file. 3. Drag and drop the file onto the little page icon at the top-left corner of the page (see Figure 5.21).

FIGURE 5.21 Drag the image onto the little page icon at the top-left corner of your page.

5

,

122

Hour 5

If you are uncertain which of the images in your Files list is the one you want to use, you can easily peruse them this way: Select an image file in the Files list of the Site file. Click the Content tab of the Inspector. GoLive previews the image for you. Use the up-arrow and down-arrow keys on your keyboard to look at other files. You can also drag an image right out of the Content tab and place it on your page.

Linking Images to Other Pages Images can be hyperlinked to other HTML pages, similar to the way text can be linked. GoLive makes doing so a breeze.

, TO DO

To Do: Adding a Link to an Image To make your image a link, you must first place the image on the page. Following these steps: 1. Drop the image button.gif onto your index page. 2. Click once on the image so that it’s selected. 3. Click the Link tab in the Inspector, or use Command+L (Mac) or Control+L (Windows) or click the Link button to the left of the first input field (see Figure 5.22). 4. Either point and shoot at or browse to the page you want to link to by using the methods described earlier in this hour. You can use the supplied file named link.html. 5. Test this in your browser. FIGURE 5.22 Click the Link button at the left of the first input field.

,

Using Graphics on a Web Page

123

Regarding frames: If you’re making a link from an image in one frame and would like the new page to load into another frame, remember to target the link or your page will load improperly. To learn more about frames, refer to Hour 7.

Advanced users might prefer to type the path (URL) directly into the Inspector when making a link, placing an image on an HTML page, or placing an image in the background of an HTML page. The path can also be typed into the Outline mode or the Source mode. For more about working in other modes, refer to Hour 21, “Working with Source Code in GoLive.”

Using Image Mapping Image Mapping—the process of dividing an image into areas called hotspots that can then be linked individually—is a tedious and frustrating process when done by hand. But it is as easy and fun as using a drawing program in GoLive. Using the Image Map– drawing tools, you draw the hotspots onto your image. Hotspots can be square, round, or multisided. Each hotspot you draw can then be assigned its own link. This way you can have one image that links to many places. An example of a good use for an Image Map is a navagation bar. We have an image ready to go in the hour5images folder.

, TO DO

To Do: Creating Clickable Regions on an Image Before we get started create three simple pages: one called sales.html, one called locations.html, and one called service.html. Each one should simply have the words “You have reached Sales” or “Locations” or “Service” as text on the page. Save them to your Files folder. To draw hotspots or clickable regions on an image, complete the following steps: 1. Create a new page and save it in your Site file as map.html. 2. Place the image named navbar.gif on your page. Click once on the image to ensure that it is selected.

,

3. Click the More tab of the Inspector. 4. Click the Use Map check box to enable the hotspot drawing tools, which are found in the Toolbar (see Figure 5.23).

5

Hour 5

,

124

5. GoLive automatically assigns a name to your Image Map because a name is required. You can change the given name if you want. Name this Image Map navbar.

FIGURE 5.23 First, access the More tab, and then click the Use Map check box to create an Image Map.

6. Choose the rectangle drawing tool in the Toolbar (see Figure 5.24), and then click and drag to draw a clickable region over the text that says Sales. Resize by grabbing the blue square handles. If the position of the region is not quite right, select the pointer in the region tools and drag it to a new position (see Figure 5.25). FIGURE 5.24 Select the rectangle, circle, or polygonal drawing tool. FIGURE 5.25 After you create a clickable region, you can move it to the desired position on your image.

,

7. Now designate the URL that this region will be linking to. Although the region is active, locate the URL in the Image Map Inspector, shown in Figure 5.26. You can locate the file you created named sales.html by browsing or Point and Shoot. Don’t forget to put a sensible Alt tag in! Repeat the process with the other two regions, Locations and Service. When you are finished creating the map test it in your browser.

125

,

Using Graphics on a Web Page

FIGURE 5.26 Type, browse, or Point and Shoot to link your clickable region.

When an image is created in GoLive an M icon appears somewhere on your page (see Figure 5.27). Make sure that if you copy this image that the M icon goes with it. Otherwise, you will lose all your map information.

FIGURE 5.27 The M icon contains the Image Map information and must travel with the image when copying and pasting.

, Now that you’ve learned about images, it’s time to forge ahead to Hour 6 and learn about tables!

Summary In this hour, you learned the types of images that are acceptable for use on the Web and how to use them in the body and background of your Web page. You learned how to align an image so that text wraps around it, and how to add a hyperlink to it. You also learned how to create an Image Map with clickable regions that are hyperlinked using GoLive’s Image Map drawing tools.

Q&A Q Can I use a PICT, PCX, or TIFF in my Web page? A No. Current browsers don’t support those file types. You should use GIF, PNG, or JPEG, all of which create a much smaller file size.

5

126

Hour 5

Q I scanned my photographs at 300 dpi. Is that an okay resolution for the Web? A Check the pixel dimensions to make sure you are not creating an image too large for your page, not the resolution.

Quiz 1. Where will an image placed in the background of your page appear? a. In the top-left corner. b. In the center of the page. c. It will tile and repeat across the entire page. 2. How can you add space to the sides of an image? a. Use the alignment pop-up in the Inspector. b. Set link in the More tab of the Inspector. c. Use hspace in the More tab of the Inspector. 3. If you want to add a hyperlink to an image in Layout mode, in what order would you complete these steps? a. Click the Link button on the Toolbar. b. Open the Inspector. c. Place the image on the page. d. Browse to or Point and Shoot at the file to which you want to link. 4. What are clickable regions or hotspots? a. Popular Web sites. b. Areas drawn on an image that can then be linked. c. Areas drawn on a Web page that can contain images.

Quiz Answers 1. c. An image placed in the background of your page will tile and repeat throughout the entire page background. 2. c. Use hspace in the More tab of the Inspector. 3. c, b, a, d. (To add a hyperlink to an image in Layout mode, place the image on the page; open the Inspector; click the Link button on the Toolbar; browse to, or point and shoot at, the file to which you want to link.) 4. b. Hotspots are areas drawn on an image that can then be linked.

Using Graphics on a Web Page

127

Exercises Now that you are familiar with how to work with images, you can use these exercises to solidify your knowledge. 1. Place some text on a page, and then add multiple images and align them in different ways. Add vspace and hspace to the images to create white space between the image and the text. 2. Create an Image Map. Make one large clickable region that covers the entire image and add a hyperlink to it. Consider this the default link. Place several smaller hotspots on top of the large one, and add a different link to each one. If the user clicks one of the smaller spots, send him to that link. If he clicks anywhere else on the image, send him to the default link.

5

HOUR

6

Designing Pages with Tables We freely admit it: We love tables. With a little table know-how and finesse, you can take a plain-Jane Web page all the way to spectacular. By using tables to contain your page elements, you can restrain text from flowing clear across the page, put space around the edges of your design, and float your layout in the middle of a page. You can create complex Web page designs by placing images in portions of a table and text in other portions. By positioning tables within tables (called nesting), you can create elaborate layouts. Writing the HTML by hand for complex table designs is beyond challenging. It is difficult, time-consuming, and headache provoking. Working this magic in GoLive, however, is a veritable delight. So, let’s immerse you in the wonderful world of tables.

130

Hour 6

In this hour, you will learn how to • Add a table to your Web page • Adjust the basic table attributes • Select, add, and delete cells, rows, and columns • Color cells, rows, and columns • Format text in tables • Use tables to structure your Web page

Adding a Table to Your Web Page As with all aspects of designing a Web page, preplanning is the key. It is a good idea to have a sketch of what you plan on creating and then putting an overlay over that sketch so you can create the most efficient table possible. See Figure 6.1. FIGURE 6.1 Preplan your page to save time and create the most efficient table.

LOGO

ADOBE LOGO

APPLE LOGO

WINDOWS LOGO

Let’s begin by working with a new blank HTML page. We’ll walk through the steps of putting a table on the page and adjusting it to look the way you want. Later, we’ll show you some ideas for page layout design using tables.

, TO DO

To Do: Adding a Table To add a table to your Web page, complete the following steps: 1. Create a new blank HTML page by choosing File, New from the menu, or pressing Command+N (Mac) or Control+N (Windows) on your keyboard. 2. Open the Objects palette, if it is not already open, by selecting Window, Objects from the menu, or pressing Command+2 (Mac) or Alt+2 (Windows).

,

Designing Pages with Tables

131

3. Click the Basic button of the Objects palette.

,

4. Drag and drop a Table icon from the palette to your page, or double-click the Table icon to insert a table at the point of the blinking cursor (see Figure 6.2).

FIGURE 6.2 Drag and drop or double-click a Table icon from the Objects palette to place a table onto your page.

Adjusting the Basic Table Attributes An HTML table consists of horizontal rows and vertical columns that intersect, similar to what you would see in a monthly calendar. The squares or rectangles created by the intersection of the rows and columns are called cells. By default, GoLive creates a table, consisting of three rows and three columns, which are 180 pixels in width. It has a border of 1 pixel, cell padding of 0 pixels, and cell spacing of 2 pixels. Let’s learn what all that means, and how you can alter those settings to create the kind of table you want.

, TO DO

To Do: Changing the Number of Rows and Columns in a Table To change the number of rows and columns in your table, complete the following steps: 1. Select the table by clicking once on its left or top border. A tiny square will appear next to the arrow cursor when you are in the correct spot. You will know the table is selected by the appearance of a thin line around the outside of the table. 2. Open the Inspector, if it is not already open, by choosing Window, Inspector from the menu, or by pressing Command+1 (Mac) or Control+1 (Windows) on your keyboard. 3. Using the Inspector, you can now indicate how many rows and columns you want in your table. Type 4 into the Rows field and 5 into the Columns field. Your table now has four rows and five columns.

,

4. Type 2 into the Rows field and 2 into the Columns field. Your table now has two rows and two columns. When you have a table selected, the Inspector will show the word Table in the lower-left corner. There are three tabs in the Table Inspector: Table, Row, Cell (see Figure 6.3). All three tabs are visible, and selectable when working on a table, but only the attributes that can be applied to the portion you are working on will be available for use. Those attributes that are unavailable will be grayed out. GoLive helps you work efficiently by switching to the correct tab based on your selection.

6

132

Hour 6

FIGURE 6.3 The Table Inspector has three tabs available that you will use to set the attributes of the table and the individual cells.

Setting the Dimensions of Your Table Take a look at the top portion of the Inspector where you can set the dimensions of your table. You can choose to set the width and height of your table in pixels, by percentage, or to automatic. Choosing Pixels sets your table at a fixed width or height. Percentage allows your table to expand or contract according to the width or height of the page. Auto means that the table will expand to accommodate whatever elements you put into it.

, TO DO

To Do: Changing the Width and Height of Your Table Complete the following steps to change the width and height of your table using the three options in the pop-up. 1. Place a table on the page. 2. In the Inspector, choose Percent from the Width pop-up. 3. Type 90 into the Width field. 4. Change the size of the page you are working on by dragging it open a little wider or narrower. Notice how the table expands to accommodate 90% of the window no matter how large or small you make the window. 5. Choose Pixels from the Height pop-up.

,

6. Type 400 into the Height field. The height of the table remains 400 pixels and does not adjust according to the size of the window. 7. Choose Auto from both the Width and Height pop-ups. The table will collapse to a small size because nothing is in it.

,

Designing Pages with Tables

133

,

8. Drag one image placeholder into the top-left cell and one into the bottom-right cell. Notice that the table resizes itself to accommodate the image placeholder. If you link those placeholders to images that are larger than the placeholders themselves, the table expands further to accommodate the image.

Auto is not recommended because it is somewhat unpredictable and difficult to control. You can dynamically adjust row and column sizes by pressing Option (Mac) or Alt (Windows) on your keyboard, clicking the edge of a row or column, and dragging to the desired size. Doing so will automatically set the size of the altered row or column in pixels.

Setting the Appearance of Your Table Let’s take a look at the middle portion of the Inspector where you can set the appearance of your table. The following is a list of options: • Border—This attribute draws a border around the table, which, by default, has a 3D appearance. Set the size of the border in pixels by typing a number into the Border field. Typing 0 removes the border entirely. • Color—You can set the background color of your table by choosing a color from the Color palette. Click once inside the color well to open the Color palette, and then click the color of your choice to apply it to the background of the table. GoLive has a great feature that enables you to apply a preset style to your table. For details, please refer to “Using Table Styles” later in this hour. • Cell Padding—Cell padding is the space between an element in a cell and the edge of the cell, almost like a margin. For instance, if you placed a graphic inside a cell, and set the Cell Pad field to 5, GoLive will add a 5-pixel space between the edge of the graphic and the edge of the cell. Set the amount of cell padding you desire by typing a number into the Cell Pad field. • Cell Spacing—Cell spacing is the amount of space between adjacent cells. You can set the spacing by typing a number into the Cell Space field. • Alignment—This drop-down list gives you the option of aligning your table to the right or left of other objects or text on the page. For example, if you have text on the page, you could choose Align Right, which would allow the text to wrap around the left side of the table.

6

134

Hour 6

• Caption—Check the box next to the word Caption and choose Above Table or Below Table from the drop-down list to create a space into which you can type a caption above or below the table (see Figure 6.4). Type the caption directly into the resultant space created above or below the table. FIGURE 6.4 You can add a caption above or below your table by using the Caption check box and drop-down list in the Table Inspector.

• BgImage—This option enables you to place a background image behind a table. To place an image in the background of a table, select the BgImage check box, and then point and shoot or browse to the image of your choice. If the table is larger than the image, the image will tile (repeat).

When choosing this feature, be certain to check in several different browsers to see how the table looks. For example, although Internet Explorer 5 for Mac renders the image behind the whole table, the image repeats the pattern in each cell in Netscape.

• Import Tab-Text—GoLive enables you to import data from tab or commadelimited text files, automatically place it into a table, and sort the data as needed. For instructions on this feature, please refer to “Importing Text into Tables,” later in this hour. • Table to Layout Grid—If you so choose, you can convert your table into a layout grid. Simply select the table, and then click the Convert button next to the words Table to Layout Grid. For more information on layout grids, please read Hour 7, “Designing Pages with the Layout Grid.”

Designing Pages with Tables

135

Working with Cells By default, the tables that GoLive creates are three rows by three columns. That configuration probably will not be exactly what you want, so you need to know how to manipulate the table to do such things as adding or deleting rows and columns or combining cells. By using the Table palette, selecting single or multiple cells, rows, columns, or even a whole table for editing becomes easy. You can also sort data in cells, apply a ready-made style to a table, (for instance, alternating row colors), or create and save your own style to use later on other tables. In this section, we’ll learn all the things that you can do to table cells, and how to do them. Throughout this section, please have both the Inspector and the Table palette open. To open them, choose Window, Inspector, and Window, Table.

Selecting Cells We must first make the distinction between selecting a cell and selecting the contents of a cell. If you see a blinking cursor inside the cell, you are in text entry mode. In this mode, you can select items or objects in the cell, drag items in or out of the cell, or type in the cell. When a thin line is drawn around a cell, you are in cell-selection mode, meaning the cell itself is selected rather than the contents of the cell. In cell-selection mode, you can set attributes such as height, width, and color of the cell itself. There are several ways to select cells. You can select cells in the table on your page, or by using the table tools in the Table palette. The methods for selecting cells in the table on the page are as follows: • To select a cell, place your cursor over the bottom or right border of the cell and click. You’ll know the cell is selected if you see a thin line drawn around its border. Shift+click to select multiple cells (see Figure 6.5). FIGURE 6.5 Shift+click to select multiple cells.

The Table palette shown in Figure 6.6 is very handy. Not only does it identify the size of the table and cells, but also it helps you to select the tables, including tables inside of tables. It can be difficult to determine which table you are working on, especially if you

6

136

Hour 6

have turned off the borders on the tables. The Table palette shows the make-up of one table at a time so that you can easily make the correct adjustments. The methods for selecting cells using the Table palette are as follows: • Open the Table palette (Window, Table) and choose the Select tab. Click a table to select it. You’ll see a replica of your table in the Table palette as shown in Figure 6.6. Click any cell to select the cell. Click and drag to select multiple adjacent cells. Shift+click to select noncontiguous cells. • To select all the cells in a table, select one cell, and then press Command+A (Mac) or Control+A (Windows) on your keyboard. Alternatively, you can choose Edit, Select All from the menu. You can also drag the mouse over the whole table to select all the cells. FIGURE 6.6 The Table palette lets you visually select tables and cells.

A hidden way to select cells is to activate the cursor inside of the cell that you want to select, and then Control+Return (Mac) or Control+Enter (Windows). This will select the cell that the cursor is in. When the cell is selected return to the cursor (text entry mode) by pressing Return (Mac) or Enter (Windows). Note that if you start with a cell and use this trick every time you repeat Control+Return (Mac) or Control+Enter (Windows) the selection moves outward from the cell to selecting the table the cell is in and so on.

• To select all the cells in a table, select one cell and then press Command+A (Mac) or Control+A (Windows) on your keyboard. Alternatively, you can choose Edit, Select All from the menu. • You can also click and drag inside the table itself to select multiple cells.

Designing Pages with Tables

137

Selecting Rows and Columns To select rows and columns in a table on your page: • Place your cursor over the left border of the row. The cursor will turn into a black pointer. Click once on the border of the row to select the row. Use a similar technique to select a column, but place the cursor over the top border of the column. You can select multiple rows and columns by repeating the process (see Figure 6.7). FIGURE 6.7 Put your cursor over the left edge of a row, or the top edge of a column and click to select the row or column.

If cells are already selected in a row or column, selecting the entire row or column will invert the selection, meaning that it will deselect those cells while selecting the others.

To select rows and columns in the Table palette: • Place the cursor on the left edge of the row you want to select. The cursor will change to a black pointer. Click once to select the row. Use a similar technique to select a column, but place the cursor on the top edge of the column. Select multiple rows and columns by repeating the process with the Shift key pressed, or by dragging the mouse over the rows and columns you want to select.

6 Sometimes it is easier to select entire rows and columns in the Table palette by clicking on the Blue rule that appears outside of the table.

Adding Rows and Columns Flexibility is the name of the game in GoLive, so there are several ways to add rows and columns to your table:

138

Hour 6

• Select a cell, and then click the Add Row or Add Column button in the Cell tab of the Table Inspector. This method adds a new row above the row containing the selected cell, or a new column to the left of the column containing the selected cell. • Select the table, and then increase the number in the Rows or Columns field. This adds rows to the bottom of the table, or columns to the right. • To add a column, select a cell in the column to the right of where you want the addition and press the + button (plus sign) on your keyboard. • To add rows at the bottom of the table, hold down the Command key (Mac) or the Control and Shift keys (Windows) and drag the bottom border of the table downward (see Figure 6.8). This method also works to add columns to the table. Command+drag (Mac) or Control+Shift+drag (Windows) the right side of the table to add additional columns. FIGURE 6.8 Command+Drag (Mac) or Control+ Shift+Drag (Windows) the bottom border of a table to add rows to the bottom.

• Select a row or column in either the table, or in the Table palette, and then Control+click (Mac) or right-click (Windows) and choose one of the available options from the pop-up list: Insert Column, Insert Column Right, Insert Row, Insert Row Bottom.

Deleting Rows and Columns What if you decide to remove a row or column? You can do so in the following ways: • Select a cell, and then click the Delete Row or Delete Column button in the Cell tab of the Table Inspector. • Decrease the number in the Rows or Columns field. • To delete a column, select a cell in the column and press the Backspace key (Windows) or Delete key (Mac) on your keyboard. • To delete a row, select a cell in the row and press Shift+Backspace (Windows) or Shift+Delete (Mac) on your keyboard.

Designing Pages with Tables

139

Spanning Cells You might find that you want to create a layout that requires a long open column on the left of the table, and small multicell columns on the right. One way to approach this is to “span” cells. Spanning cells means to merge adjacent cells. So, for example, if you have a three-row, three-column table, and span the first two cells in the second row, your table would look like this (see Figure 6.9). Spanned Column

FIGURE 6.9 Here is a table with a spanned column and row.

Spanned Row

To span cells, choose one of the following: • Select a cell, and then type the number of cells you want to merge into the Span Row or Span Column field in the Cell tab of the Table Inspector. You can span only from left to right or from top to bottom. To split the merged cells, reduce the number. • Select a cell, and then press Shift+right-arrow to span across rows, or Shift+downarrow to span across columns. Use Shift+up-arrow or Shift+left-arrow to decrease the span. • Select the cells you want to merge, and then Control+click (Mac) or right-click (Windows) on the selection. From the pop-up list, choose Merge Cells. To split the cells, use the same method, but choose Split Cells from the list.

When spanning cells, content in the selected cell will not be lost, but content in the cells added to the right or below will be lost.

6

140

Hour 6

Coloring Cells, Rows, and Columns You can set the background color of an individual cell, a single row, multiple rows, a single column, or multiple columns. The Row Color field is in the Row tab of the Table Inspector, and the Cell Color field is in the Cell tab of the Table Inspector (see Figure 6.10). You can also apply preset styles to the whole table. For more on table styles, please read “Using Table Styles” later in this hour. FIGURE 6.10 The Row Color field is in the Row tab of the Table Inspector, and the Cell Color field is in the Cell tab of the Table Inspector.

First, select the cells, rows, or columns whose color you want to change. Click inside the color field; doing so will open the Color palette. Click a color in the Color palette to apply it to the row or cells.

If you add color to the background of an empty cell, the color will not show up in Preview mode of GoLive, or in a browser. The cell must have content of some type in it for the color to appear. If you want to use a cell to add color to your page but don’t want to put any text or other items into the cell, simply select a cell (or cells) and Control+click (Mac) or right-click (Windows). From the pop-up menu, choose Insert Nonbreaking Spaces. This inserts a nonbreaking space into the cell or cells, which causes the background color of the cell to appear. The keyboard for inserting a nonbreaking space is Option+Space (Mac) or Shift+Space (Windows). In GoLive 6 you can enter and remove a nonbreaking space in all the cells at once. To do this, have the cells selected in a table. On the Table palette Control+Click (Mac) or right-click (Windows) on a cell. There are all kinds of helpful features in this contextual tool, including Insert Nonbreaking Spaces and Remove Nonbreaking Spaces.

Designing Pages with Tables

141

Formatting Text in Cells, Rows, and Columns It might seem odd, but if you want to format text in multiple cells, select the cells, not the text. Selecting cells would only work on one cell at a time. After you have made your selection, proceed to format the text as you learned in Hour 4, “Formatting and Stylizing Text.” You can apply fonts, types, text color, and styles such as bold and italic.

With the Contextual tools, Control+Click (Mac) or right-click (Windows), you can even apply Cascading styles across multiple cells. Read more about this in Hour 18, “Formatting Text with Cascading Style Sheets.”

, TO DO

To Do: Aligning Content in Table Cells You might want to align text and other elements inside a row or a cell. The alignment options for rows appear in the Row tab, whereas the alignment options for cells appear in the Cell tab. The options in both tabs work the same way. To align content in your table, complete the following steps: 1. Drag a Table object from the Objects palette to your page. Set its width to 500 pixels and height to 400 pixels. 2. Drag an image placeholder into the top-left cell. 3. Select the cell containing the placeholder by clicking on its bottom or right border. This brings the Cell tab of the Inspector to the front. 4. Select the pop-up options in the following list one at a time and see how each option affects the placement of the image placeholder in the cell. Vertical Alignment: • Default—By default, text or objects placed into a cell will align to the middle vertically. • Top—Choose this to align text or objects in a cell to the top of the cell vertically.

,

• Middle—Choose this to align text or objects in a cell to the middle of the cell vertically. • Bottom—Choose this to align text or objects in a cell to the bottom of the cell vertically.

6

Hour 6

,

142

Horizontal Alignment: • Default—By default, text or objects placed into a cell will align to the left horizontally. • Left—Choose this to align text or objects in a cell to the left horizontally. • Right—Choose this to align text or objects in a cell to the right horizontally.

,

• Center—Choose this to align text or objects in a cell to the center horizontally.

If you choose to align Center, and are ignored, it could be that you selected the text earlier and tagged it to align left or right using the toolbar. The tag closest to the text wins. In other words, what you do to the text overrules what you do to the cell, and the cell overrules the row.

Setting the Width and Height of Individual Cells You can set the width and height of individual cells in the Cell tab of the Table Inspector. You can choose to set the dimensions by pixel, by percentage, or set to Auto. The default setting is Auto. • Pixel—Use this option to set your cell or row in an absolute pixel size. • Percentage—Use this option to set the cell or row as a percentage of the whole table. For instance, a cell whose percentage is set to 25% will always render as one-fourth the size of the table, no matter how large or small the table is on the page. • Auto—Use this option to let the browser determine how much space is needed by the row or cell. This has proven to be hazardous in some browsers, so it is not recommended. When you set the width of a cell, it affects every cell in that column. Likewise, setting the height affects every cell in the row. By combining settings, you can create different results for your table. For example, assume that you have a two-column table, each column is only one cell, and you set the left column to 200 pixels in width, and the right column to Auto. The left column will always remain the fixed size of 200 pixels, whereas the right column will expand and contract along with the size of the browser window.

Designing Pages with Tables

143

If you don’t make changes to your cells they will be left at Auto. This leads to cells becoming larger as you type and unexpected results in the browser. When you are ready to lock down the size of your cells, select all the cells, and then in the Cell Inspector, choose pixel from both the Width and Height. If they are various sizes no value will be in the text box, and that is okay. If you check the individual cells you will see that they now have values locked in.

Using Table Styles Introducing GoLive’s table styles, a handy feature that enables you to apply preset styles to your tables, and to create and save your own styles. To use table styles, open the Table palette by choosing Window, Table from the menu, and then click the Style tab. In the pop-up list at the top left, you’ll see a list of preset styles that you can use.

, TO DO

To Do: Applying a Table Style To apply a style, proceed as follows: 1. Choose a style from the pop-up list. The chosen style will be shown in the sample below the pop-up.

,

2. When you have made your style choice, select the table to which you want to apply the style and click Apply in the Table palette. To remove the style, click Clear. To try a different style, repeat steps 1 and 2 (see Figure 6.11). Styles Pop-up Menu

FIGURE 6.11 The Style tab of the Table palette.

6

Import Table Style Export Table Style

New Table Style Delete Table Style Capture Table Style Rename Table Style

144

Hour 6

, TO DO

To Do: Create a Table Style To create your own style, proceed as follows: 1. Place a table on your page. 2. Apply the attributes you would like the table style to have; for example, row and column colors, font styles, text colors, and so on. 3. When you are satisfied with the style you have created, click the New button (dogeared page icon).

,

4. Type a descriptive name for your style into the input field, and then click the Capture button (looks like a camera). To remove a style from the list, select the style in the pop-up list. Its name will show in the input field at the bottom of the Table palette. Click the Trashcan to remove the style from the list.

Using Tables to Structure Your Web Page If you’ve read this hour through from the beginning, by now you’ll have a good idea of how to create and manipulate tables. So, let’s have some table fun! In this section, we show you examples of how you can use tables to structure your Web pages. One of the first things to remember is that a table cell can accept more than text. You can also put an image, a layout grid, or even another table into a table cell. By combining these elements, you can create some neat effects.

Example 1: Using Nesting Tables to Create a Design In example 1 (see Figure 6.12), you see two tables. One of the tables is inside the other, which is referred to as nesting. FIGURE 6.12 Example 1 shows a smaller table nested inside the center column of a larger table.

The outer table consists of two rows and three columns. The smaller table is placed inside the middle column in the second row. The smaller table consists of three rows and

Designing Pages with Tables

145

three columns. In this way, we have created a layout that is controlled by one table and yet have organized information in a smaller table inside of it. The outer table has its attributes set like those shown in Figure 6.13. FIGURE 6.13 The outer table has its attributes set like this in the Inspector.

The 575 pixels is a fixed-width size, and will stay the same regardless of how wide or narrow the user opens her browser window.

If you want the table to center in the browser window, select it and click on the center align button in the toolbar.

The inner table has its attributes, set like those seen in Figure 6.14. FIGURE 6.14 The inner, or nested, table has its attributes set like this in the Inspector.

6

146

Hour 6

In the Table palette, you might notice an icon in the upper right. This tool is used to help you zoom in and out of nested tables. It’s not really a tool that you select; just point your cursor to a nested table and click as shown in Figure 6.15. Your nested table will fill the Select window. Click the icon in the upper right to zoom back out.

FIGURE 6.15 Use the Zoom feature in the Table palette to zoom in and out of nested tables.

Example 2: Using a Layout Grid Inside a Table In example 2, , we’ve nested a layout grid inside a table cell (see Figure 6.16). FIGURE 6.16 A layout grid is nested inside a table cell.

Designing Pages with Tables

147

Figure 6.17 shows the attributes for this layout. FIGURE 6.17 The table in this example has its attributes in the Table Inspector set like this.

If you want to place several images inside table cells that you’d like to have butt up against one another with no space between, you must eliminate the border, cell padding, and cell spacing by typing 0 into their respective fields.

Example 3: Using a One-Cell Table Inside Another Table In example 3, , we’ve nested a one-cell table inside a table cell (see Figure 6.18). We set the vertical alignment of the outer cell to Middle, and horizontal alignment to Center. Using this method, the small one-cell table will float in the center of the larger table cell. One of the table cells contains an Image Map (for more on image mapping refer to Hour 5, “Using Graphics on a Web Page”), and the leftmost cell contains a series of rollovers. (For more on rollovers and other DHTML effects, read Hour 13, “Using JavaScript Actions.”) Let’s take a look at the attributes for the table used in this layout (see Figure 6.19).

6

148

Hour 6

FIGURE 6.18 This example shows a one-cell table nested inside a table cell, an Image Map in another cell, and a series of DHTML rollovers in a different cell.

FIGURE 6.19 The table in this example has its attributes in the Table Inspector set like this.

Example 4: Using Multiple Tables Example 4, makes use of multiple tables on a page (see Figure 6.20). Not only does this page use multiple tables, but also the top table has been made into a component. Components are pieces of HTML that can be created and dropped onto any number of pages. Later, if you edit the original file, GoLive automatically updates all the other files using the component for you. For details on how to use components, please read Hour 10, “Using Components, Stationeries, Library Snippets, and Page Templates.”

Designing Pages with Tables

149

FIGURE 6.20 This page makes use of multiple tables.

The first table, which is a navigation bar, is actually a table within a table. See Figure 6.21. The outside table is only one row and one column and is set to 103%. It is solid black. This means that the black table will always extend across the browser window. The navigation bar itself is centered inside of the one-celled table. Now if a viewer enlarges or reduces the size of the browser, the navigation bar stays consistent in distance between buttons, but it shifts in its entirety to always center in the back table. FIGURE 6.21 Use a table within a table to make a navigation bar.

6

The GIF format enables you to designate a color to be transparent, which you would do in an art program such as Adobe Photoshop, ImageReady, or Illustrator. If you make a one-color, one-pixel GIF, and then set that one color to transparent, you have a tiny image that you can use as an invisible spacer.

150

Hour 6

You can use countless variations when designing a Web site using tables. The more you use tables, the more you’ll love them! Just be sure to always check your designs in the major browsers and on varied platforms. Browsers often render tables somewhat differently, and you don’t want to be unpleasantly surprised.

Importing Text into Tables If you have a tab-delimited, comma-delimited, space-delimited, or semicolon-delimited text document, you can easily import the data into a table in GoLive.

, TO DO

To Do: Importing Text into Tables To accomplish this, complete the following steps: 1. Place a table on your page by either dragging or double-clicking the Table icon in the Basic tab of the palette. 2. Select the table by clicking the right or top edge. 3. Open the Inspector, if it is not already open, by choosing Window, Inspector from the menu, or by pressing Command+1 (Mac) or Alt+1 (Windows) on your keyboard. 4. Click the Browse button next to Import Tab-text in the Inspector and navigate through your hard drive to the file containing the data you want to import. If you want to create a file to test with, simply type some text separated by tabs in Simple Text or Notepad. Save it with a .txt extension. 5. Select Tab, Comma, Space, or Semicolon as the delimiter type from the drop-down list in the dialog box (see Figure 6.22). A delimiter is a character that separates the data items in a database so they can be imported into another application.

,

6. Click Open.

FIGURE 6.22 Select Tab, Comma, Space, or Semicolon as the delimiter type from the drop-down list in the dialog box.

Designing Pages with Tables

151

GoLive will automatically import the data and create as many rows and columns as needed in your Table. You can then edit the table any way you would like, including applying a preset style to it or sorting the data you have imported. Both of these are covered near the end of the next section, “Sorting Data in Tables.”

Sorting Data in Tables After importing data from your text file into a table in GoLive, you can sort it any way you’d like. You can select any column or row and sort the information in it. You can choose multiple columns or rows to sort, and you can choose ascending or descending order. Also, you can specify secondary and tertiary sorting criteria. We will use some simple examples in the section. In our example, which you can download from www.golivein24.com, the imported data contains the fields Job Title, Location, and Salary in three columns, in that order (see Figure 6.23). We will give you a simple example to help you understand how it can help organize table data. FIGURE 6.23 A sample table containing three columns of data.

Use one of the techniques we discussed earlier in this hour to select the table. Click the Sort button in the Table palette; the Sort palette shown in Figure 6.24 appears. To sort based on the alphabetical listing, choose Column 2 from the first pop-up menu, and then select Ascending. Make sure that you also choose Sort Without Header from the pop-up menu at the bottom of the palette so that your headers do not become included in the reorganization. FIGURE 6.24 Sorting based upon the second column of data.

If you want to sort using two sets of criteria—for example, if you want to sort first by Job Title, and second by Location—you choose Column 1 in the first pop-up menu, indicating that you want to sort the criteria in column 1 first (Job Title), and then choose Ascending order from the pop-up menu. Then choose Column 3 from the second pop-up,

6

152

Hour 6

indicating that you want a secondary sort based on the criteria in column 3 (Salary) and choose Descending from the pop-up menu. See Figure 6.25. FIGURE 6.25 Sorting multiple columns of data using two sets of criteria.

Finally, you can sort using a third criteria. Simply select the row or column you want as the tertiary criteria from the third pop-up in the Sort palette.

Summary In this hour you learned how to add a table to your Web page, how to adjust its basic attributes, and how to select, add, and delete cells, rows, and columns in the table. You also learned how to color cells, rows, and columns, how to format the text inside of them, and how to import text from a delimited file. Finally, you were given specific examples of how tables can be used to structure your Web page.

Q&A Q I have placed a table on my page, but when I click the Cell tab of the Inspector to work on a cell, all the selections are grayed out! How do I get them to work? A You must first select the cell for the settings in the Cell tab of the Table Inspector to be activated. Q My page looks fine in GoLive and in Internet Explorer, but in Netscape Communicator the table is all wacky. What’s wrong? A Check to see that you haven’t done something wrong in the arithmetic. What we mean is, you might have a table cell set to 200 pixels, and have an image inside that cell that is 300 pixels. This might cause the table to render incorrectly in some browsers. Q I have a three-column, three-row table. I wanted to span all three cells in the second row. I selected the rightmost cell, and then tried to type 3 into the Span Columns field in the Table Inspector, but it wouldn’t let me. What am I doing wrong? A You can span columns only from left to right, not right to left. You can span rows only from top to bottom, not bottom to top.

Designing Pages with Tables

153

Quiz 1. Spanning, in reference to table cells, means a. Sending unsolicited e-mail to strangers. b. Joining adjacent table cells. c. Placing text into a cell that runs completely across the cell. 2. To add a background color to a table a. Drag the color chip from the Color palette and drop it onto the Table icon in the Basic tab of the palette. b. Drag the color chip from the Color palette and drop it onto the table. c. Drag the color chip from the Color palette and drop it onto the Color field in the Table tab of the Table Inspector. 3. To import text into a table, you first need to a. Create a table with the exact number of rows and columns. b. Drag a table icon from the palette onto your page. c. Create a new blank page, but put nothing on it. 4. Which of the following items can be placed into a table cell? Select all that apply. a. Text b. Table c. Floating box d. Text box e. Layout grid f. Image

Quiz Answers 1. b. Spanning, in reference to table cells, means joining adjacent table cells. 2. c. To add a background color to a table, drag the color chip from the Color palette and drop it onto the Color field in the Table tab of the Table Inspector. 3. b. To import text into a table, drag a Table icon from the palette onto your page. 4. a, b, e, and f. Text, a table, a layout grid, and an image can all be placed into a table cell.

6

154

Hour 6

Exercise Tables can be tricky. It will help you master them if you play around a little. Use the following exercise to get up to speed. Create a table with three rows and two columns, and set the width to 580 pixels. Span both columns in the top and bottom rows. Add color to the newly spanned rows, type a headline into the top one, and give it a Header 2 size. Type an address into the bottom one and make the text bold. In the middle row, add an image to the left cell, and text to the right. Add a background color to the right cell and change the text color. Create a link from the image to another page.

HOUR

7

Designing Pages with the Layout Grid In Hour 5, “Using Graphics on a Web Page,” you were introduced to tables, and how to use them in GoLive to create complex page designs. Get ready to be amazed even more because you are about to enter grid territory. GoLive’s layout grids give you the ability to drag and drop elements on your page, much like you would in a page layout application. What might take hours of trial and error to create using tables can often take only minutes to put together on a grid. By combining tables and grids, you can create virtually any design of your heart’s desire without even breaking a sweat. So what exactly is a grid? In essence, GoLive’s layout grids are nothing more than elaborate tables, but you don’t see the table or have to worry about cells, columns, rows, or spanning—GoLive does all the work for you! We’ll introduce you to layout grids in this hour, and give you some suggestions on how to use them to their fullest potential.

156

Hour 7

In this hour, you will learn how to • Place a layout grid onto your Web page • Adjust the size of the grid and spacing of the gridlines • Use graphics or text on a grid • Align objects on a grid and distribute the space between them • Decide whether you should use a table or a grid

Adding a Layout Grid to Your Page A GoLive layout grid resembles a piece of graph paper. It is divided into vertical and horizontal gridlines, which aid you in placing objects on your page with pixel precision. By default, the dimensions of a new grid are 201×201 pixels. The grid is easily resizable, and GoLive enables you to alter the number of pixels between vertical and horizontal gridlines, make the gridlines visible or invisible, enable or disable a snap-to feature, color the grid background, and more. You can have multiple layout grids on your page, but for now let’s start with just one. When you are more comfortable with the use of grids, we’ll examine how to combine them to create various looks.

, TO DO

To Do: Placing a Layout Grid As usual, work with a Site file open. For details on how to create a Site file, read Hour 2, “Creating a Site File.” To place a layout grid on your page, complete the following steps: 1. Open a new or existing page. 2. Open the Objects palette, if it is not already opened, by selecting Window, Objects from the menu, or by pressing Command+2 (Mac) or Control+2 (Windows). 3. There are two ways to place the layout grid: • Drag a layout grid from the Basic section of the Objects palette and drop it onto your page. If you have nothing else on your page, the layout grid will be positioned in the upper-left corner of the page (see Figure 7.1). If there are already other items on the page, you can drag and drop the grid to where you want it to appear.

,

• Click your cursor where you want the layout grid to go on your page, and then double-click the Layout Grid icon on the Basic section of the Objects palette. The grid will be positioned at the insertion point of your cursor (see Figure 7.2).

Designing Pages with the Layout Grid

157

FIGURE 7.1 By default, a new layout grid is positioned in the top-left corner of a blank page.

FIGURE 7.2 You can insert a grid into the flow of the HTML by placing your cursor in a particular spot, and then doubleclicking the Layout Grid icon in the palette.

Investigating a Grid Now that we have a Layout Grid on the page, let’s select our Layout Grid and click on the Source section to see what is happening behind the scenes. Even if you don’t know code, you can see in Figure 7.3 that GoLive’s Layout Grid is simply a table. The rows, columns, and size will be determined as you build the page. We’ll keep an eye on this and return to this topic later in the hour when we start placing images on the page. Note that you can place a layout grid directly onto a page, inside of a table, on top of another grid, or inside a text box on another grid. It is not recommended to put a grid (or a table) inside of a floating box.

7

158

Hour 7

FIGURE 7.3 Design carefully! GoLive will be building a page from the placement of your objects on the Grid automatically.

It’s easy to get rambunctious and start piling object on top of object indiscriminately. We urge you to use caution when considering such a maneuver. It will create such complex and dense source code that it could cause the browser to gag upon trying to render it.

Adjusting the Basic Grid Attributes You can use a small grid to hold together a few images, or you can use a larger grid to hold all your page elements together. As you are working, you might find that you’d like to adjust the gridlines, or align the grid so that text on the page flows around it. You can do all these things.

, TO DO

To Do: Setting the Grid Width and Height To set the width and height of the grid, complete the following steps: 1. Begin by placing a grid on your page as instructed in the previous section. 2. Open the Inspector, if it is not already opened, by choosing Window, Inspector from the menu, or by pressing Command+1 (Mac) or Control+1 (Windows) on your keyboard.

,

3. There are two ways to adjust the size of the grid: • Type your desired dimensions into the Width and Height fields in the Inspector (see Figure 7.4).

159

,

Designing Pages with the Layout Grid

FIGURE 7.4 Use the Width and Height fields in the Inspector to set the size of your grid in pixels.

• Select the grid by clicking along the border. You’ll know you are in the right spot when a little square shows at the right side of the arrow (see Figure 7.5). FIGURE 7.5 A little square appears next to the arrow when you are over the grid border. Click to select the grid.

,

When a grid is selected, it will display three blue handles—one centered at the right border, one centered at the bottom border, and one in the bottom-right corner. Click and drag the right border handle to adjust the width of the grid. Click and drag the bottom handle to adjust the height of the grid. Click and drag the corner handle to adjust both width and height simultaneously. Holding down the Shift key while dragging the corner handle resizes the grid while retaining its height and width proportions (see Figure 7.6). Note how the Width and Height fields in the Grid Inspector change as you drag.

7

160

Hour 7

FIGURE 7.6 Drag a handle to resize the grid.

Adjusting the Gridlines When you use a piece of graph paper to align items, you are stuck with the spacing of the gridlines as they are printed on the page. With a grid in GoLive, however, the choice of spacing is entirely up to you. By default, GoLive creates a grid where the gridlines are 16 pixels apart, both vertically and horizontally. You might find that spacing a bit small for your purposes and want the lines to be 32 pixels apart. Conversely, you might prefer lines that are only 8 pixels apart, or 10, or 4, or 100. The choice is yours.

, TO DO

To Do: Setting the Gridlines’ Attributes To designate the amount of space, in pixels, from gridline to gridline, complete the following steps: 1. Type the desired number into the Horizontal or Vertical field in the Grid Inspector (see Figure 7.7).

FIGURE 7.7 Type the desired number into the Horizontal or Vertical field in the Grid Inspector to designate the amount of space, in pixels, from gridline to gridline.

,

2. Select the Snap options for the gridlines: • Leaving the Snap box checked will ensure that items you place onto the grid are lined up perfectly to a gridline. With Snap selected, you cannot position an object between gridlines (see Figure 7.8).

161

,

Designing Pages with the Layout Grid

FIGURE 7.8 Leaving the Snap box checked will ensure that items you place onto the grid are lined up perfectly to a gridline. By default, the Snap option is checked.

You can move an item on a grid to the next gridline by selecting the object and pressing the right-arrow, left-arrow, up-arrow, or down-arrow key on your keyboard. Also, pressing Option+arrow key (Mac) or Alt+arrow key (Windows) nudges the object one pixel at a time.

• Deselecting Snap enables you to place items on the grid in any position at all. Using the directional arrow keys will move the selected item one pixel at a time on the grid, rather than moving it all the way to the next gridline. You will need to deselect Snap if you are trying to place items against one another with no space in between them.

Even if Snap is deselected, you can move the object from gridline to gridline by using the arrow keys on the keyboard by holding down Option (Mac) or Control (Windows).

,

3. Select the Visible check boxes if you want the gridlines to be visible. With Visible deselected, the gridlines are invisible, although they are still in effect (see Figure 7.9).

FIGURE 7.9 You can make the gridlines invisible by deselecting the Visible option.

7

162

Hour 7

Aligning the Grid on the Page Perhaps you have used a layout grid to hold a series of navigation buttons in place. Suppose that you wanted to have such a grid on the right side of your page, with the text flowing around it on the left. This is easily done by using the drop-down menu in the Grid Inspector.

, TO DO

To Do: Aligning a Layout Grid To align a layout grid, complete the following steps: 1. Select the grid by clicking the border. (You’ll know you are about to click in the right spot when a little square appears next to the arrow.)

,

2. In the Inspector, select an Alignment option from the drop-down list. Choose Left, Right, or Default. Align Left aligns the grid to the left of other items on the page. Align Right aligns the grid to the right of other objects on the page. Default places the grid in its own space, with other objects on the page either preceding it or following it, depending on the placement of the grid in relationship to those items (see Figure 7.10).

FIGURE 7.10 You can align the grid to the left or right of other objects on the page.

Applying a Background Color to the Grid

, , TO DO

Layout grids accept a background color, as do tables, layout text boxes, and floating boxes. By applying a background color, you can create visual interest without adding any download time to your page because the color is designated in the HTML without the need for a graphic image to load.

To Do: Setting the Grid Background Color To assign a background color to your layout grid, complete the following steps: 1. Select the grid by clicking the border. 2. In the Inspector palette, click once on the Color cell to open the Color palette (see Figure 7.11).

163

,

Designing Pages with the Layout Grid

FIGURE 7.11 Click once on the Color cell in the Grid Inspector to open the Color palette.

,

3. Click a color in the Color palette; the grid inherits the color you click. Alternatively, you can drag a color chip from the Color palette and drop it into the color cell in the Inspector (see Figure 7.12).

FIGURE 7.12 Drag a color chip from the Color palette and drop it into the color cell in the Inspector to change the background color of your grid.

Adding Objects to the Grid

, , TO DO

Layout grids accept any item from the palette that can be placed onto a page. However, text cannot be typed directly onto a grid, but must be typed into a text box, which you lay onto the grid.

To Do: Placing Items onto a Grid To place items from the Objects palette onto a grid, complete the following steps: 1. There are two ways to place items onto a layout grid: • Drag and drop an object such as a table or Image icon from the Objects palette onto the grid (see Figure 7.13).

7

Hour 7

,

164

FIGURE 7.13 Drag and drop an object from the Objects palette on the grid.

• Select the grid by clicking the border and then double-clicking an object in the Objects palette.

New in GoLive 6 is an improved way to double-click an object and place it in the grid. Simply click once on the grid to place a tick mark. When you double-click an object, it will place it exactly where you marked it!

The new object will be placed in the top-left corner of the grid, if the grid is empty. If the grid contains other items, the new object will be created in the top-left corner only if space permits. If there is not enough room in the topleft corner, the object will appear elsewhere on the grid where there is enough room. If there is not enough room at all on the grid, it will expand to accommodate the new object. Also note that if you do not select the grid before double-clicking an item in the palette, the object will be placed onto the page itself, rather than onto the layout grid.

2. If an object on a layout grid is active (selected), the Toolbar offers a special set of tools for positioning objects on the grid (see Figure 7.14). Horizontal Vertical Position Width (x) alignment

,

FIGURE 7.14 The Toolbar offers several options when an object on a layout grid is active.

Vertical Position

Height (y)

Group and Ungroup

Horizontal alignment

,

Designing Pages with the Layout Grid

165

Choose from the following tools: • Horizontal and Vertical Position—These boxes enable you to type numbers showing the position of the object on the grid relative to the left and top margins of the grid. • X and Y Size—You can designate the size of an object by typing the desired dimensions into the X and Y boxes. • Horizontal Alignment—This aligns an object relative to the grid itself. You can align an object to the left, center, or right of the grid. • Vertical Alignment—The same as Horizontal Alignment, only this aligns the object to the top, middle, or bottom of the grid.

,

• Group and Ungroup—With several objects selected, clicking the Group button locks them in place relative to one another. This is useful, for example, when you want to move a whole set of buttons to another place on the grid without affecting the spacing between them. Ungroup returns grouped items to individual objects (see Figure 7.15).

FIGURE 7.15 GoLive enables you to select two or more objects on a grid and group them.

Select the objects. Shift+Click or Drag over the objects to select more than one at a time.

Click the Group button

Now the objects are grouped

7

166

Hour 7

, TO DO

To Do: Placing Text onto a Grid To put text onto a grid, complete the following steps: 1. Place a Layout text box on the grid either by using drag and drop (see Figure 7.16), or double-click as described in the previous section. (The icon for a Layout text box is in the Basic section of the palette.)

FIGURE 7.16 Add a Layout text box to a grid using drag and drop, or by double-clicking the Layout Text Box icon in the Objects palette.

,

2. You then add text to the text box using any of the methods described in detail during Hour 4, “Formatting and Stylizing Text.”

, TO DO

To Do: Resizing the Layout Grid Text Box To resize a text box that you have placed on a grid, complete the following steps: 1. Select the text box by clicking any of its borders. Small blue handles appear at each corner of the box and in the middle of each side. 2. You can drag any of the handles to resize the text box. Any text inside will reflow to the box’s new dimensions. The cursor will change to a double-sided arrow when it is over a handle (see Figure 7.17).

,

FIGURE 7.17 The cursor will change to a double-sided arrow when it is hovering over a handle. Drag any handle to resize the text box.

167

,

Designing Pages with the Layout Grid

If you create a page that incorporates both graphics and text boxes in a complex layout, you might find that your careful design looks drastically different on a Mac than it does on a PC. Text on PCs appears larger than on Macs. Therefore, if you have lots of text boxes butted up against graphics— which looks perfect on a Mac—it could very well be pushed all out of place when viewed on a PC. It is important that you get into the habit of checking your pages in multiple browsers, versions, and platforms. Keep in mind that the issue with larger text on the PC can be controlled with Cascading Style Sheets (as discussed in Hour 18).

Grids are particularly useful when piecing together a graphic that has been sliced to create rollover effects inside of a larger image. You place graphics onto a layout grid in the same manner that you place them directly onto a page. For details of those methods, please refer to Hour 5.

In addition to text boxes and graphics, other items that are commonly placed onto a layout grid include tables, QuickTime Movies, Flash (.swf) files, horizontal rules, and other layout grids. We do not recommend placing anchor links onto a grid because they might not work properly.

,

Aligning Objects on the Layout Grid A neat feature of the layout grid that is quite handy is its capability to align objects to each other, and to space them out evenly both vertically and horizontally. Open the Inspector, if it is not already opened, by choosing Window, Inspector from the menu, or by pressing Command+1 (Mac) or Control+1 (Windows) on your keyboard. Place several items of varying sizes onto a layout grid, and then select them all by either Shift-clicking, or clicking and dragging. Next, open the Align palette by choosing Window, Align from the menu. The following sections cover what each of the Align palette options does.

Using the Align Palette The first group of buttons under the heading Align to Parent are duplicates of those in the Toolbar described earlier in this hour. They align objects on the grid relative to the grid itself.

7

168

Hour 7

The rest of the buttons (described in the following list) align objects on the grid relative to each other. To use them, you must first select at least two objects on the grid. • Align Objects—There are six buttons in this row. The left three buttons (the Horizontal Alignment buttons) enable you to align all the selected objects’ left sides, centers, or right sides. The three buttons on the right (the Vertical Alignment buttons) enable you to align the objects’ top sides, centers, or bottom sides. Buttons might be grayed out if the alignment option is not possible to achieve because of the placement of the objects on the grid (see Figure 7.18). FIGURE 7.18 The options available to you in the Align palette depend on the position of the objects you are trying to align. Note that if something is already aligned the choice will be grayed. Items before applying alignment

Items after applying alignment

• Distribute Objects—Use this option to distribute space evenly amongst three or more selected objects relative to their left edges, vertical centers, right edges, top edges, horizontal edges, or bottom edges (see Figure 7.19).

Designing Pages with the Layout Grid

169

FIGURE 7.19 The Distribute Objects option enables you to easily line up a row of buttons or other objects on your grid.

Items before applying distribution

Items after applying distribution

• Distribute Spacing—Click the Horizontal Spacing button (on the left) to distribute space amongst three or more objects horizontally so that the amount of space on the left and right vertical axes is equal. Click the Vertical Spacing button (on the right) to distribute objects vertically so that their top and bottom horizontal axes are equally spaced (see Figure 7.20).

7

170

Hour 7

FIGURE 7.20 Distribute Spacing distributes horizontal or vertical space evenly among the selected objects.

Items before applying Distribute Spacing

Items after applying Distribute Spacing

Optimizing a Layout Grid When you have all the elements on your grid just the way you want them, select the grid, and then go to the Grid Inspector and click the Optimize button. This will lop off any excess grid at the bottom and right sides (see Figure 7.21).

Designing Pages with the Layout Grid

171

FIGURE 7.21 Click the Optimize button in the Inspector to remove any extra space from the bottom or right side of the grid.

Before optimizing

After optimizing

Summary We hope you enjoyed this hour as much as we did! To recap, you learned how to add a layout grid to your Web page and adjust its basic grid attributes including the size of the grid, its placement on the page, the amount of space between gridlines, the snap-to-grid feature, and the visible gridline feature. We discussed the fact that the GoLive layout grid accommodates many types of objects. You learned which objects you could use on a grid, how to place them onto the grid, and how to select and arrange them. We explored the Align palette, which enables us to align objects both relative to the grid, and relative to other objects. The palette also enables us to distribute space among objects on the grid. Finally, we talked a little about how the layout grid compares to tables.

Q&A Q I keep trying to put an object onto my grid in a certain place using drag and drop. But when I let go of the object, instead of going in the spot where I want it, it lands in a different place altogether! Why? A One of two things could be happening. Perhaps the space on the grid into which you are trying to place the object is insufficient to accommodate the size of the object. In that case, you must either move other objects to allow enough space for the new one, or increase the size of the grid. The other thing that might keep you

7

172

Hour 7

from being able to place your object exactly where you want it is that you might have the Snap feature selected for your grid. If so, GoLive allows you to place the object on the grid only according to the gridlines. If you want to put an object between lines, turn off the Snap feature in the Inspector. Q I’m working on a staff page that has staff members’ photos lined up on the left of the page, and a short bio across from the photo on the right. But when I look at the page on my friend’s PC, the spacing is all out of whack, and the images and text don’t line up properly. It looks great on my Mac. What have I done wrong? A What you are experiencing is the result of the way text is rendered on the two different operating systems. Text appears larger on PCs than on Macs. What happened in your case is that the text expanded but the images stayed put. Because users can control the default text size in their browsers, the way your page looks can vary greatly from machine to machine. You would be better off using a table when you need a flexible layout because tables can expand and contract to accommodate the contents they hold, or use Cascading Style Sheets to better control the text (as discussed in Hour 18). Q I’m trying to align objects on my grid. I have three photos that I want to have line up at their top edges. When I go to the Multiselection Inspector, the button I want is grayed out! How do I get it to work? A The reason the button is unavailable to you is because the objects you want to align are too close together. In order for them to line up at their top edges, they would have to overlap at the sides. You cannot have objects overlap on a grid; therefore, the option you are trying to use is grayed out. It is possible that the button is grayed out because the objects are already aligned as well.

Quiz 1. Which of the following items cannot be placed onto a layout grid? a. A text box b. A floating box c. A table d. An image

Designing Pages with the Layout Grid

173

2. Checking the Snap check box in the Layout Grid Inspector causes the grid to do what? a. Snap to the bottom of the page b. Collapse c. Place objects precisely on the gridlines 3. To align an object to the center of the grid, use a. The Alignment buttons in the Toolbar b. The Alignment buttons in the Inspector c. The Alignment option in the menu 4. The Optimize button in the Grid Inspector performs what function? a. Reduces the space between objects b. Reduces the number of colors in the images on the grid c. Reduces the dimensions of the grid

Quiz Answers 1. b. A floating box cannot be placed onto a layout grid. 2. c. Checking the Snap check box in the Layout Grid Inspector causes the grid to place objects precisely on the gridlines. 3. a. Use the Alignment buttons in the Toolbar to align an object to the center of the grid. 4. c. The Optimize button in the Grid Inspector reduces the dimensions of the grid.

Exercises Complete the following exercises to solidify your understanding of Layout grids and objects that you place onto the grid. 1. Create a layout grid that is 580 pixels wide and any height you choose. Place several objects on the layout grid side by side with some space in between, and then align their centers horizontally and distribute the space evenly between them. 2. Place several objects on a layout grid and butt them up against each other with no space in between by deselecting the Snap option in the Grid Inspector and positioning the object using the arrow keys on your keyboard.

7

HOUR

8

Designing Pages with Floating Boxes Welcome to the last of three lessons about page layout strategies. If you are reading this book cover to cover, you learned about tables and layout grids in the previous two lessons. This final page layout strategy uses GoLive’s floating boxes features. During this hour, you’ll learn about the following things: • Considering Web browser compatibility with floating boxes • Designing a Web page with floating boxes • Changing floating box attributes • Adding content to a floating box • Managing floating boxes with the Floating Boxes palette • Converting floating boxes to a layout grid

176

Hour 8

Considering Web Browser Compatibility with Floating Boxes By now you should be familiar with using tables (refer to Hour 6, “Designing Pages with Tables”) and GoLive’s layout grids (refer to Hour 7, “Designing Pages with the Layout Grid”) to add structure and design to your Web pages. We’ve saved the coolest alternative for last. This technology is called layers—technically, DIV tags (DIV is the tag that Web browsers understand)—and GoLive calls them floating boxes. They allow unprecedented control and design possibilities. After you have spent some time designing Web pages with tables and layout grids, you will probably become frustrated by some of the inherent limitations of these technologies. Two of the greatest frustrations will be the lack of exact control over where objects are placed on your Web page and the inability to stack objects on top of each other. The good news is that both of these limitations can be overcome with the use of floating boxes. When you use floating boxes on your Web page, you gain the ability to place things exactly where you want them. That means you can place a photograph at specific pixel coordinates such as 80 pixels down from the top and 20 pixels right of the left edge of your Web page. Floating boxes also enable you to stack or layer objects on top of each other on your Web page. If you’ve already tried to do this with tables, you’ve seen that it’s impossible with that technology. However, floating boxes enable you to place different items, such as graphics and text, on top of each other. You can even stack several floating boxes on top of each other for a layered effect and really creative page designs. In Hour 14, “Creating DHTML Animations,” you’ll take this technology one step further by learning how to animate these floating boxes. However, there are several trade-offs to consider when using floating boxes. The main concern is that floating boxes do not render correctly in older Web browsers such as Microsoft Internet Explorer 3.0 and Netscape Navigator 3.0.

The minimum requirement to render floating boxes correctly is a version 4.0 browser.

Designing Pages with Floating Boxes

Unfortunately, getting floating boxes to work consistently in different browsers, even if they are the newest versions, is not always easy. However, it would be far outside the scope of this book to document all the inconsistencies between how different Web browsers render floating boxes. Instead, we recommend that you install different Web browsers on your computer and test your pages yourself. We’ve told you how cool floating boxes are, but you must use them judiciously. So, how are you supposed to know if enough of your Web site visitors are using version 4.0 or newer browsers to justify using floating boxes? We recommend that you contact your Web hosting provider and ask whether it can provide server statistics. These statistics will present a summary of the Web browser versions that your visitors use and can help you make the decision whether to use floating boxes. Figure 8.1 shows recent browser statistics for visitors to www.graphicsinstitute.com. FIGURE 8.1 These statistics reveal that only about 5% of visitors to www. graphicsinstitute.com

use Web browsers older than version 4.0. Statistics for your Web site might vary.

Five percent is a large amount of users to lock out of your site by using advanced features. Consider using the Browser Switch action described in Hour 18, “Formatting Text with Cascading Style Sheets,” to send viewers with older browsers to a less dynamic version of your site.

Adding and Adjusting Floating Boxes Now you understand some of the benefits and cautions of using floating boxes to design your Web pages. Perhaps you have decided to start using floating boxes on your Web sites right now or maybe you feel it’s best that you wait until more of your visitors use version 4.0 and newer browsers. Either way, floating boxes are such an important technology (and way too fun) that we’ll spend the rest of this hour learning about them.

177

8

178

Hour 8

Adding Floating Boxes to Your Web Page The good news is that GoLive makes working with floating boxes incredibly easy. To add floating boxes to your Web page, drag the Floating Box icon from the Basic section of the Objects palette to the top of your Web page in Layout mode (see Figure 8.2). FIGURE 8.2 Drag a Floating Box icon from the Objects palette to your Web page in Layout mode to create a floating box.

When you let go of your mouse, you will notice that GoLive actually adds two objects to your Web page. The most obvious object is a large empty box that is 100×100 pixels in size. You should also notice that a small yellow square is added to your page. Because your floating box can be located anywhere on your Web page, this small yellow square serves as a placeholder for the HTML source code required to draw the floating box. You can see these two objects in Figure 8.3. FIGURE 8.3 GoLive uses a small yellow square marked with the letters SB as a placeholder for the corresponding floating box.

After placing a floating box on your Web page, you’ll want to change its attributes (such as position, size, depth, and visibility) in the Inspector. See the next section for details.

,

, TO DO

To Do: Adjusting Your Floating Boxes To change the attributes of a floating box on your Web page, follow these steps: 1. Select a floating box by single-clicking anywhere on the perimeter of the floating box with the sideways hand cursor as shown in Figure 8.4. 2. Each floating box should have a unique name so that it is easier to manage when you have several on one page. To change the name of a floating box, enter a short and descriptive name in the Name field of the Floating Box Inspector as shown in Figure 8.5.

179

,

Designing Pages with Floating Boxes

FIGURE 8.4 Your cursor will become a sideways hand near the perimeter of a floating box so that you can select the floating box instead of its contents. FIGURE 8.5 Give each floating box on a page a unique name in the Floating Box Inspector.

3. Change the position of a floating box by clicking its perimeter and dragging it anywhere on the page. 4. To gain even greater control over exactly where the floating box is positioned, you can edit the values in the Left and Top fields of the Floating Box Inspector as shown in Figure 8.6. The values in the Left and Top fields of the Floating Box Inspector indicate the distance, in pixels, between the upper-left corner of your Web page and the top-left corner of your floating box.

,

FIGURE 8.6 Adjust the position of a floating box with pixellevel precision using the Floating Box Inspector.

8

Hour 8

,

180

5. You can easily resize a floating box by selecting it and clicking one of the blue resize handles. Your cursor will change to a double-headed black arrow and you can dynamically resize the floating box.

If you select the blue resize handle at the corner of a floating box and hold the Shift key at the same time, GoLive constrains the proportions of the floating box as you resize it.

6. For pixel-level control over the size of a floating box, edit the width and height as pixel values in the Floating Box Inspector.

Gain more resize control by clicking on a floating box corner point and holding down the Shift+Opt (Mac) or Shift+Control+Alt (Windows) and using the arrow keys.

7. GoLive offers you two additional ways to size the width and height of a floating box. When Auto is chosen, the floating box will be just wide or just high enough to fit its contents such as text or graphics. The second alternative is a percent value that allows the floating box to be displayed as a relative percentage of the width or height of the open browser window. This means that if a floating box is assigned a width of 25% and the browser window is open to 600 pixels wide, the floating box will render as 150 pixels wide. Figure 8.7 shows an example of the possibilities.

,

FIGURE 8.7 This example shows the Inspector settings for a floating box with a fixed width of 175 pixels and a height value of Auto.

181

,

Designing Pages with Floating Boxes

You can use floating boxes for pixel-level control of your content, but a floating box can never be smaller than its contents. In other words, you cannot use floating boxes to crop images as you can in a page-layout program such as Adobe InDesign.

8. To change the background color of a floating box, click the check box next to the Color field in the Floating Box Inspector and drag a color chip from the Color palette to the color cell next to the Color field, as shown in Figure 8.8. FIGURE 8.8 Change the color of a floating box by editing the Color field of the Floating Box Inspector.

When coloring an element in GoLive, you can rotate through color choices faster by clicking on the Color field in any inspector. A black border appears around the Color field and the Color palette is brought forward. As long as the black border is visible, you can keep selecting new colors and they will update immediately.

,

9. To change the background of a floating box, select the check box next to the BgImage field of the Floating Box Inspector. Now click the Browse button in the Inspector and choose the Web graphic you want to use as your background image. You can also use the Point and Shoot tool from the Inspector to use a graphic from the Files tab of the Site window.

8

182

Hour 8

If you add a background color or image to a floating box and preview that Web page in a Netscape browser prior to version 6, you are likely to see that Netscape does not show the color or show the tiled background image. This is because of a bug in older Netscape Web browsers. An alternative solution is to fill the floating box with a table that has the same background color, or create a one pixel colored gif and select it as the background image.

Stacking Floating Boxes on Top of Each Other A great feature of floating boxes is that they can stack on top of each other. To edit the depth of a floating box, simply select it and enter an integer in the Depth field of the Floating Box Inspector. For programmers this is referred to as the Z-index. Floating boxes with higher numbers appear higher in the stacking order. For example, a floating box with a Depth value of 5 would display on top of another floating box with a Depth value of 0. Understand that if you place certain objects in a floating box, such as flash (.swf) or QuickTime movies, they are embedded tightly into the page and they cannot overlap or be overlapped.

, TO DO

To Do: Stacking Floating Boxes In this lesson we will practice stacking one floating box on top of another. Our example will place text on top of an image. 1. Create a new document. 2. Drag a floating box onto your page. Using the Inspector, name the floating box headline. 3. We will cover adding text and graphics with more detail in the next lesson, but we will touch on a little bit of both for this lesson. Click in the floating box to get the cursor, and then type the words DoggieWorld.com, the place for happy pups. Or, type any other ridiculous headline.

,

4. Drag another floating box onto your page and name it image. Set the width to auto and the height to 200 pixels. 5. Drag an image object from the basic section of the Object palette into the floating box. The image that is used in this example, floating_dog.jpg, is available at www.GoLivein24.com. Select the image and choose Align Center from the Toolbar. See Figure 8.9.

183

,

Designing Pages with Floating Boxes

8

FIGURE 8.9 When an image is selected in a floating box and Center Align is applied, the image will center inside the boundaries.

6. Have the floating box named image selected, and type a 0 value into the Depth text box in the Inspector. It can’t be stacked correctly if you don’t put a number in. The lower the number in the Depth field, the closer the layer is to the page. 7. Select the floating box named headline. Change its depth to 5.

When stacking floating boxes always use depth numbers in jumps of 5 (0, 5, 10, 15, and so on). Otherwise you might create hours of work when you insert a new box between existing ones. You can also use negative numbers to put floating boxes under Z-index zero.

,

8. Reposition the floating boxes so that the floating box containing text is on top of the image.

It is very easy to grab the text or image when repositioning a floating box. If you do this and the image or text gets pulled out, simply drag it back in. Look for the sideways mitt before dragging the floating box.

Adding Text and Graphics to a Floating Box Now that you have learned how to create floating boxes and adjust their basic attributes, you will add content to the floating boxes and see how to use them for creative and flexible designs not possible with HTML tables. Think of a floating box as nothing but an HTML unit that you can create anything in. In other words, a floating box could have a table, image, text, and a movie all in the same box. You design within a floating box the same way that you would design an individual

184

Hour 8

HTML page. The benefit is that you can break your layout into many smaller units and in Hour 14, “Creating DHTML Animations,” we will even animate these boxes! If you are comfortable with the material from Hour 4, “Formatting and Stylizing Text” and Hour 5, “Using Graphics on a Web Page,” you have all the skills you need to add text and graphics to floating boxes.

, TO DO

To Do: Using a Floating Box to Format In this lesson we will place a table, an image, and text into a floating box. 1. Create a new document. 2. Drag a floating box onto the page. 3. Drag a table object into the floating box. 4. Make the table 1 row, 2 columns, 300 pixels wide, 200 pixels high. Then lock in the cells to be 50%. If you need help with tables refer back to Hour 6, “Designing Pages with Tables.”

You might notice that it gets difficult to differentiate whether you have the floating box or the table selected when their edges are so close. If it helps, resize the floating box to give yourself some more workspace, or use the markup tree in the lower left of the page. Click on the table tag to select the table or the div tag to select the floating box.

5. Place an image in the left cell. The image that we are using is called exchange.jpg and is available at www.golivein24.com. 6. Click in the right cell and add the text, Sign Student Program. See Figure 8.10.

up for the 2002 Exchange

,

7. Play around with repositioning the entire floating box to other locations on the page.

FIGURE 8.10 Add text, graphics, and other objects to a floating box just as you would on an HTML page.

Designing Pages with Floating Boxes

Managing Floating Boxes with the Floating Boxes Palette The features of the Floating Boxes palette (see Figure 8.11) make designing Web pages with floating boxes much easier by allowing you to show, hide, lock, and unlock floating boxes temporarily. If the Floating Boxes palette is not already visible, you can choose it from the Window menu. FIGURE 8.11 This is what the Floating Boxes palette might look like for a page with three floating boxes.

Locking and Unlocking Floating Boxes If you are designing a page that uses multiple floating boxes, it can quickly become difficult to manage all the floating boxes gracefully. In many cases, you’ll find yourself accidentally selecting and moving floating boxes that are in your way. To avoid this annoying problem, use the Floating Boxes palette to temporarily lock and unlock specific layers. To lock a floating box, click the Pencil icon in the middle column of the Floating Box Inspector. The pencil will become dimmed (as in Figure 8.12), which indicates the floating box cannot be selected or moved in Layout mode. When you are ready to select, move, or edit your locked floating box, just click the Pencil icon again to unlock it. FIGURE 8.12 The floating box containing the headline text is now locked, which allows easier editing of adjacent floating boxes.

185

8

186

Hour 8

Hiding and Showing Floating Boxes Sometimes your page will become so complex that you’ll want to temporarily hide certain floating boxes instead of—or in addition to—locking them. This can minimize clutter on your Web page to enable you to do some fine-tuning on other floating boxes. To hide specific floating boxes temporarily, click the Eye icon in the left column of the Floating Box Inspector and the eye will disappear as shown in Figure 8.13. This indicates that floating box is now temporarily hidden, which enables you to edit other areas of your Web. When you are ready to turn the floating box back on, just click the Eye icon again and your floating box will reappear! FIGURE 8.13 The floating box named “headline” is now hidden, which allows easier editing of other adjacent floating boxes.

You might have noticed a check box for visibility in the Floating Box Inspector. This is different from what was reviewed in the Floating Box palette. The visibility check box in the Inspector is used to make the contents of the box visible or invisible on the actual Web page. We will be using this check box later in Hour 13, “JavaScript Actions.”

Converting Floating Boxes to a Layout Grid When you’re done designing a Web page with floating boxes, you might consider converting your floating boxes to a layout grid so that you can provide a version of the page that is compatible with older Web browser versions. When you convert floating boxes to a layout grid, you lose the ability to stack and animate the objects in a Web page, but the flattened page will not cause problems in version 3.0 browsers. Before you convert your floating boxes to a layout grid, you first need to check your floating box grid settings. To change these settings, choose the fly-out menu from the Floating Boxes palette and choose the Floating Box Grid Settings, as shown in Figure 8.14.

Designing Pages with Floating Boxes

FIGURE 8.14 Edit the floating box grid settings to change how floating boxes behave.

The floating box grid settings include several options you can change: • Horizontal Spacing and Vertical Spacing are the number of pixels between the horizontal and vertical lines in the floating box grid. These options help you place and align floating boxes. • Snap forces floating boxes to snap to the floating box grid. • Visible While Dragging makes the floating box grid visible when you drag a floating box in Layout mode. • Prevent Overlapping forces floating boxes not to overlap each other. This is especially important if you intend to convert your floating boxes to standard HTML with the Convert to Layout Grid command. When you are done designing a Web page with floating boxes and none of the floating boxes are positioned off the page or overlap each other, use the Convert To Layout Grid command in the fly-out menu of the Floating Boxes palette as shown in Figure 8.14. The Convert To Layout Grid command creates a new page based on the current page, but uses standard HTML instead of floating boxes. This means the page will be more accessible to visitors with older browsers. Save the new “flattened” page and link to it as appropriate.

Summary In this hour you learned how floating boxes work, when to use them, and how to design Web pages with them. You should also be familiar with tables and layout from the last two hours. These different technologies complete your arsenal of Web page design options. In the next hour, you will learn how to combine multiple Web pages into a Web site and manage all those pages and assets. GoLive is a real power tool when it comes to managing Web sites, so don’t delay in reading on!

187

8

188

Hour 8

Q&A Q I want to design my Web pages with floating boxes, but my Web server statistics show me that many of my visitors are still using version 3.0 Web browsers. What should I do? A The last thing you want to do is chase away visitors, so we recommend two possible solutions. The first solution is to include a note on your home page that encourages your visitors to upgrade their browsers and includes hyperlinks to http://www.netscape.com and http://www.microsoft.com. The second idea is to convert your floating boxes to layout grids by using GoLive’s Floating Boxes palette. This will give you two versions of the same Web site, but also require more maintenance. Q I moved the yellow square placeholder, but the floating box did not move. What’s wrong? A The yellow square indicates the insertion point of your floating box code, but your floating box can be positioned anywhere on your page. If you want to move a floating box, grab its perimeter or edit the Left and Top values in the Floating Box Inspector. Q Why do my floating boxes look so different in the Microsoft and Netscape Web browsers? A Although a version 4.0 or newer Web browser is the minimum requirement for floating boxes to work properly, there are still astonishing differences in how the two main browsers render floating boxes. One of the most commonly seen differences is that Netscape browsers prior to 6 had a difficult time properly displaying a background color or background image attributed to a floating box.

Quiz 1. What is the minimum version of Microsoft Explorer and Netscape Navigator required to view floating boxes? a. Any version will do b. 4.0 c. 6.0 2. Can floating boxes overlap? a. Only in version 5.0 browsers b. Yes c. No

Designing Pages with Floating Boxes

3. What floating box attribute do you edit to change the stacking order of multiple floating boxes? a. Depth b. Order c. Sequence 4. How should you determine whether visitors to your Web site use 4.0 or newer browsers and can correctly view pages that use floating boxes? a. Just guess b. Ask some friends c. Statistics for your Web server

Quiz Answers 1. b. 4.0 is the minimum version of Microsoft Explorer and Netscape Navigator required to view floating boxes. 2. b. Yes, floating boxes can overlap. Their capability to overlap is part of what makes them more flexible than tables and layout grids. 3. a. Edit the Depth value to change the stacking order (Z-index) of multiple floating boxes. 4. c. Examine statistics for your Web site that reveal what browser versions your visitors use.

Exercises To extend your knowledge of floating boxes, try these exercises: 1. Create a Web page that places text and graphics in overlapping floating boxes, and then rearrange their stacking order by editing their depth values. 2. Place an animated GIF in a floating box and stack it above another floating box that contains a still image. This creates a unique multimedia effect not easily achieved with a table or layout grid. To learn about animation and other dynamic effects possible with floating boxes, make sure to study Hour 14.

189

8

PART III Building a Web Site Hour 9 Using GoLive’s Site Management Tools 10 Using Components, Stationeries, Library Snippets, and Page Templates 11 Designing Pages with Frames

HOUR

9

Using GoLive’s Site Management Tools One of the best reasons for using an HTML-editing and site-management application such as GoLive is the capability to change filenames, hyperlinks, fonts, and color usage without causing inconsistencies and broken links throughout the site. Anyone who has hand-coded HTML can appreciate the time that it takes to rewrite code when a referenced image or URL name has changed. In this hour, we will learn how to use the Site window to keep track of files, external URLs, colors, and font sets. Before working in this hour’s lesson, you should be familiar with the basic steps required to create a site. They are covered in Hour 2, “Creating a Site File.” In this hour, you will • Manage files in GoLive’s Site window • Use e-mail addresses in your Web site

194

Hour 9

• Manage and check external links in your Web site • Organize and keep track of colors in your site • Keep track of font sets in your site

Managing Files in GoLive’s Site Window The Files tab of the Site window appears as a default when a new site is created. In this tab, you will see all the files in your site. The Files tab is essentially a directory system similar to the Macintosh Finder or Windows Explorer. The difference is that if you change names and move files in the Files tab, GoLive will edit the code of Web pages referencing those files. If this were done in the Finder (Macintosh) or Explorer (Windows), the results could be catastrophic. Relocating and linking files without a site management tool can be tedious and time consuming.

Managing Site Files In this section, you learn how to use the Files tab of the Site window to help organize files. But before you can investigate a site, you must have a site open. Follow the steps to create a site that you can use for lessons throughout this hour.

, TO DO

To Do: Creating a Site for This Hour’s Exercises In this lesson, we create a site for exercise purposes. The index page doesn’t have to win awards, but it must reference images and external links. 1. Choose New Site, Blank from the File menu. 2. Name the site hour9 and browse to an appropriate location on your computer. 3. Choose File, Import Files and locate at least two images. You can choose your own or go to www.golivein24.com to download sample images. When an image is selected, choose Add. When all your files are in the lower window, choose Done as shown in Figure 9.1. They will be added to the Files tab. 4. Double-click the index.html file in the Files tab of the Site window to open the index page. Place the two images on the page.

,

5. Type the text Read More Good Books and link the text to an external URL by typing http://www.samspublishing.com/ into the URL text box of the Text Inspector. 6. Use a font set to define the typeface of the text (covered in Hour 3, “Creating a Web Page”).

195

,

Using GoLive’s Site Management Tools

FIGURE 9.1 When Add Files is used, the files are copied, not moved, from their original location into your Site folder.

7. Use at least two colors on this page. You can color the text differently than the background of the page.

,

8. Save the file and close it, leaving the Site window open. The finished page can look any way that you want as long as it has the elements we discussed included. A sample using a table is shown in Figure 9.2.

FIGURE 9.2 Our practice file should include images, external URLs, font sets, and colors.

9

196

Hour 9

TO DO

To Do: Managing Files by Using the Files Tab Now that we have an open site, we can investigate the Files tab of the Site window. 1. Click an image file in the Files tab and note the File Inspector shown in Figure 9.3. There are two important file management features that we will investigate: how to keep track of filenames and file content.

FIGURE 9.3 The File Inspector helps us update names and view content.

2. Change the name of one of your images. Note that changing the name on the File Inspector will automatically change any references. In other words, if you change the name of an image, GoLive will notify you, as shown in Figure 9.4, that the image is referenced in an already created file. It will ask you to verify that you would like to update the HTML. FIGURE 9.4 When a filename has been changed, GoLive will edit the source code of all files referencing it.

,

3. With the renamed image selected, choose the Content tab of the File Inspector. An image preview will appear.

Using GoLive’s Site Management Tools

197

The Content tab can really come in handy if you’re not quite sure that you remember exactly what you named your image files. Select an image in the File tab and choose the Content tab. Voilà! An image preview.

File Organization Many of us think about organizing our sites after we have already started saving files. You might find your site becoming unwieldy and decide later that separate folders would be a better way to keep track of files. But if you start moving files around on your hard drive, any references to those files in previously created HTML files will be broken. The Site Toolbar comes to our rescue with lots of tools, as shown in Figure 9.5, including the New Folder button. If we create a new folder in GoLive, the files that we drag into it will automatically have their paths updated wherever used, helping us to avoid missing files when the site is posted. Show Info Open

FIGURE 9.5 When the Site window is active the Site File management tools become available.

Refresh View

Delete Find Files

Open In Out Links Palette

Change All References

, TO DO

To Do: Creating a New Folder By using the Site tools to add directories and relocate images we can be assured that our links will not be broken. In this lesson, we cover how to correctly add folders to our Site window. 1. Open a GoLive Site window. 2. Click the New Folder button in the Site Toolbar as shown in Figure 9.6.

,

FIGURE 9.6 Create new folders in the GoLive Site to organize files.

9

Hour 9

,

198

3. Rename the folder images.

,

4. Drag an image into the folder. A dialog box will open, verifying that the HTML of pages referencing the image will be updated.

Adding Files to a Site File Perhaps you have been working on a site and saving files from your image-editing application into your Site folder. When you return to GoLive, the files aren’t listed in the Files tab. Not a problem—GoLive simply needs to rescan the Site folder. By choosing the Refresh View on the Site Toolbar (it has a double wavy arrow icon) shown in Figure 9.7, GoLive will rescan the directory and make available any newly added files. Alternatively, you can choose Refresh View from the Site menu. FIGURE 9.7 If you have files in the Site window that are not being recognized, use the Refresh View button from the Site Toolbar or Choose Rescan from the Site menu.

External Tab: Using E-mail Addresses in Your Web Site Links to e-mail addresses are as simple as typing the address. You can choose to do this to receive viewers’ comments or for nonsecure transactions. A link to an e-mail address does not automatically send a message, but will open a new message window from the viewer’s e-mail program with the To: line already filled with the e-mail specified as a link. We cover the steps to creating a link to an e-mail address in the following lesson.

Linking an Image or Text to an E-mail Address Linking to an e-mail address involves using the mailto: attribute in the href tag. First, choose an image or text and create a link. Then, type an e-mail address into the URL text box of the Link tab. GoLive automatically adds mailto:. If you prefer not to have GoLive automatically add this, locate the URL preferences (under General) and uncheck the mailto: check box.

Using GoLive’s Site Management Tools

199

Managing E-mail Addresses If you have pages on your site reference e-mail addresses, GoLive will list them in the External tab of the Site window as shown in Figure 9.8. FIGURE 9.8 Links to e-mail addresses and other external URLs are listed in the External tab of the Site window.

9

If you recently added e-mail links in your page, choose Get References Used from the Site pull-down menu. This will add them to your External tab.

If you change an e-mail address here, it will change all references to it in the site. Suppose that viewer comments need to be sent to a new address. Using the site management tools, we can change all references from one e-mail address to another.

, TO DO

To Do: Changing an E-mail Address In this lesson we take advantage of the site tools available when working in the External tab of the Site window. 1. Have a GoLive site open that has a link to an e-mail address. If you can’t think of one, type [email protected]. 2. Choose the External tab of the Site window and select an e-mail address. 3. Change the e-mail address in the Reference Inspector or in the External tab. If you need an example, change it to [email protected].

,

4. GoLive will alert you to all e-mail references in the site and ask you to verify the change. You can choose to cancel or confirm the change.

Adding Addresses Directly to the External Tab Add addresses ahead of time to make referencing them easy by selecting the Site button of the Objects palette and dragging the Address object to the External tab, shown in Figure 9.9.

200

Hour 9

FIGURE 9.9 Add new addresses to your External tab by using the Address object on the Site tab.

After an address is placed in the External tab, you can use the Inspector to change the name and the URL.

Managing and Checking External Links in Your Web Site Just as e-mail addresses are listed on the External tab of the Site window, so are referenced external links. An external link is one that goes to a page outside your file system, one in which the address begins with http://, ftp://, and so on. Just as with the e-mail links we discussed earlier, you can use the External tab to update and redirect external links.

, TO DO

To Do: Redirecting an External Link In this lesson we take an existing link to a URL and redirect it to a new URL. 1. Have a GoLive site open that has a link to an external URL. The site we created in the first task will work. 2. Choose the External tab of the Site window and select a URL. This will activate the Reference Inspector. If you don’t see the URL that we created, select Get References Used from under the Site pull-down menu. 3. Change the URL in the Reference Inspector as shown in Figure 9.10.

,

FIGURE 9.10 Redirect an external URL by typing a new location in the Reference Inspector.

,

Using GoLive’s Site Management Tools

201

4. GoLive will alert you to all URL references in the site and ask you to verify the change.

,

5. You can choose to cancel or confirm the change. Typing e-mail addresses and external URLs can be time consuming and not always accurate. Use the Point and Shoot tool in the Image and Text Inspector, as shown in Figure 9.11, to link to a specified address in the External tab of the Site window.

9 FIGURE 9.11 Save time by using the Point and Shoot tool to link to external references.

Eliminating Unreferenced E-mail Addresses and External URLs If you have collected URLs and e-mail addresses in the External tab and find that you didn’t use them all, eliminate the unused ones by following these steps. Add an unreferenced URL into a page by Control+clicking (Mac) or right-clicking (Windows) in the External tab of the Site window and choosing New URL, as shown in Figure 9.12. Make sure that the External tab is active. Select Removed Unused References from the Site menu. FIGURE 9.12 Add URLs directly to the External tab for future reference.

202

Hour 9

You can easily import your Favorites or Bookmarks to have URLs loaded and ready to use in GoLive. To import a URL or address file from a Web browser to the site: 1. First, choose File, Import, Favorites as Site Externals. 2. Locate either your Internet Explorer Favorites or Netscape Bookmarks or the address book you want to import. On the Windows side, the Favorites are in the User Profile folder.

Checking External Links Verifying by hand that a few external URLs exist is relatively easy. Start compounding the number of URLs as your site grows, and they can become unmanageable. Using GoLive’s site capabilities, we can make sure that all links are accurate. To verify external links, make sure that you are connected to the Internet and that a site with external links is open. With the External tab active, choose Site, Check External Links. The Status column of the External tab shows a Broken-Link icon for any invalid external links (see Figure 9.13). Link is not verified and is not working

FIGURE 9.13 GoLive will verify that links are active by checking external links.

Link is verified and is working

Using the Site Tab Use the Site section of the Objects window to speed up many tasks. Many of the icons that you see in Figure 9.14 can be dragged and dropped to the Site window.

Changing References Change All References is an excellent tool that is discussed in more detail in Hour 22, “Cleaning Up Your Web Site.” But, its usefulness has to be mentioned as it applies to this hour’s lesson.

Using GoLive’s Site Management Tools

FIGURE 9.14 Use the Site section of the Objects palette to create new external links, colors, folders, and other items directly in your Site window.

203

Font Set Generic URL Group Page Address

URL

Color

Folder

9

Address Group

Font Set Group Color Group

The Change All References button enables the designer to choose virtually any item in the Site menu and replace it with something different.

, TO DO

To Do: Changing References from One URL to Another In this lesson, we learn how to change a URL listed in our Site window to a new URL address. 1. Select a URL from the External tab of the Site window. 2. Choose the Change All References button from the Site Toolbar as shown in Figure 9.15.

FIGURE 9.15 Quickly redirect from one external URL to another using the Change All References tool.

3. When the dialog box shown in Figure 9.16 appears, type a new URL or use the Point and Shoot tool to point to another listed URL.

,

FIGURE 9.16 Type a new URL or use the Point and Shoot tool to redirect a URL.

Hour 9

,

204

,

4. If the changed URL is used, an alert window appears. Verify the pages that you want to update with the new URL and click OK. After experiencing the capabilities available through the GoLive site-referencing tools, you will want to use the site tools to globally change any references that need to be updated.

Organize and Keep Track of Used Colors in Your Site Using our site tools we can predetermine a color scheme or verify used colors in a site already created. This is especially useful in terms of design consistency; for example, we can avoid using navy blue for our headline on one page and royal blue on another. In this section, we will cover finding used colors, adding new colors, and applying the colors when designing pages.

Finding Used Colors in a Site If you have been working on a site, you might find all but the recently applied colors listed in the Colors tab of the Site window. If this is the case, make sure that all new pages are saved and closed, and then choose Get Colors Used from the Site menu, as shown in Figure 9.17. All colors applied to the Web pages appear in the Colors tab. FIGURE 9.17 When in the Colors tab of the Site window you can update color usage by choosing Get Colors Used from the Site menu.

Using GoLive’s Site Management Tools

205

The available options in the Site menu vary depending upon which Site tab is activated. If Get Colors Used is grayed out, click the Colors tab.

Adding Colors to a Site GoLive enables you to choose a color scheme and load it into the Colors tab of the Site window, thereby giving you access to a select number of colors in either the Site window or in the Site Color List tab of the Colors palette, as shown in Figure 9.18. FIGURE 9.18 The Site Color List tab of the Color palette.

, TO DO

To Do: Adding Colors to the Site Window Follow this lesson to prepare a color scheme for your site by loading colors into the Colors tab of the Site window. 1. Open a GoLive site and select the Colors tab. 2. Open the Color palette and choose a color. 3. Drag the Color pane from the Color palette into the Colors tab of the Site window as shown in Figure 9.19. It appears in the tab named Untitled Color. FIGURE 9.19 Adding a color from the Color palette to the Colors tab of the Site window.

,

4. Rename the color in the Inspector or directly in the Colors tab.

9

206

Hour 9

Remove colors that are no longer referenced by activating the Colors tab in the Window and selecting Remove Unused Colors from the Site menu.

Applying Site Colors to Your GoLive Page When you have added and renamed your colors, they appear in alphabetical order in the Site Color List of the Color palette. The Site Color List is the last button in your Color palette. It is also accessible through the color pop-up menu as shown in Figure 9.20. FIGURE 9.20 Find the Site Color List in the pop-up menu in the Color palette.

It’s easier to use the Site Color List than to use the standard Web-safe color list. It is much easier to find Corporate Red from six swatches than from 216!

Keeping Track of Used Font Sets in Your Site Assigning font sets instructs the browser to use custom fonts for building the page display. If the fonts in the font set are not installed, the browser uses its own font preferences. For this section, you should have a site that has font sets assigned to text. For more information about font sets, refer to Hour 3.

If you have recently applied a font set and it is not visible, make sure that the page is saved and closed. Also rescan the Site folder using the Site menu.

, TO DO

To Do: Managing Font Sets in the Site Window Follow the steps in this lesson to learn how to better manage your font sets. 1. Activate the Font Sets tab of the Site window. 2. Note any used font sets. If you haven’t already named them, they will appear as untitled font sets, as shown in Figure 9.21.

207

,

Using GoLive’s Site Management Tools

FIGURE 9.21 When font sets are applied from the Type menu, they will appear in the Fonts Sets tab as untitled.

9 3. Select a font set and rename it using the Inspector. You might consider giving it a more logical name such as Headline or Body. Notice in Figure 9.22 that under the Type, Font menu, not only is a font set identified by the first font in its list Arial Black, but also by the set name that you assigned in the Font Sets tab, headline_set. FIGURE 9.22 Naming font sets in the Site window enables you to create font categories for different text on your page.

,

You can edit the fonts on a list in the Site window, but this will not change all occurrences of that font set where already applied. The font set would have to be reapplied to make the changes effective. This type of control is available when using Cascading Style Sheets. Style sheets are covered in Hour 18, “Formatting Text with Cascading Style Sheets.”

4. Open a GoLive page and type on the page. Select the text and drag the font set from the Font Sets tab over the selected text, as shown in Figure 9.23. Save and close the page.

Hour 9

,

208

FIGURE 9.23 Font sets can be applied by dragging them right from the Font Sets tab and over selected text in a page.

5. Just as with the other Site tabs we covered in this section, you can use the Site menu item to discard any unused font sets, or get font sets that are not immediately recognized. Get Font Sets Used and Remove Unused Font Sets are both available as choices under the Site menu, as shown in Figure 9.24. FIGURE 9.24 Scan your site for used font sets that are not immediately recognized, or remove unused sets from the Site menu.

Select Window, In & Outs Links from the menu to check pages that are referencing files, external URLs, colors, and font sets.

,

Using GoLive’s Site Management Tools

209

Summary In this section we covered how to keep track of some very essential items in your Web site. By managing your external links, colors, and font sets, you can control building and maintaining a site and avoid errors and inconsistencies throughout the site. You should feel comfortable applying changes in the files or in the External, Colors, and Font Sets tabs. You can be confident that GoLive will update any necessary changes on your Web pages.

Q&A Q What if I linked pages to an e-mail address that no longer exists? A Using the External tab of the Site window, you can change the URL in the Inspector. GoLive will alert you of changes being made to correct the HTML links throughout your site. Q I just linked to a bunch of external URL links, and they are not appearing in the External tab. What can I do? A Sometimes simply saving and closing the file will list the URLs in the External tab. If not, click the Refresh View button in the Site Toolbar. Another option is to choose Get References Used from the Site menu. Q I was told that some of my links are not working. Do I have to check each URL? A No, simply choose Check External Links from the Site menu. Q Can I copy files, font sets, external links, and colors from one site to another? A Yes. With both sites open, you can copy font sets, external links, and colors from their respective tabs in the Site window and paste them into the respective tabs of other Site windows.

Quiz 1. Will a change to an item listed in the External tab change references throughout a site? a. Yes, but only if it is an e-mail address. b. No, references must be changed manually. c. Yes, all links listed on the External tab will be updated.

9

210

Hour 9

2. What is the most efficient method to delete unused URLs? a. Select each URL and look in the Link Inspector to see whether it is referenced. If not, click the Trashcan in the Toolbar. b. When in the External tab of the Site window choose Remove Unused References from the Site menu. c. Select the URL and look in the Inspector. All pages referencing the URL will be listed. 3. Why would the Site Colors List of the Colors palette be empty? a. You are not working in an active site. b. Colors need to be dragged from the Colors palette’s Color pane into the list. c. The colors you used are not Web safe. 4. What won’t a font set do? a. Update all uses if you make a change to the font list. b. Help you to organize fonts. c. Let you use it in several sites.

Quiz Answers 1. c. Yes, all pages containing links on the External tab will be updated. 2. b. Choose Remove Unused References from the Site menu. 3. a. You are not working in an active site. 4. a. Update all uses if you make a change to the font list.

Exercises Gain more confidence in using the site management tools by completing these exercises. 1. Create a blank site (refer to Hour 2). a. Before creating pages choose three colors from the Web Color List palette and drag the colors into the Colors tab of the Site window. b. Rename the colors to descriptive names, such as orange, blue, and so on. c. Open the index.html page and use the newly created site colors by selecting the Site Colors List tab of the Colors palette and dragging them to selected elements on your page.

Using GoLive’s Site Management Tools

211

2. Use a blank site and create a link to at least two e-mail addresses and one external URL. a. Save the file and close it. b. Choose Get References Used to show the links in the External tab of the Site window. c. Select one e-mail address and use the Change All References tool to change all references from one e-mail to another. 3. If you have existing sites, copy font sets from one site to another.

9

HOUR

10

Using Components, Stationeries, Library Snippets, and Page Templates Planning your Web site to be consistent not only makes your site easier to navigate but also makes it easier for you to update and revise as the site grows. GoLive offers many tools to help develop a foundation for complete pages (Stationery and Page Templates), as well as elements on the pages (Components and Snippets). Some of these features are meant to aid you in site creation, whereas others are dynamic and offer the opportunity to change the elements or page throughout a site with one edit.

214

Hour 10

You will soon discover that this hour is well worth the reading when you learn how to take advantage of time-saving features that are available for GoLive sites. In this hour, you’ll learn about the following: • The differences between Stationeries, Components, Libraries, and Page Templates • Creating and applying Stationeries • Creating and applying Components as dynamic page elements • Storing and reusing Snippets in the Site Library • Using the Library button on the Objects palette • Using Page Templates

To use the Component, Stationery, and Site Library features, a site must be open. If you have questions about how to build a site, please refer to Hour 2, “Creating a Site File.” Practice sites to use for this hour are also available at http://www.golivein24.com/.

Comparing Stationeries, Components, Libraries, and Page Templates Before we start discussing Components, Stationeries, Libraries, and Page Templates in more detail, we will discuss the differences between them. A Component file is one that can be embedded in other pages. Components are actual pages that can contain text, images, rollovers, hyperlinks, and so on. Components are dynamic, meaning that any changes to the component page will update all uses in embedded pages. This makes components ideal for navigational tools and information tables that frequently need updating.

Components can be used for rate schedules, navigational tools, or any frequently updated items.

A Stationery file is used to create a page that can be used as a template for an entirely new page. This page could include source code, tables, images, and anything else that is to remain consistent on pages that are created from this template.

Using Components, Stationeries, Library Snippets, and Page Templates

215

Unlike a Component file, Stationery files are not dynamic, which means that any pages created from them are no longer linked to changes made to the original file. A change in a Stationery file does not update all the pages based on that file.

Improve the design and viewing experience by planning your site. Use layout grids and tables on a Stationery file to build a consistent feel to your Web pages and create the foundation for all future pages.

Site Library Snippets are frequently used elements that are site specific. These include text, objects, or even groups of objects (along with any corresponding source code). Think of elements placed in the Library as a resource of elements frequently used. Those elements might include logos, empty tables, or even commonly used source code. Unlike a component, these elements are not dynamic, and do not update if the original is edited.

Inputting e-mail and URL addresses is trying, even for the best typist. Keep contact information such as the Webmaster e-mail address as a Library Snippet to insert it easily on many pages.

A Page Template is an exciting new feature in GoLive 6. You can create a page with just certain regions of the page defined as editable using a Page Template. When opened as a page, all other areas are locked. Here is the best part: If a change is made to the original Page Template, all pages created from it are updated! If you are trying to keep your Web site consistent in format throughout and make life easier with edits you will want to take advantage of this feature right away!

Before We Start: Site Extras Because all the features discussed during this hour are site resources, we need to be familiar with the Site Extras window. The site extras are found in two places in GoLive and include Components, Diagrams, Libraries, SiteTrash, SmartObjects, Stationeries, and Templates. Site extras are site resources located in the .data folder of your GoLive site. This data file is not just a GoLive feature, but also an actual folder that exists in the site folder. It will contain the Stationery and Component files that we create in this hour.

10

216

Hour 10

There are two ways that we will access site extras: through the Site window and through the Objects palette.

, TO DO

To Do: Access the Site Extras Tab Through the Site Window To access the Site Extras tab of the Site window, follow these steps: 1. Have a site open. If you do not have a working site to use for practice, create a new blank site from the File menu or refer to http://www.golivein24.com/. 2. Choose the pop-up menu from the upper right of the Site window and choose Extras as shown in Figure 10.1.

FIGURE 10.1 The Site window does not show the resources until Extras is selected from the Site pop-up menu.

,

3. The Site window splits in half, with the right side showing the site extras (see Figure 10.2).

FIGURE 10.2 The site extras include resources such as Components, Diagrams (discussed in Hour 20), Libraries Site Trash, SmartObjects, Stationery, and Templates.

, TO DO

To Do: Access the Site Extras Through the Objects Palette In this lesson, we access the site extras through the Objects palette. This can be handy when you don’t want to have the Site window in front of your document. 1. Have a site open. If you do not have a working site to use for practice, create a new blank site from the File menu. Practice sites are also available at http://www.golivein24.com/.

,

Using Components, Stationeries, Library Snippets, and Page Templates

217

2. Choose the Site Extras button of the Objects palette. 3. The palette is empty at this point unless elements have been previously saved.

,

4. To access the site extras, choose the pop-up menu from the lower-right side of the palette, as shown in Figure 10.3.

FIGURE 10.3 The site extras we use in this hour can also be accessed through the Objects palette.

10

Creating and Applying Stationeries as Template Files Pages that are to be used as a foundation for future pages are referred to as Stationery files. Multiple files can be saved as stationeries. In this section, we create a file, save it as a stationery page, and use it to create new pages.

, TO DO

To Do: Create the Stationery File 1. Have a site open. If you do not have a practice site, create a new blank site from the File menu, or refer to http://www.golivein24.com/. 2. Select New from the File menu to create a new blank page. 3. Create a one-row, three-column table by dragging out the Table object from the Basic button of the Objects palette. Enter the following data into the cells: Sales; Service; Locations.

,

4. Choose File, Save from the menu. As shown in Figure 10.4, choose Stationery from the pop-up menu to save the file in the appropriate folder. You can name this file basic.html. 5. Leave this site open for the next exercise.

Hour 10

,

218

FIGURE 10.4 When working in GoLive, additional save options are available.

, , TO DO

To Do: Applying the Stationery File To create a new Stationery file you can simply choose New Special, Page from Stationery file from the File menu or these two other ways: • Creating a new page from the Site window • Creating a new page from the Objects palette Method 1: Creating a new page from the Stationery file using the Site window. 1. Have the same GoLive site open. Remember that stationeries are specific to the site to which they are saved. 2. Open the Site Extras window by choosing Extras from the Site window pop-up menu. 3. Open the Stationery folder. Double-click your saved file. A dialog box will appear as shown in Figure 10.5. Choose Create to create a new document from the Stationery file. FIGURE 10.5 Double-clicking the Stationery file offers the option of creating a new page or modifying the original.

,

4. A page containing your table will open. At this point, you could complete the document and save the page as you would any other page in your Web site. 5. Keep this site open for the next exercise.

,

Using Components, Stationeries, Library Snippets, and Page Templates

219

Method 2: Creating a new page from the Stationery file by using the Objects palette. 1. Have the same Site window open. Again, remember that stationeries are specific to the site to which they are saved. 2. Locate the Site Extras button in the Objects palette. 3. Choose Stationery from the pop-up menu in the lower right of the Extras palette (see Figure 10.6).

FIGURE 10.6 Stationery files can also be accessed through the Site Extras button of the Objects palette.

4. Locate the Stationery File icon and double-click it or drag it to the Files tab of the Site window. A new page named New from [yourfile].html appears as shown in Figure 10.7. An Under Construction icon will appear to the right of your new page until it has been opened and resaved. FIGURE 10.7 Drag the Stationery file from the Site Extras tab to the file menu in the Site window to create a new page.

,

5. Double-click to open the file and continue designing the page.

10

220

Hour 10

Many files can be saved to the Site Stationery folder. If you choose to use the Objects palette, note that the name of the file will appear as a tool hint in the lower-left corner of the Site Extras palette as you cross over the Stationery icon.

Creating and Applying Components as Dynamic Page Elements GoLive components enable you to reference a page’s elements dynamically in multiple pages. Essentially, a component is a page of elements that can be embedded into other pages. For example, consider how many pages in your site use the same navigation element. Now consider the amount of work involved to make changes to these elements. With the component feature, making a change involves changing only the component page containing the navigational elements; all others are dynamically linked and are updated as soon as the original component page is saved. Needless to say, this is an extremely helpful tool when working on elements that frequently need to be updated. In this section, we create a component, embed it in a page, and then edit the original. Because this is a dynamic element, all uses of the component will be updated when the original is resaved.

Only Netscape/Internet Explorer 4.0 or higher can correctly read a component. For most viewers this is not an issue, but keep it in mind if you believe that the majority of your viewers are not Web savvy.

We will now create a component and cover two methods of embedding it into another Web page. The first method uses the Site Extras button of the Objects palette and the second takes advantage of Smart Objects.

, TO DO

To Do: Creating the Component In this lesson, we build a component. A component can be truly appreciated only when you have the opportunity to take advantage of this feature. In this lesson, we place a table that includes schedule information. We then place the table on two other pages, and then update the original component page. For this lesson, use the sample provided at http://www/golivein24.com/ or create your own blank site.

,

Using Components, Stationeries, Library Snippets, and Page Templates

221

1. Components are a site resource, so make sure that you have a GoLive site open. If you need help creating a GoLive site, refer to Hour 2. 2. Create a new document, drag the Table object on to the page, and enter the data provided in Table 10.1 into the table’s cells.

TABLE 10.1

Enter This Data into Your Table Object

May

June

July

9-4

9-5

closed

M-Th

M-F

closed

Some real-life examples are navigation bars, tables with schedules, and an image that must be changed frequently—the “special of the day,” for instance. 3. Click the Page icon in the upper left of the page, next to the page title. This opens the Page Inspector as shown in Figure 10.8. If you do not see the Inspector, make sure that you have it set to be visible. Choose the HTML tab of the Page Inspector and click the Component button. This ensures that the page code is set up correctly as a dynamic element. FIGURE 10.8 Select to change the settings for a component in the HTML tab of the Page Inspector.

4. Choose File, Save from the menu. As shown in Figure 10.9, choose Components from the pop-up menu and save the file as schedule.html in the Root folder of your site.

,

5. Keep this site open for the next lesson.

10

222

Hour 10

FIGURE 10.9 When working in a site, you can choose to save a page as a component and embed it into other pages.

Note that tag information in the head and body tags (for example, background color) is not embedded in pages. If you would like a background color in a component, apply it to a layout grid or table as described in Hour 6, “Designing Pages with Tables.”

, TO DO

To Do: Embed a Component in a Page Now that the component has been saved, we will embed the component into pages using two different methods. Method 1: Embedding the component in a Web page. 1. Make sure that the GoLive site is still open. 2. Select New from the File menu to create the blank page into which we will embed the component. 3. Locate the Site Extras button of the Objects palette as shown in Figure 10.10. Choose Components from the pop-up menu in the lower right. An icon representing your component appears.

,

ToolTips in the lower-left corner of the Objects palette inform you of the saved name of the component.

4. Click and drag the Component icon from the Site Extras section to the location on the page you would like the embedded object to appear.

223

,

Using Components, Stationeries, Library Snippets, and Page Templates

FIGURE 10.10 Components can be selected and dragged to a Web page from the Site Extras button of the Objects palette.

The table has now been embedded as a component in the page. Save this page as schedule1.html.

If a component is placed into a Web page, it will span the width of the page. If you want to control the width and placement of a component, drag it into a layout grid or table.

Method 2: Embedding the component into a Web page by using Smart Objects. 1. Make sure that the GoLive site is still open. 2. Choose New from the File menu. 3. Locate the Smart Objects button of the Objects palette. Select and drag the Component Smart Object to the Web page (see Figure 10.11). FIGURE 10.11 Use the Component icon on the Smart Objects section to embed a dynamic element.

4. Either browse or use the Point and Shoot tool to link the Smart Object icon to the component.

TO DO

,

5. Save this page as schedule2.html.

To Do: Modify the Component In this lesson, we will modify a component to show how it dynamically changes all pages linked to it.

,

1. Have a page with an embedded component open. 2. Double-click the embedded component. This will open the original component file.

10

Hour 10

,

224

3. Change the table data to state that the hours are 9–5 in July instead of closed. Save the file.

,

4. A dialog box will appear, as shown in Figure 10.12, giving you the opportunity to choose whether to apply the new changes to the pages that use the component. If left checked all of the listed pages will be updated.

FIGURE 10.12 When a component is updated, it will verify whether you would like to update all pages into which it has been embedded.

Storing and Reusing Site Library Snippets As we discussed earlier, Site Library Snippets give you the ability to build a resource of text, code, or objects that you will frequently use. Because Snippets are part of the site resources, you can save elements that are specific to the site without combining them with Library Snippets from other sites.

, TO DO

To Do: Create a Site Library Snippet There are two ways that you can create a Site Library Snippet: by using the Objects palette or by using the Custom tab of the Site window. Method 1: Creating a Site Library Snippet by using the Objects palette. 1. Create an element that you want to reuse. This could be an image, a group of elements, or text.

,

2. Make sure that the Site Extras section of the Objects palette is visible. Choose Library from the lower-right pop-up menu as shown in Figure 10.13. This opens the window that we will drag Library Snippets in and out of. 3. Select the desired item and drag it to the Site Extras palette. You will know that it has reached the palette when a black border appears around the Site Extras button.

225

,

Using Components, Stationeries, Library Snippets, and Page Templates

FIGURE 10.13 Library Snippets including text and other elements can be saved for use within the Site Extras button of the Objects palette.

Text Snippet

Image Snippet

4. Double-click the icon of the snippet to give it an appropriate name. The name will appear as a ToolTip in the lower-left corner of the Site Extras palette when you cross over the image.

If you want to create a Library Snippet from a group of items, hold the Shift key while selecting the elements. If you are copying text and other elements, such as tables or images, it is best to place your cursor outside of them and drag as though you are selecting text, right over all those elements.

Method 2: Creating a Site Library Snippet by using the Library tab on the Site window. 1. Create an element that you want to reuse. 2. Have the Library tab of the Site window visible. 3. Select the desired item and drag it to the Library tab. A generically titled snippet appears as shown in Figure 10.14. FIGURE 10.14 Frequently used elements can be dragged to the Custom tab of the Site window.

,

4. Use the Inspector to change the name of the snippet.

10

226

Hour 10

The Library snippet that you created automatically adds an .html extension. Don’t let that fool you; it is not a valid HTML page. It has no head or body, as shown in Figure 10.15. It is essentially a snippet of HTML code. You can open that snippet to change it in the layout mode or other modes by double-clicking it. FIGURE 10.15 A Site Library snippet is a stored piece of HTML code specific to the open site. Make changes to a snippet by opening it and saving the file.

Using the Library Button on the Objects Palette Different from a Library Snippet, GoLive also features a Library button on the Objects palette. This button enables you to drag items to the palette that are not specific to a site, and does not require a Site window to be open. This is good for items that are needed in multiple sites, perhaps frequently used tables of generic logos.

, TO DO

To Do: Saving Elements to the Library Button To use the Library button in the Objects palette, follow these steps: 1. Select an element or a group of elements from your Web page that you want to reuse. 2. Click and drag the element(s) over to the Library section of the Objects palette, as shown in Figure 10.16. Let go of the mouse when a black border appears inside the border of the palette.

,

3. Double-click the custom object to name it.

Using Components, Stationeries, Library Snippets, and Page Templates

227

FIGURE 10.16 Save elements that are not site specific for reuse in the Library section of the Objects palette.

Using Templates One of the most exciting new features in GoLive 6 is the addition of Page Templates. Page Templates, like Stationary Pads, are HTML files that can be used as a template for a whole page. Unlike Stationary Pads, however, Page Templates can contain editable regions that you define. Using the Template Region palette, shown in Figure 10.17, elements can be assigned as editable, whereas everything outside the regions are automatically locked. If you later modify the Template, GoLive will automatically update the locked content in any document based on it, while preserving the content of the editable regions! Just imagine the hours this can save for those of you managing large sites, or trusting others to update your site! FIGURE 10.17 Create Page Templates to lock a page into place, leaving only designated editable regions for updates.

Undefine Editable Region Select Region New Editable Region

, , TO DO

To Do: Building a Page Template In this lesson, we will set up a template with several editable regions. Because this is a site-specific feature, you will need to have a site open to complete this exercise. Refer to Hour 2 if you need information about how to create a site, or you can download a sample site at www.golivein24.com. 1. Have a site open and create a new document. Place some elements on the page. For this lesson have at least one empty table on your page.

10

Hour 10

,

228

2. From the Window menu, select Template Regions. 3. Notice in the lower part of the Template Regions palette the New and Trash icons. Select a table, and click the New Editable Region icon, as shown in Figure 10.18. Notice that the selected region becomes colored, signifying that this region is the only section of the page that can be changed when a page is created from the template.

FIGURE 10.18 Use the Template Regions palette to specify editable regions on the Page Template.

4. Save the file by selecting Templates from the Save pop-up menu as shown in Figure 10.19. FIGURE 10.19 Select Templates from the pop-up menu when saving the file.

,

Using Components, Stationeries, Library Snippets, and Page Templates

229

Applying the Template

, TO DO

In addition to creating a page from your File Menu (New Special, Page from Template), there are two other ways that you can create a new page from your Page Template: using the Site Extras section in the Objects palette and using the Site window. In this lesson we will go through both.

To Do: Using Templates in the Objects Palette Using the drag-and-drop method we are going to create a new page from the Objects palette. Before we start, make sure that you have a site open that has a Page Template saved in it.

If you are not sure whether you have a Page Template in your site, open the Extras tab in the Site window. If you have a saved Page Template, it will be visible in the Template folder.

1. Have your Site window open with your Files tab active. 2. In the Objects Palette, select the Site Extras button. 3. In the lower right of Site Extras, select Templates from the pop-up menu, as shown in Figure 10.20. FIGURE 10.20 Select Templates from the pop-up menu.

4. Drag the icon of your Page Template to the location you want the new page in the Files tab of the site folder. A new page is created with a triangular, under construction icon beside it. When the file is opened, edited, and saved, the under construction icon will disappear.

,

5. Open the page and note that you can only type the area you determined should be edited.

10

230

Hour 10

, TO DO

To Do: Using a Template from the Site Window You can create a page from a Template file using the Site window. This method will also allow you to open and edit the Page Template. 1. In the Site window make sure that the Extras are visible. If they are not, select Extras from the fly-out menu as shown in Figure 10.21. Then, open the Templates folder to reveal your Page Template.

FIGURE 10.21 The Templates folder is in with the other Site Extras. Open the folder to reveal any saved Page templates.

2. Double-click or drag and drop the Template file from the Extras window to the Files tab of the Site window. A message will appear, as shown in Figure 10.22, asking whether you want to move the template file, thereby disabling it as a template, or create a new file. Choose Create to build a new page. FIGURE 10.22 When you drag or double-click a template file, a dialog box will appear. Select Create from the dialog box to make a new page from the Page template.

,

3. Choose Modify if you want to make changes to the template. Remember that any changes you make on the template can be updated to the pages created from it! There are additional options to make your life easier when using Templates. If you take a look under the Special menu, shown in Figure 10.23, you will see that not only can you detach a Template from an existing page, but even apply a Template to a page that has already been created!

Using Components, Stationeries, Library Snippets, and Page Templates

231

FIGURE 10.23 Select to attach or detach a template from the Special menu.

Summary By the end of this hour, you should feel comfortable using the timesaving features available when working in a GoLive site. Proper planning is still essential, but combine it with using the right tools and you are well on your way to creating a clean, consistent Web site.

Q&A Q I used a Stationery file to build several pages. When I change the Stationery file, will it update the other pages? A No. Stationery files are meant to be the foundation for new pages, but they are not dynamic. If this is important to you, use a Page Template. Page Templates can be changed and it will update all files created from it. Q I have already posted a site using a component navigational bar. I updated my component on my system. Do I now need to replace all uses of my pages on the server? A Yes. When the Component was updated on your system, it updated all uses only on your system. You now need to upload those updated files to your Internet service provider’s (ISP) server. Q Can Stationery files contain components? A Yes. That is a good way to make your Stationery files more dynamic.

Quiz 1. What is the best way to save a line of source code that you want to reuse? a. Copy and paste it into a new document until needed. b. Put it in a Stationery file. c. Save it as a Library Snippet.

10

232

Hour 10

2. How can you control the width of a component embedded on a page? a. Drag the window down in size. b. Use a layout grid or table and place the component in a cell. c. Type a width in the Inspector. 3. What attribute won’t a component carry to embedded pages? a. Background color b. Imagemaps c. Hyperlinks 4. Why might the pop-up window in the Save window not be there when you want to save a Stationery, Template, or Component file? a. The page is not labeled .html. b. A GoLive site is not open. c. The page contains a component.

Quiz Answers 1. c. The best way to save a line of source code that you want to reuse is to save it as a Site Library Snippet. 2. b. To control the width of a component embedded on a page, use a layout grid or table and place the component in a cell. 3. a. Background color is the attribute that a component won’t carry to embedded pages. 4. b. The pop-up window in the Save window won’t be present if a GoLive site is not open.

Exercises Become more familiar with the site resources by practicing and forcing yourself to use them in a site building workflow. 1. Create a practice site (see Hour 2). Use this file to set up stationery, components, and Site Library Snippets. 2. Create a Stationery file that contains a component. Use the Stationery file to build several files and then update the component. 3. Place an image and text on a practice page and create a Site Library Snippet from the two items. Apply the snippet to the same or another page.

HOUR

11

Designing Pages with Frames Have you ever visited a Web site where it appears as though one portion of the page remains fixed, while the content of another portion changes? You are not imagining it! What you are experiencing is a common use of frames. Although creating complicated frame sets can be a challenging proposition, simple frame sets are fairly easy to master and can be very effective when used properly. In this hour, you learn how to • Create a frame set • Edit the basic frame set attributes • Assign pages to the frames in your frame set • Target pages from within your site • Target links to pages outside of your site • Target two frames with one link • Target using the base URL head tag

234

Hour 11

Creating Frame Sets First, you must learn a little terminology to establish the difference between a frame and a frame set. Imagine a glass window split vertically down the middle into two panes. In the HTML world, the two glass panes are comparable to individual frames. The wood around the outside and down the center of the window, which holds the panes in place, would be considered the frame set. When you build a frame set you are creating a very simple HTML file that does nothing more than tell the browser how to split up the window into frames. Each frame then displays a separate HTML page in the area designated to it. In our analogy, there are two such panes, so two additional HTML pages are needed—one for each frame. Consequently, you need three HTML files to create a two-frame layout. The first file is the frame set document, an HTML page that instructs the browser to divide up the page into two frames and which HTML pages to display subsequently in those frames. The other two files are the HTML pages that will load into the individual frames. Before you begin creating a frame set, you should have a good idea of how you want to set it up. Do you want a skinny navigation bar across the top of your page, with the content area below? Perhaps you prefer a series of navigation links in a narrow left frame with the content in a larger right frame? (See Figure 11.1.) You can choose from a number of pre-made frame sets in GoLive, but remember that the pages that loaded into each frame must be designed with the layout of the frame set in mind. FIGURE 11.1 Here is an example of a two-frame layout utilizing left-frame navigation links and right-frame content.

Designing Pages with Frames

235

, TO DO

To Do: Create a Frame Set To create a frame set in GoLive, follow these steps: 1. Create a new page by selecting File, New from the menu, or by pressing Command+N (Mac) or Control+N (Windows) on your keyboard. 2. Switch to Frames Layout mode by clicking the second tab from the left, titled Frame Editor (see Figure 11.2). The icon on the tab resembles a three-frame frame set.

FIGURE 11.2 Access the Frame Editor by clicking the second tab from the left.

3. Open the Objects palette, if it is not already open, by selecting Window, Object from the menu, or by pressing Command+2 (Mac) or Control+2 on (Windows). 4. Click the Frames button of the Objects palette (see Figure 11.3). 5. Drag the Frame Set icon of your choice from the Objects palette and drop it into the Frames Layout window. FIGURE 11.3 GoLive offers an array of pre-made frame sets from which to choose.

, If you change your mind and want to use a different frame set layout, simply click once inside a frame and press the Delete key on your keyboard. This will remove the selected frame. You can delete one frame or as many as you like. If you delete all the frames, your page becomes blank and you can start over by dragging another Frame Set icon to the page. You can also add the single Frame icon or another Frame Set icon to an existing frame set to create a new layout.

Editing Basic Frame Set Attributes Open the Inspector, if it is not already open, by choosing Window, Inspector from the menu, or by pressing Command+1 (Mac) or Control+1 (Windows) on your keyboard.

11

236

Hour 11

After you have dragged a Frame Set icon to the Frames tab of your document, you will notice that the Inspector shows Frame in the lower-left corner. You will use the Inspector to set the attributes for each individual frame by clicking on the frame you want to edit. In the Inspector, you name the frame, set its size, indicate which HTML page will show in the frame, choose whether you want scrollbars, and decide whether the frame will be resizable by the user. You must do that for each frame in the frame set. If you click on one of the borders around a frame, the Inspector will show Frame Set in the lower-left corner. At that point, you can set the attributes for the frame set itself, including the border size and color. You must set the attributes for every border separating the frames. Let’s discuss each of the options in the Frame Set Inspector (see Figure 11.4). FIGURE 11.4 The Frame Set Inspector.

• Size—The Width and Height input fields are disabled because you cannot set an absolute size for a frame set. • Orientation—Clicking the Horizontal radio button arranges the frames in your frame set horizontally, whereas clicking the Vertical radio button arranges the frames vertically. Click on Matrix to create a frame set that has the attributes “row” and “col” at the same time, defining a matrix. • Rows and Columns—After a frame set is placed you can edit the amount of rows and columns. If you add more rows and columns than existing frames, a blank frame set is created. • BorderSize—To set the width of the border between frames, click the check box next to BorderSize and type the desired size into the input field. Border size is set in pixels, so if you choose a border of 10, it will show in the browser as 10 pixels wide. If you set the BorderSize to 0, no border will show.

Designing Pages with Frames

237

• BorderColor—If you choose a border size of 1 or greater, you can define a border color to it. Click once on the color cell next to the word BorderColor to open the Color palette. Select the color of your choice from the Color palette, and then drag and drop the color chip from the Color palette into the color cell in the Frame Set Inspector. • BorderFrame—Choosing Yes from the pop-up gives your border a 3D appearance, whereas selecting No means the border will be 2D.

To have a seamless frame set, where you have no evidence that the pages are separate, set the border size to 0, and the BorderFrame to no.

• Preview Set (Mac only)—Click the Preview Set button to see how your frame set will look. If you have not yet assigned an HTML page to each frame, the Preview Set button will not have an effect. • Stop Preview (Mac only)—Stops the preview and returns you to frame set editing mode.

11 To preview your frameset, click the Frames Preview tab (Mac) or Layout Preview tab (Windows) at the top of the page. Note that GoLive will not display a frame that references an external URL. You must use a Web browser to preview that frame.

Assign Pages to the Frames in Your Frame Set A frame set alone is only part of the equation. You need to fill the individual frames with content, which means you must assign an HTML page to each frame. For a frame set that has two frames, you must create two HTML pages, one for each frame. Figure 11.5 shows the individual HTML pages that went into our sample frame set. One page contains a series of links, whereas the other page contains the content. You use the Inspector to set the attributes of each frame, and to assign an HTML page to each frame. Let’s explore the Frame Inspector (see Figure 11.6).

238

Hour 11

FIGURE 11.5 The frame on the left acts as a navigation tool by offering a series of links. The frame on the right holds the content.

FIGURE 11.6 The Frame Inspector.

If the Inspector does not show Frame in the lower-left corner, you are not in Frame mode. Click once on a frame in your frame set to switch the Inspector to Frame mode, where you can set the attributes for that particular frame. You must set attributes for each individual frame in your frame set.

• Size—Three choices are available in the pop-up tab next to Height and Width: • Scale—Scale automatically resizes the frame if the viewer resizes her browser window. • Pixel—Pixel enables you to set the size of the frame in pixels. You cannot set all frames in a frame set in absolute pixel sizes. For example, if you have a

Designing Pages with Frames

239

two-frame vertical setup, you can have the left frame in pixels, but you must leave the right frame set to Scale. By setting one frame in the frame set to Scale, the frame set will adjust itself to accommodate the size of the browser window it is occupying. • Percent—Percent enables you to choose the percentage of the browser window that you would like the frame to inhabit. For example, you could set a left frame to 25% and a right frame to 75%. No matter how small or wide the user sets his browser window, the left frame will always fill 1/4 of the whole window. • Name—You must name each frame in your frame set. Simply choose a descriptive name and type it into the Name field. For a two-frame vertical layout, you might choose Left Frame as the name of the left frame, or you could use something more descriptive, such as Table of Contents, or Navigation Frame.

What you name the frame is not important, but you will have to remember it and possibly retype it, so keep it simple. Also, keep names in lowercase; frame names are case sensitive and won’t work if you target a frame with an uppercase name when you typed it in lowercase.

• URL—The URL field is where you designate the HTML page to display in the frame. There are four methods for setting the URL: • Type—Type the URL directly into the URL field in the Frame Inspector. • Browse—To choose an HTML document from anywhere on your hard drive: 1. Click the Browse button. 2. Navigate through the hierarchy of folders on your hard drive until you arrive at the file you want to display in the frame. 3. Select the file and click Open, or double-click the file. • Point and Shoot from Inspector—To use the point and shoot method, you must have a Site File open: 1. Click the mouse down on the Point and Shoot button at the left end of the URL field. 2. Continue holding down the mouse button while you drag the resulting line over to the Site file. 3. Point at the document you want to display in the frame. 4. Let go of the mouse button.

11

240

Hour 11

• Drag and Drop—With your Site file open to the Files tab, drag the HTML file you want to display from the list and drop it onto the frame (see Figure 11.7). FIGURE 11.7 Drag the HTML file you want to display from the Files tab of the Site window and drop the file onto the frame.

You can also point and shoot directly from a frame to choose the HTML file you want to display in the frame. Command+Click (Mac) or Alt+Click (Windows) on the frame. Continue holding down the mouse button while you drag the resulting line over to the Site file. Point at the document you want to display in the frame. Let go of the mouse button.

• Scrolling—Indicates whether or not a scrollbar for the frame will be available to the viewer. There are three options: • No—Choosing No removes scrollbars from the frame, whether or not the user needs them to see all the content on the page. Use No only when you are completely certain that scrollbars will not be needed. • Yes—Choosing Yes displays scrollbars whether or not the frame’s contents are fully displayed. • Auto—Selecting Auto allows the browser to choose whether scrollbars are needed. If all the contents of a page are being displayed, the browser will not offer a scrollbar, but if there is additional content the scrollbars will automatically be added. • Resize Frame—By default, this option is deselected. If you want your viewers to have the ability to resize the frames of your frame set in their browser windows, check the check box for this option.

Designing Pages with Frames

241

• Preview Frame (Mac only)—Clicking the Preview Frame button displays the HTML page assigned to the frame without switching to the Frames Preview tab of the Document window.

To open the HTML page that is assigned to a frame, simply double-click anywhere in the frame.

Targeting Pages from Within Your Site Earlier in the hour, we mentioned that you must name every frame in your frame set. There is a very good reason for that. When you click a link in one frame, you must tell the browser whether to open the link in the same frame, open the link in one of the other frames, in the whole browser window, or even in a brand-new browser window. As default, if you click on a link the page replaces itself. This can defeat the purpose in a framed page, especially when the navigation bar replaces itself! When you name each of the frames in your frame set, you make it easy to designate where a link will open when a user clicks it.

You must have a frame set document open in GoLive for the names of its frames to appear in the Target pop-up list of the Inspector.

, TO DO

To Do: Select a Target for Your Link To select a target for your link, complete the following steps: 1. Select the text or image you want to use as the link. 2. In the URL field of the Inspector, either type in, point and shoot at, or browse to the HTML file to which you are linking. (For more information on how to make links, please refer to Hour 4, “Formatting and Stylizing Text.”)

,

3. Click the button with the little up and down arrows on it at the right side of the Target field. 4. Choose the target for your link from the pop-up list. The list will include the names of all the frames in your frame set, plus the default target options of _top, _parent, _self, and _blank (see Figure 11.8).

11

Hour 11

,

242

FIGURE 11.8 Select the target for the link from the pop-up list in the Inspector.

, If you target a link using the name of a frame that does not really exist, the page will open in a new browser window.

Let’s define the choices available in the Target pop-up: • Default—This loads the new page into the frame from which the link originates. It is the same as using Self. • Frame Name—If you want a link to load a page into one of the frames in your frame set, choose the name of the frame from the Target pop-up. • Top—If you want the page to load into the whole browser window rather than into one frame, choose _top. • Parent—If you have nested frame sets on your page (advanced users only!), choose _parent to load a new page into the parent of the current frame set. • Self—To load a page into the same frame from which the link originates, select _self. • Blank—To open a brand-new browser window in front of the current one, choose to target the link to _blank. This can be useful even when not using frames to open a link in a new window without leaving your site. For instance, if you want a link to go to an external site, but yet allow viewers to click back to your site at any point.

If no target is selected for a link, by default the new page loads into the same frame as the link.

Designing Pages with Frames

243

, TO DO

To Do: Create a Frame Set and Target Links To create a two-frame frame set complete with links and then target those links, complete the following steps: 1. Open a new GoLive project. 2. Create an HTML page with a black background and a series of words in one line across the top. Type the words as shown in Figure 11.9. Change the color of the words to white so that you can see them on the black background.

FIGURE 11.9 Type these four words across the top of the page: Home | About | Links | Contact. The straight line, or pipe character, is above the Return key on the Mac, or above the Enter key on the PC.

11

3. Save the page into your Root folder and name the file navigation.html. 4. Next, create four HTML pages, each with one of the four words listed in step 2 as a heading. Give each page a different background color (use four colors that coordinate well with each other). Save the page that has the Home heading as home.html. Use the same process to save the other three pages so that you end up with five files: navigation.html, home.html, about.html, links.html, and contact.html.

,

5. Create a frame set that has a narrow navigation frame at the top, and a wider content frame below it (see Figure 11.10). Name the top frame Navigation in the Name field of the Frame Inspector. Name the bottom frame Main. Save the page into your Root folder and name it frameset.html. Set the FrameBorder to No and BorderSize to 0. 6. Load the page called navigation.html into the frame named Navigation. Load the page called home.html into the frame called Main.

Hour 11

,

244

FIGURE 11.10 Drag the Frame Set icon showing a narrow top frame and a wider content frame from the Frames button of the Objects palette and drop it on your page to create the frame set.

7. Open the page called navigation.html by double-clicking inside the Navigation frame in the frame set, and create links from the words. That is, link the word Home to the file home.html, and so on. Target each link to the frame called Main. Save again. 8. Open the page frameset.html in a browser and test your newly created frame set!

When working in frames it is common to forget that you must always preview your page from the frame set page, not the individual pages that belong within the set. Make sure that after you save changes that you return to the frame set before previewing.

,

Targeting Links to Pages Outside Your Site There might be times when you want to load a page at an external URL into a frame in your frame set. This is quite easy to do, but we strongly suggest that you consider several things before you load someone else’s page into your frame set. If you load an external page into one frame of your frame set and that page is itself a frame set, you will end up with nested frames. This presents a very difficult navigation problem for the viewer. It is confusing and distracting, and many people do not know how to break out of a frame set. Loading an external page into your frame set might also produce a copyright infringement if you attempt to pass off someone else’s work as your own by presenting it on your site, through your frame set. This is a bad idea, and we suggest you don’t even consider it. If you find information on someone else’s Web site that you would like to

Designing Pages with Frames

245

present to your audience, link to it and set the Target field to _blank. This results in the external page loading into a brand-new browser window that opens in front of the current one. This way, your visitor can look at the material on the external site, and then simply close that window to return to yours.

, TO DO

To Do: Linking Your Frame to an External URL To load a page that is outside of your Web site into a frame, complete the following steps: 1. Select the text or image you want to use as the link. 2. In the URL field of the Inspector, either type in the URL, or point and shoot at an external URL in the External tab of the Site window (see Figure 11.11). For more on using external URLs in GoLive, please refer to Hour 9, “Using GoLive’s Site Management Tools.”

In both Internet Explorer and Netscape Navigator, you can drag and drop the icon from the left end of the browser’s address bar to the desired frame to set an external URL. For long, complicated URLs, it’s easier and more accurate to use this method, or to copy and paste the URL, rather than to type it.

FIGURE 11.11 Point and Shoot at an external URL in the External tab of the Site window.

3. Click the button, with the little up and down arrows on it, at the right side of the Target field.

,

4. Choose the target for your link from the pop-up list.

11

246

Hour 11

You must assign a Target to every link you create in a frame. If you do not do so, you might end up with pages opening in the wrong place!

Targeting Two Frames with One Link Adobe GoLive ships with prewritten JavaScripts, which are called GoLive Actions. One Action is used to target two frames with one link. For example, assume that you have a two-frame setup for your Products section. The left frame acts as a table of contents, listing the product names as links. The content frame welcomes the visitor to the Products section of the Web site. When clicked, the links in the left frame load information about the products into the content frame. But you also have a link in that table of contents to your Services section. When the user clicks that link, you want to load into the left frame a new table of contents that displays links to your various services. At the same time, you want a page to load into the content frame welcoming the visitor to the Services section. The way to do that is by using the Target2Frames Action.

, TO DO

To Do: Setting Up the Target2Frames Action To use the Target2Frames Action complete the following steps: 1. Select the text or image that will be the link. 2. Click the Link button in the Inspector. 3. Type # in the URL field to create a blank (null) link. 4. Choose Window, Actions from the menu. Make sure that the Actions tab is selected. 5. Choose Mouse Click from the Events list. 6. Click the New Action (page) icon to the left of the Trashcan.

,

7. From the Actions pop-up, choose Link, Target2Frames (see Figure 11.12). 8. Enter the URLs and targets into the corresponding fields marked Frame 1 and Frame 2 (see Figure 11.13).

247

,

Designing Pages with Frames

FIGURE 11.12 Select Link, Target2Frames from the pop-up in the Actions palette.

FIGURE 11.13 Type the name of the first frame into the Frame 1 field, and then link it to its corresponding page. Do the same for the second frame, with appropriate changes.

, Using Base URL To simplify the target process, use a great head tag that will allow you to choose a base target. In other words, every link on the page can be set up to go to the frame name of your choice, automatically. This works well with Navigation bars where the links are always targeted to the same frame.

11

248

Hour 11

, TO DO

To Do: Using Base URL In this exercise we will set up a default frame name for the target for all links on the page. 1. Open a page that has links that are to be directed to a frame. 2. Open the Head section by turning down the pointer to the left of the page icon, as shown in Figure 11.14.

FIGURE 11.14 Open the Head section of a page by turning down the pointer to the left of the Page icon.

3. From the Head section of the Objects palette, drag the Base icon to the Head section of the page as shown in Figure 11.15. FIGURE 11.15 Use the Base icon from the Head section of the Objects palette to set up a default target for all of the links on the page.

,

4. Ignoring the Base check box, choose the target pop-up menu and select the default frame name for all of the links on this page. If it is not listed, you can type it. By choosing this you never have to specify a target for the links on this page again. You can override this default by setting a different target on individual links on the page. Keep in mind that this must be checked in your browser or it will not preview in GoLive.

Summary In this hour, you learned the difference between a frame and a frame set, how to create both, and how to set their attributes. You also learned how to target links within frame sets, and how to target two frames with one link by using GoLive Actions. You also learned how to save time with the Base URL head tag.

Designing Pages with Frames

249

Q&A Q I created a frame set that has a narrow frame across the bottom of the page with links in it, and a wide frame above it in which the new page is supposed to load. Instead, when I click the link, the page is loading into the narrow frame! What have I done wrong? A You did not properly set up the target for the link. Select the link, and then in the Inspector, choose the name of the frame you are targeting from the pop-up list. Q My frame set has a big ugly border around it, which messes up the design I had in mind. I want the frames to butt right up against each other with no space between them. How do I accomplish that? A Select the frame set by clicking once on a divider between the frames. In the Frame Set Inspector, set the FrameBorder field to 0.

Quiz 1. How many HTML files do you need to create a frame set constructed of three frames? a. One b. Two c. Three d. Four 2. Why is it necessary to give each frame a unique name? a. So that you know which page to load into the frame. b. So that the browser can properly render the frames. c. So that the links in the frames can be properly targeted. d. So that the frame set is the proper size. 3. Is it possible to allow the viewer to resize a frame? a. Yes; set the Scrollbars option to Yes in the Frame Inspector. b. Yes; select the Resize Frame check box in the Frame Inspector. c. Yes; set the size to Scale in the Frame Inspector. d. No, it is not possible.

11

250

Hour 11

4. Before constructing a frame set, you should… a. Create your design, and build the individual HTML pages that will load into the frames. b. Open a new GoLive project. c. Create the links in the individual HTML pages. d. Brew a pot of coffee.

Quiz Answers 1. d. You need four HTML files to create a frame set constructed of three frames. 2. c. It is necessary to give each frame a unique name so that the links in the frames can be properly targeted. 3. b. Yes, it possible to allow the viewer to resize a frame; select the Resize Frame check box in the Frame Inspector. 4. a. Before constructing a frame set, you should create your design, and build the individual HTML pages that will load into the frames.

Exercises The following exercises are designed to familiarize you with the flexible nature of frames and to aid you when making decisions about how to lay out your frame sets. 1. Create two blank HTML pages, each with a different background color. Name one page left.html and name the other right.html. Create a third page. Click the Frames tab at the top of the page to enter the Frames Editor mode. From the Frames tab of the palette, drag the icon representing a two-frame layout (narrow left frame and wider right frame) onto the page. Click the left frame. In the Inspector, name the left frame “left” and set its size to 25%. Click the right frame, name it “right,” and set its size to 75%. Assign the page named left.html to the left frame, and assign the page named right.html to the right frame. Save the page, naming it index_frameset.html. Next, preview the page in your browser. Open the browser window to various sizes. Notice how the left frame always takes up 1/4 (25%) of the page width, whereas the right frame inhabits 3/4 (75%) of the page, no matter what the width of the browser window is. 2. Switch back to GoLive. Using the same files, open the index_frameset.html page and click the Frames tab. Click the left frame and set its size in the Inspector to 200 pixels. Click the right frame and set its size to Auto. Save the page, and then

Designing Pages with Frames

251

preview it in your browser. This time, as you resize the browser window, the left frame remains at a fixed size of 200 pixels, and the right frame resizes itself to occupy the remaining space. 3. Switch back to GoLive. Again using the same set of files, click the border between the two frames. In the Inspector, set the BorderSize to 0 and BorderFrame to No. Click the left frame and select No from the Scrolling pop-up in the Inspector. Save the page and preview it in the browser. Notice how the border between the two frames and the scrollbar for the left frame have been removed.

11

PART IV Adding Interactivity to a Web Page Hour 12 Designing Forms for User Feedback 13 Using JavaScript Actions 14 Creating DHTML Animations 15 Using Plug-ins and Multimedia Content

HOUR

12

Designing Forms for User Feedback If you’ve surfed the Web much, you’ve probably filled out hundreds of forms. Some common uses of forms include submitting a comment or question via e-mail, making a contribution to an online discussion, or completing a purchase at an e-commerce site. All these activities require the Web site designer to create a form so that you can submit your information. During this hour, you’ll learn how to create a professional-looking form for your Web site that makes it convenient for your visitors to submit information, ask a question, or simply send you an e-mail. To learn this, you’ll create a form that asks the visitor a few basic questions about himself and his computer. In this hour, you learn about the following: • Understanding how forms work • Starting with a form container • Using a table to give structure to your form

256

Hour 12

• Working with text entry fields • Creating check boxes and radio buttons • Adding pop-ups and list boxes to your form • Adding large text areas for comments to your form • Adding Submit and Reset buttons to your form • Making your form e-mail you the results

Understanding How Forms Work Although you probably fill out forms on the Web all the time, it’s unlikely that you’ve given serious consideration to how the information gets from a form on a Web page to an e-mail address. There are many different ways to get your Web page to e-mail you the contents of a form, but they all work in a similar manner. After a visitor completes your form, he clicks a Submit button at the bottom of the page that sends the information from the completed form to a CGI on the Web server. CGI stands for Common Gateway Interface and is a standard protocol used by programs to handle form data. That’s why CGIs are referred to as server-side programming. After the CGI receives the information from the form, it processes that data and e-mails it to you. You could also use a CGI to add the information to a database or complete an e-commerce purchase, but sending the results to an e-mail address is the most common option. This process is illustrated in Figure 12.1. FIGURE 12.1 Data moving from a Web page to a CGI on a Web server to an e-mail address.

When creating a form, it’s important to understand the difference between the client-side form and the server-side CGI. The HTML form is downloaded to the visitor’s Web browser, also known as a client, inside a Web page created in GoLive. After the visitor completes the form and clicks the Submit button, the data entered in the form is sent to the CGI, which resides on the Web server, not on the Web browser’s computer. During this hour, you learn to complete the HTML part of the form in GoLive. At the end of the hour, we make some suggestions for finding help with the more complicated CGI, or server-side, part of a form.

Designing Forms for User Feedback

257

Starting with a Form Container Start your form by placing a Form object on your Web page in Layout mode. The Form object is the first object in the Forms section of the Objects palette, as seen in Figure 12.2. FIGURE 12.2 Place a Form object in your Web page to start your form.

This Form object behaves like a container for a form and includes the necessary opening and closing HTML form tags to make a form work in a Web browser. Everything else you add to the Web page to create a form must be placed inside this Form container. There is a thin black line surrounding the Form container that shows you the bounding region of the form. Now let’s start designing a form.

Creating a Table for a Form If you’ve filled out 100 forms on the Web, it’s likely that 50 of them weren’t very userfriendly and 25 of them were downright ugly! Adding structure to your form makes it easier for your visitors to complete it and helps ensure a more consistent presentation across a variety of Web browsers and computers.

, TO DO

To Do: Using a Table to Give Structure to Your Form To add structure to your form, you’ll use a table to separate and align the form fields and their text labels: 1. Drag a table from the Basic section of the Objects palette into the Form object you just placed on your page. 2. For this example, we assume that you want to ask for the following information from your visitors: • Name • E-mail

,

• Gender • Operating System

12

Hour 12

,

258

• Connection Speed • Comments Because you have six questions combined with a place for Submit and Reset buttons, you need to adjust your table so that it has seven rows. Change the table to include seven rows by adding the number seven to the Rows field of the Table tab of the Table Inspector. See Hour 6, “Designing Pages with Tables,” for more information about changing the look of your table. 3. Divide the table into two columns so that you can put your text labels in the left column and the form elements in the right column. Change your table so that it has two columns by placing the number two in the Columns field on the Table tab of the Table Inspector. 4. Set the Width field of your table to Auto so that it will stretch to fit all the content you’re about to put in it (see Figure 12.3).

FIGURE 12.3 Create a table inside the Form container with seven rows and two columns.

It’s a good idea to include a few pixels of cell padding or cell spacing so that your form elements aren’t too cramped. Cell padding is the space between the content of the cell and its borders. Cell spacing is space added between the cells of the table. We also prefer to set the Border field to 0 so that the form doesn’t look amateurish.

,

5. Before you’re done with the table structure, insert some text labels in the first column of the table as shown in Figure 12.4. Put each label on its own row in the left column. Leave the bottom row blank for the Submit and Reset buttons.

Designing Forms for User Feedback

259

I made all my text labels bold and added a gray color to the left column of the table. These minor adjustments add contrast to the form so that it’s easier for a visitor to use and complete it. A more detailed description of editing tables is found in Hour 6.

FIGURE 12.4 Add text labels for your form fields in the left column.

Adding Text Entry Fields to a Form All the elements required to create a form are located in the Objects palette’s Forms section (third from the left). As with all other elements in GoLive, these items can be placed on your Web page by dragging them from the Objects palette.

, TO DO

To Do: Working with Text Entry Fields The first fields you’ll create are the Name and E-mail fields. Use simple Text Field objects for these because you want to gather only a short piece of text for each one: 1. Drag two Text Field objects from the Objects palette into the first two rows of your table’s right column, as shown in Figure 12.5.

FIGURE 12.5 Add form elements to your Web page by dragging icons to it from the Objects palette.

,

2. Now select the text field you’re using for the Name field. Notice that the Inspector changes to the Form Text Field Inspector. This enables you to customize the basic properties of the form. 3. Type name in the Name field of the Inspector. Naming the form elements distinguishes them from one another and identifies the field for the person receiving the form data. Then enter the word e-mail to name the Form Text Field for e-mail.

12

Hour 12

,

260

4. Set the width of the field with the Visible option. The default visible width of a text field is 24 characters, which is just right for most purposes. Sometimes a field like e-mail should be longer because people have long e-mail addresses. Try changing the visible width of the e-mail field to 32 instead of 24 (see Figure 12.6). If you have a good reason to limit the number of characters that a visitor can type in a text field, you can set that property in the Inspector’s Max field. For example, if you ask for a visitor’s United States ZIP Code, you might want to set the Max value to 10.

FIGURE 12.6 Name the fields in the Form Text Field Inspector.

5. If you want text to appear as bullets or asterisks as the user types, select the Is Password Field check box. This is perfect for sensitive information such as passwords and credit-card numbers.

,

6. To place some default text in the text field, type the text in the Text Field Inspector.

It’s a good idea to name all your form elements with numbers, lowercase letters, and underscore characters. Avoid spaces, special characters, and mixed uppercase and lowercase. All the form elements on a single page should have unique names. Check with your hosting provider to see if it has any other naming constraints. For example, your hosting provider might require that your form field names match the field names in the CGI script, especially for scripts that pass information to a database or delimited text file.

Designing Forms for User Feedback

261

Adding Radio Buttons and Check Boxes to Your Form Radio buttons are organized in groups and enable the user to choose only one of multiple options. For example, a visitor would have to choose Male or Female from a group of radio buttons labeled Gender. Check boxes look similar to radio buttons, but they function differently. They enable visitors to give multiple answers to questions. For example, the visitor can indicate the kinds of operating systems he uses, and his response isn’t limited to one choice. Instead, he can choose any number of options (Mac, PC, Unix, Other). Using radio buttons and check boxes in a form is also a good way to help eliminate data entry errors your visitors might make. Clicking a radio button or choosing check boxes also eliminates the need to type answers.

Adding Radio Buttons Although the possible names and e-mail addresses you can have are practically infinite, there are only two options when it comes to gender: male and female. You used a text box for the name and e-mail fields so that people could type their answers, no matter how long or strange those answers might be. But for the gender field, you’ll use radio buttons so that visitors are forced to choose either male or female.

, TO DO

To Do: Working with Radio Buttons To create the gender options, complete the following steps: 1. Add two radio buttons to your form by dragging two radio button icons from the Forms section of the Objects palette to the third row of your table. 2. Type the words Male and Female next to the radio buttons so that your visitors know which button corresponds to which gender, as shown in Figure 12.7.

,

FIGURE 12.7 Add two radio buttons to your form and label them Male and Female.

12

Hour 12

,

262

3. Now that you’ve added the radio buttons to the form, you need to adjust their properties to make them function properly. Click the first radio button next to the word Male. Notice that the Inspector changes to the Form Radio Button Inspector. This enables you to edit your radio buttons much like you edited your Name and E-mail text fields. 4. Type gender in the Group field. The group attribute tells the radio button which question it belongs to. 5. Next, you need to assign a Value field to the radio button. In this case, it makes sense to give the first radio button a value of male, as you can see in Figure 12.8. The value you assign to a radio button or a check box is the data that will be passed on to the CGI. As the Name field stores the name that the visitor types in the text field, the Gender group will save the text data of male or female.

FIGURE 12.8 Set the group to gender and the value to male in the Inspector.

6. Now edit the second radio button with the Form Radio Button Inspector. Because Female and Male are both options of the same question of gender, you should also make the Group field gender for this radio button. Now set the Value field for this radio button to female.

To make a radio button the default selection, click the check box next to Selected in the Form Radio Button Inspector.

, Adding Check Boxes Now you want to ask your visitor what kinds of computers he uses. It’s common these days for people to use many different kinds of computer operating systems, so use check boxes to enable the visitor to answer however he wants. I’ve decided to give visitors the options of Mac, PC, Unix, and Other.

Designing Forms for User Feedback

263

, TO DO

To Do: Working with Check Boxes To create the operating system check boxes, complete the following steps: 1. Add four check boxes to your form by dragging four Check Box icons from the Forms section of the Objects palette to the fourth row of your table. 2. Type the text labels Mac, PC, Unix, and Other next to each check box so that your visitors know which box corresponds to which system, as shown in Figure 12.9.

FIGURE 12.9 Add four check boxes to your form and give them text labels.

3. Setting the properties of a check box in the Inspector is a little simpler than setting up radio buttons. Select the first check box, which corresponds to Mac, and notice that the Inspector changes to the Form Check Box Inspector. 4. Now enter the Name and Value fields of the Inspector for each check box. The Name field is so that you know what the check box field is; the Value field is what the data is stored as when the box is checked. Each Name field must be unique for each check box. See Figure 12.10 for an example.

12 To make a check box the default selection, click the check box next to Selected in the Form Check Box Inspector.

, FIGURE 12.10 The Form Check Box Inspector should look something like this for the check box that corresponds to Mac.

264

Hour 12

Unless instructed otherwise by your ISP or CGI programmer, it’s usually a good idea to make the Value and Name fields the same. Also make sure to use short labels, using only numbers and lowercase letters and no special characters such as spaces, commas, and quotation marks.

Adding Pop-Ups and List Boxes to Your Form Pop-up form elements are a great way to include a lot of information in a small space, and they make completing a form easier for your visitors. Instead of typing information, the visitor can select from a list of set options. For example, these elements are frequently used in forms to enable visitors to choose their state, country, or credit card type. This example uses a pop-up form element to give visitors a long list of Internet connection speeds to choose from without taking up too much room on the page.

, TO DO

To Do: Working with Pop-Ups To create the connection speed pop-up, complete the following steps: 1. Drag a Pop-up object from the Form section of the Objects palette to the fifth row of your table. 2. Type speed in the Name field of the Form Pop-up Inspector. 3. Click the Inspector row where the Label displays First and the Value displays one. To change the label for this first option, type over the word First at the bottom of the Inspector with the phrase 56k. Then edit the value for this option by typing over the word one with the phrase 56k again. Change the second and third options to DSL and Cable Modem, as shown in Figure 12.11.

,

FIGURE 12.11 The Form Pop-up Inspector should look like this after entering three options.

4. To add one more option to this pop-up, click the New button at the bottom of the Inspector and add Unknown for people who do not know how fast their Internet connection is.

,

Designing Forms for User Feedback

265

5. To duplicate an option, select it in the list and click the Duplicate button in the Inspector. 6. To delete an option, select it in the list and click the Delete button in the Inspector.

,

7. Set the default pop-up content by checking the check box next to the Label field in the Inspector.

Want to change the order in which the pop-up list items appear? Reorder your list using the arrows in the lower left of the Pop-up Form Inspector.

As with radio buttons and check boxes, the Label and Value fields should both be completed in the Inspector. The Label field is so that you know what the pop-up option is; the Value field is what the data is stored as when the box is checked. The Labels and Values are the same in this example, but they do not have to be. Form list boxes are very similar to pop-ups except that form pop-ups have only one visible row of options, whereas list boxes have two or more visible rows of options. You can change this property in the Rows field of the Pop-up Form Inspector. Deciding to use a pop-up or a list box will depend on how much space you have on your Web page. Keep in mind that both Form lists and Form pop-ups can have the option checked for multiple selections in the Inspector.

Adding a Large Text Area for Comments The last area to add to your form is a place for visitors to make a comment or ask a question that doesn’t fit into one of your specific questions. The best way to do this is to use a large text area.

,

, TO DO

To Do: Working with Text Areas To create a comments area, complete the following steps: 1. Drag a Text Area icon from the Forms section of the Objects palette to the sixth row of your table. 2. The first property to set in the Form Text Area Inspector is the Name field. Label it something simple, such as comments. 3. To change the size of the text area, change the values in the Rows and Columns fields. The number of rows is how many lines of text are visible to your visitor, and the number of columns is how many characters wide the area is. See Figure 12.12 for an example.

12

Hour 12

,

266

To place some default text in the text area field, type the text in the Content field of the Form Text Area Inspector. This can be helpful to prompt users for a response.

, FIGURE 12.12 Use the Form Text Area Inspector to change the name, rows, and columns of your Comments field.

Adding a Submit and Reset Button to a Form Now that you’ve created all the form elements, you need to add only two more things to your page to make it complete: a Submit button and a Reset button. A Submit button is what your Web site visitor clicks to send the form contents to the CGI on the server. A Reset button enables the visitor to clear all the fields in the form if he wants to start over again.

, TO DO

To Do: Adding Submit and Reset Buttons To add Submit and Reset buttons to a form, complete the following steps: 1. Drag a Submit Query button and a Reset button from the Forms section of the Objects palette to the bottom row of your table, as shown in Figure 12.13. Reset buttons are not necessary, but they make most forms easier to use for your visitors.

,

2. Now click your Submit Query button so that you can change a few of its properties in the Form Button Inspector. 3. Select the Submit option in the Inspector so that the button will work as a Submit button and type the new button name Submit Survey into the Name field.

267

,

Designing Forms for User Feedback

4. Click the check box next to the Label field to change the button text that the visitor sees. Submit Query sounds too technical, so rename the label something more friendly, such as Submit This Survey, as shown in Figure 12.14. FIGURE 12.13 Add Submit and Reset buttons to your form like this.

FIGURE 12.14 Edit the properties of your Submit button in the Form Button Inspector as shown.

12

,

5. Now select the Reset button in your form so that you can change its properties in the Inspector. Make sure Reset is selected so that it performs the reset function. If you want it to have a custom label, click the check box next to the Label field and change the button text to Reset This Form, as shown in Figure 12.15.

268

Hour 12

FIGURE 12.15 Edit the properties of your Reset button in the Form Button Inspector as shown.

Making Your Form E-mail You the Results Your form is almost done except for a few final steps. Now you are ready to connect your HTML form to the CGI on your Web server. If these directions do not work for you, contact your hosting provider or a Web programmer for extra help. The following steps will work for most server setups.

, TO DO

To Do: Setting the Form Action To connect your form to a CGI, complete the following steps: 1. Select the Form object on your page by clicking the small square in the upper-left corner. Notice the Inspector is now the Form Inspector. 2. Name the form in the Name field of the Form Inspector. This is especially important if you have multiple forms on one page or have to program custom-built CGIs. 3. In the Action field, type the path to the CGI as provided by your Web host. This might be something similar to /cgi-bin/formmail.pl.

,

4. Change the Method to Post so that the data is posted to the Web server and you are almost done. Your Form Inspector should look something like the one shown in Figure 12.16.

Designing Forms for User Feedback

269

FIGURE 12.16 Set up the form tag in the Inspector. The value for the Action field must be provided by your Web hosting company or Webmaster.

, TO DO

To Do: Creating Hidden Fields The last thing you might have to do to your form is add one or two hidden fields. These hidden fields are invisible to your visitor, but they store important information such as the recipient’s e-mail address that can be sent to the CGI. Adding hidden form fields might not be necessary based on the instructions you receive from your hosting provider. To add hidden fields to your form, complete the following steps: 1. Drag a hidden form field object from the Forms section of the Objects palette anywhere inside your form container. I placed mine after the word Name. 2. Select the hidden form field to edit its properties in the Inspector. Give the hidden form field a name and value. The name and value will depend on your hosting provider, but a common example would be a name of e-mail and a value of the recipient’s e-mail in the form [email protected], as shown in Figure 12.17. FIGURE 12.17 Follow the instructions of your Web hosting provider when using and customizing hidden form fields.

,

Hidden form field object

12

270

Hour 12

When your form is done, it’s time to upload and test your form. You can learn about using FTP to upload your page to the Web server in Hour 23, “Uploading Your Web Site to Your Web Server with FTP.” When you are done uploading your page, launch your Web browser, surf over to your form, and complete your own survey!

Summary In this hour, you learned how to build a form that includes many different kinds of form elements, such as text and password fields, radio buttons, check boxes, pop-ups, and list boxes. You’ve also learned how to include necessary form elements, including a Submit button and a Form container. Lastly, you learned the basic process of connecting your form to a server-side CGI to have the results of the form e-mailed directly to you. In the next hour, you’ll learn more ways to add exciting interactivity to your Web pages, with features such as JavaScript rollovers and pop-up navigation elements.

Q&A Q Why do I see my form labels but no form fields when I preview my form in a Web browser? A You forgot to put your form elements inside a Form object container. Q When I fill out my form in a Web browser and click Submit, nothing happens. What could be the problem? A You probably forgot that creating the HTML form is only half of the equation. When the HTML form is completed, you need to contact your hosting provider for details of how to make it work with their CGI.

Quiz 1. Which of the following would make the best form element name? a. How old are you? b. Age c. Visitor’s age 2. What’s the best way to create a text field form element to be used for secure information such as passwords? a. Make the text field really short. b. Don’t include the text field form element on the page because it’s too risky. c. Check Is Password Field in the Inspector.

Designing Forms for User Feedback

271

3. What form field would work best with Age (Under 25, 26–40, 41+)? a. Radio button b. Check box c. Text field 4. What form field would work best with Education (BA, BS, MBA, MS, PhD, Other)? a. Radio button b. Check box c. Text field 5. Which of the following is not necessary on a form? a. Submit button b. Reset button c. Form tags

Quiz Answers 1. b. Age is a good form element name because it uses only lowercase letters or numbers and no special characters such as spaces or punctuation. 2. c. Check Is Password Field in the Inspector to create a password field. 3. a. Radio button is the best option because there’s only one appropriate option. 4. b. Check box is the best option because there’s more than one option. 5. b. The Reset button is nice to have in a form, but completely optional.

Exercises If you want to learn more about forms, try these exercises: 1. Create a pop-up or list box form element that enables multiple selections, and then play with it in a browser. 2. Ask your Web hosting provider to show you the CGI code for your form. It will probably be very confusing at first, but you might learn how to customize your own forms. Be careful, be patient, and always work on a copy of the CGI.

12

HOUR

13

Using JavaScript Actions Not so long ago, if you wanted to have special effects on a Web page, you had to learn JavaScript, or at least how to copy and paste it into your page! Now thanks to GoLive many of the popular JavaScript actions are built right into the application. They are called Actions and are essentially turnkey scripts ready for you to use. Actions are very easy to implement when you understand the logic and sequence of steps that need to be followed. In this hour we will introduce you to some common Actions, and show you how to customize them for your own use. GoLive stores these JavaScripts and other ready-made HTML snippets in two locations. Several of the most commonly used are held in the Smart section of the Objects palette, and the rest reside in a folder called Actions, which is inside your GoLive application folder. Some of the neat things you can do with objects and Actions are image rollovers—in which a button changes its appearance when your mouse passes over it—pop-up menus, and links that open a new browser window of a specified size.

274

Hour 13

In this hour, you’ll learn • How to use the Modified Date object • How to configure a Rollover object • How to configure a pop-up navigation element • How to make a link open a new window of a specified size • How to configure a remote rollover • Where to find and install Actions

Using Objects from the Smart Section In this hour, you’ll learn how to use three of the objects in the Smart section of the Objects palette. The three objects you will work with are the Modified Date, the Image Rollover, and the URL pop-up. Later in the hour, you set up two Actions: the Open Window Action and the Set Image URL Action, which creates a remote rollover.

Setting Up and Using the Modified Date Object The Modified Date object is simply a way for you to tell your viewers the last date that the page they are visiting was changed. This is the easiest object to set up in the entire GoLive arsenal. To use this object, drag it from the Smart section of the Objects palette onto your page. The icon for the Modified Date object has a number 5 on it, and resembles a tiny calendar (see Figure 13.1). It can be placed directly on the page, inside a table cell, or inside a text box on a layout grid. FIGURE 13.1 Let viewers know the last time the page was revised by using the Modified Date object.

To configure the Modified Date object, open the Inspector and select the format in which you want the date or time to be displayed (see Figure 13.2). If you want both the date and the time to be shown, use two Modified Date objects. Set one to show the time and the other to show the date. Type Page last Modified on in front of the object to make it clear to the user.

Using JavaScript Actions

275

FIGURE 13.2 The options available to the Modified Date object.

Some users mistakenly think that the Modified Date object will show the current time and date on the page the user is visiting. That is not the case. It shows the last time that you made a change to the page the user is viewing. If you have a page that will seldom be modified, it might not be wise to use this object or visitors might get the impression that your site is stale.

Setting Up an Image Rollover Before you use GoLive to configure an image rollover, you must first create the images for the rollover states. You will need to do this in an art program such as Adobe Photoshop, ImageReady, or any other application that will allow you to save Weboptimized images. Depending on how many states you want for the rollover, you will need two or three images. The first image will be seen when the page loads, and is called the Normal state. The second image state appears on the rollover (Over), meaning when the mouse rolls over the image. You can use another image for the third state, called Down, which briefly appears when the user clicks the mouse on an image. The main state returns when the cursor is moved away from the button.

If you use an image of a button and apply a drop shadow to the main state of the button, and then remove the drop shadow on the over state, the button will appear to be depressed when the mouse hovers over it.

Name the images in a simple way that you can easily identify, such as image_main.gif, image_over.gif, and image_click.gif (see Figure 13.3). (Don’t really use image as a name for your image. Use something appropriate.)

13

276

Hour 13

FIGURE 13.3 A rollover can consist of two or even three states, such as the three shown here.

Images you use for the various states of a rollover must be of exactly the same dimensions for the rollover to execute properly. Otherwise, the images will stretch or shrink to fit the dimensions of the original image…not a pretty site.

, TO DO

To Do: Create an Image Rollover If you don’t have files to use for this exercise, download some from www.golivein24.com. To create an image rollover, complete the following steps: 1. Open the Objects palette by selecting Window, Objects, from the menu or by pressing Command+2 (Mac) or Control+2 (Windows). 2. Click the Smart section of the Objects palette, which is the second tab from the left. 3. Drag a Rollover icon from the Objects palette to your page and drop it where you want it. The Rollover icon has a question mark with a hand pointing to it (see Figure 13.4). You can place a Rollover object directly on a page, inside a table cell, on a layout grid, or in a floating box.

,

FIGURE 13.4 The Rollover icon makes it easier to create interactive graphics on your page.

4. Open the Inspector. Notice the three preview squares. Drag your first image (new_main.gif) on top of the Rollover icon. GoLive automatically fills in the path to that image and assigns it to the normal state. Of course you could also use any other of the linking methods we discussed in Hour 4, “Formatting and Stylizing Text,” such as browsing and point and shoot.

,

Using JavaScript Actions

277

5. Click the second square, labeled Over. You cannot select an over state until the check box for the URL is checked, as shown in Figure 13.5. Once checked the text field is active and you can locate the image (new_over.gif).

FIGURE 13.5 You must check the box to the left of the text field to assign an Over and Down state to your image.

6. Click the square labeled Down, if you want to add the third state (new_down.gif) when the user clicks the image (see Figure 13.6). Save your page and preview your work in a browser. FIGURE 13.6 The Normal, Over, and Down icons in the Inspector palette.

,

13 Adding a Link to a Rollover Rollovers are as extremely popular as buttons are. They add interactivity to the page and direct interest to the navigation tools. To make your rollover also act as a link, replace the # sign in the URL text field of the Inspector with an address. Don’t forget to put in alternative text to help those who aren’t viewing graphics!

278

Hour 13

You might see a text field for messages in some of the inspectors that involve links. Any text entered as a message will appear in the status window of the viewer’s browser. Typically, viewers do not want your message blocking important link information, so keep that in mind.

Adding a URL Pop-Up A URL pop-up is a great navigation tool for those trying to save precious page space, but still trying to provide multiple links. A viewer can choose to link from a list of URLs that you define using a URL pop-up, as shown in Figure 13.7. Think of the organization that this can add to a page with subgroups linking to many documents. For example, a training company with URLs to all the Web creation courses, and another pop-up for print creation courses, all neatly stowed away in their own URL pop-up. FIGURE 13.7 The URL pop-up saves precious space when many URLs are listed.

GoLive makes it easy to create one of these pop-ups. In the next exercise, you will learn how to create a URL pop-up with three choices.

, TO DO

To Do: Place and Edit a URL Pop-Up In this exercise, you add a URL pop-up to your page, and create a list of products to appear in the pop-up. Before you begin, please create three new pages and add them to your Site File. Name them as follows: site.html, logo.html, and database.html. To add a URL pop-up to your page and set up the links, complete the following steps: 1. Open the Objects palette by selecting Window, Objects, from the menu or by pressing Command+2 (Mac) or Control+2 (Windows).

,

2. Click the Smart button of the Objects palette, which is the second button from the left. 3. Drag a URL pop-up icon from the palette onto your Document window. The URL pop-up icon has a double arrow on it, facing up and down (see Figure 13.8). A URL pop-up can be placed directly on a page, on a layout grid, inside a layout text box on a grid, inside a table cell, or in a floating box.

279

,

Using JavaScript Actions

FIGURE 13.8 Drag the URL pop-up icon from the Smart section of the Object palette to your page.

4. Open the Inspector. In the Inspector, shown in Figure 13.9, you will see a listing provided as an example. After explaining how these are set up we will replace the Adobe Label with one of our own. The Label field represents the words the viewer will see in the pop-up list, whereas the URL field is the actual link to which the selection will lead. FIGURE 13.9 Some items are placed as an example in the Label and URL fields of the URL pop-up Inspector.

The very first item in the list reads Choose, and does not have a URL associated with it. That happens because most often you will want a label to appear on the pop-up that gives the user a hint as to the contents of the pop-up, and you might not necessarily want that label to be a link. Like we discussed in the earlier example, one pop-up for print training courses and another for Web training courses. 5. Select the word Choose in the Inspector. In its place, type Web Figure 13.10).

Page Design

(see

,

There is a check mark (Mac) or a bullet (Windows) next to the first item in a URL pop-up. The check mark or bullet indicates that that label will be shown when the pop-up is in its collapsed state.

13

Hour 13

,

280

FIGURE 13.10 Replace the word Choose with a label that will describe the subject of the links.

6. Select Adobe

Systems Inc.

in the list.

7. Click the Delete (Trashcan) icon, as shown in Figure 13.11. This removes that entry from the list. 8. Click the New (dog-eared page) icon. This creates a new entry. In the Label field, type Web Site Design. In the URL field, point and shoot to the file you made called site.html. 9. Click New. In the Label field, type Logo Design. In the URL field, link to logo.html. Click New again. In the Label field, type Database Design. In the URL field, link to database.html. Label

URL

FIGURE 13.11 Delete the sample label and then start adding your own.

Duplicate Item Delete Item

,

New Item

Move up Item Move Down Item

281

,

Using JavaScript Actions

If you need to edit a long URL in the Inspector, just Option+click (Mac) or Control+click (Windows) the Browse button at the right end of the URL input field. A larger editing box will open, allowing you more space to edit your URL.

,

10. Save and preview your work. It is strongly advised that you preview in more than one browser because Internet Explorer and Netscape Navigator display form elements, such as pop-ups, quite differently. The order in which you enter the labels is the order the viewer will see them, so place them in importance of value. Should you decide you want to change the order rather than select an item, click the up or down arrow at the bottom left of the list field (see Figure 13.12.) You might also use links to external pages, and target them if you choose. For more on targeting links, please read Hour 4.

FIGURE 13.12 You can move a selected item up or down in the list by clicking the up or down arrow in the URL pop-up Inspector.

Using Actions Two of the most popular Actions are the Open Window Action, which opens a new window of a predetermined size when a link is clicked, and Set Image URL, which is similar to a rollover except that the link triggers an image change elsewhere on the page. In the following section, you will learn how to create and configure both of these Actions.

Adding an Open Window Action Have you ever wondered how a Web page designer controls a window to appear cropped accurately to a specific window and clear of all the browser extras such as addresses, buttons, and so on? This is done using JavaScript. Fortunately, you don’t have to learn how to code it manually; it is built right into GoLive as an Action.

13

282

Hour 13

In this exercise, you will use a small thumbnail image as the link, and have a full-sized version of the image load into the new window. You can download the images for this exercise from this book’s Web site by pointing your browser to http://www.golivein24.com. The image files used are named brochure_small.gif, Web_small.gif, logo_small.jpg, brochure.gif, web.gif, and logo.jpg. It is always best to work in a site. Create a new blank site named design before starting. If you need help creating a site, refer to Hour 2, “Creating a Site File.” 1. On the initial index page, created with a site, arrange the thumbnail images (the ones with the word small in their filename) on a page, save the page, and name it samples.html. Figure 13.13 shows a table used to contain the images. FIGURE 13.13 We created a page using a table to place small thumbnails. When clicked, larger images will appear in a new window.

2. Now we need to create the pages that will open when the thumbnails are clicked. Even though you can link directly to optimized images—JPEG, GIF, PNG, and even multimedia files—we want entire pages for this exercise. Create a new page and place the larger image named brochure.jpg, center it, save the page in the Root folder (remember the Site button at the bottom of the Save dialog box), and name it brochure.html. See Figure 13.14. FIGURE 13.14 Save this file in the Site folder by selecting Root from the Save pop-up menu. This button appears only if a site is open.

Using JavaScript Actions

283

3. Continue by creating new pages for the logo and Web design. Place the large images on each page and save them in the Root as logo.html and web.html.

When using this action you might want get rid of the default page margin placed on HTML pages. Select the page icon in the upper left of the GoLive page. In the Page Inspector set the Margin Width and Margin Height to 0. This will flush the elements on your page to the edges.

, TO DO

To Do: Configuring the Open Window Action To configure the Open Window Action, complete the following steps: 1. Open samples.html and select a thumbnail image. 2. Open the Inspector and click the Link tab. Empty reference will appear, but because we don’t want to link to a URL just yet, we have to replace the Empty reference with a # sign. The # sign essentially tells the browser to stay put so that an Action can be activated (see Figure 13.15).

FIGURE 13.15 Click the Link tab in the Inspector and change Empty Reference to a # sign.

3. Open the Actions palette by choosing Actions from the Window menu. If you open this and everything is grayed out, a link was not generated. Go back and make sure that there is a # sign in the link text field of the Inspector.

,

4. Many user interactions can trigger a script. If you note on the left side of the Action palette you can scroll through lots of choices. For this exercise we will select the Click state in the Events list. 5. Click the New Item button in the Actions palette, as shown in Figure 13.16.

13

Hour 13

,

284

Event (Trigger)

FIGURE 13.16 To add an Action select a state (user interaction to trigger the script) and click the New Item icon.

Move Up or Down Action Delete Action New Action Pop-up List of Actions

6. Choose Link, Open Window from the Actions pop-up list (see Figure 13.17). Notice in the Inspector that this Action offers a number of options that will affect the appearance of the new window.

,

FIGURE 13.17 The Actions are categorized into related subgroups so they are easy to locate.

7. Enter 150 in the first size text field (width) and 325 in the next text file (height). Deselect all the options that have check marks, except for the Resize button, see Figure 13.18. This eliminates the scrollbar, status bar, menu bar, Toolbar, and location bar from the window. We are letting the user still resize the window. The result of turning off these options will be a small compact window that acts as a picture frame.

285

,

Using JavaScript Actions

FIGURE 13.18 Enter values for the width and height of your window and click the check boxes to determine what options should appear in the browser window.

Options For Browser Window

Width

Height

8. Finally, create the link to the new page by using point and shoot, browsing, or by typing the URL into the Link field. Save and preview your work in a browser (see Figure 13.19). FIGURE 13.19 The window opens in the upper left when you click the thumbnail image in your browser.

13 In the Web design world, the scrollbar, status bar, menu bar, Toolbar, and location bar of a browser window are collectively known as the chrome.

,

9. Continue this exercise by creating links with # signs and the Open Window Action for the logo and the Web page. Note: logo.html should open to 325 wide by 125 high. web.html should open to 325 wide by 225 height.

286

Hour 13

Adding a Close Window Action to Your Page Be nice to your viewers and offer an escape to the new window by adding a Close Window Action to the page. This is very simple and follows the same procedure we went through for the Open Window Action.

, TO DO

To Do: Adding a Close Window Action Have one of the pages open that is going to open as a new window. In our example we will work with brochure.html. 1. Click the cursor to the right of the image of the brochure, and press Return. Underneath the image, type Close Window, as shown in Figure 13.20.

FIGURE 13.20 Type Close Window underneath the image.

2. Select the text and create a link (Command or Control+L, or click the link tool in the Link tab of the Text Inspector). Replace Empty Reference with a # sign. 3. From the Actions window select the State Click, and click the New Action icon (dog-eared page).

,

4. From the Action pop-up menu, select Close Window from the Link group of actions, as shown in Figure 13.21. 5. Test in the browser. Depending upon your text you might have to go back to the options for the Open Window Action and increase the page height.

287

,

Using JavaScript Actions

FIGURE 13.21 Close window offers no options, but is a nice addition to a page that opens in its own window.

, Congratulations! You have successfully used the Open Window and Close Window Actions in GoLive. Next, you will learn how to create a remote rollover by using the Set Image URL Action.

Adding a Set Image URL Action Have you ever visited a Web page and noticed that when you move your cursor over an element, an image appears somewhere else on the page? Then, when you move your cursor away, the image disappears. This technique can be used in many imaginative ways, and thanks to the Set Image URL Action that comes built into GoLive, it’s an easy effect to create. In this exercise, you create a menu with two product names in it. As the user points to each item, an image comes into view. To complete this exercise, you use three images of exactly the same size. You can download the images used in this exercise from this book’s Web site, by pointing your browser to http://www.golivein24.com. The image files you will use are named brush_start.jpg, brush_one.jpg, brush_two.jpg, and brush_three.jpg. Add the images to a Site File before you begin. You can use the site named Design that we had open earlier in this hour.

13

288

Hour 13

, TO DO

To Do: Create a Remote Rollover Using the Set Image URL Action To create a remote rollover using the Action Set Image URL, complete the following steps: 1. Create a new page. For our example we will design a page that interacts with the type of design a viewer is interested in. 2. Create a page with a simple table on it. (See Hour 4 if you need help.) The completed page can also be downloaded at www.golivein24.com. In the table type the following text into cells, as shown in Figure 13.22. Customer Survey: I Want My Designer To Be…Conservative | Colorful | Ultra Creative

3. Add an image object and locate the first image named brush_start.jpg. FIGURE 13.22 Use a table or layout grid to contain the text and the initial image.

4. If you know anything about JavaScript you realize that an element must have a name to have the script act properly. To name an image click the More tab of the Image Inspector, and type a name in the Name text field. We will name this image brushes, as shown in Figure 13.23. 5. Select the word Conservative. 6. Use Command+L (Mac) or Control+L (Windows) to create a link, or click the Link button on the Toolbar.

,

7. Replace the Empty Reference with a # sign. 8. In the Actions palette, choose Mouse Enter from the Events list. Mouse Enter is commonly known as Mouse Over.

289

,

Using JavaScript Actions

FIGURE 13.23 Type the name brushes into the Name text field in the Inspector.

9. Click the New Action (dog-eared page) icon. 10. From the Actions pop-up choose Image, Set Image URL. 11. From the Image pop-up, choose Brushes (see Figure 13.24). FIGURE 13.24 Select the name you gave the image in step 2 from the pop-up list in the Set Image URL Action palette.

12. In the Link field, browse or point and shoot at the image named brush_one.jpg. 13. Test what you have in the browser. The image will switch to the new image, but not go back to the original…yet. Follow these steps to add an additional Action. 14. Return to your page in GoLive and select the word Conservative. We initially set up an Action to swap the brush image when this was crossed over, but now we will add an action to swap the image back to the original when you leave the word.

,

15. In the Actions palette choose the State Mouse Exit. This is commonly known as Mouse Out. Click the New Action icon and select Set Image URL. 16. Select the Brushes image again and choose to go back to the original image brush_start.jpg when the viewer exits the word.

13

Hour 13

,

290

17. Test this in the browser. When you cross over the word Conservative, the image swaps, and when you exit the word, it goes back to the original image. 18. Use the other images to practice using the Set Image URL on the other two words. Don’t forget to set up an Exit Action, too!

If you don’t want viewers to see any image when they initially hit your page, create a blank white GIF to act as a placeholder.

,

Locating and Installing GoLive Actions GoLive Actions are individual JavaScripts written to work in GoLive as a visual interface. That means instead of having to write JavaScript, all you need to do is drag an icon representing a prewritten JavaScript onto your page, and set it up to your liking. GoLive 6 ships with a large collection of Actions already installed, but there are a number of independent authors who have developed additional Actions for GoLive. Some are free, and others can be purchased for a small fee. You can obtain info and other resources at the Adobe GoLive Actions Xchange at http://www.actionxchange.com. Most third-party Actions come with a full description of what they do and how to use them. But after you have a new Action in your possession, you will need to install it into GoLive to use it. This is a very simple process. To install an Action, place it inside a subfolder of the Actions folder, in the GoLive application folder. You can find the proper folder by following this path on your hard drive: GoLive Application folder, Modules folder, JScripts folder, Actions folder, Actions subfolders (see Figure 13.25). Place the new Action inside any of the existing subfolders, or create a new subfolder if you like. After installing the Action, you must restart GoLive to have access to the new Action.

Using JavaScript Actions

291

FIGURE 13.25 Install Actions by placing them in the subfolders inside the Actions folder.

Summary This hour was jam-packed with lots of fun and easy ways to enhance your Web pages with prebuilt HTML and JavaScript. You learned how to use and configure image rollovers, and Modified Date and URL pop-up objects from the Objects palette. You also experienced some of the neat things you can do with Actions. Experiment with the other Actions in GoLive to see how you can create effects easily without writing any JavaScript code at all. Also, be sure to check out the many additional Actions that are available on the Web. Actions can be combined to interact with each other, which leaves the combinations almost endless! GoLive actions are editable and extensible. You can edit the existing Actions or even create your own.

Q&A Q Yesterday, I put a Modified Date object on my Web page. Today, when I looked at the page, it still showed yesterday’s date. Why doesn’t it show today’s date? A The Modified Date object does not show the current time or date, but the time or date that you last updated the page.

13

292

Hour 13

Q I set up an image rollover on my page, but when I preview it in the browser, the images are all distorted. Why? A Chances are that one of your images is not the same dimensions as the other, which is causing it to either squish or stretch to fit into the same space. In some browsers, notably Netscape, it might not work at all. Q Why won’t my URL pop-up work? A You might have used unacceptable characters, such as quotation marks, in the label of an item. Doing so will cause the URL pop-up to break. Q I’m trying to set up a remote rollover using the Set Image URL Action. When I try to select an image from the pop-up list in the Inspector, there are no choices. Why? A You need to name the image in the More tab of the Image Inspector for its name to be listed in the Image pop-up of the Actions palette.

Quiz 1. Where are ready-made drag-and-drop objects such as the Modified Date Object found? a. In the Objects palette b. In the Actions palette c. In the Inspector palette d. In the Site window 2. Actions are premade… a. JavaScripts b. CGI scripts c. VBScripts d. AppleScripts 3. How do you install additional Actions into GoLive? a. Use the CD installer. b. Drop the Actions into the Actions folder inside the main application folder. c. Use the File menu. d. You can’t install additional Actions.

Using JavaScript Actions

293

Quiz Answers 1. a. Ready-made drag-and-drop objects are found in the Objects palette. 2. a. Actions are premade JavaScripts. 3. b. You install additional Actions into GoLive by dropping the Actions into the Actions folder inside the main application folder.

Exercises The following exercises will help you become accustomed to using the URL pop-up and Set Image URL. After you feel comfortable with these, dig into some of the other Actions in GoLive. Access the online help files in the application and run a search on the word Actions to find descriptions of the Actions and instructions explaining how to use them. 1. Build a mock catalog. Start by making a page for each of three main categories: Football, Baseball, and Tennis. Name them football.html, baseball.html, and tennis.html. The pages can be blank because this is just an exercise. Next, build three additional pages for items pertaining to each of those categories. In the football category, name the pages: footballs.html, helmets.html, and cleats.html. Name the baseball pages bats.html, mitts.html, and caps.html. In the tennis category, create rackets.html, gloves.html, and shorts.html. Next, create a main URL pop-up to use on all the pages that contain the three main categories with links to the main category pages. Then create a secondary URL pop-up for each category that lists the items available for that category. Place that URL pop-up on the pertinent pages. You can copy and paste the whole pop-up from one page to the next. 2. Create a family picture album using the Set Image URL Action. Get an image of a mother, father, boy, and girl and make them all equal sizes. Make links called Mom, Dad, Suzy, and Nick. Set up the remote rollover to show the appropriate picture when the mouse rolls over each person’s name.

13

HOUR

14

Creating DHTML Animations Dynamic HTML, or DHTML as it is often called, enables you to create striking navigation devices and animations that give your Web site that extra flair. Even though it is possible to build incredibly complex DHTML Web pages using the GoLive Timeline Editor and floating boxes, our goal in this hour is to introduce you to some simple, but effective, creations that you can tackle right away. In this hour, you learn • What DHTML is and what it can do • How to create animations in GoLive • How to add Actions to your animation • How to trigger your animation with an Action • How to work with multiple objects in an animation • How to use the Timeline Editor

296

Hour 14

What Is DHTML? DHTML stands for Dynamic Hypertext Markup Language. With DHTML you can create simple or complex animations, allow users to move items on a Web page, hide and show layers, and more. It can be effectively used to create elegant navigation devices, and when applied properly, it can be fun! It’s worthwhile to note, however, that DHTML will only work in version 4+ browsers. If you think this might cause problems for your viewers add the Browser Switch action to your page, as discussed in Hour 19, “Controlling How GoLive Writes HTML.” Using DHTML in GoLive 6 is a matter of utilizing floating boxes and the Timeline Editor. With these tools you will learn how to build some visual excitement into your Web pages. If you are not yet acquainted with floating boxes, we suggest you read Hour 8, “Designing Pages with Floating Boxes.” Before you proceed any further in this hour, collect images to use in the lessons, or download samples from golivein24.com. Also, we suggest that you create a new site for this hour, and name it animation. If you need help creating a new blank site see Hour 2, “Creating a Site File.”

Recording a Simple DHTML Animation Many Web designers these days use .swf (pronounced swiff, it stands for ShockWave Format) files to create complex animations as an entry into their Web sites. .swf is one of the formats output by Adobe LiveMotion, Macromedia Flash, and a few other programs. People often refer to these files as Flash files, although in actuality, they are .swf files. Although there are a lot of great things you can do with .swf files, and particularly with LiveMotion SmartObjects in GoLive, there are similar effects you can create with DHTML in GoLive alone. Employing DHTML for animation eliminates the need for the user to have the Flash plug-in installed in his browser. The one caveat is that for DHTML to work properly, the user must have a browser of version 4 or greater.

, TO DO

Let’s create an animated intro to your Web site by using DHTML. You’ll build an entry page featuring an image that enters the browser window from the left, circles around, and then exits on the right. After the image exits the pages, a new page will load into the browser window.

To Do: Record the Movement of Your Floating Box Before we start, make sure you choose Floating Boxes from the Window menu or Command+4 (Mac) or press Control+4 (Windows).

,

Creating DHTML Animations

297

As mentioned in Hour 8, it is important to name floating boxes so not to confuse yourself when your page becomes more complex. To record a simple animation, follow these steps: 1. Open a new page. 2. Drag a Floating Box icon from the Basic section of the Objects palette into your Document window. By default, the floating box will situate itself in the top-left corner of the page. 3. Type a descriptive name for the floating box into the Name field of the floating box in the Inspector, as shown in Figure 14.1. If you are using the flying saucer image file from the www.golivein24.com site, you can name it saucer.

FB Marker

Floating Box Object

FIGURE 14.1 After dragging the floating box onto the page, name it in the Inspector.

Floating Box

,

4. Place an image inside of the floating box. (For details on how to place images onto your page, please refer to Hour 5, “Using Graphics on a Web Page.”) 5. Select the floating box by clicking the edge of the floating box when you see a sideways mitt, or by clicking on the FB marker as shown in Figure 14.2. You can also select the floating box from the Floating Box palette (see Figure 14.3).

14

Hour 14

,

298

FIGURE 14.2 The FB marker can be clicked on to select the floating box.

That little FB marker looks innocent enough, but if placed in the wrong location it can wreak havoc! Make sure that you never drag an FB marker into a table and always have it after a layout grid. Simple rules, but if they’re not followed your floating boxes might not appear correctly. Keep this little special thing in mind: If a version 3 or less browser opens your page, the floating boxes will appear where the FB marker is. Remember our suggestion for a Browser Switch.

FIGURE 14.3 The Floating Boxes palette will help you keep organized.

6. Click the Record button in the Inspector (see Figure 14.4).

,

FIGURE 14.4 Click the Record button in the Floating Box Inspector.

,

Creating DHTML Animations

299

7. Drag the floating box across the page, making a loop in the middle (see Figure 14.5).

FIGURE 14.5 GoLive records the movements of the floating box as you drag.

, As you can see, GoLive recorded a path indicated by a line on the page. The path is based on the movements you made when you dragged the floating box, and is dotted with little gray squares. Each of those squares corresponds to a keyframe in the time track of the DHTML Timeline Editor. Open the Timeline Editor so that you can see the actual keyframes that have been recorded in the time track. To open the DHTML Timeline Editor, click the icon that looks like movie film at the top-right of your Document window (see Figure 14.6). FIGURE 14.6 Click the Movie Film icon at the top right of the Document window to open the DHTML Timeline Editor.

Examine the Timeline Editor (see Figure 14.7) to familiarize yourself with its various parts: • Autoplay button—Enables you to specify whether a scene should automatically play. We will turn this off later when we want an Action to trigger our animation. • Scenes—This pop-up button enables you to create, delete, rename, and select a scene. This is important when using animations in multimedia Actions. • Actions track—Enables you to insert Actions that will be triggered during playback. • Time track—Each floating box on the page has its own time track. • Keyframe—Indicates points on the time track.

14

300

Hour 14

• Time cursor—Indicates the current location in the scene. • Loop button—Instructs the scene to play repeatedly. • Palindrome button—Instructs the scene to play forward and then backward, repeatedly. (You must first select Loop to choose Palindrome.) • Playback buttons—Go to beginning, stop, play, go to end. • Counter—Indicates the position of the keyframe in seconds and in frames. For example, if you set the speed to 30 fps (frames per second) the keyframe at 15 is half a second; 30 would be one second. • Frames per second (fps)—Enables you to choose how many frames per second are used in a scene. Increasing this number makes your animation faster, whereas reducing the number makes it slower. Autoplay Button Scenes Pop-up

Actions Track

Time Track

Keyframe

FIGURE 14.7 The Timeline Editor.

Frames Palindrome Button Counter per Second Loop Button Playback Buttons

Using the Timeline Editor to Edit Your Animation Before we start, let’s get a little more used to working in the Timeline Editor. First, locate the Time Cursor (yellow triangle) and drag it back and forth on the timeline. In the multimedia world this might be referred to as “scrubbing” the timeline. Note how you can see the position of the floating box and how it corresponds to the keyframes in the timeline. Now that you have the basic animation in place, you need to fine-tune it a little. Your goal is to have the image float onto the page from the left, and completely exit the page on the right. To do this, use the Timeline Editor and set the placement of the floating box at the first and last keyframes.

Creating DHTML Animations

301

, TO DO

To Do: Set the Beginning and Ending Placements of the Floating Box Follow these steps to set the beginning and ending keyframes: 1. Drag the time cursor left to the beginning of the time track, as shown in Figure 14.8.

FIGURE 14.8 Drag the time cursor to the beginning of the time track.

2. Click the very first keyframe in the time track. This moves the floating box into its position for that keyframe (see Figure 14.9). FIGURE 14.9 Select the first keyframe in the time track to move the floating box to its opening position.

3. Type a negative number into the Left input field in the Floating Box Inspector. Our sample image is 200 pixels wide, so to place it out of the viewable area of the browser, it must move to the left at least that many pixels. Enter -210 in the Left field to be certain that the image is completely off the page (see Figure 14.10).

,

The numbers in the Left and Top fields in the Floating Box Inspector represent the number of pixels between the floating box and the left and top edges of the page, respectively. The placement of a floating box is always determined relative to these two positions.

4. Move the time cursor right to the end of the time track.

14

Hour 14

,

302

FIGURE 14.10 Type a negative number in the Left field to place the image off the left side of the page.

5. Select the very last keyframe in the time track. This moves the floating box into its position for that keyframe.

,

6. Type a large number in the Left input field. We’ll use 1500 because few browser windows will be more than 1,500 pixels wide and, therefore, the last position of the floating box will be out of the range of the browser window. Save and preview your work in a browser. To save your work, choose Edit, Save from the Menu, or press Control+S (Windows) or Command+S (Mac). Then click the Browser Preview button in the Toolbar, or press Control+T (Windows) or Command+T (Mac) to launch your preferred browsers and preview the animation.

Insert additional keyframes between existing keyframes by Control+clicking (Windows) or Command+clicking (Mac) on the time track. Modify an animation by clicking a keyframe, and then adjusting the placement of the floating box for that frame by dragging the floating box to the new position. Clone keyframes by Option+dragging (Mac) or Alt+dragging (Windows). Select multiple frames by Shift+clicking, or dragging a selection around them. Delete frames by selecting them and pressing Delete, or Command+x (Mac) or Control+x (Windows). Keyframes can be copied and pasted through the Edit menu.

Using Actions in Your Timeline When you use the Timeline Editor in GoLive to create animations, you have the additional benefit of being able to attach Actions to the time track. When the scene reaches

Creating DHTML Animations

303

the Action marker during playback, the Action will be triggered. Actions perform a variety of functions such as showing or hiding another floating box, triggering a scene (meaning another animation) to play, or loading a new page into the window.

When a page is loaded into a browser window, the timeline automatically begins to play unless you specify otherwise by deselecting the Autoplay button in the Timeline Editor.

In the next “To Do,” you add an Action at the very end of the animation that will trigger the loading of a new page. The result will be that the image will appear to float onto the page, move around, and then float off the page. When the image exits, a new page will load into the window. You already are familiar with the time track in the Timeline Editor. Now you will use the Action track.

, TO DO

To Do: Add an Action Marker to the Action Track To add the Action that will load the new page into the browser window, complete the following steps: 1. Move the time cursor to the very last keyframe in the time track. 2. Place your cursor into the Action track just above the last keyframe in the time track. Command+click (Mac) or Control+click (Windows) to insert an Action marker into the Action track (see Figure 14.11).

FIGURE 14.11 Insert an Action marker into the Action track.

, Now that you have the Action marker in place, you need to specify the Action you want to use and configure it to do what you want. In this case, you want the Action to load a new page into the browser window. Before you can tell GoLive what page to load, you need to know the URL of the page. Let’s make a new page for this purpose. Create a new page; type Welcome to my New Page! into the body of the Document window, and then save it into your Files list with

14

304

Hour 14

the filename newpage.html. (For more on creating and saving pages, please refer to Hour 3, “Creating a Web Page.”) Now we can finish setting up the Action.

, TO DO

To Do: Configuring the Goto Link Action To set up the Action that will load the new page into the browser window, complete the following steps: 1. Select the Action marker. 2. Open the Inspector palette. 3. From the Actions pop-up, choose Link, Goto Link (see Figure 14.12). FIGURE 14.12 Choose Link, Goto Link from the Action pop-up in the Inspector.

4. In the Link field, point and shoot at, browse to, or type the URL of the page that you want to load.

,

You should now save your page and preview the animation in a browser.

Animating Multiple Floating Boxes In this section, you will add four floating boxes to a newly created page and put an image in each one. Then you will assign the depth of visibility of each box and use the time track to have each one appear at a specified point in time. Start by making a new page, naming it fourboxes.html, and saving into the Root folder of your site.

Creating DHTML Animations

305

, TO DO

To Do: Add Four Floating Boxes to the Page and Set Their Attributes To add the multiple floating boxes to the page and set them up to work with the time track, complete the following steps: 1. Open the newly created page named fourboxes.html. 2. Open the Timeline Editor by clicking the Timeline button at the top right of the page. 3. Double-click the Floating Box icon in the Basic section of the Objects palette to add a floating box to the page. Repeat three more times so that you have four floating boxes on the page (see Figure 14.13). FIGURE 14.13 As you add additional floating boxes they will stack up on top of each other in the upper left of your page.

4. Open the Floating Box palette by selecting Window, Floating Boxes, or by pressing Command+4 (Mac) or Control+4 (Windows). 5. Click the right-facing arrow at the top left of the Floating Box palette to reveal the palette menu options (see Figure 14.14). FIGURE 14.14 The Floating Box palette menu options.

6. Select Floating Box Grid Settings from the palette menu options in the Floating Boxes palette. The Floating Box Grid Settings dialog box will appear.

,

7. Enable the check boxes next to Snap and Visible while dragging (see Figure 14.15). 8. Arrange the four floating boxes into a diamond pattern (see Figure 14.16). Notice that you can see the underlying grid as you drag the floating boxes, and that when you stop dragging, the floating box snaps into alignment with the gridlines.

14

Hour 14

,

306

FIGURE 14.15 The Floating Box Grid Settings dialog box.

FIGURE 14.16 Using the grid for alignment, drag the four floating boxes into a diamond pattern on the page.

, Open the Floating Box Grid settings once again and take a closer look at the options. Access the settings dialog box as you did in step 6, by selecting Floating Box Grid Settings from the Floating Box palette menu. • The underlying grid that the floating boxes will use for exact placement is partitioned into 16-pixel×16-pixel gridlines by default. To change the grid spacing, simply type the numbers you prefer into the Horizontal spacing and the Vertical spacing input fields in the Floating Box settings dialog box. • Enabling Snap means that floating boxes will snap to the gridlines, ensuring that you can line up boxes easily. The floating boxes will snap to the gridlines whether or not you have Visible While Dragging enabled. • Visible While Dragging means that the gridlines will become visible as you drag a floating box, enabling you to see the grid. • Prevent Overlapping keeps floating boxes from overlapping one another. If you intend to convert your layout from floating boxes to grids, use this option. Doing so will ensure that you don’t have any conflicts during the conversion. GoLive has automatically created a scene for you based on the steps you just completed. Notice that each floating box you have placed onto the page has its own time track in the Timeline Editor. Clicking a keyframe in a track selects the floating box that keyframe

Creating DHTML Animations

307

represents. In the next section, you set the depth and visibility of the floating boxes, and add keyframes to their time tracks so that one appears after the next when viewed in a browser. Naming the floating boxes does not change the fact that numbers represent the floating boxes in the Timeline Editor. The numbers represent the order in which they were created. If you get confused simply click a keyframe and the floating box that correlates to the keyframe will then become selected.

An empty floating box won’t show up in a browser window, so before you go any further, you will drop a small image into each one. You can download the sample files used in this hour from www.golivein24.com. Click the Download link, and then choose Hour 14. After you have downloaded the image files, add them to your Site File. For this exercise, you will use the four image files named bam.gif, oof.gif, pow.gif, and wow.gif. Place one image into each of the four floating boxes.

, TO DO

To Do: Set the Visibility and Depth of the Floating Boxes To set the visibility and depth of the floating boxes on your page, complete the following steps: 1. Leave the keyframe in time track 1 as it is. 2. Select the first keyframe in the second, third, and fourth time tracks by dragging the mouse across them (see Figure 14.17). Press Option+drag (Mac) or Alt+drag (Windows) to make a copy of the keyframes, and then drop them at frame 5 on the time track (see Figure 14.18).

FIGURE 14.17 Drag across keyframes to select them.

14

,

By default, the frames per second in a new scene will be set to 15 frames per second. If you want the scene to play faster, increase the number of frames per second. To play a scene slower, reduce the number of frames per second.

Hour 14

,

308

FIGURE 14.18 Press Option+drag (Mac) or Alt+drag (Windows) to copy one or more keyframes.

3. Leave the keyframe in time track 2 as it is. 4. Drag the second keyframe in time track 3 to frame 10 on its time track. 5. Drag the second keyframe in time track 4 to frame 15 on its time track (see Figure 14.19). FIGURE 14.19 The new keyframes should appear at frames 5, 10, and 15 as shown here.

The Z-index, or stacking order, of floating boxes is determined by the number you type into the Depth field of the Floating Box Inspector. Also known as a Depth, this number determines how overlapping floating boxes will appear. If you have two floating boxes that overlap, and one is set to a depth of 5, whereas the other has a depth of 10, the one with the lower depth will appear beneath the one with the higher depth.

6. We will now change the stacking order, or Z-index of the floating boxes. Select the keyframe in time track 1 (see Figure 14.20). Set its Z-index to 5. Select the second keyframe in track 2, and set its Z-index to 10. Select the second keyframe in track 3 and set its Z-index to 15. Select the second keyframe in track 4 and set its Zindex to 20. This places the images in the following stacking order: • Floating box 1, Z-index 5, bottom of the stack • Floating box 2, Z-index 10, next highest in stack

,

• Floating box 3, Z-index 15, third highest in stack • Floating box 4, Z-index 20, top of the stack

309

,

Creating DHTML Animations

You could achieve the same order using 1, 2, 3, 4, but it is best to get into the habit of numbering by 5s. This way you have the ability to add new floating boxes in between existing ones later.

FIGURE 14.20 You set the Z-index (stacking order) of a floating box by typing a number into the Z-index field in the Inspector.

7. Select the first keyframe on time tracks 2, 3, and 4, and disable their visibility by deselecting the Visible check box in the Inspector (see Figure 14.21). The result will be that only the first image will be visible to the viewer when the page loads. Then, as each time track progresses to its second keyframe the visibility is toggled on, thus showing the previously invisible image. Notice that the keyframes that have been specified as invisible become dimmed in the Timeline Editor. At this point save your work and preview it in a browser to see the effect so far before completing the rest of the steps. FIGURE 14.21 A keyframe for a floating box that has been specified as invisible is dimmed in the time track.

,

14 Next you’ll take floating box 2, which is higher in the stacking order than 1, but lower than floating box 3 and 4, and move it around so that you can see how it appears to move under and over another image.

Hour 14

,

310

8. Control+click (Windows) or Command+click (Mac) in time track 2 at frame 25 to add a new keyframe at that point. 9. With the newly created keyframe selected, press the “Record” button in the Inspector. Drag floating box 3 over floating box 4, then up and over floating box 1, and finally over floating box 2, so that floating box 3 ends up to the right of floating box 2 (see Figure 14.22). Switch to the Preview tab to see the animation so far.

FIGURE 14.22 Drag floating box 2 in a zig-zag pattern over the other three floating boxes.

10. Select the last keyframe of the recording you just made in time track 2. In the Inspector, change the Z-index of the floating box from 10 to 25. This will cause floating box 2 to rise to the top of the stacking order. 11. Press the “Record” button in the Inspector again. This time, drag floating box 3 back over floating box 2 ending with floating box 3 in its original place (see Figure 14.23). Note that we changed the stacking order as part of the animation!

,

FIGURE 14.23 Drag floating box 2 back to its original position.

To ensure that floating box 2 is positioned exactly the same as it was when you started, click the first keyframe in time track 2. Note the numbers in the Left and

,

Creating DHTML Animations

311

,

Top fields in the Inspector. Use the same coordinates for the last keyframe in time track 2. You can now save your page and preview the animation in a browser. Congratulations! You are ready to get creative and build your own DHTML pages in GoLive.

Triggering a Scene to Play You might want your scene to play only when the viewer triggers it. In this next section we will create a simple action that will only occur when the mouse clicks.

, TO DO

To Do: Triggering a Scene to Play In this exercise we will create an animation that will occur only when triggered by the viewer. When the viewer clicks on a contact link, a phone will appear to slide out onto the page. The image of the phone is included in the Hour 14 images that can be downloaded from www.golivein24.com. 1. Create a new page and place a floating box on it. 2. Place the image of the phone inside of the floating box. 3. Select the floating box by crossing over the side, and then click when you see the sideways mitt. Keep in mind that you must deselect the image by clicking outside of the floating box before you are able to select the box. From the Toolbar select the align center button, as shown in Figure 14.24. FIGURE 14.24 Choose to align the floating box to the center of the page using the Toolbar.

4. Open the Timeline editor and select the first and only keyframe for the floating box.

,

5. In the inspector type these coordinates, Left -200 and top 15. The floating box is now off the page. 6. The next thing that we are going to do is set up the floating box to slide out on to the page. Command+click (Macintosh) or Control+Click (Windows) to create a keyframe at 15 (see Figure 14.25).

14

Hour 14

,

312

FIGURE 14.25 Add a keyframe to the time line at 15 by Command+clicking (Mac) or Control+clicking (Windows) on the keyframe track.

7. While the second keyframe is still selected, click on the Align Center button in the toolbar. Then test it out in the browser. The floating box should slide out. Next, we will turn off the Autoplay and have a mouse-over trigger it. 8. Turn off the Autoplay by clicking on the Autoplay button, as shown in Figure 14.26. Then, test it out in your browser. If you did this right nothing will happen! FIGURE 14.26 Scenes will automatically start playing as a default. Turn off the Autoplay for this animation so that we can set up an action to trigger it.

9. From the scene pop-up window select rename scene. We will give this a more logical name like contact. 10. Slide the Current Time Marker (CTM) back to the beginning of the timeline to make the trigger. Anywhere on your page, create another floating box and type the words Contact Us into it.

,

If you want the floating box and its contents to be visible on the page, make sure that when you create the CTM it’s at the beginning of the timeline. Otherwise, it will appear at the time that the CTM is located. To correct this, click on the keyframe where the floating is not visible and check the visibility box in the Floating Box Inspector.

11. Select the Text for the first step in making an Action, creating a link, by pressing Command+L (Mac) or Control+L (Windows) or just click the link in the Toolbar.

,

Creating DHTML Animations

313

Replace the Empty Reference in the Inspector with a # sign, as shown in Figure 14.27. 12. From the Action palette, in the Window menu, select the Mouse Enter Event and click the New Action icon (dog-eared page). Select the Play Scene Action from the Multimedia set, as shown in Figure 14.27.

FIGURE 14.27 Have the viewer trigger the scene to play using a multimedia Action.

,

13. Test this Action in a browser. When the text Contact mation will slide out to the center of the page.

Us!

is crossed over, the ani-

Summary You covered a lot of territory in this chapter. First, you learned how to record a simple animation by using a floating box and the Record button. Then, after viewing your recorded animation in the Timeline Editor, you learned how to add an Action into the Action track, as well as how to trigger an animation with an Action. You also discovered how to work with multiple floating boxes on a page, and how to use the Timeline Editor to make them appear at a certain point in the scene. Finally, you learned how to make the floating boxes visible or invisible by setting the visibility attribute in the Inspector.

Q&A Q I created an animation that I want to play once and then stop. For some reason, when I preview it in the browser, it keeps playing over and over. How do I stop it? A You must have enabled the Loop button in the Timeline Editor. Simply open the Timeline Editor for your page and click the Loop button again, which will disable it.

14

314

Hour 14

Q I’m trying to drag a floating box so that it partially covers another one. As soon as I let go of it, it pops back to where it was! How can I make it stay put? A Open the Floating Box palette, and choose Floating Box Grid Settings from the palette menu. Then, in the Floating Box Grid Settings dialog box, deselect Prevent Overlapping. Q I’ve added an Action to the Action time track, but when I open the Actions palette, everything is grayed out. Why? A When using an Action in the Action track of the Timeline Editor, you set up the Action in the Inspector, rather than in the Actions palette. Q I just spent hours creating an animation and it won’t play! Why not? A The Autoplay button in the Timeline Editor is probably set to off. Click it to turn it back on.

Quiz 1. What is the term for describing the depth of a floating box? a. Stack-index b. D-index c. Z-index d. Pitch 2. What does fps stand for? a. Format page source b. File page size c. Fixed point stage d. Frames per second 3. The left and top positions designated for a floating box in the Inspector are based on that floating box’s position relative to what other object? a. The left and top of the page b. The left and top of another floating box c. The left and top of the grid d. None of the above

Creating DHTML Animations

315

Quiz Answers 1. c. Z-index describes the depth of a floating box. 2. d. fps stands for frames per second. 3. a. The left and top positions designated for a floating box in the Inspector are based on that floating box’s position relative to the left and top of the page.

Exercises The following exercises are designed to show you some of the creative effects you can generate using DHTML, and to familiarize you with a few of the many ways you can utilize the GoLive Timeline and Actions to create animations and multimedia effects. 1. Create a new page. Record a simple animation using one floating box with an image or a few words in it. Select New Scene from the Scenes pop-up in the Timeline Editor. Name the scene Scene 2. Record a second simple animation using a new floating box with an image or a few words in it. Now go back to the first scene by selecting it from the list in the Scenes pop-up. Add an Action midway through the time track of the first scene. From the Actions pop-up in the Inspector, select Multimedia, Play Scene. Select Scene 2 from the pop-up list. Now save your page and preview it in a browser. 2. Add a floating box to a new page and name it Menu One. Inside the floating box, type Item One. Add a second floating box to the page and name it Menu Two. Inside the second floating box, type Item Two. Go to the Inspector and disable the visibility of this floating box so that it becomes invisible. Now, select the words Item One in the first floating box, and make them a link. Change the “(empty reference)” in the URL field to the # sign. Open the Actions palette. From the pop-up list, choose Multimedia, ShowHide. From the pop-up, choose Menu Two. Now, when the page is loaded, the only thing shown will be the linked words: Item One. When clicked, the other floating box will appear and show the words Item Two. The words in the second box can be linked to a page if you choose.

14

HOUR

15

Using Plug-ins and Multimedia Content Plug-in technology opens up a whole new avenue for design and interactivity of Web pages. In this hour, we discuss how you can place multimedia clips into your GoLive page. GoLive has taken away the confusion of placing multimedia clips on your page by providing specific Plug-in icons with predetermined MIME (Multipurpose Internet Mail Extensions) settings. Defining the correct MIME settings enables browsers to interpret files that require plug-in technology. In this hour, you’ll learn about • Deciding whether plug-in technology is appropriate for your Web site • Adding a QuickTime movie to your Web page • Adding Flash content to your Web page • Adding RealVideo content to your Web page • Adding SVG content to your Web page • Adding generic plug-in content to your Web page

318

Hour 15

Deciding Whether Plug-in Technology Is Appropriate for Your Web Site Adobe GoLive supports a variety of third-party plug-ins that enable you to add movies, animations, music, and other multimedia files to your site. We have all seen them; fantastic pages that animate, play music, and perform like a Broadway show. At one time or another, we have also seen the error stating that we are missing the plug-in required to view a page. A browser plug-in is a free program that adds functionality to a Web browser. For example, most browsers do not support movie playing until a plug-in is installed into the browser’s Plug-ins folder. Even though browser plug-ins are free, building a library of them can take time and effort. When designing a site, think about your viewers: Are they a technology-savvy audience or barely computer literate? For this lesson, we will consider our audience savvy and take advantage of the multimedia features that can be added to a GoLive page. In this hour, we will prepare GoLive to recognize plug-ins, and then insert files that use the QuickTime, Flash, RealVideo, and SVG plug-ins. If you do not have these plug-ins in your Web browser’s Plug-ins folder, download them from the URLs listed in Table 15.1. Note that with a full installation of GoLive, the SVG plug-in is already loaded, and the QuickTime plug-in is included on the CD.

Another source for the latest plug-ins is http://www.plugins.com.

TABLE 15.1

Locating Required Plug-ins

Plug-in Name

Extension

URL

QuickTime

.mov

www.apple.com/quicktime/

Shockwave Flash

.swf

www.macromedia.com/shockwave

RealPlayer Basic

.rm, .ram

www.real.com/player/

SVG

.svg

www.adobe.com/svg/main.html

You can also use the URLs in Table 15.1 to download sample files for practice purposes.

Using Plug-ins and Multimedia Content

How to Set Up GoLive to Preview Your Plug-in Content When it is installed, GoLive is prepared to function with plug-ins. In fact, the icons are present in the Basic section of the Objects palette. Because of constant updates and changes in plug-in technology, GoLive installs only the SVG plug-in. For GoLive to recognize additional plug-ins, they must be placed in the Plug-ins folder of the GoLive application folder, as shown in Figure 15.1. If you already have the plug-ins loaded in your Web browser, you can create an alias (Mac) or a shortcut (Windows).

Create an alias on the Macintosh operating system by selecting the plug-in and choosing Make Alias from the File menu. Relocate the Alias icon to the GoLive Plug-ins folder. Create a shortcut using the Windows operating system by right-clicking and dragging the plug-in, and selecting Create Shortcut when you reach the GoLive Plug-ins folder.

FIGURE 15.1 If you want additional multimedia capabilities, place plug-ins in GoLive’s Plug-ins folder.

319

15

320

Hour 15

Adding a QuickTime Movie to Your Web Page A QuickTime movie can be an effective way to demonstrate a product, show real estate, or see a movie trailer. Its uses are virtually unlimited and as bandwidth increases, we will see QuickTime movies used in more creative ways. Embedding a QuickTime movie into your Web page is rather simple, and GoLive even offers QuickTime editing features that enable you to customize your movie. We will discuss those features in Hour 16, “Using the QuickTime Editor.”

, TO DO

To Do: Adding a Movie to Your Web Page Before we start, you must have a .mov file ready to place on a page. Sample QuickTime movie files are located at http://www.golivein24.com. 1. Open a page and drag the QuickTime icon from the Basic section of the Objects palette to the page as shown in Figure 15.2.

FIGURE 15.2 Use the QuickTime icon to place .mov files on your page.

2. Select the Basic tab of the Plug-in Inspector and click the Browse button to locate a .mov file, as shown in Figure 15.3.

,

FIGURE 15.3 The Basic tab has preconfigured settings for QuickTime movies.

Note that a MIME type is preassigned based on the plug-in selected. The MIME type determines the rest of the basic settings. Remember that selecting the correct

,

Using Plug-ins and Multimedia Content

MIME type helps the browser interpret the plug-in file correctly. If you choose the correct Plug-in icon, you should not need to change anything on the Basic and Attribs tabs except perhaps the size. 3. Select the More tab if advanced scripting requires the movie to be named. Adjust for extra space or padding around the movie by using the Vspace or Hspace field. 4. Choose the QuickTime tab of the Inspector as shown in Figure 15.4.

FIGURE 15.4 Controls to customize how the movie interfaces with the viewer are in the QuickTime tab.

Customize the QuickTime movie with settings available in the QuickTime tab: • Show Controller—Check this box to enable visitors to view playback controls.

If you choose to show the controller, you must add 16 pixels to the height of the movie back on the Basic tab. Otherwise, the controller will be cut off.

• BGColor—Set a background color by dragging a color from the Preview pane of the Color palette into the BGcolor’s Color field. The background will show up if the movie does not fill the specified size. • Cache—Check this box to enable caching through the browser when the movie is played back.

,

When a file is cached, it is stored temporarily in the memory of your computer, enabling the viewer to play back the movie without downloading it again.

321

15

Hour 15

,

322

• Volume—Type a value from 0 (mute) to 100 (full volume) to set the sound volume for the movie. • Scale—Adjust a movie’s size by selecting a scale amount. A setting of 2, for instance, makes the movie twice the size. • Autoplay—Check this to have the movie play automatically when the page loads. You can uncheck it if you are working with a script that will play the movie when requested. • Loop—Be careful with this one! Check this box to play your movie on an endless loop. • Palindrome—Palindrome will not only play your movie forward, but also backward in an endless loop. Loop must be checked to activate the Palindrome check box. • Play Every Frame—This option will play all frames of a movie. This can cause playback problems with QuickTime movies where the viewer gets a message that the movie could not download properly. • Link—Check the Link check box to reference a plug-in file. Read about the Target field for important information. • Target—Targets are discussed in detail in Hour 11, “Designing Pages with Frames.” When defining a link, you can specify a location in which to load a movie. • Open Movie—When this option is enabled, the movie will open in the QuickTime movie viewer.

,

5. After selections for options are made, test the movie in your Web browser.

Adding Flash Content to Your Web Page Flash (.swf) files are one of the hottest rages in Web design. These vector-based animations offer viewer interaction never before available. Flash files include Flashbased cartoons, interactive interfaces, and information graphics. Flash files can be generated out of several applications, including Macromedia Flash, Adobe Illustrator 9 and 10, and Adobe LiveMotion. You can also find demonstration files at http://www.golivein24.com.

Using Plug-ins and Multimedia Content

323

, TO DO

To Do: Embedding a Flash File in a Web Page In this lesson, we use the Flash object from the Basic section of the Objects palette to place a Flash (.swf) file onto our GoLive page. 1. Open a page and drag the Flash icon from the Basic section of the Objects palette to the page, as shown in Figure 15.5.

FIGURE 15.5 The Flash icon in the Objects palette is preconfigured for .swf files.

2. Select the Basic tab of the Plug-in Inspector and click the Browse button to locate an .swf file. The MIME type field has been predetermined. You should not need to change anything on the Basic and Attributes tabs except for the size. 3. Select the More tab. In the More tab, Page and Code values are predefined in the Plug-in Inspector. When a Flash plug-in is selected, these values are already assigned and will prompt the viewer to a download area if he does not have the Flash Shockwave plug-in installed. Also, adjust the Vspace and Hspace values in the More tab. 4. Choose the SWF tab as shown in Figure 15.6.

,

FIGURE 15.6 Options specific to Flash files are in the SWF tab of the Inspector.

15

Hour 15

,

324

Customize Flash file options on the SWF tab: • Autostart—Check to have the Flash animation play as soon as the page is loaded. • Loop—Have the movie play in an endless loop. • Quality—Choose an appropriate setting based on the quality you want to achieve. There are noticeable differences between the Quality settings, so make sure that you test the final presentation and the time it takes to download. • Scale—Adjust the size of the Flash file by selecting a scale amount. A setting of 2, for instance, makes the Flash file twice the size. You can also choose Exact Fit and Noborder from the pop-up menu.

,

• Plug-in—If you have loaded the plug-in to GoLive’s Plug-ins folder, you can preview the Flash file in GoLive.

Adding RealVideo Content to Your Web Page RealVideo is a streaming technology developed by Real Networks for transmitting live video over the Internet. In this section, we build a GoLive Web page that uses a RealVideo clip. If you do not have any .rm files, locate demos at www.real.com.

, TO DO

To Do: Adding a RealVideo Object to a Web Page In this lesson, we add a RealVideo object to our GoLive page. Sample Real files can be found at http://www.golivein24.com. 1. Open a GoLive page. 2. Drag the Real icon from the Basic section of the Objects palette to your page as shown in Figure 15.7.

,

FIGURE 15.7 Drag the Real object to the GoLive page to embed a RealVideo file.

3. Select the Basic tab of the Plug-in Inspector and click the Browse button to locate the RealVideo file that you want to include on the page.

,

Using Plug-ins and Multimedia Content

The Basic tab should require no additional changes except for size. 4. Select the More tab as shown in Figure 15.8.

FIGURE 15.8 Additional options are available on the More tab of the Real Plug-in Inspector.

• Page—The Page text box in the More tab can be set up with an assigned page that gives a destination link for installation instructions. This link essentially directs the viewer to a Web site where he can download the proper plug-in. • Code—The Code check box is used to assign a destination link for any necessary code base. This control, like many others in the plug-ins, should be used only if you are familiar with the plug-in applications and what code base is needed. • Vspace and Hspace—Set these vertical and horizontal spacing values in the More tab. • Is Hidden—Check Is Hidden if this video is not to show up until triggered by an action or other script. 5. Select the Real tab as shown in Figure 15.9. Customize the Real file by selecting options from the Real tab of the Plug-in Inspector: • Autostart—Choose Autostart to have the RealVideo clip start when the page loads. • No Labels—Check No Labels to suppress the display of information such as title, author, and copyright. • Controls—Select controls for the RealVideo clip:

,

325

Note that you can assign only one control to each Real icon. In other words, to set up Play and Stop controls, you would need two Real icons. By using consoles, you can create unique sets of buttons arranged in a table.

15

Hour 15

,

326

FIGURE 15.9 The Real tab of the Inspector enables you to customize the viewer controls.

If Default is selected, the display will contain Play, Pause, Stop, Forward, and Rewind buttons, and Position and Volume controls. • Using the Console pop-up menu (see Figure 15.10), you can choose to group several Real controls to work together with a single file. For instance, you can create an HTML table and drag multiple Real object icons into the cells of the table. You can use the Control pop-up menu to assign one Real Object icon to represent the Image window, another to the Play button, and another to a volume Slider. By typing a unique name or assigning one of the predetermined console names (_master or Unique) to each Real icon, the controls will act as a unit, thereby enabling you to customize the layout and the controls the viewer will see. FIGURE 15.10 Create a table with your own set of viewer controls by assigning a console name.

,

• Plug-in—View the Real file in GoLive by using the Plug-in button. You must have the plug-in loaded correctly for this to work.

Using Plug-ins and Multimedia Content

Adding SVG Content to Your Web Page SVG (Scalable Vector Graphics) is an open-standard vector graphics language that, by using plain-text commands (XML), enables you to design Web pages with high-resolution graphics that can contain complex elements such as gradients, animation, and filter effects. SVG technology is a new standard and a plug-in is required to play the file. To learn more about SVG technology, check out http://www.adobe.com/svg/main.html, http://www.sun.com/software/xml/developers/svg/, or http://www.w3.org/ Graphics/SVG/Overview.html. You can also visit http://www.golivein24.com for demo .svg files to use in this section.

If you create vector art using Illustrator 9 or 10, you can generate your own SVG files from the Export menu.

, TO DO

To Do: Placing an SVG Image on Your Web Page GoLive provides an SVG icon on the Objects palette that is used specifically for placing SVG files. 1. Open a GoLive page. 2. Select the SVG icon, shown in Figure 15.11, and drag it to your page.

FIGURE 15.11 The SVG icon is preconfigured for the Scalable Vector Graphics format.

3. Using the Browse button on the Basic tab, select an .svg file. 4. In the More tab, Page and Code values can be predefined to prompt the viewer to a download area if she does not have the SVG plug-in installed. The More tab also enables you to set up additional space around the SVG file by setting the Vspace and Hspace values. 5. Click the SVG tab.

,

6. You can link to only an uncompressed SVG file. If you are familiar with creating SVG files and want to link to a compressed SVG file, make sure that you export both a compressed and uncompressed file and save them in the same location.

327

15

328

Hour 15

Adding Generic Plug-in Content to Your Web Page The generic plug-in icon shown in Figure 15.12 enables you to load files that require plug-ins not supported by GoLive. FIGURE 15.12 With the proper knowledge and the generic plug-in, you can configure plug-ins not normally supported by GoLive.

Unlike the QuickTime, Flash, Real, and SVG icons, a generic plug-in icon is not configured in the Inspector. You must be familiar with the necessary settings to get the plug-in to work correctly. If you are an advanced user and you know the proper MIME type and extension for the plug-in, you can add the plug-in through the plug-ins Preferences dialog of GoLive as shown in Figure 15.13. If you enter a MIME type and extension that GoLive already supports with a plug-in, that plug-in will appear in the top text box. FIGURE 15.13 You can configure additional plug-ins by using GoLive’s plug-in Preferences dialog, which is located in the Edit menu.

Delete a file type

Assign a new file type to a plug-in

Using Plug-ins and Multimedia Content

Summary At the conclusion of this hour, you have configured GoLive to accept QuickTime, Flash, Real, and SVG files. Any additional plug-in requirements can be manually defined through the GoLive plug-in Preferences dialog (select Preferences under the Edit menu). You are now familiar with placing plug-in files into GoLive and the options that are available for each type. Keep in mind that, as with any other Web pages you design, you should verify that the pages work on various platforms and browsers. Also, keep an open ear for comments from viewers. The ultimate goal is to provide them with the information that they are looking for without causing unnecessary complications.

Q&A Q Can I help my viewers locate plug-ins that are necessary for my page to open? A Yes, by selecting the More tab of the Plug-in Inspector, you can define a page to which the viewer will be directed if he does not have the plug-in installed. Q Why don’t I get plug-in options in GoLive? A Make sure that you have installed copies or shortcuts of your plug-ins into the Plug-ins folder of GoLive. Q Can I change the viewer controls when I use QuickTime movies? A Yes. If you select the QuickTime icon, a QuickTime tab enables you to choose whether you want controls available to the viewer. Q How can I get several controls to work together when using RealVideo? A You can group several Real icon controls by entering the same name in the Console text box of the Real tab. Find more information on the Web at http://www.realnetworks.com.

Quiz 1. Why would you choose not to use plug-ins on your Web page? a. They carry viruses. b. They make your page file size larger. c. Not all viewers will have them loaded.

329

15

330

Hour 15

2. Why would you not be able to preview a .mov in GoLive? a. The RealVideo plug-in is not installed in GoLive. b. The QuickTime plug-in is not installed in GoLive. c. The SVG plug-in is not installed in GoLive. 3. When would you need to know and enter the MIME settings into GoLive’s plug-in Preferences dialog? a. Every time that a plug-in is used. b. When a plug-in is added to the GoLive Plug-ins folder. c. When a plug-in is not supported by GoLive. 4. What will happen if I use a Flash file on my page and someone does not have the Flash plug-in loaded in her browser? a. The viewer will be referred to a page specified on the Inspector to download the plug-in. b. The user’s machine will crash. c. The page won’t load. 5. What is SVG? a. A plug-in technology that uses the Flash plug-in. b. An open-standard vector graphics language that, by using plain-text commands, enables you to design high-resolution Web pages. c. A streaming video plug-in used for live telecasts and radio programs on the Web.

Quiz Answers 1. c. You might choose not to use plug-ins because not all viewers will have them loaded. 2. b. You would not be able to preview a .mov in GoLive if the QuickTime plug-in is not installed in GoLive. 3. c. You need to know and enter the MIME settings into GoLive’s plug-in Preferences dialog when a plug-in is not supported by GoLive. 4. a. If I use a Flash file on my page and a visitor does not have the Flash plug-in loaded, the viewer will be referred to a page specified on the Inspector to download the plug-in. 5. b. SVG is an open-standard vector graphics language that, by using plain-text commands, enables you to design high-resolution Web pages.

Using Plug-ins and Multimedia Content

Exercises Now that you have experienced using the plug-in capabilities in GoLive try some exercises on your own. 1. Create a page and place a QuickTime movie in it. Experiment with the different looks and volumes that you can achieve on the QuickTime tab. 2. Build an HTML table using several Real icons, each with its own controls. Make one a Stop button, another a Play button, and another an image window. Group all the controls together by identically naming the consoles in each Inspector. 3. Place a .swf file into GoLive and experiment with different quality settings.

331

15

PART V Using Advanced Features Hour 16 Using the QuickTime Editor 17 Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects 18 Formatting Text with Cascading Style Sheets 19 Controlling How GoLive Writes HTML 20 Creating a Site Diagram

HOUR

16

Using the QuickTime Editor GoLive 6 includes a powerful built-in video editor that enables you not only to create new movies but also to combine existing movies with transitions, filters, audio, text, and animation. GoLive also offers compression capabilities to optimize movies for the Web. In this hour’s lesson, you learn how to open and edit movie files in GoLive using the QuickTime Editor and the QuickTime section of the Objects palette. If you have experience in video editing, the TimeLine will be familiar to you. Don’t worry if this is your first introduction to using a time-based feature; think of this hour as an opportunity to gain an understanding of how multimedia applications work. Before delving into this section with plans to make a site packed with lots of movies, consider your viewers’ wants and needs. Design your pages with options to download movie files instead of surprising the viewers with long

336

Hour 16

download times. Increased bandwidth is improving download times of movies, but not everybody can take advantage of the latest technology. In this hour, you’ll learn about the following: • Making sure that your computer is ready for QuickTime • Understanding the QuickTime Editor interface • Adding additional Sound and Video tracks to your QuickTime movie • Making adjustments to the tracks on the Timeline • Compressing video for the Web

Making Sure That Your Computer Is Ready for QuickTime Before starting, you need to make sure that the QuickTime plug-in is installed. To see whether QuickTime is loaded, choose Edit, Preferences from your menu. Select Plugins. If QuickTime is installed, it will be recognized as the plug-in used for QuickTime movies, as shown in Figure 16.1. FIGURE 16.1 Make sure that QuickTime is installed by checking the Plugins preferences.

If you need more information about installing the QuickTime plug-in onto GoLive, refer back to Hour 15, “Using Plug-ins and Multimedia Content.”

, TO DO

Using the QuickTime Editor

To Do: Previewing a QuickTime Movie in GoLive Have a .mov file ready for this session. You can find sample movies to download at http://www.golivein24.com/. 1. Drag the QuickTime icon from the QuickTime section of the Objects palette onto your page as shown in Figure 16.2.

FIGURE 16.2 Use the QuickTime icon to load a movie into your GoLive page.

2. Use the Browse button on the Inspector to locate a QuickTime movie. 3. Preview the movie by clicking the Plug-in button on the Basic Inspector, shown in Figure 16.3. When you are finished previewing the movie, make sure that you deselect the Preview button by clicking it again. FIGURE 16.3 Movies can be previewed in GoLive by clicking on the Plug-in button in the Inspector.

,

Understanding the QuickTime Editor Interface Now that you can preview a movie in GoLive, let’s take a step further and investigate the QuickTime Editor.

To Do: Opening a Movie in the QuickTime Editor

, TO DO

337

Many people discover the QuickTime section of the Objects palette but do not know how to use the objects. This is because the objects contained on this palette can be dragged onto a QuickTime timeline only. In this lesson, you will open a movie file to reveal the timeline and progress into lessons using the QuickTime objects.

16

Hour 16

,

338

1. Locate a placed QuickTime movie on your page and double-click it to open the movie file. Note that this opens the movie within GoLive. Information about the movie, such as size and control settings, can then be found on the Movie Inspector, shown in Figure 16.4.

FIGURE 16.4 The Movie Inspector provides basic information about the movie.

2. Choose Movie, Show Timeline from the menu. 3. Notice that there is a track for each video or sound in the movie. The movie in Figure 16.5 has a Video track and a Sound track.

,

FIGURE 16.5 The movie in this example has both a Video and a Sound track.

4. Select the Time cursor shown in Figure 16.6 and drag it across to the right. Notice how you can move the cursor back and forth and watch the movement of the Video track. You should frequently check your sequence of events by dragging the Time cursor.

339

,

Using the QuickTime Editor

FIGURE 16.6 Drag the Time cursor to move forward or backward in a movie.

,

16 The Timeline Defined What you are looking at when the Timeline is open is a video-editing tool available within GoLive. You will be using many of the tools shown in Figure 16.7. Selection and Editing Sample Tool tools

Marker Time pop-up cursor

Time ruler

FIGURE 16.7 The Timeline of a QuickTime movie as it appears when open in GoLive.

Track information Time scale slider Playback controls Palindrome control Loop Show/Hide Track Information

About Tracks A track is a data structure that represents a single stream of information. A track can include sound, video, filters, and other data. Each track runs independently of the others in a timeline, creating a total synchronized QuickTime composition. A QuickTime movie is made up of one or more tracks. In GoLive you have the capability of adding the tracks shown in Figure 16.8, which are located in the QuickTime sections of the Objects palette.

340

Hour 16

FIGURE 16.8 You can add additional tracks from the QuickTime section of the Objects palette.

Movie—This feature allows you to load a child movie (audio, video, QTVR, text, and so forth) inside the main parent movie. Sprites can be used to load and unload them. A good example would be a Jukebox. Video—This track contains video; you can add multiple video tracks to a movie. Color—This track gives you the capability to add a color or blend of colors to a movie. Picture—The Picture track is used to present “stills,” like a slideshow, as part of your QuickTime movie. Generic Filter—This includes the generic QuickTime filters such as Cloud, Fire, or Ripple. One-Source Filter—One-source filters are applied to a single track only and change its visual presentation. This filter needs one Video Source track. Two-Source Filter—Two-source filters, or transitions, can fade out one track and into another. This filter needs two Video Source tracks. Examples include Cross Fade, Explode, Implode, and Gradient Wipe. Three-Source Filter Track—Much like the two-source filter track, this feature allows you to create transitions between three source tracks. MPEG—Use this track to place MPEG files into your movie. This is a Macintoshonly feature. Sprite—A Sprite track contains image objects, which you can apply actions to, such as setting individual mouse states (main, over, click inside, and click outside). SWF—Insert a Shockwave Flash file (.swf) into a movie with this track. 3D Track—Import QuickDraw 3D files by using the 3D track. HREF Track—The HREF track enables the designer to link to URLs either by viewer interaction or with time. This can be combined with a Text track or even set up so that a movie appears in one frame while changing the page displayed in another frame. Chapter Track—The Chapter track enables the designer to divide the movies into logical segments.

Using the QuickTime Editor

341

The QuickTime plug-in displays the Chapter track as a pop-up menu in the standard controller of the movie. Text Track—Text tracks display text within a movie. This could be used to add subtitles to movies, or to add messages to your movie. You can also link the text to a URL so that when visitors click the word or phrase, a Web page will appear. Sound—Several formats for sound are supported in GoLive, including AIFF/AIFC, System 7 Sound, WAV, .mp3 files, and Sound Designer II, as well as standard MIDI files. Midi—Use this track to place MIDI files into your movie. Instrument Track—Use the Instrument track to select an instrument—an action can then be created using text or a sprite to play a note upon clicking the mouse, pressing Enter, or performing another event. Streaming Track—Adobe GoLive enables you to export movies as Real-Time Streaming Protocol (RTSP) movies for use on an RTSP-dedicated server. Folder Track—As you add tracks you can keep organized by using a Folder track. Using this track, you can organize tracks into groups. For example, you can group together all the Video, Pictures, or Sound tracks.

To create a slideshow, choose New, Special, QuickTime Movie from the File menu. Use the Image tab of the Picture Track Inspector to import several images. The default is to play back in order one second apart from each other creating the slideshow. Adjustments to the time can be set in the Inspector. Test the playback in GoLive by using the controller at the bottom of the Movie window.

To help you understand how QuickTime tracks work, you will add additional Video, Filter, and Sound tracks to a movie’s timeline (see Figure 16.9). The goal is that when the concept of the timeline is clear, you will feel comfortable taking advantage of the other QuickTime features available in GoLive. FIGURE 16.9 The timeline shows the tracks that are associated with the movie.

16

342

Hour 16

Adding Additional Sound and Video Tracks to Your QuickTime Movie Using the QuickTime section of the Objects palette, you can import other Videos tracks. An additional video track could include the first video track of another movie file or an image file. Video tracks can also be copied and pasted from one movie timeline to another.

, TO DO

To Do: Adding a Video Track into Your Movie In this lesson, you add a video track to an existing movie. Using this feature, you can combine many small clips or even create a slideshow effect. Have two movie files ready for this lesson. Note that sample movies can be found at http://www.golivein24.com. 1. Using the Basic section of the Objects palette, drag the QuickTime plug-in onto your GoLive page. 2. From the Inspector, browse to locate a QuickTime movie. 3. Double-click the movie to open it in GoLive. 4. From the Movie menu, select Show Timeline Editor as shown in Figure 16.10. FIGURE 16.10 To edit a QuickTime movie in GoLive, choose Show Timeline Editor from the Movie menu.

5. Select the QuickTime button of the Objects palette. 6. Drag the video object to an empty track as shown in Figure 16.11.

,

FIGURE 16.11 To load additional Video tracks, drag the video object from the Objects palette.

,

Using the QuickTime Editor

343

,

7. From the Inspector, browse to select a file. Remember that GoLive will take the first Video track of another movie, or an image file. If you select a file that is not compatible as a Video track, the Video track that you placed will disappear from your timeline.

Adding Sound to a Movie Adding sound can improve the impact a movie has on viewers and varies in its usage. You can use sound to add narration or add mood by using music.

, TO DO

To Do: Adding a Sound or Music Track to a Movie In this lesson, you add sound to an existing movie. If you do not have an appropriate sound file, you can locate one at http://www.golivein24.com/. 1. Place a movie on a GoLive page, double-click it to open the movie, and choose Movie, Show Timeline Editor from the menu. 2. Select the QuickTime button of the Objects palette. 3. Select the Sound icon as shown in Figure 16.12, and drag it into the Timeline window. FIGURE 16.12 To add sound to a Movie file, use the Sound icon from the QuickTime section of the Objects palette.

If you want to import a music file (MIDI), choose the Music icon and drag it onto the Movie Timeline as shown in Figure 16.13.

,

FIGURE 16.13 The Music icon supports standard MIDI files.

16

Hour 16

,

344

,

4. Use the Browse button on the Inspector to locate a sound or music file. GoLive supports AIFF/AIFC, System 7 Sound, WAV, .mp3 files, Sound Designer II, as well as standard MIDI files.

Making Adjustments to the Tracks on the Timeline After you have added tracks, you have options that differ depending upon the track selected. Most include name, setting start time, and duration time.

Naming a Track Name a track by selecting it and typing a name in the Title text box of the Inspector.

Adjusting the Start Time The start time of any track can be set by one of two methods. You can select the track in the timeline and drag it to a new start point as shown in Figure 16.14, or you can type in a new start time in the Track Inspector. FIGURE 16.14 Position the entire track on the timeline to set a start time.

Adjusting the Duration Time As with the start time, the duration time of a track can also be set in the timeline by selecting the track and expanding or shrinking the track (see Figure 16.15). Typing a value in the Track Inspector can also set the duration time.

Just because you can shorten or lengthen the duration time of a Sound or Video track does not mean that you are extending the file. The QuickTime

Using the QuickTime Editor

345

Editor changes the rate of the sound or video file to adapt to the new size. This could lead to some interesting, but possibly unexpected, results.

FIGURE 16.15 Set the duration of a track either by typing a value in the Track Inspector or expanding/shrinking the track in the timeline.

16

Working with Sample Tracks This section covers several steps to create a transition from one Video track to another. It will give you the opportunity to see how more complex tracks work and how to use the Sample tools. Sample tracks are used for filters that require more information than can be determined in one track alone. For instance, if you choose a Filter track, a Sample track determines which filter you want to apply to the movie, the duration of the filter, and how the track blends in with the other tracks. Sample tracks give you the opportunity to run a movie and have transitions from one track, as well as to apply QuickTime effects such as Fire and Ripple to a movie file. The Sample tools shown in Figure 16.16 are used to create, divide, glue, and delete Sample tracks. You can use these tools in the Filter track later in this hour’s lesson. Create Sample Glue Samples

FIGURE 16.16 Use the Sample tools to add and edit Sample tracks.

Swap Samples Move Samples

Delete Sample Divide Sample Selection and Editing Tool

346

Hour 16

, TO DO

To Do: Creating a Transition Between Two Video Tracks In this lesson, you take two separate movies and incorporate them into one longer movie. Using the two-source Filter track, you create a transition between the end of the first movie and the start of the next. Find movies to use for this lesson at http://www.golivein24.com/. For this lesson, I refer to two movies that are included on the site: space_one.mov and space_two.mov. 1. Open the movie named space_one.mov in GoLive, and reveal the movie’s timeline by selecting Show Timeline Editor from the Movie menu. Rename the Video track in the Inspector movie1. 2. From the QuickTime section of the Objects palette, drag the Video icon to the Timeline window to add an additional Video track. 3. Use the Browse button on the Video Track Inspector to locate the movie named space_two.mov. Rename the imported Video track movie2. 4. Position the start time of the second Video track toward the end of the first Video track. Leave a little overlap for the transition as shown in Figure 16.17. FIGURE 16.17 Position the second Video track to start close to the end of the first Video track.

5. From the Objects palette, select and drag the Two-Source Filter icon to the Timeline window as shown in Figure 16.18.

,

FIGURE 16.18 For transitions from one Video track to another use the TwoSource Filter icon.

6. In the Two-Source Filter Track Inspector, select movie1 for Source A and movie2 for Source B as shown in Figure 16.19.

347

,

Using the QuickTime Editor

FIGURE 16.19 In the Two-Source Filter Inspector, select Video tracks to create a transition between Source A and Source B.

7. Now you will edit the Sample track in the Filter track. Start by clicking on the arrow to the left of the Two-Source Filter track as shown in Figure 16.20. FIGURE 16.20 Open the Filter track to reveal the Sample track by clicking the arrow to the left of the track name.

8. As a default, a Sample track has been added. Click it to reveal its attributes in the Inspector as shown in Figure 16.21. As a default, GoLive automatically adds the Crossfade transition. Test it and then proceed to see how to change it. FIGURE 16.21 Select the Sample to reveal attributes for it in the Inspector.

9. In the Sample Inspector, leave the radio button indicating that the transition is from Source A to Source B. Click the Select button, and the Select Effect dialog box opens, as shown in Figure 16.22.

,

10. The preview pane displays each effect. For this example, you will choose Implode. 11. 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 see the

16

Hour 16

,

348

filter. You can also work with the Filter tracks in the Layout tab of the Movie Viewer window.

FIGURE 16.22 The Select Effect window for the TwoSource Filter track.

,

Saving and Exporting Movie Files for the Web The last step in preparing your movie for the Web is compression. You must now decide what the final size, frame rate, and compressors will be. Some Web designers like to provide the viewer with the option to download different quality settings and film sizes. Creating a link to the different sized movies (put the file size in parentheses) is a nice feature to add to your page. Because movie files can be rather large, compression is the best way to provide the best quality movie at the smallest possible size. First, this section discusses flattening, which is essentially saving the file with all references to other sources into one file.

Flattening a Movie If you add a Sound or Video track to a movie file, it contains a reference to the source file on your hard drive. For instance, if you add a Video track from another movie file and then relocate the source movie file, you will not be able to open or play the movie until that Video track is relocated. To avoid errors, select Flatten Movie from the Movie menu. All tracks that were referenced are now built into your movie file. Even though this increases the size of the movie, it is necessary to avoid errors on the Web.

Exporting a Movie for the Web This section takes you through the export process in GoLive, explaining each step as it applies to saving a standard movie for the Web.

Using the QuickTime Editor

349

Export Movie, the window shown in Figure 16.23, is located under the File menu and is available when a movie file is open. Double-click a movie placed in GoLive. FIGURE 16.23 You can access the Export window from the File menu when a movie has been opened in GoLive.

16

as Sk St ew re Tr ac am in Lo k g ck an d Br U in nl g oc to k Tr Fr a on t/B ck ac k

M Ex

po

rt

rt po

k k ac ac Tr Tr ze i e at es ot R R n/ tio w k si do ac in Po r T W e in

po

Ti

rt

ow

Ex

Sh

m

eL

FIGURE 16.24 Many of the QuickTime options are also available on the QuickTime toolbar.

Ex

Sh

ow

M

ov i

e

ov i

e

W

in

do w

You can also use the QuickTime toolbar that appears when editing a movie, shown in Figure 16.24, to export a movie. It can also be used for other options.

The Export window is where the name and destination are determined. The Export popup window should be set to Movie to QuickTime Movie. Most Recent Settings is selected in the Use pop-up menu. Because you might not know what the last settings are, you should check by clicking Options. This will open the Movie Settings window shown in Figure 16.25.

Settings The compression settings are determined in the Compression Settings window (see Figure 16.26). To open the Compression Settings window, click Settings in the Movie

350

Hour 16

Settings window. This is where the type of compression is selected. In the pop-up menu, you will find all the standard QuickTime compressors. FIGURE 16.25 The Movie Settings window is where compression, filters, and size are determined when a movie is exported.

FIGURE 16.26 Use the Compression Settings window to select compression methods.

There is no single compression setting that is going to be perfect for every video. After compressing a video, check the final size as well as the visual quality before posting it to a live site.

Compressor The Compressor default is Video, but there are others available in the Compressor popup menu shown in Figure 16.27.

Using the QuickTime Editor

351

FIGURE 16.27 The standard QuickTime compressors are available in the Compression Settings window.

16

One compressor method might work great for one movie and horribly for another. This section discusses the differences among some of the common selections. • Sorenson Video 3 is the compressor many professionals prefer because it offers good quality and creates small files. A drawback of using Sorenson Video is that the viewer needs a PowerPC or Pentium processor. • Cinepak won’t achieve the low data rates that Sorenson Video will, but it is good for viewers who might have slower machines. A Pentium or PowerPC is not required for this compressor. • H.263 is designed for real-time streaming and videoconferencing. It provides good quality at low data rates. The H.263 compressor breaks images into a 16×16 grid. This way, if packets are lost in the transmission, the movie can still be functional. For this compressor, your movie dimension size should be divisible by 16. • Animation works best with graphics images with large areas of color, but it will only work for Web delivery if used for slideshows.

Quality Determine the quality of the movie with the Quality slider. Just as with most other compression methods, the higher the quality, the bigger the file! Try leaving the Quality slider in the middle range setting for your first experiments. A preview window in the upper-right corner of the Settings window will show you the effects of compression.

352

Hour 16

Frames Per Second The fewer the frames, the smaller the movie’s data size. A movie might look great at 30 fps, but be too large for a reasonable download. To lower the file size, you can reduce the present frame rate, but do it in submultiples of 1/2, 1/3, or 1/4. You will want to experiment with this; most movies on the Web use between 8 and 12 frames per second.

Keyframe A keyframe contains all the information needed to create an image. A keyframe is inserted every so often in the movie to save on bandwidth and correct errors. Because of compression, errors can build up over time. A keyframe helps by supplying a clear frame with all the necessary video information. You might have witnessed keyframes in action when watching a movie that is fragmented or blurry, which then seems to collect itself to make a clearer image. Movies with lots of movement generally require more keyframes than those without. Again, experimentation is the best method for finding out what works best with your movie. For example, most QuickTime professionals use 10× the frame rate for the Sorenson Video compressor, and 1–2× the frame rate for Cinepak.

Data Rate Not all compressors will give you the opportunity to set the data rate. The data rate represents the number of kilobytes per second required to deliver your video. This setting requires some knowledge of the viewer base. The higher the value, the better the download quality, but the longer the download takes. If you are using the Sorenson compressor, a data rate below 100 provides a good quality image at a low data rate. Keep in mind that this setting overrides other compression settings. Unless you feel qualified to determine a good rate, you should leave it alone and let your other compression settings determine the speed. Close out of the Compression settings to return to the Movie Settings window.

Filter This section covers the filter options available when exporting a QuickTime movie. To access the filters, click the Filter button in the Movie Settings window. Believe it or not, QuickTime filters—Emboss, Lens Flare, RGB Balance, and Brightness & Contrast, to name a few—are determined upon export of the movie (see Figure 16.28). After you are in the Filter window, you can select a filter and preview it to see how the effect will alter your movie. Depending on the filter you have selected, you will have options available to customize it. If you plan to use the same filter settings in other movies, save them by clicking the Save button and providing a logical name for your filter and settings. Load them again at a later time by clicking the Load button.

Using the QuickTime Editor

353

FIGURE 16.28 QuickTime filters are applied upon export of a movie.

16

Close the Filter window to return to the Movie Settings window.

Size To reduce download time, take into consideration your movie’s dimensions. When a movie file is opened in GoLive, you can find the pixel dimensions in the Movie Inspector, as shown in Figure 16.29. FIGURE 16.29 Double-click a movie to open it in GoLive and find the pixel dimensions.

To change the movie size, click the Size button in the Movie Settings window to open the Export Size Settings dialog box as shown in Figure 16.30. Naturally, a movie that is 640 pixels wide will take longer to download than one at the same quality setting but that is 320 pixels wide. If the size can be reduced, it’s best if the height and width are divisible by four to avoid degradation of the image. Reducing a movie to half the original size is a safe reduction. Close the Export Size Settings dialog box and return to the Movie Settings window.

354

Hour 16

FIGURE 16.30 A custom size is entered into the Width and Height text boxes when exporting a movie.

Sound Settings Adding sound to a QuickTime movie is great, but without the correct compression selection it can be a nightmare for viewers to download. This section reviews some typical compression methods for both narration and music. If you are saving a movie with sound, check the box to apply compression. Click the Settings button to open the Sound Settings window shown in Figure 16.31. Although there are many compression options, this section will cover only the most popular methods. FIGURE 16.31 Sound compression methods are selected in the Sound Settings window.

Compressing Music for the Web A large selection of sound compression methods is available from the Compressor popup window. QDesign Music 2 works well for music. It produces quality sound at low data rates. The QDesign compressor lets you select the bit rate of the final product. When QDesign is selected, the Options button becomes available. Click it to select 24 kbits/s, as shown in Figure 16.32. This will allow the music to play smoothly over most dial-up connections. Set the value to 20 kbps if you don’t mind a loss in quality in exchange for reliability.

Rate Even though sound is not as data heavy as video, it still should be compressed to keep the file size small. As with any data rate, higher quality means a larger file, but with

Using the QuickTime Editor

355

sound, the added compression might not be warranted. This section discusses sound compression exporting examples at a high level of compression. It takes only a few tests to find that compressing sound to the lowest data rate loses the integrity of the sound with very few reductions in file size. FIGURE 16.32 Setting the QDesign Music 2 options for sound compression.

In the Sound Settings window, set Rate to 44.100 KHz. This is a higher rate of sampling the sound, but it maintains the quality. If you do choose to reduce the sound rate, use lower values from the pop-up menu; 22.050 and 11.025 are good alternatives. With most sound compression, the only option for size is 16-bit. 16-bit provides 65,536 possible values for sound, whereas 8-bit provides only 256. Leave the sound size set to 14-bit. Choose Stereo; for narration, you can set this to Mono.

Compressing Sound Used for Narration Qualcomm PureVoice will reduce a sound’s data size 90% in comparison to an uncompressed sound. Choose this option for narrated sound that you want delivered in real-time over the Web. Open the Sound Settings window. Because quality of sound is not as much an issue with narration as it is with music, set Rate to 22 KHz, Size to 16-bit, and choose Mono. Click the Options button in the Sound Settings window to reveal further options for the Qualcomm compression method (see Figure 16.33). Because you want to reduce the sound file to the smallest amount of data, leave the option setting for Qualcomm Half Rate. The best way to test files for quality of sound is to export several versions of the same movie with different compression settings, and then place them in a GoLive page.

16

356

Hour 16

Preview the movies in your browser. Note that with sound compression, a huge amount of compression might not reduce the entire file size by a huge amount. FIGURE 16.33 Qualcomm PureVoice offers additional sound compression methods in the Options window.

Summary After this introduction to QuickTime editing, you should be ready to dive in and start editing movies on your own. As you create movies, frequently test, experiment, and force yourself through some downloads by setting up test pages on your server. Even professionals who create movies for the Web on a regular basis are not always satisfied with their first attempts at exporting movies that work well on the Web.

Q&A Q I continue to get errors when I try to preview my .mov files within GoLive. What should I do? A Of course, there could be many reasons for errors. The most common solution would be to install the latest QuickTime plug-in into the GoLive Plugins folder. Make sure that you restart GoLive so that it can recognize the plug-in. Q Why can’t I get any filter choices when I drag one of the Filter tracks into my timeline? A A Filter track automatically adds a sample track. To get the filter choices, you must click the down arrow on the track and select the Sample track.

Using the QuickTime Editor

357

Quiz 1. What is the proper extension for a QuickTime movie? a.

.swf

b.

.mov

c.

.wav

2. What is a Sample track? a. Data used in a Filter track to determine the start time and duration of a specified filter. b. A temporary track used for experimenting. It disappears when the movie file is closed. c. A track for playing music (MIDI) files. 3. Which compression method would be a good choice for a movie with lots of motion? a. Sorenson Video b. QDesign c. Animation 4. What does flattening mean? a. Merging all tracks into one. b. Embedding references for tracks into the movie file. c. Compressing the sound into the video.

Quiz Answers 1. b. .mov is the proper extension for a QuickTime movie. 2. a. A Sample track is data used in a Filter track to determine the start time and duration of a specified filter. 3. a. Sorenson Video is a good choice for a movie with lots of motion. 4. b. Flattening means embedding references for tracks into the movie file.

Exercises Entering into the multimedia world of QuickTime editing can be overwhelming at first, but experiment by combining clips and adding sound and you will soon gain the confidence from experience to start utilizing movies on the Web.

16

358

Hour 16

1. If you can’t find movies to manipulate, create your own. Choose New Special, QuickTime Movie from the File menu. Import .swf files with the Flash Track object in the Object Inspector, or add images with the Picture track to create a slide. 2. Combine movies by copying and pasting tracks from one timeline to another. Use the Two-Source filter to create transitions. 3. Create a page with a movie saved in three quality settings. In the text of the page, detail the settings and create links to the movies. Time the download from your computer. Note the differences and save for future reference. Try on various platforms, browsers, and speeds.

HOUR

17

Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects It is hard to describe how awesome Smart Objects are in this version of GoLive. The feature integrates GoLive with image and document editing applications so well that it is difficult to fathom all it can do. But that is the purpose of this hour, to get you excited about using Smart Objects as a tool for more effectively creating Web pages.

360

Hour 17

So, now we’ll try to explain all of the great things you can use Smart Objects for. • Use native files—You can freely drop images, even PDFs (Acrobat Portable Document Format files), into GoLive pages with disregard to their format or size. This is possible because GoLive has the capability to read the original files and optimize them on the fly, maintaining a link to the native file. If you decide that GIF is a better format than JPEG, or that the size should be larger, you simply make the changes in GoLive and the optimized file is discarded and a new one is automatically created!

Optimization is the process of making a file as small as possible for quick download times on the Web. It requires some give and take to get the quality and the file size to a reasonable balance.

• Make multiple variations on one file—Now take it a step further. You use a text layer on top of a button in Photoshop or ImageReady. Perhaps the button is supposed to be used 50-plus times in your site with different text on each button. GoLive enables you to set the topmost layer as a Variable, meaning that you can update the text 50 different times right in GoLive! Here’s something even better, if anything other than the topmost layer is changed—perhaps you add a layer effect to the button or change the color—that will be updated in all 50 buttons. • Create multiple smart objects with different settings—A new feature with this version is that the settings for each Smart Object are maintained with the object. You can use one source for multiple optimized images, each maintaining its own settings. • Turn text into a banner—Type text and automatically turn it into a banner based upon an image already created in Photoshop or ImageReady. The text typed into GoLive takes on the attributes of your text layer in Photoshop and turns itself into a banner. Obviously, Smart Objects do a lot work for you if you know how to use them, so let’s get started! So, how does this work? The process is simple, but varies slightly depending upon the Smart Object selected. Four Smart Objects are located on the Smart section of the Objects palette. They include the Smart Photoshop, Illustrator, LiveMotion, and Generic Objects.

Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects

361

In this hour, you’ll learn the following: • Using the Smart Photoshop and ImageReady Objects • Using native Illustrator files with Smart Objects • Using Smart LiveMotion Objects • Using the Smart Generic Objects • Using variables in Smart Objects

Using the Photoshop/ImageReady Smart Objects Let’s start out by using a simple Smart Photoshop Object to become familiar with the concept of optimizing on the fly. Before starting this hour’s lesson, download some native files from http://www.golivein24.com/. We will then use the Smart Objects shown in Figure 17.1. Smart Illustrator Object Smart Photoshop Object

Smart LiveMotion Object Smart Generic Object

FIGURE 17.1 Smart Objects are on the Smart section of the Objects palette.

As usual, you want to work with a GoLive site open, especially because GoLive 6 has added a folder to store your original files in, as shown in Figure 17.2. Remember, when you use Smart Objects they maintain a link with the original file, so it’s helpful to have a place to store them that’s not in your Site folder (they don’t need to go to the server) but is easily located when working in the site. Using GoLive’s Smart Photoshop Object, you can bring in native Photoshop and ImageReady files and then determine file format, size, and quality. When an image is placed using the Smart Photoshop Object, an optimized copy of the source file is created and a link, called a Smart Link, is maintained between the original and optimized files. If you later resize the Smart Object, GoLive automatically updates the optimized copy by resaving it from the original.

17

362

Hour 17

FIGURE 17.2 Store Smart Objects in the folder provided for safekeeping.

Smart Links work both ways. Double-clicking on a Smart Linked image opens the original image. If changes are made, they are reflected in the optimized files back in GoLive.

The Smart Photoshop Object supports the following formats: • 8-bit RGB and CMYK Photoshop or ImageReady files Layers will be flattened, and sliced images are supported, but sliced rollovers and imagemaps created in ImageReady are ignored. • GIF • JPEG • BMP • PCT (Mac OS only) • PCX • PXR • IFF • TIF • TGA

You can double-click a Smart Photoshop Object in the Document window to open the original source image in Adobe Photoshop. Any changes made on the original are updated on the GoLive pages.

Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects

363

, TO DO

To Do: Adding a Smart Photoshop Object In this lesson, we place a Photoshop file and discuss the recommended settings to optimize a photographic image for the Web. 1. Create a new GoLive document. 2. From the Smart section of the Objects palette, drag and drop the Smart Photoshop Object onto the page, as shown in Figure 17.3. The Smart Object can also be placed by double-clicking it.

FIGURE 17.3 Place the Smart Photoshop Object on the page by dragging and dropping or double-clicking the object.

17

3. Using the Source Browse button on the Inspector, select a Photoshop image. As soon as the image is selected, the Save For Web dialog box appears, as shown in Figure 17.4. FIGURE 17.4 The Save For Web dialog box appears as soon as an image is selected.

,

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), Windows Explorer, or desktop.

Hour 17

,

364

4. In the Save For Web dialog box, click a tab at the top of the image display to select a view, as shown in Figure 17.5. For our purposes, set this view to 2-up.

FIGURE 17.5 Select a view to compare optimization settings.

The views from which you can choose are as follows: • Original view—The image with no optimization • Optimized view—The image with the current optimization settings applied • 2-Up view—Two versions of the image, side by side • 4-Up view—Four versions of the image, side by side 5. The next step is to choose the best optimization setting for our image. Assuming that this is a photographic image, select the JPEG format. From the Settings menu, choose one of the predetermined JPEG settings, as shown in Figure 17.6. Try low, medium, and high to view the quality and file size differences in the image. FIGURE 17.6 Choose from many predetermined optimization settings in the Settings pop-up menu.

,

6. Resizing an image: If you are placing a large file and planning to use a much smaller version in your page, change the pixel dimensions on the Image Size tab, as shown in Figure 17.7. Remember that the average monitor size is between 600–780 pixels wide, so images that are 200 pixels wide will cover roughly 25% of the window. Resizing here does not affect your original, and can be changed on the page after the image is placed. You must click the Apply button to adjust your image and remain in the Save For Web dialog box. 7. Look out for the file size! As you compare file formats and enter pixel dimensions, keep an eye on the file size. Important image information such as format, file size, and download time is located in the lower-left corner of the image preview (see Figure 17.8).

365

,

Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects

FIGURE 17.7 Adjust the final size of your optimized file in the Image Size tab.

FIGURE 17.8 Know how large the file will be before committing to the settings.

17

8. Click OK in the Save For Web dialog box. Another dialog box will appear. You now need to tell GoLive where to save the optimized file. Save the file in a logical location such as the Root folder of a site.

,

9. The image is now placed on your page. Resize the image by making it dramatically smaller and then larger. Notice how the original file is referenced and a new optimized image is saved and replaced right before your eyes!

It is a good idea to have the source of any of your smart images tucked safely away in the Smart Objects folder in your site.data folder. The Smart link is broken if the source file is relocated.

Using Smart Illustrator Objects The Smart Illustrator Object works almost the same as the Smart Photoshop Object. When a native Illustrator file (.ai) is selected, the Save For Web dialog box appears.

, TO DO

We will approach this in a way that teaches you the best formatting options for typical colored line art, such as logos, clip art, maps, and other graphics with large flat areas of color.

To Do: Placing an Illustrator File Using the Smart Illustrator Object Adobe Illustrator files are used on the Web to create logos, maps, graphs, and other graphics including clip art. Illustrator graphics have been able to be exported as SVG (Scalable Vector Graphics) and .swf (Flash) files since version 9. Because Illustrator

Hour 17

,

366

creates vector art (paths and points are mathematically created and are scalable to any size), you have a choice when optimizing to save the optimized image as bitmap (pixels), SVG, or .swf. 1. Drag the Smart Illustrator Object from the Smart section of the Objects palette onto your Document window, as shown in Figure 17.9.

FIGURE 17.9 Use the Smart Illustrator Object to place a native Illustrator file onto your GoLive page.

2. In the Smart Illustrator Inspector, click the Source Browse button, and select an Adobe Illustrator file (.ai). 3. You will be asked which format you would like the optimized file saved; bitmap, SVG, SVG compressed, or .swf. Choose bitmap for this exercise. For more information about the SVG and .swf formats, see Hour 15, “Using Plug-Ins and Multimedia Content.” 4. The familiar Save For Web dialog box appears, but in this instance we will use different settings. Make sure you are viewing the images 2-up, as shown in Figure 17.10.

,

FIGURE 17.10 View your Illustrator file as 2-up to compare the differences in optimizing.

,

Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects

367

5. Click the image in the right pane to select it. From the File Format pop-up window choose GIF, as shown in Figure 17.11. (GIF is the best format in which to save Web graphics with large areas of flat color. The GIF format also supports transparency, which is not supported by the JPEG format. GIFs reduce file size by reducing the number of colors in the palette.)

FIGURE 17.11 Select GIF from the File Format pop-up window.

17

6. Select the colors for your palette by choosing Adaptive from the Algorithm pop-up menu shown in Figure 17.12. The Adaptive palette closely represents the original colors. Using Web-safe colors (216 nondithering colors) is becoming less important, but if you prefer those select Web from the Palette pop-up menu. FIGURE 17.12 Select the Adaptive palette to build a color palette that closely represents the original colors.

,

7. Dithering is the stipple-like effect you might see when a browser cannot accurately represent a color. For our lesson, select No Dither. No Dither posterizes, or creates solid patches of color, rather than stippling several colors to represent one flat color. 8. Check the Transparency box if you want the image to be transparent. A checked background will appear representing transparency.

Hour 17

,

368

Transparency on the Web What files can be transparent and how is transparency determined? There are some key factors to creating transparency in your optimized files: • The most popular Web format that supports transparency is GIF. • JPEGs can appear transparent by selecting a matting color that matches the background color of the Web page, but they are not actually transparent. • In an Illustrator file, anything that has not been filled with a color will be transparent automatically. • In a Photoshop file, transparency is created by putting the image on a transparent layer. Whatever is transparent in Photoshop can be transparent on the Web page when the Transparency option is checked in the Save For Web window. Here’s a neat layer trick to use in Photoshop: Select what you want to have transparency around, then use Command+J (Mac) or Control+J (Windows) to lift the selected object to its own transparent layer. Throw away the background layer by dragging it to the Trash icon in the lower right of the Layers palette.

9. Choose the Colors pop-up window, as shown in Figure 17.13. Note that as you choose greater and lesser numbers of colors from this pop-up menu, you increase and decrease the file size, as shown in Figure 17.14. Try to determine the lowest number of colors you can use and still represent your graphic well. You can use the arrows in Colors to add or decrease one color depth at a time. When you’re done, click OK. FIGURE 17.13 Increase or decrease the Color palette by selecting the pop-up menu in Colors.

,

Lock colors so they don’t get deleted as you reduce the amount. Click the color you want to lock, and then click the padlock in the bottom of the Color palette. You can also select individual colors to be Web-safe by selecting them and clicking the Cube icon in the Colors palette.

369

,

Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects

FIGURE 17.14 As you reduce or increase colors, the file size is affected.

,

10. Specify the folder where you want to save the converted image. A logical place would be in the Root folder of your site.

Just as with a Smart Photoshop Object image, you can resize this image and it automatically updates the optimized file.

17

Using the Smart LiveMotion Objects LiveMotion is a sophisticated animation program that supports both vector and raster graphics, and can export files in the .swf format. In this section, we cover how you can take a native LiveMotion file (.liv) and generate a Shockwave Flash (.swf) file from it. You must have LiveMotion installed to use this feature. GoLive launches LiveMotion to access the export features. GoLive creates a copy of the source file in the Flash format and maintains a link between the two files. If you later make changes to the source image, GoLive automatically updates the Flash format copy when you return to the page containing the image. Note that the Smart LiveMotion Object is different from other Smart Objects in that the default export settings in LiveMotion are applied to the saved .swf file.

Setting the Export Format in LiveMotion Follow these steps before we start our lesson: 1. Start LiveMotion, if it is not already open. 2. If the Export palette is not already showing, choose Window, Export. 3. Select SWF (Flash) from the top pop-up menu of the Export palette, as shown in Figure 17.15.

If the export setting is not set up in LiveMotion for Flash (.swf), you will not be able to add a Smart LiveMotion Object to a Web page in Adobe GoLive.

370

Hour 17

FIGURE 17.15 The Smart LiveMotion Object reads the LiveMotion Export settings that should be set up for a .swf file.

, TO DO

To Do: Adding a Smart LiveMotion Object Adobe LiveMotion creates vector animation that can be exported in the Flash (.swf) format offering interactive capabilities in a small file size. Fortunately, if you are a LiveMotion user, you don’t have to export a file every time you want to place it on a page. GoLive can read and link to the original LiveMotion (.liv) file to keep edits and changes to the original up-to-date on the GoLive page. 1. Drag the Smart LiveMotion Object from the Smart section of the Objects palette into your Document window. 2. On the Live Image Inspector, click the Source Browse button and select a LiveMotion file. LiveMotion launches and comes to the front. 3. LiveMotion requests the location at which to save the .swf file. Choose to save the file in the Root folder of your site. After a few moments, Adobe GoLive returns to the front.

,

4. This placed .swf file is now linked to the original. Any edits to the LiveMotion file are reflected on the GoLive page.

Opening Files in Their Native Application When artwork placed on a GoLive page using Smart Objects is double-clicked, it launches in the native application. If this feature does not work, make sure that GoLive recognizes the presence of the other applications by opening Preferences, General in the menu and checking Launch other programs to edit media files, as shown in Figure 17.16.

Using Variables in Smart Objects Now that we know the fundamentals of Smart Objects, let’s throw an extra feature in that will be an enormous help to you as you create files, adding a variable. GoLive enables you to take an image that has text as a top layer and edit that top layer right in GoLive. We are going to go through the steps in this exercise. If you don’t have an appropriate image, download one from www.golivein24.com.

Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects

371

FIGURE 17.16 Images placed using the Smart Object can open in the native application if the preference is checked.

17

, TO DO

To Do: Using Variables In this exercise we will create several buttons from one source. Each button will have the top layer of text changed in GoLive. We will then edit the button (not the text) in Photoshop so that you can see how the Smart links keep your images updated. 1. Drag a Smart Photoshop Object onto a GoLive page. 2. Select the image named button.psd or an image of your own that has text as the top layer. A dialog box will open asking you if you want to use variables. Check the box to the left of Topmost Textlayer. 3. Type the text that you want to appear in the button in the bottom dialog box (see Figure 17.17). FIGURE 17.17 Let GoLive know that the topmost text layer is going to be a variable and enter the text you want to see on the button.

,

4. Click OK, and choose to optimize this file as a JPEG. Save the file in your root folder. Did you notice how it let you pick the text? The style of the text, font layer styles, and so on was already determined in Photoshop; you just changed the word!

Hour 17

,

372

5. Do this again with the same button image, but type the words in service in the Variable dialog box…viola! It keeps the same image with new text. 6. Try this neat trick if you know Photoshop. Open the button.psd in Photoshop and double-click the color swatch on the shape layer, see Figure 17.18. Pick a new color and save the file. Your buttons are updated in GoLive, but not the text!

FIGURE 17.18 In Photoshop change the color of the button by double-clicking the shape layer. Click a new color in the picker and save.

, Using Text To Banner Along the same lines of using a variable is the new Text To Banner feature, available from the Special menu. This feature enables you to take text that you have already typed and convert it to an image banner.

, TO DO

To Do: Converting Text to Banner In this exercise we will type a word on a page in GoLive and convert it to a banner. To do this you need an image where the topmost layer is a text layer. If you do not have one, download the sample images from www.golivein24.com. Place it into the SmartObjects folder in your site’s .data folder. 1. Type the word Sales on a page in GoLive.

,

2. Choose Convert Text to Banner from the Special menu. 3. Select the image named headline.psd. Notice that the variable window appears and the word Sales is already keyed in as the variable (see Figure 17.19).

373

,

Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects

FIGURE 17.19 When Convert Text to Banner is selected the typed text is used in the topmost text layer.

,

4. Click OK to accept the variable window and locate a place to save the optimized file. The image will appear with your text in the top text layer. Keep in mind that you can change the settings and the variables at anytime by clicking the Settings or Variable buttons in the Inspector (see Figure 17.20).

FIGURE 17.20 Change your settings or variables at any time by clicking the buttons in the Inspector.

What Does Scale Mean? You might have noticed a pop-up menu called Scale in the Smart Objects Inspector. In the menu are three choices, Exact Fit, No Border, and Show All. Here are the definitions of those choices: • Exact Fit—Scales the image to the exact bounds. Be careful; this will distort the image if it needs to make it fit. • No Border—Keeps the proportions, but might cut off parts. • Show All—Keeps the proportions while adding transparent/matte colored borders to the image. These are helpful if you have image areas already defined in Templates and you don’t want resizing to distort any placed images. See Hour 10, “Using Components, Stationeries, Library Snippets, and Page Templates,” for more information on Templates.

Using the Generic Smart Image Last but not least we cover the Generic Smart Image. This Smart Object handles the file formats such as PDFs and eps. In our example we will use this to place a PDF onto our page.

17

374

Hour 17

, TO DO

To Do: Placing a PDF We will use the Smart Generic Object to place a PDF (Acrobat Portable Document Format) file. If you do not have access to a PDF, download one from our Web site at www.golivein24.com. 1. Drag the Smart Generic Object onto a GoLive page. 2. Browse to locate a PDF file. We will use our sample file named annual.pdf. 3. Optimize the PDF as a JPEG, and save the optimized file in your root folder.

,

4. This PDF is now linked to the original. If you have the full version of Acrobat, not just the free reader, you can open the file, make changes to it, and they will be reflected back on the GoLive page!

Summary Designing a page using Smart Objects is a revolutionary way to create Web pages. You no longer need to worry about saving multiple versions, or lacking enough data to build the best image. All of the Smart Objects leave the original file intact, so experiment with multiple placements of the same image, in different sizes and optimizations, until you learn what format and quality combinations work best for your site.

Q&A Q What happens if I move a source file after it has been selected for a Smart Object? A The file will no longer be linked. The optimized copy still exists, but you will not be able to use the update features to resize or edit the original. Relink the image by clicking on the Source Browse button on the Inspector. Q What if I change my mind on quality settings after I have already placed a Smart Object? A On the Smart Object Inspector, click the Settings button. This gives you an opportunity to change the optimization settings. Q Can I break the Smart link after I have created something as a Smart Object? A Absolutely. With the Smart Object selected Control+click (Mac) or Right+click (Windows), and select Convert to Regular image from the Contextual menu.

Using Photoshop/ImageReady, Illustrator, LiveMotion, and Generic Smart Objects

375

Quiz 1. Which Smart Object is best for importing photographs? a. Smart Photoshop Object b. Smart Illustrator Object c. Smart LiveMotion Object 2. Generally, what is the most common format that an image with large amounts of flat color is saved in? a.

.JPEG

b.

.SWF

c.

.GIF

3. What is one reason why a Smart Object might not update correctly? a. Photoshop is not loaded. b. The source file has been relocated. c. You are not working in an active site.

Quiz Answers 1. a. A Smart Photoshop Object will import a JPEG file. 2. c. .GIF is the most popular format for saving images with large amounts of flat color. 3. b. A Smart Object might not update correctly if the source file has been relocated.

Exercises Smart Objects are a true timesaver when designing Web pages. Try some of the exercises to get used to the workflow. 1. Use the Smart Photoshop Object and place the same image several times, naming each optimized file something different. For instance, fish1.jpg, fish2.jpg, fish3.jpg, and so on. Double-click one of the placed images to update the original and watch as all instances of the file are updated in GoLive. 2. Perform the same exercise as in exercise 1, but this time try saving the same source image once as a GIF and another time as a JPEG.

17

376

Hour 17

3. Place a Smart Object on a GoLive page. Use the same original image to place another Smart Object on the page, this time changing the optimized filename to something different. Resize one of the objects and notice that the one image being resized has no effect on any other Smart Objects based on the same original image.

HOUR

18

Formatting Text with Cascading Style Sheets Cascading Style Sheets (CSS) are a powerful design tool for Web designers. Cascading Style Sheets not only give you the ability to format text in ways not possible in standard HTML, but they also provide a method to change multiple text attributes at the same time to text that has had the style applied. Keep in mind that not all style sheets are compatible with all browsers. Generally, a browser version 4x or higher will view style sheets properly, but even then, some attributes will work on one browser but not another. We will address this subject toward the end of this hour, but in the meantime, check your pages in both browsers and avoid checking in just the GoLive preview. In this hour, you’ll learn about the following: • Creating Element, Class, and ID style sheets in GoLive • Defining fonts with style sheets • Defining text attributes with style sheets • Applying style sheets to existing pages • Avoiding Web browser incompatibilities with style sheets • Prioritizing style sheets to set style override levels

378

Hour 18

Creating Style Sheets in GoLive When you understand the fundamentals, using style sheets in GoLive is not difficult. This hour covers three selectors used to define style sheets: Element, Class, and ID, in that order. Element is the simplest of all style sheets to apply.

When style sheets are used, a set of characteristics is defined or referred to in the head section of the Web page. A selector is a string of code that connects the HTML page with a specific style sheet, telling the browser that the tagged text should follow the rules defined by that style.

When reviewing style sheets, you will build examples as internal style sheets, meaning that the style sheets will only be available on the page they were created in. This will help keep you focused on the specific differences between the Selectors. Later in the hour, you will review external style sheets, which can be applied to multiple pages.

Types of Style Sheet Selectors There are several types of indicators that determine what defined style should be applied and where. In this section, you will learn about three selectors: Element, Class, and ID.

Element Selectors As stated previously, the Element selector involves the smallest number of steps to apply. In fact, after they have been created, an Element style sheet’s attributes are automatically applied. Here is an example: You want your headline text to be 25 pixels. By creating an Element style selector, you can instruct the browser that every time you use the tag, the text enclosed is to be 25px (pixels). It is as simple as that. One of the benefits to using Element selectors is that they are downward compatible with old browsers. Browsers that do not recognize style tags will usually ignore the unknown tags, leaving the recognizable tags for at least some text formatting.

, , TO DO

To Do: Creating a Style Based on an Element Selection In this lesson, you create an Element style sheet that eliminates the underline that appears when text is tagged as a hyperlink. 1. Open an HTML page that contains linked text. 2. Click the CSS icon (looks like a cascading staircase) in the upper right of the GoLive page, as shown in Figure 18.1. A CSS Editor will appear.

379

,

Formatting Text with Cascading Style Sheets

FIGURE 18.1 Internal Cascading Style Sheets are created by clicking the CSS icon in the upper right of your GoLive page.

In the CSS Definitions tab of the CSS Editor are the controls for creating or removing Element selectors, Class and ID styles, as well as importing external style sheets (see Figure 18.2). FIGURE 18.2 The CSS Editor gives you the controls to create, delete, and import style sheets.

New ID style New link to External style sheet Delete style New Class style New Element style

3. Click the New Element () selector. 4. The Inspector becomes a CSS Style Inspector as shown in Figure 18.3. Click the Basics button (pencil icon) and name the style a (for the HTML Anchor tag). This is the tag that informs a Web browser that a link reference is to follow.

,

FIGURE 18.3 Name and text attributes for style sheets are done in the CSS Selector Inspector.

5. Click the F (Font) button. This section represents text attributes that can be applied to the style sheet.

18

Hour 18

,

380

6. Check None under Decoration, as shown in Figure 18.4. The underlines from links are removed. To continue working on your page, simply click the GoLive page.

FIGURE 18.4 Type size, height, color, and decoration are set in the Font section of the CSS Selector Inspector.

, , TO DO

To Do: Editing the Element Style Sheet Perhaps you change your mind and want your links to be burgundy, or larger. Follow these steps to make changes to the style sheet just created. 1. To make further changes to the Element style sheet, click the CSS icon. 2. When the Style Sheet window appears, select the tag a.

,

3. Choose the F (Font) button and make additional attribute changes. Every tag instance will be automatically updated.

You have been using simple element styles, but GoLive supports Contextual element selectors as well. This means that if you create an element style named H1 b, the attributes that you define will only appear when you bold and apply the tag! All contextual style sheets might not preview in GoLive, but will show up in the browser.

Using Classes for Style Sheets The Class Style selector is similar to those used in word processing and page layout applications, in that font attributes are applied to selected blocks of text. Styles can be created for body text, or headlines and subheads, and so on. These styles can then be applied to a selected word, paragraph, or even an entire page.

Formatting Text with Cascading Style Sheets

381

, TO DO

To Do: Creating an Internal Class Style Sheet In this lesson, you create a Class style sheet that you will use to define a headline style where the text is defined to a specific pixel size. 1. Open or create an HTML document that contains several paragraphs of text. Make sure that the text has no size attributes. To verify this, select all the text and choose None from the size pop-up menu in the Toolbar, as shown in Figure 18.5.

FIGURE 18.5 Choose None to put the text size back to its default.

2. Click the CSS button in the upper right of the GoLive page. 3. From the CSS Editor, choose New Class style, as shown in Figure 18.6. FIGURE 18.6 Create a Class style sheet by clicking the New Class Style in the CSS Editor.

4. In the CSS Style Inspector, choose the Basics button and name this style .headline. (The “.” must appear in front of Class style sheets.) 5. Click the F (Font) button and choose to make the .headline text size 25px (pixels).

,

Surprised to see your font size dramatically changes between platforms? By choosing px (pixel) for the text size, the text will stay relatively the same size between platforms and browsers.

18

Hour 18

,

382

6. Select a word in a paragraph of text and open the CSS palette from the Window menu. 7. The .headline style appears followed by several check boxes. Class styles can be applied to a selected text (Span), a paragraph (Par), or a section of a page (Div), as shown in Figure 18.7.

FIGURE 18.7 Choose to apply a class style as Span, Par, or Div.

8. Check the box for Span, and the selected text increases in size to 25px.

,

9. Check Par and all the text in the paragraph resizes to 25px. A Par selection continues until a paragraph (

) tag is recognized. Div applies the style to a section of the page that is disconnected from the normal flow of HTML.

Creating an ID Tag 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. In other words, one headline could be defined with totally different attributes than all others. Applying an ID style requires the designer to edit the source code. Editing source code might or might not be familiar to you. Either way, you won’t find it difficult to apply the ID style.

, , TO DO

To Do: Creating an Internal ID Style In this lesson, you create an ID style sheet that will instruct the defined text to be colored. 1. Open or create an HTML document that contains several paragraphs of text with no color attributes. To verify that no color has been applied, select all the text and choose Remove Color from the Type menu. No color is applied if Remove Color is grayed out.

,

Formatting Text with Cascading Style Sheets

383

2. Choose the CSS icon from the upper right of the GoLive page. 3. From the CSS Editor palette, choose New ID style, as shown in Figure 18.8.

FIGURE 18.8 The ID tag is created by choosing the New ID style (“#”) from the CSS Editor palette.

4. In the CSS Style Inspector, choose the Basic button and name the style #important. The # (pound sign) must precede the name, and the name cannot have spaces in it. 5. Choose the F (Font) button; from the Color pop-up menu, select Red. 6. Click the GoLive page and select a line of text. 7. Choose the Source tab. The line of text is still activated in this window. 8. Find the

tag that precedes the selected text and enter the following code: ID=”important”

The finished code appears as

,

9. The text on the page turns red.

, TO DO

To Do: Understanding the Benefit of Style Sheets Now that you understand the differences in the style sheets, try taking advantage of them by revising the styles you have created. 1. Open a page that uses an Element, Class, or ID style sheet. 2. Click the CSS button. The Style Sheet window appears displaying styles categorized by type. 3. Click the style that you want to revise.

,

4. Choose the F (Font) section and change the color. Note that any place where the style sheet has been applied will change. Quite the time saver!

18

384

Hour 18

Defining Fonts with Style Sheets You know by now that you can’t define a font and expect it to invariably appear on the viewer’s end. As discussed in Hour 2, “Creating a Site File,” font sets can be used to request a font. If it is not available, the next font in the set is requested. If that font is not available, the next font in the set steps up, and so on. So, how do you apply font sets to style sheets, and what is the benefit? If in the previous example, you chose to display the headline in Arial, it would be much easier to apply the font once in a style. If you then decide to be daring and use Arial Black, you have one simple revision to make, and all occurrences of Arial, used in the .headline style, are replaced by Arial Black.

, TO DO

To Do: Using a Style Sheet to Define a Font Set In this lesson, you create a style sheet that defines a font. If you want to find some textheavy pages to use for this lesson, go to http://www.golivein24.com. 1. Open a page that has several paragraphs of copy on it. Make sure that no font sets have been applied to the text on this page by selecting All and choosing Type, Font, Default Font, as shown in Figure 18.9.

FIGURE 18.9 Use the Type menu to set text to the Default Font set.

2. Click the CSS button. 3. For this example, you will use an Element style. Click the New Element Style button from the CSS Editor. 4. In the CSS Selector Inspector, choose the Basics button and name this Element B. This is the HTML tag for bold.

,

5. Choose the F (Font) section and change the color to Red. From the font pop-up menu shown in Figure 18.10, choose the Arial font set. 6. Be careful not to apply the font set again. You can add additional font sets after the initial one, but if you do this by accident, select the font and choose Edit, Clear (Mac), or Edit, Delete (Windows).

385

,

Formatting Text with Cascading Style Sheets

FIGURE 18.10 Apply a font set to a style by choosing it in the F (Font) section of the CSS Style Inspector.

,

7. Click the GoLive page and select some text. Choose bold from the Toolbar. The text will not only change to the color red, but also to the Arial font.

Defining Text Attributes with Style Sheets This section covers in more detail how to apply font attributes to style sheets. In addition to changing the color, size, and additional attributes as you have already done, you will use line height (creates the same effect as leading in typesetting terms) and spacing between words, characters, and margins.

, TO DO

To Do: Changing the Line Height (Space Between the Lines) In this lesson, you create a style sheet to do something you can’t do in regular HTML: define the space between the lines of text, or control leading. 1. Open a GoLive page that has several lines of copy. 2. Create a Class style sheet by clicking the CSS button and selecting New Class Style from the CSS Editor, as shown in Figure 18.11.

,

FIGURE 18.11 The New Class Selector button.

3. Name the style .bodycopy. Remember, always include a period in front of the name.

18

Hour 18

,

386

4. Select the F (Font) section, and set the text to be 10px and the line height to be 20px. This would be the same as double spacing on a typewriter.

,

5. Click the GoLive page and put the cursor in a paragraph of text. From the CSS palette (Window, CSS) set the .bodycopy style to be Par. The entire paragraph will become double spaced.

Line height does not work well as a Span style. Multiple lines must be selected in order for it to take effect.

As you are creating and using styles, pay attention to the fact that GoLive not only displays the code working behind the scenes in the CSS Definitions tab of the CSS Editor (see Figure 18.12), but also allows you to edit the source code in the Source tab; see Figure 18.13.

FIGURE 18.12 The source code is displayed in the CSS Definitions tab of the CSS Editor. FIGURE 18.13 Edit the source code of the style sheets in the Source tab of the CSS Editor.

, TO DO

To Do: Spacing Between Words and Letters In this next example, you’ll learn how to apply spacing between words and letters. Because letter spacing is the most popular option, the exercise covers it. If you are from the old school of HTML, you might remember inserting 1-pixel transparent GIFs between each character to get this effect!

,

1. Open a GoLive document with several lines of text on it. 2. Choose to create an ID style sheet by selecting the CSS button and choosing New ID style from the CSS Editor, as shown in Figure 18.14.

387

,

Formatting Text with Cascading Style Sheets

FIGURE 18.14 The ID Selector.

3. Select the Basics button and name the style #space. 4. Select the Text button (third from the left) and note Word Spacing and Letter Spacing. In Letter Spacing, type 5px to define five pixels of space between each character, as shown in Figure 18.15. FIGURE 18.15 Space out letters in the Text section of the CSS Selector Inspector.

18

5. Click the GoLive page and select the Source tab. Find a

tag and insert the following text: ID=”space”

The completed tag should look like this:

The letters in the following text are spaced out by five pixels, as shown in Figure 18.16. FIGURE 18.16 When the ID style has been applied, your text should appear with an extra space between each letter.

,

388

Hour 18

When editing source code, you can also click the Show/Hide Split Source button in the lower left of the page window. This option keeps the layout and source code available at the same time so that you can see what you are doing in the code as you create new styles.

Adjusting Margins in Style Sheets You can adjust margins of text from all sides using style sheets. Enter positive amounts for more space or negative amounts for less space. You can even overlap copy by setting negative margins!

, TO DO

To Do: Editing the Margins of a Style To edit the margins of a style, follow these steps: 1. Open a GoLive page with several lines of text on it. 2. Choose New Class style from the CSS Editor. 3. Name the Class style .description. 4. Select the Block button (fourth button in from the left) and set the left margin to be 15px, as shown in Figure 18.17. FIGURE 18.17 Create margins around text by using the Block section of the CSS Selector Inspector.

,

5. Click your page and insert the cursor in a paragraph. In the CSS palette (from the Window menu), apply .description as a Par style. The text indents to the left by 15 pixels.

Formatting Text with Cascading Style Sheets

389

Applying Style Sheets to Existing Pages This section discusses how to create external style sheets and apply them to existing pages. The external style sheet is a separate document that is linked to multiple pages. The biggest benefit to using external style sheets is that, when they are updated, any references to the style are automatically updated.

, TO DO

To Do: Creating an External Style Sheet In this lesson, you create an external style sheet that can be linked to several pages. 1. Choose File, New Special, Cascading Style Sheet from the menu. 2. An untitled.css Style Sheet window appears that looks similar to the CSS Editor you have been using in the previous exercises. 3. For this example, you will use an Element style sheet. Choose New Element style from the External CSS Editor. 4. In the CSS Style Inspector, choose the Basics button and name the tag i (the HTML tag for italic) as shown in Figure 18.18. FIGURE 18.18 Create a new Element style and name it i in the CSS Style Inspector.

5. Select the F (Font) button and change the color of the italic style to red. 6. Save the Style Sheet document as newstyle.css. Of course, it is best to save this in the root of a Site folder to avoid losing it. 7. Open a new GoLive document and type some text. Select several of the words and apply the italic style from the Toolbar to them.

,

8. Click the CSS button in the upper right of your GoLive page. 9. Click New Link to External CSS in the CSS Editor as shown in Figure 18.19.

18

Hour 18

,

390

FIGURE 18.19 The New Link to External CSS button in the CSS Editor is used to link your page to an External Style.

10. Browse, point and shoot, or type in the location of the Cascading Style (newstyle.css). 11. The text that you italicized is now red. 12. Save this document and create a new one with italic text on it as well. Apply the same external style sheet to this file by following steps 9 and 10. 13. Choose Open from the File menu and select the file named newstyle.css.

,

14. Change the color of the italic tag to green. All occurrences of italic text on both documents change to green.

Using Import and Export from the File menu, you can export an internal style sheet to an external style, but you can also import style sheets into your documents.

Working with External Style Sheets in Sites Now that you see how external style sheets are applied, you probably realize the importance of keeping the style sheet in a location where linked pages can locate it. In this next example, you will create a new site and save the .css file in it. You will then apply the external style sheet another way, utilizing the Site window. By saving the .css file in the site, you reduce the risk of style sheet errors when the linked style sheet cannot be found.

Formatting Text with Cascading Style Sheets

391

, TO DO

To Do: Saving an External Style Sheet into a Site In this lesson, you create an External style sheet and save it into a site for future reference. 1. From the File menu, choose to create a single-user blank site. 2. Name the site Style, and save it on your hard drive in an easy-to-find location by using the Browse button. 3. You could create a new style sheet, but for this example, you will add your existing style to this site. Make sure that you have the Site window forward and choose File, Import, Files to Site. 4. Locate the file named newstyle.css and add it to the new site. 5. Open index.html and create text that is italicized. 6. Position the Document window so that you can see the Page icon to the left of the title and the Site window, as shown in Figure 18.20.

FIGURE 18.20 Position the site and page so that the .css file is visible.

18

,

7. Drag the file named newstyle.css, and drop it on the Page icon to the left of the title in the upper left of the main Document window. This applies the style sheet to the index page.

Want to apply a style to the contents of a table? Select a table and Control+click (Mac) or Right-click (Windows) to select Apply CSS Style to TD or Table (depending upon what you have selected from the contextual menu, as shown in Figure 18.21). Choose any available Class styles from the submenu.

392

Hour 18

FIGURE 18.21 Apply a Class style to a selected cell or table using the contextual menu.

Avoiding Web Browser Incompatibilities with Style Sheets Cascading Style Sheets, as great as they are, are supported by only 4x or higher browsers. To keep pages compatible with older browsers, you can use the Browser Switch object. The Browser Switch redirects viewers with older browsers to a different page than that seen by those with the 4x or higher browsers. This page could be nothing more than a plain text page that provides e-mail and other contact information. You might even include links to Microsoft and Netscape so that viewers can update their browsers. In this section, we will take you through the steps to create an Intro page for your site. Most viewers will not see this page. This page is set up with the switch so that anyone with a 4x or higher browser moves on to the rest of your site, and anyone with a lower version browser is redirected to the text Intro page. The reason you use an Intro page is that some older browsers might not even understand the Browser Switch. In this case, you can add a Refresh Head item to redirect them to the text-only page.

,

, TO DO

To Do: Creating the Browser Switch Head Item In this lesson, you insert a script into a GoLive page to aid viewers with older browsers. The script can direct older browsers to a Web page that does not use style sheets. 1. Create a page to be used as the Intro, and name the page intro.html. Do not include any floating boxes, style sheets, or Action items on this page. 2. Click the triangle to the left of the Page icon to open the Head section of your page, as shown in Figure 18.22.

393

,

Formatting Text with Cascading Style Sheets

FIGURE 18.22 Click the triangle to the left of your Page icon to toggle open the Head section of your page.

3. Drag the Browser Switch icon from the Smart section of the Objects palette into your page’s Head section, as shown in Figure 18.23. FIGURE 18.23 Drag the Browser Switch icon into the Head section of the page.

The Inspector is now the Browser Switch Inspector. 4. Check the supported browsers that are required to advance to the rest of your site, and browse to locate the main page of your site, as shown in Figure 18.24.

,

FIGURE 18.24 The checked browsers are the supported browsers.

5. Drag another Browser Switch icon into the Head section and choose to send viewers with browsers lower than version 4x to your text-only page, as shown in Figure 18.25.

18

Hour 18

,

394

FIGURE 18.25 Send the viewers with older browsers to a simplified page.

7. Drag the Refresh icon into the Head section of your page, as shown in Figure 18.26. FIGURE 18.26 The Refresh icon looks like a clock and is in the Head section of the Objects palette.

8. Set the refresh for five seconds. If there is no response to the Browser Switch in that time, the Refresh will direct the viewers to the plain-text page specified, as shown in Figure 18.27. FIGURE 18.27 If there is no response to the Browser Switch, the Refresh will direct viewers to the text-only page.

,

Formatting Text with Cascading Style Sheets

395

Using Netscape CSS Fix Using the Head Action object from the Smart section of the Objects palette, you can add the Netscape CSS fix to your page. This corrects a Netscape 4x problem with style sheets where the text reflows incorrectly when the browser window is resized. This can even be placed in your Stationary file to be present for future pages.

, TO DO

To Do: Using the Netscape CSS Fix In this lesson, you use a GoLive Action to add the script necessary to correct for Netscape style sheet errors. 1. Open a GoLive page. 2. Open the Head section by clicking the arrow to the left of the Page icon. 3. From the Smart section of the Objects palette, drag the Head Action object into the Head section of your page. 4. Click the Action button to reveal the pop-up window, and then select Others, Netscape CSS Fix (see Figure 18.28). FIGURE 18.28 Applying the Netscape CSS Fix action to a GoLive page.

,

5. The fix has now been added to your page.

External Style Sheet Priority What if you choose to incorporate two external style sheets into one document? Depending on its priority, one style will overrule another. For instance, if I applied an external style sheet that states italics are to be red, and then apply another external style sheet that states they should be green, the priority defines who wins the battle.

18

396

Hour 18

The rule to follow is that the tag closest to the text “wins.” In other words, if I have an internal and external style sheet, and both define the color of the text, the internal style sheet wins. Why? Because the internal style sheet is actually defined on the page. If I then select the text and change it to another color, that tag will win because the text is right inside of the tag. So, that makes sense in a perfect world in which you have only one external style sheet, but what happens when you have two or three style sheets, all ruling on a specific tag or style? That is what you read about in this section.

, TO DO

To Do: Defining a Style’s Priority In this lesson, you import two external style sheets and change their priority by using the Inspector. 1. Create an external style sheet that defines the tag to be red. Save it as stylea.css. 2. Do a Save As naming the file styleb.css and change the color of italic to green. 3. Create a new document, click the CSS button, and choose the New Link to External CSS button shown in Figure 18.29. Locate stylea.css. Repeat the same procedure for styleb.css. FIGURE 18.29 By choosing New Link to External CSS several times, you can import many external style sheets.

In the CSS Editor, select one of the two external style sheets listed. Notice the arrows at the bottom of the palette. See Figure 18.30.

,

FIGURE 18.30 When multiple external style sheets are used on a page, one can gain priority over the other by using the arrows on the Inspector.

,

Formatting Text with Cascading Style Sheets

397

,

4. With an external style sheet active, try moving the Priority up and down. Notice how when a competing style is requested, the top style will gain priority.

Individually applied (inline) attributes gain priority over any internal or external style sheets. If you choose to change the color of selected text, for example, the color will not be overridden by applying a style.

Summary Manually selecting individual text and choosing limited attributes will become a thing of the past as browsers advance in capabilities and designers become accustomed to using Cascading Style Sheets. Understand that style sheets have yet to be used by a large number of Web designers. In this section, you have gained the knowledge to decide whether to use an Element, Class, or ID style and the steps necessary to use styles in multiple pages. The recognition of tremendous time savings is obvious after experimenting with style sheets. If you haven’t already incorporated styles into your Web site, try using them on one page, keep an ear out for viewer complaints, and then progress into developing them further in your site.

Q&A Q Can I have one external style sheet that includes Element, Class, and ID styles? A Yes, you can add as many styles to an external style sheet as you can manage. Q What are the drawbacks to using style sheets? A The main drawback is that only browsers 4x or higher will recognize the style sheets. If you feel that a large majority of your viewers have older browsers, you could use the Browser Switch discussed in this hour. Q Do external style sheets have to be uploaded to the server with my pages? A Absolutely. External styles are documents linked to the pages using them. Also, don’t change the location or name without using the File tab of your Site window! Q Can I use style sheets on my Stationary files? A Yes, this can be a timesaver as you create additional pages.

18

398

Hour 18

Quiz 1. What is one reason why an Element style might not work? a. It is not named a recognizable HTML tag name. b. The “.” (period) is missing from the beginning of the name. c. The proper code was not entered into the

tag. 2. Which style sheet requires you to enter code manually into your source code? a. Internal style sheet b. Element style c. ID style 3. Which style selector can be applied to selected blocks of text? a. Class style b. External style sheet c. ID styles applied as Par

Answers 1. a. An Element style might not work if it is not named a recognizable HTML tag name. 2. c. ID style requires you to enter code manually into your source code. 3. a. Class style can be applied to selected blocks of text.

Exercises Now to try your hand at creating your own Cascading Style Sheets. Use these exercises to help build up your style sheet experience to a level where you will feel confident applying this feature on your Web pages. 1. Create a practice site (refer to Hour 2). Create an external style sheet with an Element style that removes the underlines from links and also includes a Class style for a headline. Choose to simply change the color and size of the Headline style. Apply this style to many pages, and then reopen the external style sheet and modify the text attributes.

Formatting Text with Cascading Style Sheets

399

2. Experiment with margins and indents. Set a positive margin value (10px) in the Block section of the CSS Style Inspector. In the Text section of the Inspector, change the text indent to a –10px value. You have created a hanging indent. 3. Experiment with Element styles and tables. Each cell’s contents are in a tag. Name an Element style TD, and experiment with styles that you might want to apply to the contents of tables.

18

HOUR

19

Controlling How GoLive Writes HTML As you become more familiar with HTML source code, you will find yourself editing code on a more regular basis. The edits will likely be repetitive and consistent. Perhaps you always want the background color of tables to be yellow, and images to always be aligned left. Whatever the situation, you will find the HTML source tools in GoLive to be extremely helpful. The subject of this hour’s lesson is the Web Settings window. By using the Web Settings window, you can set new HTML defaults for frequently used items, enter new code, or set up Cascading Style Sheets (CSS) preferences that change your preview of supported styles in GoLive. In this hour, you’ll learn to • Understand the Web Settings window • Set General HTML preferences • Change default attributes of frequently used design elements • Adjust how GoLive views CSS code

402

Hour 19

Understanding the Web Settings Window The Web Settings window is available from the Edit menu. As with other applications, you can change GoLive’s preferences in order to save time and energy when repeating the same edits. What is different about GoLive is that most of the preferences that you might want to change are the defaults of HTML and are not necessarily GoLive’s preferences at all. In this section, you will learn how to edit the Markup tab for a variety of design changes. Let’s investigate the Web Settings window before going into specifics. As you see in Figure 19.1, the Web Settings window has tabs that represent different source code edits. FIGURE 19.1 The Web Settings window enables the user to customize HTML code.

In this hour’s lesson, you focus on the Global, Markup, and Browser Profiles tabs. Each has unique features, which you will explore.

The Global Tab The Global tab is where the visual preferences for the HTML source code are listed. The changes made in this tab will not change the code that GoLive writes, but might help you make formatting consistent when importing previously created pages.

The Markup Tab You will be working in the Web, HTML section of the Markup tab in Web Settings. This is where most of the changes can be made to set defaults for HTML coding. In this tab all the tags and attributes that GoLive recognizes are listed in categories based upon their function, as shown in Figure 19.2. This is the complete set of tags that were known to GoLive at the time of publication. The database includes not only standard HTML tags but browser-specific tags as well.

Controlling How GoLive Writes HTML

403

You might notice that for advanced users you can edit the settings for other coding such as SMIL, (Synchronized Multimedia Integration Language), SVG (Scalable Vector Graphics), and WML (Wireless Markup Language). FIGURE 19.2 The Markup tab Web category lists in categories all available HTML tags known at the time of publication.

Later in this hour, you will edit some of these tags’ attributes in order to customize the way that your images and tables appear as a default in GoLive.

If you are not an expert in HTML, follow the instructions in this section carefully. If you are an expert in HTML and want to take the exercises beyond what’s covered here, understand that you could cause major problems with poor edits. After installing the application, make a backup copy of the Settings folder that exists in your GoLive application folder. As you edit the Web Settings database, make periodic backups of this folder to reload if you have problems.

The Browser Profiles Tab The Browser Profiles tab of the Web Settings window, shown in Figure 19.3, contains default style sheets for major browsers on Windows and Macintosh operating systems, including profiles for wireless technology and previews for different models of phones such as DoCoMo and Nokia. These are primarily used for previewing pages with the View Controller; you will edit this tab later in this hour to help you understand which style sheets are compatible with each browser.

19

404

Hour 19

FIGURE 19.3 The Browser Profiles tab controls the default style sheets that will be supported in the GoLive preview.

In previous versions, GoLive “fixed” code that it deemed poorly written. This no longer occurs with any code—HTML, JavaScript, or ASP—unless you want it to. If your document was created in another Web editing program and you feel it is in need of repair, choose Rewrite Source Code from the Edit menu.

Setting General HTML Preferences Before investigating the Web Settings window any further, this section helps you set a preference to make the job of editing source code easier. Close the Web Settings window and follow the instructions to change the source preferences.

, TO DO

To Do: Setting Preferences to Make Text Wrap If you don’t enjoy scrolling forever to reach the end of a line of code, you will be happy to know that you can set text to wrap as a default in GoLive. This preference affects only the text in the GoLive Source window, and does not affect the text flow in the browser. 1. In GoLive, select Preferences from the Edit menu.

,

2. Change to the source preferences. 3. Check the box for Word Wrap, as shown in Figure 19.4.

405

,

Controlling How GoLive Writes HTML

FIGURE 19.4 Change the preference of your source code to wrap text at the end of the Source window.

,

Using the Global Tab You will now learn about setting the General HTML preferences in the Global tab of the Web Settings window, as shown in Figure 19.1. As mentioned previously, the Global tab is where the visual preferences for the HTML source code are listed. The changes that you make here are not critical or do not change code, but they might help you to keep code consistent with pages previously created. Do not feel obligated to go into the Global tab and make changes. After reviewing the settings it should be apparent that many of these defaults should be left alone unless you have a compelling need to change them. The following sections describe the Global tab options.

Indent With Indent With sets the indentation value and the type of indention for lower-level tags displayed in Source view. Tabs or spaces can be selected for this indentation from the popup menu to the right.

19

406

Hour 19

Line Break Character 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. If you are not sure which is the best preference, ask your Internet service provider (ISP) for assistance.

Tag Case This setting specifies how HTML tags are written. The rule is to stay consistent—if you are creating new pages, you can just leave many of your case settings at the default. “Tag case” should be changed only if you are working with previously coded work, and are trying to keep the same visual pattern for ease in editing. Setting for tag case settings include the following choices: • Upper Case will use only uppercase characters in tag names, as in . • Lower Case (default) will use only lowercase in tag names. Designers working in XHTML should choose this option. • Capital will capitalize the first letter of the tag name. • Database Driven will write the tag as specified in the Markup tab of the Web Settings window. You will review the Markup tab later in this section.

Attribute Case Attributes are added to define the HTML tag in more detail. For example,

is a tag. But, if the table were to have a border of 5 pixels, an attribute would be necessary. See the following code example:

In this example, is the tag, border is the attribute, and “5” is the value. The Attribute Case field specifies how HTML tag attributes are written; again consistency is the issue here. Case settings for attributes include the following: • Upper Case will use only uppercase letters in attribute names. • Lower Case (default) will use only lowercase letters in attribute names.

Controlling How GoLive Writes HTML

407

• Capital will capitalize the first letter of the attribute name. • Database Driven will write the attribute as specified in the Markup tab of the Web Settings window.

Quote Attribute Values As discussed for the code example , “5” is the value for the attribute. So you want a border—how big do you want it? Perhaps you want a color— what color do you want? Think of the value as being the adjective that describes the attribute. In this pop-up window, you can choose whether to surround values in quote marks. It is not always required, but sometimes it is, which means that, if you are not an expert coder, you are better off leaving Quote Attribute Values set for Always. The following choices are available for setting value preferences: • Always (default) inserts quotation marks around attribute values. • Except Numbers encloses all attribute values, except for numerals. • Only if Necessary inserts quotation marks if there is a chance that they are necessary—for instance, for URLs.

Color Name Translation Color Name Translation determines whether color names are translated into HTMLspecified coding methods. Color translation methods include the following: • Do Not uses only hexadecimal RGB values, such as “#000000” for “Black,” or “#FF3000” for “Red.” • 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 a color to Netscape-specific names such as “OliveDrab,” if there is an equivalent. Netscape colors use hexadecimal values that work in both Netscape and Internet Explorer.

CSS-Default Unit A wonderful preference that allows you to choose the default unit for units defined is the CSS Style Inspector. Remember from Hour 18 that pixel, as a measurement unit, will keep the text relatively the same size between Macintosh and Windows platforms.

19

408

Hour 19

CSS Output This pop-up menu offers a choice of formatting options in the creation of style sheets. They will not affect the code that is written but the appearance of the source code.

Changing Default Attributes of Elements with the Markup Tab As previously stated, the Markup tab of the Web Settings window holds the complete set of HTML tags known to Adobe GoLive at the time of publication. It is easy to locate information about each tag on the Web section of the Markup tab (see Figure 19.5). The tab defines categories, which when opened display the HTML tags pertinent to the particular markup language. FIGURE 19.5 Sorting the tags into categories makes it easy to find tags in the Web section of the Markup tab.

All valid attributes, the types of values they support, and comments identifying the function of each tag are also listed on the Web Settings Attribute Inspector. To activate the Inspector for a specific tag, select the tag (see Figure 19.6). Note that some of the nonglobal tags are also included. These include tags that work in one browser, but not another. They will be indicated in the Info column as shown in Figure 19.7. Some of you might have already discovered these tags by trial and error. Two popular tags that work in one browser but not another are and .

Controlling How GoLive Writes HTML

409

FIGURE 19.6 When an individual tag is selected, its attributes and values can be viewed and edited in the Inspector.

FIGURE 19.7 The Info column specifies which tags are supported by only one browser.

19

Don’t be afraid to open the Markup tab of the Web Settings window! Some prefer to use it as a reference tool to locate tags when creating style sheets.

Now that you have a general understanding of the HTML tab, you will make changes to the attributes of the and tags.

410

Hour 19

You will be making changes to your Web settings. To keep the original defaults, make a backup of the Settings folder located in the GoLive Application folder. Discard the new Web Settings folder when you’re done with this section and replace it with the original folder.

, TO DO

To Do: Changing the Default Attributes of the Tag In this lesson, you will remove the 1-pixel border that is created by default in GoLive. After you have changed the Web Settings to have this attribute as a default, every new table will have a border of “0.” 1. From the Edit menu, select Web Settings. 2. Select the Markup tab and turn down the arrow to the left of Web. Click HTML and scroll in the right pane of the Web Settings window to locate the Table tag. 3. Click the arrow to the left of the Table category and locate the attribute named border, as shown in Figure 19.8. FIGURE 19.8 Access a tag’s attributes by selecting the arrow to the left of the tag’s name.

4. The Inspector now becomes a Web Settings Attribute Inspector. Check the box Create This Attribute. 5. This is where you place a value for a selected attribute that you want to appear as the default. In this exercise, type 0 (zero).

,

6. Have a GoLive page open and drag a Table object from the Basic section of the Objects palette. It will have a border set to zero.

Controlling How GoLive Writes HTML

411

Just because you set an attribute to be the default in the Web Settings window does not mean that you can’t change the item after it is on the page. This is done through the Inspector just like any other attribute.

Changing the Default Image Settings In this next lesson, you will change the attribute for an tag. Perhaps you want all your images to have the text running down the right side of the picture. Normally, this would have to be set by selecting the Image Inspector and choosing Align “left” from the Basic palette. By changing the image tag in the HTML tab of the Web Settings window, you can make the left alignment the default setting.

, TO DO

To Do: Changing the Default for an Image to Align Left In this lesson, you edit the tag to have the alignment set to left as the default. 1. From the Edit menu, select Web Settings. 2. Select the Web markup tab and scroll to locate the tag listed as img. 3. Click the arrow to the left of the img tag to list the attributes, as shown in Figure 19.9.

FIGURE 19.9 Click the arrow to the left of a tag to reveal its attributes.

,

4. Select the align attribute and find the Web Settings Attributes Inspector. 5. Check the box Create This Attribute in the Web Settings Attributes Inspector.

19

Hour 19

,

412

6. In some cases when an attribute is to be created, the values will appear in the popup menu of the Value check box, as shown in Figure 19.10. From the pop-up menu select the value “left.”

FIGURE 19.10 In many cases, values for the attribute are made available from a pop-up menu.

,

7. On a GoLive page, place an image and start typing. The text will run down the right side as you add additional lines because the image now has a default of “align-left.”

What does “Can Be Stripped” mean? Well, depending on your level of expertise, you might want to strip your page of any unnecessary code when exporting the site. This certainly is not an option for those at the basic level. There is a check box option for stripping out code from pages in the File Export window.

Adjusting How GoLive Previews with the Browser Profiles Tab When creating pages for various platforms, it is a good idea to preview how they will recognize the page elements. The Browser Profiles tab enables you to simulate, with the View palette, how fonts and other design elements display on Windows, Mac OS, and Wireless platforms. Settings in the Browser Profiles tab do not affect how Adobe GoLive writes HTML code or what the end user sees when visiting your site.

Controlling How GoLive Writes HTML

413

, TO DO

To Do: Selecting a Profile In this lesson, you investigate the Browser Profiles tab in the Web Settings window, and learn how to control the default preview settings that appear in the View palette. 1. Have a page open in GoLive. You can locate a sample page containing style sheets that will show you different previews as you select various profiles at http://www.golivein24.com. 2. Choose View from the Window menu. 3. In the Profile pop-up menu, you can select a variety of browsers and platforms, as shown in Figure 19.11. FIGURE 19.11 Choose the Profile that you would like to apply from the View window.

,

4. Choose any of the various browsers and notice how the page format and text changes. It is important to note that GoLive is not changing your code at all but simply using a database from the Web Settings window to recognize which elements are supported by various browsers and platforms. If they are not found, the element is considered unsupported and will not preview in GoLive. In this lesson, you will investigate the existing databases and learn how to create your own default database. Using the Browser Profiles tab of the Web Settings window, you can investigate, but not change, the default settings. Choose Web Settings from the Edit menu and click the Browser Profiles tab. Notice in Figure 19.12 that several combinations of browsers and platforms appear in the list. The default settings have locks to the right of them, meaning that you cannot edit any of the settings. You will also see a radio button signifying the default Root. This is the setting that will appear in the View window, unless otherwise specified. GoLive defaults to showing the GoLive Root.

19

414

Hour 19

Default Root (Will Appear in View Palette)

FIGURE 19.12 The Browser Profiles tab of the Web Settings window.

Name of Browser Platform of Browser

Status of Created Setting (Not Locked) Status of Default Setting (Locked)

Even though the default settings are locked, you can duplicate existing settings. Perhaps you want to create a set that represents browsers that do not support Cascading Style Sheets. You will create settings by duplicating existing Internet Explorer settings.

, TO DO

To Do: Creating Default Browser Profiles In this lesson, you will create a browser profile that represents a browser that does not support Cascading Style Sheets. Before starting this lesson, open a page that uses cascading styles or download one from www.golivein24.com. 1. Open the Web Settings window from the Edit menu. 2. Select the Browser Profiles tab, and click the item named Explorer 5 (Windows). 3. Select Duplicate from the Edit menu, or Command+D (Mac OS) or Control+D (Windows), as shown in Figure 19.13. This will duplicate the Explorer 5 settings. 4. In the Basic tab of the Root Style Sheet Inspector, rename this style no_css.

,

5. Click the Settings tab and uncheck Can handle Style Sheets, as shown in Figure 19.14. 6. Open a page that has Style Sheets applied and select your setting no_css from the profile pop-up menu in the View window. Style sheets no longer preview in GoLive.

415

,

Controlling How GoLive Writes HTML

FIGURE 19.13 Duplicate a setting by selecting Duplicate from the Edit menu.

FIGURE 19.14 Turn off the ability to view style sheets in the Settings tab of the Root Style Sheet Inspector.

,

19 The Browser Profiles tab of the Web Settings window does not actually change any values or attributes. It merely shows how elements will appear depending upon the database that has been selected as the Profile. In other words, anyone with a browser 4 or higher will see the style sheets on this page; you just won’t in GoLive while working with that Profile selected.

Summary In this lesson, you learned how to set your HTML source code to work with your design needs. From formatting of code to applying specific tag attributes, GoLive’s Web Settings window helps you define code preferences for future pages. You also learned how to control the Profile settings and create your own new settings.

416

Hour 19

Q&A Q By using the Markup tab of the Web Settings window, can I change an existing HTML tag? A No, the changes that you make on the Web database will take effect only in future HTML code. Q I used the Global tab to break my text at 30 characters. Is there a better way to set my copy to wrap within my open source window? A Yes—don’t forget the Source preference available under the Edit menu. Check the Word Wrap box and uncheck the Break text box in the Global tab of the Web Settings window.

Quiz 1. Which Web Settings tab will enable you to set all future attributes to appear in lowercase? a. The Browser Profiles tab b. The Global tab c. The Markup tab 2. What is one reason you would create your own Browser Profile setting? a. To change the way the viewer sees style sheets on your page b. To change the style sheet preview in GoLive c. So that default style sheets can be applied to text for all future pages 3. What tab and category would you select to make a change to the Table tag? a. Markup tab, Table b. Browser Profiles tab, Table c. Markup tab, Misc.

Quiz Answers 1. b. The Global tab will enable you to set all future attributes to appear in lowercase. 2. b. You would create your own CSS default setting to change the style sheet preview in GoLive. 3. a. You would select the Markup tab, and Table category to make a change to the Table tag.

Controlling How GoLive Writes HTML

417

Exercises Before doing any exercises, make sure that the backup of your original Settings folder exists. If not, copy the Settings in the GoLive program folder and store in a safe place. 1. Use the Markup tab to add extra space in each cell. (Cell padding is the extra space entered by pixel amount in the Table Inspector.) To permanently have extra space in each cell, choose the tag and change the cellPadding attribute to the value 5. 2. Permanently remove cell spacing. (Cell spacing is the space where the background of the page shows through between the cells.) Simply select the cellSpacing attribute and change the value to 0. 3. Build a page using Cascading Style Sheets and experiment with the View window. Change the profile to select different settings.

19

HOUR

20

Creating a Site Diagram In this hour, we’ll learn how to plan out our Web site using the Diagrams features in GoLive. Using the Diagrams tab in the Site window, we can plan the basic design and navigation of the entire site and test it before submitting the layout to an active site. In this hour, you learn • How to create a site diagram • How to create sections, pages, and groups • How to annotate the diagram • How to add content to the pages • How to merge the site diagram with your existing site • Creating a Collection • Using the Master tab

420

Hour 20

Creating a Site Diagram The Design view, shown in Figure 20.1, enables you to create a Web site on the computer much like you would with pen and paper—scribbling out thoughts, planning pages and links, and breaking out major topics. Using the design tools in GoLive, Web designers have the freedom to plan their sites in a provisional method and, when ready, submit the design as a live site or merge into an existing site. FIGURE 20.1 In the Design view, a flowchart can be easily created and edited, without affecting the live site.

A site diagram is exactly what its name implies: a diagram for a site. In the Design view, we can add, delete, and reposition pages and their hierarchy, as well as create links and annotate our work. You must be working in an active site to take advantage of this feature. A diagram is best created before pages are already developed in a site, but a diagram can also be used for a section or subgroup of an existing site.

, TO DO

To Do: Creating a New Site Diagram In this section, we create a site and all the pages within it by using the diagram feature. Essentially, we are using the Design view as a testing area before converting the site to live pages. In this hour’s lesson, it is very important to follow the To Do’s in sequence because each one is based on the previous To Do.

,

1. Create a new blank site. Name the site Diagram Site. For information on how to create a blank site, see Hour 2, “Creating a Site File.” 2. Select the Diagrams tab of the Site window as shown in Figure 20.2.

421

,

Creating a Site Diagram

FIGURE 20.2 The diagram features are accessible from the Diagrams tab of the Site window.

3. Select New Site Design Diagram from the Diagram menu. 4. An untitled design appears. Change its name to my_diagram.

,

5. Double-click the named site. This opens the site diagram, which is the work area for creation, staging, and annotating. Leave this site open for the next lesson.

The Design Tabs After a site diagram is open, you see four tabs: Design, Master, Staging, and Annotations, as shown in Figure 20.3. Each has a role in preparing the design to be a live site. FIGURE 20.3 A site diagram includes the Design, Master, Staging, and Annotations views.

20

The Design view tabs offer the following capabilities: • Design—This view is the paper and pencil of the design process. In this view, pages are dropped, reorganized, linked, and grouped. As we go through the design thought process, we can lift pages and links and move them to more appropriate locations.

422

Hour 20

• Master—Objects on the master page are automatically replicated to each page of the diagram. Good for logos or other elements that you want repeated in the diagram. • Staging—We use the Staging view to check our diagram and make sure that all links, pages, and folders are valid before converting to a live site. • Annotations—The Annotations view includes notes that we create. Annotations include a subject line and comment and are organized by subject.

Anchoring a Site When we reach the stage of submitting our diagram, we need to have the diagram anchored to a page from our site. If a diagram is not anchored to a page, the pages become scratch pages, meaning that they exist but are not linked to a page. It is best to anchor a diagram right from the start. In the following To Do, we anchor our diagram to the index page from our new blank site.

, TO DO

To Do: Anchoring a Diagram to a Page In this lesson, we learn how to anchor our diagram to an existing page. Follow these steps to ensure that when the site is complete, we don’t have what GoLive refers to as scratch pages, which are pages with no navigational direction. 1. Open the site diagram you created earlier and select the Diagrams tab of the Site window. Double-click mydiagram to open the diagram. 2. Position the Files tab of your Site window and the Design window so that you can see both, as shown in Figure 20.4.

,

FIGURE 20.4 Position the Files tab of your Site window and the Design window so that both are in view.

,

Creating a Site Diagram

423

3. Select index.html from the Site File view and drag it into the Design view, as shown in Figure 20.5.

FIGURE 20.5 To anchor a diagram to a page, drag a page from the Files tab of the Site window into the Design window.

, Any page can be an anchor, meaning that if you want to start a diagram for an existing site, you can anchor a diagram to a file within the subtree of the site.

Creating Sections, Pages, and Groups Now that we have an anchored diagram, we can familiarize ourselves with the basic tools to create the pages. Select the Diagrams button on the Objects palette. The Diagrams button contains several tools that we need to create sections, pages, and groups, as shown in Figure 20.6. Generic Page Diagram Group Diagram Section Diagram Annotation

FIGURE 20.6 Select the Diagrams button on the Objects palette to view the diagram tools.

20

424

Hour 20

Starting the Diagram To start the diagram, we first define a section. A section is a hierarchy of diagram pages, usually a subtree. We can use a section for simple file management or to build a group of pages with similar filenames and stationery. Each section is essentially a folder or group of Web pages in our site. In the next lesson, we put this into practice.

, TO DO

To Do: Creating a Section and Child Pages In this lesson, we create sections, add pages, and group items together in the Design view. Before starting, make sure that you have followed the lessons to this point, and have a diagram that is anchored to the index page of your site diagram. 1. Click the Diagrams button of the Objects palette and drag the Diagram Section object to the Design view, as shown in Figure 20.7. The bold text in the name indicates that this is a section page.

FIGURE 20.7 Create a new section with the Diagram Section object.

2. In the Diagram Section Inspector, shown in Figure 20.8, give the section a new filename. Name this file books. When we add child files to this section, the filename will remain constant; for example, the first child will be named books.html, the second books1.html, and so on.

,

FIGURE 20.8 Creating a filename keeps the page names similar in the section.

,

Creating a Site Diagram

425

3. Type publications into the Folder text box. Each section is included in a folder. You can type an existing folder name here or you can enter what you would like a new folder to be labeled when the diagram is submitted. 4. In the Stationery and Template pop-up windows, we can choose a stationery or template file to be used as a base for new child files in this section. In our example, we will leave this blank. Any site stationery or template files created are listed in the pop-up menu, as shown in Figure 20.9.

FIGURE 20.9 Any available stationery and template files will be visible in the pop-up window.

5. Now let’s generate links. As you design a Web site, you begin by building its structure, much like a flowchart. As a designer, you can arrange child pages in a hierarchy with pending links, starting with links from and to the section page. Pending links are not hyperlinks; they are for design and thought purposes. At a later stage, pending links can be changed into hyperlinks that reflect them. In this lesson, leave the Parent field set to “to child and back,” and the Sibling field at “to adjacent siblings,” as shown in Figure 20.10.

,

FIGURE 20.10 The Generate Links fields allow the designer to decide how pending links should be set up.

20

Hour 20

,

426

6. We will add three additional pages by entering 3 into the Count text box and clicking on the Create New Pages button. Note that all three pages are labeled: books.html, books1.html, and books2.html. Your Diagram view should look similar to the one shown in Figure 20.11.

FIGURE 20.11 Adding pages through the Section Inspector allows you to name the files automatically.

, Choose View from the Window menu and then click the Display tab to set user preferences such as window shape and size. Show your pages as icons, thumbnails, frames, or ovals, and then choose how large you want the icons to be with the Frame Size pop-up window.

Grouping Pages Grouping pages is helpful when trying to organize many pages in a large site. Grouped pages can be moved, copied, and deleted together. A group can also be tucked away with the pages enclosed to keep our Design view organized, as shown in Figure 20.12. FIGURE 20.12 Grouped items can be moved, copied, deleted, and tucked away together.

, , TO DO

To Do: Grouping Selected Pages In this lesson, we organize our Diagram window by grouping several pages together. 1. Open the my_diagram diagram. If you closed the site named Diagram_Site, reopen it and click the Diagram tab. Double-click my_diagram. 2. Select two child pages from our section. Select multiple pages by using Shift+click (Mac) or Control+click (Windows).

Creating a Site Diagram

427

3. Choose Edit, Group from the menu. A group rectangle encloses the selected pages, as shown in Figure 20.13. FIGURE 20.13 Grouped items are enclosed in a group rectangle.

Use grouping to keep your design window less cluttered. After pages are grouped, you can hide the files by naming the group in the Inspector and clicking the Minimize button in the Group window.

4. Click the group rectangle and rename the Group, Two text box.

Book Pages,

in the Name

5. Collapse the group by clicking on the minimize button in the upper right of the group rectangle, as shown in Figure 20.14. FIGURE 20.14 Collapse and reopen the Group window by using the Minimize button.

, As you begin growing your diagram you will surely need to use the Zoom pop-up menu. In the lower left of the Diagram window choose different zoom amounts to zoom in or out of your diagram. If you prefer using keyboard commands Option+click on the Macintosh and Shift+click on the PC to zoom to 200% and back again.

Annotating the Diagram Annotations are a great method to save comments about the diagram or pages within. They appear as note cards in the Design view and can be repositioned over existing pages or left loose in the Design area.

20

428

Hour 20

Use annotations to make sure that ideas don’t slip your mind, or if additional information is needed before completion. They are visible in two places and do not carry over to the live site. The two places you will find annotations are in the Design window, as shown in Figure 20.15, and the Annotations view of the Diagram window, as shown in Figure 20.16. FIGURE 20.15 Annotation subjects and comments can be added and made visible in the Design view.

FIGURE 20.16 Annotations as they appear in the Annotations view.

Annotations are created using the Annotation object from the Diagram section of the Objects palette, as shown in Figure 20.17. FIGURE 20.17 Use the Annotation object to create comments about your diagram.

, TO DO

To Do: Adding an Annotation to a Diagram In this lesson, we cover how editing comments are added to a diagram. We learn how to add, edit, and cover the display options for a diagram annotation. 1. Open the my_diagram diagram. If you closed the site we created called Diagram_Site, reopen it and click the Diagrams tab. Double-click the previously created site my_diagram.

,

Creating a Site Diagram

429

2. Display the Inspector and the Diagram section of the Objects palette. 3. Drag the Diagram Annotation object from the Diagram section of the Objects palette to a page, line, or other location in the design. Note that it becomes attached to the item that is highlighted as you drag the annotation into the design window. When you annotate a diagram, the annotation appears as an icon, as shown in Figure 20.18.

FIGURE 20.18 An annotation as it appears on the diagram.

4. Type the subject line and annotation text in the Annotation Inspector, as shown in Figure 20.19. FIGURE 20.19 Type the contents and subject in the Annotation Inspector.

5. In the Annotation Inspector, you have the option of displaying the subject and text in the diagram along with the icon. Use the Position pop-up menu to change the placement of the subject and text.

An annotation added to an item stays with the item when it is moved. An annotation added to a line stays with the line when it is moved.

When using diagrams for presentations, use annotations to present key points about the Web design.

20

,

430

Hour 20

The Annotation View Annotations can be viewed and edited collectively in the Annotation view. In this view, you can see both the subject line and annotation text. Edit an existing annotation by selecting it and changing the text in the Annotation Inspector, as shown in Figure 20.20. FIGURE 20.20 In the Annotation view, you can see and edit all your annotations.

Adding Content to the Pages Until this point our pages have remained blank, but diagram pages can contain elements. Tables, images, text, and more can be added in the same way that you would add elements to a live page. To open a page in the Design view, double-click it, and then use the Objects palette to add items to the page. In our next lesson, we open an existing diagram page and add several elements to it.

, TO DO

To Do: Adding Elements to a Diagram Page Now that we have created pages, how do we now put elements on them? In this section, we take you through an exercise in which we change a diagram page’s title and add text and an image. 1. Open the my_diagram diagram. If you closed the site we created called Diagram_Site, reopen it and click the Diagrams tab. Double-click the previously created site my_diagram.

,

2. Locate the page named books.html and double-click it to open the page. 3. Click once on the Page icon to the left of the title to open the Page Inspector. Assign a color to the background. Then change the page title to Important Book Page.

,

Creating a Site Diagram

4. Click the page and add the text This

431

is the copy for my page on books.

5. Add an image the same way you would add an image to any GoLive page; that is, drag the Image icon out of the Basic section of the Objects palette and browse to locate an image.

,

6. Save and close the file. When the diagram is submitted, the elements created on the page are also applied.

Merging the Site Diagram with Your Existing Site The final stage is to make this diagram a part of the live site. There are many elements to consider when transferring a diagram to a live site. Consider the new pages, folders, and links that you have been freely creating on the Design view. All this freedom can lead to conflicts when combined with an existing site. The best way to verify the site diagram is to check it before submitting it. The next several steps use the Staging view of the Diagram window. The Staging view represents pages in a file menu, complete with all folders, files, and status, as shown in Figure 20.21. FIGURE 20.21 Using the tools in the Staging view, we will verify and submit a diagram.

20 The Staging Tools When in the Staging view, the toolbar presents three staging-specific tools: Check Staging, Submit All, and Recall All, as shown in Figure 20.22.

432

Hour 20

Check Staging

FIGURE 20.22 The Staging tools: Check Staging, Submit All, and Recall All.

Recall All

Submit All

These three tools on the Staging tab will help prepare your design for submission: • Check Staging—Verifies the diagram and checks for conflicts. • Submit All—Moves diagram pages to the Live Pages folder of the Staging window, creating actual pages in the Site window. • Recall All—Takes pages out of the live pages. They can still be edited as diagram pages and be resubmitted.

Checking the Site Diagram When you check a diagram, you determine whether the pages are connected by links to an anchor page, and whether there will be folder or filename problems when the diagram is submitted. You should always check a diagram and make fixes as necessary before you attempt to submit it. Note that diagrams with errors cannot be submitted. To check a diagram, do the following: 1. Open the diagram. 2. Click the Staging tab. 3. Click the Check Staging button on the toolbar, or choose Diagram, Staging, Check Staging from the menu. A checkmark in the Check column opposite a page means that its place in the diagram is okay. Other icons in the column indicate problems that need fixing.

Fixing Errors in a Site Diagram If an Error icon or Warning icon appears opposite a page in the Check column, as shown in Figure 20.23, use the information in the following list to fix the problem. •

file in use—This

error indicates that the page is open in a Document window. You need to close all pages in a diagram before submitting or recalling the diagram.

•

target folder—This error indicates that the target folder for the page could not be created when you tried to submit the diagram. This could be because of a name conflict with an existing folder. Change the Directory setting (folder name) in the Section Inspector for the page’s section.

Creating a Site Diagram

433

FIGURE 20.23 Common errors found when checking a diagram will be listed in the Check column.

•

section name—This

error indicates that a section page could not be named because a file with that name already exists in the target folder. Fix this error by renaming the page or specifying another folder for the page in the Section Inspector. index.html

•

stage in scratch—This

error indicates that the page is not linked directly or indirectly to an anchor page. Unless you want the page to be treated as a loose scratch page (no pending links) when the diagram is submitted, drag the page onto an existing page to establish a link.

Submitting a Diagram to a Site After you have completed the diagram check, you are ready to submit your diagram. Follow these simple steps to make your diagram live: 1. Open the diagram in a Site Diagram window and click the window. 2. Click the Submit All button on the toolbar, or choose Diagram, Diagram Staging, Submit All from the menu. Your diagram files are now moved to the Live Pages folder in the Staging view. You can also choose to submit just a selected item from the menu.

Recalling a Diagram from a Site To remove the diagram for update purposes: 1. Open the diagram in a Site Diagram window, and click the window. 2. Click the Recall All button on the toolbar, or choose Diagram, Staging, Recall All from the menu. Note that you can also recall just selected items using the Recall Items option from the Diagram menu.

20

434

Hour 20

Creating a Collection Creating a collection makes it easy for you to identify and select pages in a diagram. Collections can be named, colored, and highlighted with a spotlight, as shown in Figure 20.24. They do not have to be consecutive pages or grouped. To keep this simple we will create a new diagram in this same site. From the Diagrams tab of the Site window choose New Design Diagram from the Diagram menu, and name this diagram collections.

, TO DO

To Do: Creating a Collection In this lesson we will create a collection of two pages, use it for selection, and edit it. 1. Click the Design tab of the Diagram window and drag and drop two pages from the Diagram section of the Objects palette. Select both pages using the Control key. 2. Select Create Collection from the Diagram menu. 3. A window appears, as shown in Figure 20.24. Type the name of the collection; we used book pages as the name. You can also assign a color to the collection by clicking on the default gray box to the right of the collection name. Make sure that Add Selection and Make Spotlight are checked, and click OK. FIGURE 20.24 Assign selected pages a collection name and color.

4. The pages will become spotlighted, as shown in Figure 20.25.

,

FIGURE 20.25 Pages of a collection become spotlighted.

5. To rename the collection, delete it or change the color, and choose Edit Collections form the Diagram window.

,

Creating a Site Diagram

435

Now that you have created a collection it is easy to select the pages using Select Reselect Collection from the Diagram menu, or from the Collection pop-up menu in the Design tab of the View window, as shown in Figure 20.26.

FIGURE 20.26 Easily select collections from the Collection pop-up menu in the View window.

,

Using the Master Tab A new feature that has been added to GoLive 6 is the Master tab of the Diagram window. This neat little feature enables you to create elements that will appear on every Diagram page. Diagram pages are created automatically when the diagram you are working on surpasses the size of the page defined in the File Page Setup window in GoLive. The default is letter size, but you can change it and the new page size will be reflected in your diagram window. Use this feature by grabbing the Box Object from the Diagram section of the Objects palette, and inserting site-specific information, such as your company name, and so on, as shown in Figure 20.27. FIGURE 20.27 Use the Box Object to create an element of text that will automatically be placed on all diagram pages.

20

436

Hour 20

Master items automatically appear on all diagram pages, but only have to be updated on the Master tab to update all pages. Notice in Figure 20.28 that any Master items will be visible in the Design tab, but will show crop marks when selected, noting that it is a Master item. FIGURE 20.28 Items placed in the Master tab show up on the Design tab with crop marks when selected.

Master items can be hidden by selecting Hide Master Items from the display tab View in the Window menu.

Summary You should now be familiar with the steps necessary to create a basic site diagram, check it for validity, and submit it as a live page. You have witnessed how flexible you can be with your diagram, pages, and links while still in the planning stages of building a site. Use this design process for presentations, making changes for customer approval, and repurposing diagrams for multiple sites. A site can have many diagrams, so go crazy while creating various versions of your diagram.

Q&A Q If I add and delete pages to my diagram, am I adding and deleting pages to my actual site? A No, the diagram is totally separate from your live site until you submit the diagram. Then the diagram pages will become live pages in your site. Q What if I want to replace my diagram in my live site with another? A At any time, you can recall a diagram by selecting the Recall Diagram tool in the Staging Toolbar. This removes the pages from the live site. You can then resubmit another diagram. Q I want my client to be able to read my annotations. Is that possible? A Yes, after an Annotation object is dragged out to the design view, and subject and text have been entered, check Display Subject Line and Text in the Annotation Inspector. The annotation will be visible on screen and when printed.

Creating a Site Diagram

437

Quiz 1. What is an anchored page in a site? a. The last page that is made in the Design view b. A template for other diagram pages c. The main page from which the diagram is created 2. What object is used to create a subtree in a diagram? a. Diagram Section b. Annotation c. Group 3. What happens when you submit a diagram? a. The pages become live pages in the Site File view. b. Diagram pages print with annotations for presentations. c. The Design view is saved and closed.

Quiz Answers 1. c. The main page from which the diagram is created is the anchored page in a site. 2. a. Diagram Section is the object used to create a subtree in a diagram. 3. a. When you submit a diagram, the pages become live pages in the Site File view.

Exercises Learn more about creating diagrams by jumping right in and using the feature. Try some of the following exercises to build your diagram-staging skills: 1. Create a new blank site and experiment with many different diagrams and variations. 2. Try adding elements to diagram pages and submitting them to live pages. 3. Print out your diagrams with annotations and use them when presenting a proposed Web site or revision.

20

PART VI Publishing and Maintaining Your Web Sites 21 Working with Source Code in GoLive 22 Cleaning Up Your Web Site 23 Uploading Your Web Site to Your Web Server with FTP 24 Making Your Web Site Search Engine Ready

HOUR

21

Working with Source Code in GoLive Whether you come from a background of HTML programming or jumped right into using an HTML editor, there will come a time when you need to edit source code. This is mostly because browsers and the elements they support are constantly changing. Trust that when the time comes to delve into using GoLive’s source editing tools, you will find them invaluable. In this section, we cover how to use four source code editing methods available in GoLive: the HTML Source Editor, the HTML Outline Editor, the Split Source window, and the Source Code window. All four have unique features and benefits that make them beneficial in different circumstances. In this hour, you learn about • Editing HTML in the Source Editor • Using the HTML Outline Editor to change source code • Using the Split Layout and Source View • Using the Markup Tree

442

Hour 21

• Using the Source Code palette • Finding code with the Element Finder • Changing preferences that alter the appearance and formatting of your source code • Printing your source code

Editing HTML in the Source Editor By selecting the HTML Source Editor, shown in Figure 21.1, you can view a page’s HTML source code. Use this view to check the HTML syntax, fine-tune code, or build Web pages from scratch. Just as in any other text-editing program, you can cut and paste from one document or application to another. If you are an experienced 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. FIGURE 21.1 Edit the source code on the HTML Source Editor tab.

After the HTML Source Editor is active you will see the underlying code that creates the Web page. By default, tags are bold and color-coded, as are attributes and values. As you type the Source Editor, the colors will help to indicate whether elements are entered properly.

Working with Source Code in GoLive

443

Text selected in the Layout mode stays selected in the Source mode, making it easy for you to find the code that you want to edit.

There are many options for viewing the code in the Source Editor, most of which are determined by the choices at the top of the window shown in Figure 21.2. We will discuss the preferences that customize these choices in the last section of this hour. Colorize URLs Colorize Elements Colorize Nothing Check Syntax

FIGURE 21.2 Change the view of the HTML Source Editor by using the choices at the top of the window.

Word Wrap Display Line Numbers

Colorize Server Side Code Colorize Media and Links Colorize Detailed

The following list describes the options available in the HTML Source Editor: • Check Syntax—In Source view, you can make sure that your Web pages contain valid code based on the browser set selected in the Browser Compatibility menu. When clicked, the Check Syntax button is selected and a window appears, as shown in Figure 21.3, giving you the opportunity to check your source code specification. For example, if it is important to remain compliant with HTML version 3, check the radio box to the left of HTML 3.2. In HTML 4, however, transitional is the common pick. This will recognize a cross between older HTML tags such as and , and newer CSS definitions. FIGURE 21.3 Check for syntax errors in various specifications with the Check Syntax button.

21

444

Hour 21

If the checker detects errors they will be listed in a Highlight window, shown in Figure 21.4, so that they can be addressed. FIGURE 21.4 A list of errors will appear in the Highlight window so that each error can be addressed.

Besides showing Syntax and link errors (bug), you can also use the Highlight window to select elements in the code. Notice in Figure 21.5 that when img is selected from the Element pop-up window, that all image elements are highlighted. The highlight color is determined by selections in the Color tab, located directly behind the Highlight window. FIGURE 21.5 Use the Highlight window to select elements on the page.

• Colorize Nothing—With Colorize Nothing selected, all syntax highlighting is turned off. • Colorize Detailed—With detailed syntax highlighting turned on, you will see all the tags, attributes, values, media, links, URLs, and server code highlighted.

Working with Source Code in GoLive

445

Even as you type in the HTML Source Editor, the syntax highlighting recognizes closed tags as well as attributes and values. The highlighting continues as you type. For those of you who come from the HTML programming world, this can be an indispensable feature. To make a link or media file easier to find, you can turn off the detailed syntax highlighting and choose one of the more specific syntax highlighting methods: • Colorize Elements—This choice highlights—in similar colors—tags, attributes, and values, making it easier to locate HTML elements in their entirety. • Colorize Media and Links—This choice highlights just the media and links. The entire tag is referenced. • Colorize URLs—This choice highlights just the links to URLs. Only the actual URLs are highlighted when this is selected. • Colorize Server Side Code—This choice highlights just the server code, such as ASP references. • Word Wrap—Click this box to have text wrap automatically based on the size of the Source window. • Display Line Numbers—Another indispensable feature. Set your code to use line numbers. When errors arise and line numbers are provided, you can easily locate them. This can be set as a default in the source preferences.

, TO DO

To Do: Adding Source Code in the Source Editor To get the full understanding of how to use the HTML Source Editor, we will add code in this window. In our example, we will hand-code a font tag that will include an attribute and a value. 1. Open a new GoLive page, and click the HTML Source Editor. 2. In between the tags, enter the following text: This text will appear Red

3. In front of the text, enter the tag with the attributes and value: This text will appear Red

Make sure that you enter the end font tag after the text.

,

4. Note that although you typed the tag, attribute, and value, the text color changed appropriately. Click the Layout tab to switch your view to the Layout mode. Your text is red!

21

446

Hour 21

Using the HTML Outline Editor to Change Source Code The HTML Outline Editor, shown in Figure 21.6, provides a graphic view of source code that some designers prefer. The major benefits of this view are that tags are indicated very clearly, attributes can be selected from pop-up menus, and values can be entered into text boxes. It is a very organized working mode, and is especially helpful to those less educated as to what attributes apply to certain tags and where the values belong. FIGURE 21.6 The Outline Editor provides an organized method of working in the source code.

Conserve space in the Outline Editor by collapsing tags and the code between them. By clicking on the arrow to the left of the tag, you can close and open the tag to hide or reveal code.

The Outline Editor wouldn’t be much help to us if all we could do was select and edit existing code. So, before we start editing code, we will learn how new tags are inserted. New tags are entered into the HTML Outline Editor by using the element selectors available on the toolbar, shown in Figure 21.7. • The New Element button inserts a new HTML tag below the currently selected tag. • The New Attribute button inserts a new HTML attribute in the currently selected tag.

Working with Source Code in GoLive

447

New Element New Text

New Generic Element

FIGURE 21.7 The HTML Outline Editor Toolbar. New Attribute Toggle Binary New Comment

• The New Text button inserts a new HTML text box below the currently selected tag. • The New Comment button inserts a new HTML comment box below the currently selected tag. • The New Generic Element button inserts an empty tag so that you can enter nonHTML code, such as XML, in your document. • The Toggle Binary button toggles the view of the tag format from unary to binary and vice versa. Unary tags don’t have an end tag, whereas binary tags have a start tag and an end tag.

, TO DO

To Do: Editing the Source Code in the HTML Outline Editor In this lesson, we enter a (table) tag. The table we create will have a colored background and include text in a single cell, thereby giving us the opportunity to experience many features in the HTML Outline Editor. 1. Create a new GoLive page. 2. Choose the HTML Outline Editor tab. Even though you have not placed any elements on the page, you will see code indicating to the browser that this is an HTML page, as shown in Figure 21.8. FIGURE 21.8 Even on a newly created page, source code already exists.

,

21 3. Select just the start tag and click the New Element button on the Toolbar. The new element will be placed after the tag, as shown in Figure 21.9.

Hour 21

,

448

FIGURE 21.9 New elements are inserted after the selected tag in the Outline Editor.

4. Enter the word table into the text area as shown in Figure 21.10. When you press the Enter key, the table tag and its corresponding end tag are created. FIGURE 21.10 Replace the word element with the word table.

5. Click the triangle to the right of the table tag. GoLive recognizes the tag and offers the appropriate attributes. Select the attribute bgcolor, as shown in Figure 21.11.

,

FIGURE 21.11 GoLive recognizes tags and offers the appropriate attributes.

,

Working with Source Code in GoLive

449

6. We can either drag a color to the color swatch from the Color palette, or enter a hexadecimal value into the text box. Enter the hexadecimal value of #FFFFCC into the text area. 7. A table without information in it is not really a table, so click the New Element button to create a row and a cell. First enter tr (table row tag). Then, with the u element selected add another new element named td (table data tag), as shown in Figure 21.12.

FIGURE 21.12 Create a cell for the table by entering a

(table data) tag. 8. Next, we add some text to our cell. Click the New Text button on the Toolbar and enter This will appear in the cell into the text area, as shown in Figure 21.13. FIGURE 21.13 Use the New Text button from the Toolbar to add copy to your page. , 21 9. We are finished creating our one-cell table with text. Click the Layout tab to see the results. The finished table is shown in Figure 21.14. Hour 21 , 450 FIGURE 21.14 The finished one-cell table in the Layout view. , When working in both the HTML Source and Outline Editor tabs, you can drag HTML element icons from the Objects palette onto your page and use them as editable tag templates. After inserting an element, you can edit its attributes and values. Using the Split Layout and Source View Click the little button in the lower left of your page, and enter into the split-screen mode of GoLive (see Figure 21.15). FIGURE 21.15 This button in the lower left of your page toggles between splitting the screen to show or hide the source code. When you are in the split-screen mode you can edit your page in either the layout mode or the source mode, viewing both at the same time. , TO DO In this lesson we will gain some experience working with the Split Layout and Source View. , To Do: Working in the Split-Screen Mode 3. In the Source view change the bgcolor attribute value to red, as shown in Figure 21.16. 1. Create a new blank GoLive document. 2. Click the Split Layout and Source View button in the lower left of your GoLive page. 451 , Working with Source Code in GoLive FIGURE 21.16 Change the color value for the body tag in the Source view. 4. Click in the Layout view and the background color of the page will change to red. , 5. Return to the full-layout mode by clicking the Split Layout and Source View button again. Using the Markup Tree To identify the Markup Tree, look in the lower left of the page window, to the right of the Split View Toggle button and notice the Markup Tree, as shown in Figure 21.17. As you select different elements on your page, whether in Layout or Source View, notice that the Tree indicates where your cursor is located in relationship to the surrounding tags. FIGURE 21.17 The Markup Tree indicates where in the code your cursor is located. The Markup Tree is extremely helpful when trying to locate your way, between tags and place elements, accurately. Using the Source Code Palette Whether you are a serious HTML programmer or just someone who likes to dabble in the source code, you will really appreciate the Source Code palette shown in Figure 21.18. This palette, similar to the Split view, enables you to work in both the Layout view and the Source Code palette without having to switch views. Access the Source Code palette from the Window menu. 21 452 Hour 21 FIGURE 21.18 Using the Source Code palette enables you to work in the Layout view and the Source Code palette at the same time. Open an existing GoLive Source Code palette. Note that as you click text, images, tables, and so on, the Source Code palette reveals the underlying code. Editing changes can be done in either the Source Code palette or the Layout view, and are instantly updated in both. The Source Code palette works only in the Layout view. Many options that make viewing the code easier are available on the Source Code palette’s pop-up menu (shown in Figure 21.19). FIGURE 21.19 Options to change the view of the Source Code palette are available in the pop-up menu. • Local Mode can help alleviate some confusion if you are not familiar with HTML code. This option displays the HTML code for only the element selected in the Layout view. • Word Wrap wraps the text to the edge of the Source Code palette. • Display Line Numbers shows code line numbers to the left of the code. • Dim When Inactive dims the contents of the Source Code palette when you’re working in the Layout tab of the Document window. As soon as the Source Code palette is reactivated, the dimming feature is turned off. Working with Source Code in GoLive 453 , TO DO To Do: Working with the Source Code Palette In this lesson, we use the Source Code palette to change the color of some text. 1. Create a new GoLive page. Make sure that the Source Code palette is open. (The Source Code palette is available under the Window menu.) 2. Using the pop-up menu in the Source Code palette, turn on the Word Wrap option. Leave the other options unchecked. 3. On the Layout view type GoLive is lots of fun to learn! Select the words lots of fun and use the Text Color box in the toolbar to change its color to blue. Leave the text selected. 4. In the Source Code palette the same text is activated, making it easy to locate the font tag. Select the color that is listed between the quotation marks and change it to green, as shown in Figure 21.20. FIGURE 21.20 Select the value for the font color attribute in the Source Code palette. , 5. Click back on the Layout view to activate the change. Finding Code with the Element Finder If you have ever experienced how literal the find-and-change utilities can be in most applications, you will certainly appreciate the intelligence of the Element Finder in GoLive. The Element Finder is used to locate specific HTML elements in the source code and make indicated changes to them. Available through Edit, Find in the menu, the Element Finder understands HTML structure and will look for acceptable variations in HTML elements. For instance, if you want to find every page that has bgcolor attribute=”yellow”, a standard search engine would ignore instances such as bgcolor=yellow, where quotation marks are not used. But the Element Finder understands that in the HTML structure it is acceptable to have some attributes with quotation marks and others without, and finds variations of your code throughout the specified pages. 21 454 Hour 21 The Element Finder Defined We now take a more detailed look at the Element Finder and how to use it. The Element window includes three sections, as shown in Figure 21.21. FIGURE 21.21 The Element Finder is an intelligent searchand-replace tool for source code. The top Search section is where you specify search criteria, such as what HTML elements and attributes you want to locate. The middle Action section is where you set actions you want carried out on any HTML elements and attributes found during a search. This would include changes in the elements. The lower Find In section enables you to set the scope of a search. Do you want to search in one file, several unrelated files, or an entire site? , TO DO To Do: Using the Element Finder Feature In this lesson, we use the Element Finder to find source code on a selected page. We first create a sample that includes several images. Then, through the Element Finder, we locate the (image) tags and change the border attribute from 0 to 10. It won’t be pretty, but will certainly be apparent when the change occurs. 1. First, create a sample file. This file should have at least three placed images, using GoLive’s default border of 0. You can also locate a file to use for this lesson at http://www.golivein24.com. , 2. Save the file as element.html in a convenient location, such as the Root folder of a site. The name is not important because we are just using “element” for our exercise. The file, as long as it has been saved, can remain open. 3. Select Find from the Edit menu and choose the Element tab. In the top (Search) section of the Element Finder, choose Name Is from the first pop-up window. In the second pop-up menu, you can either enter a tag or choose one from the fly-out menu as shown in Figure 21.22. 455 , Working with Source Code in GoLive FIGURE 21.22 The fly-out menu provides you with a list of tags from which to choose. 4. For this exercise, select img from the fly-out menu. 5. Based on the indicated tag, different attribute selections will be available. Click the Attribute button to activate the fly-out menu and select border as shown in Figure 21.23. FIGURE 21.23 Based on the tag, the indicated attribute selections will change. , 6. appears in the text window of the Search section. We now need to add an operator and value. Select = from the Operator fly-out menu and enter the value 0, as shown in Figure 21.24. border 21 Hour 21 , 456 FIGURE 21.24 We can enter a tag, attribute, and value by using the menu items or by entering our own information. In our example, we are using the fly-out menus to define much of our search criteria, but note that you can also type your own search criteria into the text boxes. 7. In our exercise, we already instructed the Element Finder to locate the image tags with border values of 0. We now instruct it (in the Action section) to replace them with border values of 10. Note in Figure 21.25 that we leave the action that we want to perform set to Keep Element. , FIGURE 21.25 We choose to keep the element and change the value of our image border. , Working with Source Code in GoLive 457 The action choices are as follows: • 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. 8. Click the New Action button and in the Action pop-up menu of the Action section, select the following information, as shown in Figure 21.26: • Select set in the Action pop-up • Select attribute in the Attribute pop-up • Select the word value and change it to a value of 10 FIGURE 21.26 Use the Action settings indicated to change the value of the border from 0 to 10. 9. We will now indicate the pages that we want GoLive to search. Select the Files radio button, and click the Add Files button. From the directory, select the file we saved as element.html. , 10. Click the Start button at the top of the Element Finder. An alert message indicates that what you are doing will affect (1) and cannot be undone; acknowledge that by clicking OK. All images in the file will now have a 10-pixel border rather than the default value of 0. 21 458 Hour 21 Using Source Preferences to Change the Appearance of Source Code In this section, we review the preferences that affect how the source code is viewed in the HTML Source Editor. To activate the source preferences, select Preferences from the Edit menu, and then choose Source. Note in Figure 21.27 that when the source preferences are expanded, there are additional options such as Browser Sets, Font, Colors, and Printing. We will review the options in each of these source preferences. FIGURE 21.27 Turn down the arrow to the left of Source to view additional source preferences. The Basic Source Preferences There are standard source preferences that you might want to change to make viewing easier in the HTML Source Editor: • Enable Dragging of Marked Text—With this checked, text dragging is activated. • Bold for Tags—With this checked, all tags are indicated in boldface text. • Auto Indent—This check box determines whether lower-level HTML tags are automatically indented. The tab size of the indent is set for 4, but you can increase or decrease the indent amount by increasing or decreasing the tab size value. • Line Numbers—Check this if you want line numbers to display at the left margin. • Word Wrap—With this checked, your source code defaults to wrap at the end of the HTML Editor Source window. Working with Source Code in GoLive 459 Changing the Browser Compatibility Selections As mentioned earlier in the hour, browser compatibility is used in the HTML Source Editor to designate which warnings should be included in the error log. In this section, you learn where you can change the settings to include different browser sets or eliminate others. To change the HTML browser compatibility lists, follow these steps: 1. Select Preferences from the Edit menu. 2. Choose and open the source preferences. 3. Select Browser Sets. 4. When a set is selected, its compatibility sets are indicated to the right, as shown in Figure 21.28. FIGURE 21.28 As each set is listed, the compatible browsers can be viewed and edited. 5. In this window, you can activate an existing browser set and check which browsers or HTML versions are included in each set. You can also click the New button to create your own set, activating only the browsers that you want to be included in the custom set. Font Preferences for the HTML Source Editor The font preferences in the Source window are extremely helpful to those of us who don’t want to squint to read our source code. Using this preference, shown in Figure 21.29, a font, style, and size can be selected. This font selection affects how your source code will appear. It does not affect your HTML code; it is simply a visual preference. 21 460 Hour 21 FIGURE 21.29 Make viewing the source code easier by setting your own font preferences. Colors—Setting the Preference for Syntax Highlighting The Colors preference enables the designer to choose the default method for syntax highlighting and also to change the syntax highlighting color selections. If you prefer to choose a syntax highlighting method other than the default, change it by following these steps: 1. Choose Preferences from the Edit menu and open the Source preferences. 2. Select Colors and select the syntax highlighting that you want as default, as shown in Figure 21.30. FIGURE 21.30 Choose the default syntax highlighting from Colors in the Source preferences. Working with Source Code in GoLive 461 Changing the Color Preferences If you would rather use different colors for highlighting source code, choose Preferences from the Edit menu and follow these steps: 1. Click the Color option and select the syntax color you want to change. A color palette appears, as shown in Figure 21.31. FIGURE 21.31 Click a color in the Color Preferences dialog box to open the color palette. The palette for Windows varies in appearance. 2. Select a color from the palette or choose to define a custom color. Click OK when you have selected your new color. Printing the Source Code By selecting Print from the File menu, you can print the source code. The printing options, shown in Figure 21.32, enable you to control the default formatting. Many designers use these preferences to make the printed version of their page look different from the online version, perhaps for presentation reasons for review by others. FIGURE 21.32 Printing options give the designer the ability to change how the page appears in printed form. 21 462 Hour 21 Set the following options, which will apply to only the printed page: • Check the Use Printer Specific Settings option if you want to print using color attributes for syntax highlighting. • Enable the Use Special Font for Printing to apply a custom typeface, size, and style. Don’t forget: These settings do not change the view of code while in GoLive, but only when the source code is printed. Settings in GoLive are set in Source Preferences. Summary Now that you have discovered how manageable it can be to edit HTML in GoLive, you should feel more comfortable investigating the code behind the page. As you learned, by using the appropriate tools and features you can feel confident. GoLive not only makes source code readily available for changes, but also keeps track of its validity for you. The features discussed in this hour make HTML programming open to virtually all skill levels. Q&A Q What will GoLive do if I enter a tag incorrectly in the HTML Source Editor? A If you have Syntax Highlighting turned on, the color of the tag will continue throughout the text on your page, indicating that the tag has not been properly closed. If you have display errors activated, you would also see the error listed in the error log. Q I have a lot of code on my page. What is the easiest way to find exactly what I am looking for in the source code? A The best way to find specific elements in the source code is to activate them in the Layout view. Elements that are active in the Layout view are highlighted in the Source view, Source Split view, and the Source Code palette. The element’s code will be highlighted. In the Source Mode, if you don’t immediately see the highlighted text, choose Find Selection from the Edit menu. Q I used the color #00B63B for many of my table cells, but need to switch it to the Web-safe #33CC33”. What is the best way to do this? A Using the Element Finder, you can instruct GoLive to find every tag that includes that color value in its background attribute This information is in the Cell and replace it with This information is in the Cell Working with Source Code in GoLive 463 Quiz 1. Which of the listed Source views enables you to view the source code and Layout view at the same time? a. The Source Code palette b. The HTML Source Editor c. The Element Finder 2. Why would you change the Browser Compatibility pop-up window in the HTML Editor? a. To check the compatibility of your page with other browser versions. b. To rewrite the code for older browsers. c. To change the color coding of the tags, attributes, and values. 3. What will happen if I tell the Element Finder to locate all values and I forget to put quotation marks in the search criteria? a. The Element Finder will locate only the values without quotations. b. The Element Finder will locate the values with or without the quotations. c. A dialog box will appear, stating that I do not have valid search criteria. Quiz Answers 1. a. The Source Code palette enables you to view the source code and Layout view at the same time. 2. a. You would change the Browser Compatibility pop-up window in the HTML editor to check the compatibility of your page with other browser versions. 3. b. The Element Finder will locate the values with or without the quotations. Exercises By this time, you should feel comfortable enough to work with HTML in GoLive. Try the following exercises on your own to further develop your coding skills. 1. Create sample files and try entering your own source code into the HTML Source Editor. Watch how the colors change as you close values and tags. Sample of tags to practice with: Enter text here Enter text here 21 464 Hour 21 2. Create a three-column, three-row table and give each cell a different color. Use the Source Code palette to change the colors of the cells. Remember that after each change on the Source Code palette, you must click the Layout view for it to take effect. 3. Create a sample site with at least an index and two other blank pages saved into it. Use the Element Finder to locate the body tags and change the value of the background to black. HOUR 22 Cleaning Up Your Web Site As you work on your site, you’ll probably end up with some errors and extra pages. Before you launch your Web site, it’s important to fix any errors and delete any unneeded files. This housekeeping will help ensure that your visitors don’t experience any broken links in your site, your uploads don’t take longer than necessary, and you don’t use up too much server space. Let’s do some virtual housekeeping. In this hour, you will learn about • Finding problems in your Web pages • Fixing problems you find • Managing your site with the In & Out Links palette • Using the Change All References feature to manage your files • Using the Find & Replace tools • Trimming down your site with the Clean Up Site function 466 Hour 22 Finding Errors and Link Warnings It’s hard to fix something if you don’t know what’s broken, right? Well, GoLive’s Site window helps you figure out if you have any errors in your site and what pages they are located in. The first place to look for errors is in the Errors tab of the Site window. To open the Errors tab, use the Site, View, Errors menu command. Errors such as broken links, orphaned files, and incorrectly named files will appear in the Errors tab. Then look in the Status column of the Files tab of the Site window. If you have an error in a page, you’ll see a green bug icon in the Status column instead of a check mark, as shown in Figure 22.1. If you have a folder that contains a page with a bug, GoLive will show the green bug and triangle icons next to the folder. Bug and triangle icon FIGURE 22.1 GoLive puts a green bug icon in the Status column next to any pages or folders with problems. Bug icon To figure out exactly what’s wrong with a page, double-click it in the Site window to open the file in Layout mode. Some errors, such as missing images, will be obvious because you’ll see a broken image icon instead of the graphic you expected. However, errors such as broken text links or missing external CSS files will not be as obvious. To easily spot bugs on your open page, click the Link Warnings icon in the Toolbar (it is the icon that looks like a green bug). When Link Warnings is on, any errors will be framed with a shaded red rectangle, as seen in Figure 22.2. When the Link Warnings feature reveals your errors, it’s up to you to fix them. Usually, replacing a missing graphic or changing a broken link will solve the problem. If you have the same error on many pages, keep reading to learn how to fix them all at once, instead of page by page. Cleaning Up Your Web Site FIGURE 22.2 Turn on Link Warnings in Layout or Outline mode to easily spot your errors with a shaded red rectangle around them. Filtering Bugs Most of the time, GoLive does a great job at finding errors in your Web site. However, sometimes GoLive can be a little overzealous and report errors when there really aren’t any. A common example of this is when a user designs a form that calls a CGI script on his Web server and GoLive thinks the CGI is a missing file. Fortunately, GoLive allows you to filter out specific errors like this in the General section of the Application preferences. These error filters are called URL filters. , , TO DO To Do: Creating a URL Filter To create a new URL filter, complete the following steps: 1. Choose Edit, Preferences in the menu to open the Preferences window. 2. Click the General icon and select the URL Handling option. 3. Click the New button and type the text string that you want GoLive to ignore. A common URL filter is /cgi-bin/ because many Web designers reference CGI scripts that are in this special folder on their Web server, but not in their Site Root folder. Without this URL filter, GoLive would consider a reference such as /cgibin/sendmail.pl an error. Figure 22.3 shows two examples of URL filters in the URL Handling section of the General preferences. 4. When you are done adding URL filters to GoLive’s preferences, click OK to save the new preferences. 467 22 Hour 22 , 468 FIGURE 22.3 URL filters allow you to customize the error checking in GoLive’s Site window. , After GoLive updates all the open sites, any errors that match the URL filters you just entered will now be okay in GoLive and will no longer report an error. You can edit and delete URL filters, or add new ones at any time. Fixing Errors Fixing a few random errors is no big deal, but if you have several errors in your site, you’ll want to use some of GoLive’s more powerful site management tools to save time. Fortunately, GoLive makes fixing these errors pretty easy. Before we fix any more errors that might be in your site, make sure that your Site window is open and all your Web pages are saved. To update your Site window, make sure that the Files tab is active and select Site, Refresh View from the menu or click the Refresh View button in the Toolbar, as seen in Figure 22.4. Refreshing your site ensures that your Site window has a current list of all your files. (It might not be current if you’ve moved files in the Macintosh Finder or the Windows Explorer, rather than in the GoLive Site window.) After you update your Site window, it’s time to look in the Errors tab on the right side of the Site window. Two types of errors will be listed here: missing files and orphaned files, as seen in Figure 22.5. Cleaning Up Your Web Site FIGURE 22.4 Click the Refresh View button in the Toolbar to rescan your Site window for new files. FIGURE 22.5 The Errors tab of the Site window shows orphaned and missing file errors. Viewing Missing Files Missing files are listed under the Missing Files directory and have a red stop sign icon next to them. Missing file errors occur when a page references an image, or links to a page, that is missing in the file structure. They are usually a result of renaming or moving a file on your hard drive instead of in GoLive’s Site window. , , TO DO To Do: Fixing a Missing File Error To fix a missing file error, complete the following steps: 1. Select the missing file in the Errors tab of the Site window and notice that the Inspector changes to the Error Inspector. 2. Use the Point and Shoot tool in the Error Inspector to reroute references from the missing file to the correct file in the Files tab of the Site window, as seen in Figure 22.6. In this example, I’ve changed links to clients.html to point to clients_info.html, instead. 469 22 Hour 22 , 470 FIGURE 22.6 Use the Point and Shoot tool in the Error Inspector to fix missing file errors. 3. Before fixing the error, GoLive displays a Change Reference dialog box, as seen in Figure 22.7. This dialog allows you to confirm the change before it’s made. Click OK to complete the change and watch the progress bar as GoLive updates all your Web pages automatically. FIGURE 22.7 GoLive will show you a Change Reference dialog box so that you can confirm the change. , If you have more missing file errors in the Errors tab of your Site window, go ahead and fix the rest of these errors. Use the same three-step process described previously. Reviewing Orphaned Files Orphaned files are listed in the Orphan Files directory of the Errors tab. An orphan file error occurs when GoLive knows where the referenced file is on your hard drive, but it is not in the Site Root directory. This might happen if you add a graphic to a Web page without first adding it to your Site Root folder. Cleaning Up Your Web Site Although a page that includes a reference to an orphaned file might look okay on your computer, it will produce errors on a Web server because GoLive does not upload files that are not located in the Site Root folder. This means that you must fix any orphaned files before you upload your site or risk getting angry e-mails from your visitors. To fix an orphan file error, you have three options: • Add the orphaned files to your Site Root folder, and GoLive will automatically resolve the error. • Use the Clean Up Site command to copy all referenced files into the Site Root folder. This feature is explained in detail at the end of this hour. • Drag and drop the file(s) from the Errors panel to the Files tab of the Site window. Armed with these techniques, you should be able to resolve any errors in your Web site. Go ahead and fix any orphan file errors you have in your Web site before you proceed to the next section. Editing Your Site with the In & Out Links Palette Now that you have all your errors corrected, you might want to redirect some links or references within your Web site. For example, you might want to swap out an old logo with a replacement logo. You could open every page that uses the logo and replace it by hand, but that’s tedious and life is short. Instead, use the In & Out Links palette to make the change to many pages in just a few seconds. Changing graphics with the In & Out Links palette works best when the images have the same pixel dimensions. If you use images that have different pixel dimensions, the new image will be distorted in the Web page. , TO DO To Do: Using the In & Out Links Palette To edit your site with the In & Out Links palette, complete the following steps: 1. Open the In & Out Links palette under the Window menu or by clicking its icon in the Toolbar. 2. Select a file in the Files tab of the Site window and notice how it appears in the In & Out Links palette, as seen in Figure 22.8. 471 22 Hour 22 , 472 FIGURE 22.8 Select a file in the Files or External tab of the Site window, and it will appear in the In & Out Links palette. The file you have selected appears in the middle of the In & Out Links palette with a list of files on the left and right sides. Pages on the left side are pages that reference your selected file, whereas files on the right side are files that are referenced by your selected file. In this case, we are interested in the files on the left because they reference the selected old_logo.gif image. 3. To change all the references to the old_logo.gif file throughout the entire Web site, use the Point and Shoot tool next to the old_logo.gif file in the In & Out Links palette. 4. Point to the new_logo.gif file in the Files tab of your Site window and let go. Figure 22.9 shows this Point and Shoot method in action. FIGURE 22.9 Use the Point and Shoot tool in the In & Out Links palette to change references throughout a Web site. 5. Before GoLive makes the change (which you cannot undo, by the way), it warns you with a Change References dialog box. The Change References dialog box allows you to approve or deny the change before it is executed. , 6. Click the OK button if you decide to go ahead with the change and watch GoLive work wonders on your Web site. Using the In & Out Links palette to quickly change multiple links, or image references throughout an entire Web site, is a huge timesaver that will make you a more productive Web designer. Cleaning Up Your Web Site These features also work with Web site URLs and e-mail addresses from the External tab of the Site window. Using the Change References Feature The Change References feature is similar to the In & Out Links palette, but with a little more flexibility. For example, instead of being limited to existing objects in the Site window, the Change References tool could be used to change all references to http://www.apple.com into references to http://www.adobe.com. , TO DO To Do: Changing References To use the Change References feature, complete the following steps: 1. Select an object in the Files or External tab of the Site window as the reference you want to change links from. 2. Choose Site, Change References from the menu and you will see the Change References dialog box, as shown in Figure 22.10. The Change References tool can also be invoked by clicking its icon in the Toolbar. FIGURE 22.10 The Change References dialog box enables you to easily change references throughout an entire Web site. 3. In the bottom half of the Change References dialog box, you can either use the Point and Shoot tool, click the Browse button, or type the address of the new file or address you want to reference. 4. When you have both fields entered, as shown in Figure 22.11, click the OK button to execute the change. Because you cannot undo this change, GoLive will show you a Change References dialog box that lets you approve or deny the change. , 5. Click the OK button if you want to proceed with the change, and GoLive will change all references from the first object to the second object. All the references to the old file are now updated and link to the new file. 473 22 Hour 22 , 474 , FIGURE 22.11 Enter the From reference in the top field and the To reference in the bottom field before clicking OK. Using Find & Replace GoLive’s Find & Replace features are very robust and full of options. Although the In & Out Links palette and Change References tool allow you to redirect file references, the Find & Replace tools let you change any selection of text or HTML source code in your Web pages. Used creatively, the Find & Replace tools can save you a lot of time making repetitive changes on your Web site. For example, if a company changes its mission statement, you can use Find & Replace across the entire Web site instead of opening, editing, and saving each individual page. It would also be helpful if a product number or a person’s title changes, and there are multiple instances of that product number or name throughout a Web site. Select the Find command under the Edit menu or use the Command+F (Mac) or Control+F (Windows) keyboard shortcut to open the Find window. Select the Find & Replace tab of the Find window and click the triangles next to the Replace and Find in Files headers to reveal additional options, as shown in Figure 22.12. FIGURE 22.12 The Find & Replace tool is full of options. Cleaning Up Your Web Site 475 Using Find Within a File To find text within a single Web page, open the page first and then open the Find & Replace window. If you only want to find a specific piece of text within your page, type the text in the Find field and click the Find button. To find the next instance of your search text, click the Find Next button. You can use the Find tool in Layout, Source, Outline, and Preview modes. Using Additional Find Options If you want to have more control over your searching, you can use any of the settings in the top third of the Find & Replace window. Let’s look at those settings now: • Ignore Case—Ignores whether the letters on your Find field are upper or lowercase. Leaving this option turned off means that your search is case sensitive. For example, a search for english would not find the word English unless this option was checked. • Entire Word—This setting forces the find term to find only whole word matches. If this setting were checked, the search term mission would not be found as a part of the word missionary. • Regular Expr.—Short for Regular Expressions. Check this option and GoLive will interpret your Find text as Regular Expressions, also known as GREP, instead of plain text. Leave this option unchecked unless you understand how to construct Regular Expressions. • Backwards—This option forces GoLive to search a document from the bottom up instead of the top down. • From Top—If you have your cursor inserted in the middle of a page and you execute a Find command, GoLive will only search from your insertion point to the bottom of the page. Turn on this option to force GoLive to start at the top of the page, regardless of where your cursor is placed. • Wrap Around—This option causes the Find feature to return to the top of the page when it reaches the bottom and continue to search. Using Find & Replace Within a File Although a Find tool might be somewhat handy, it is commonly combined with a Replace function so that you can quickly make many changes to a single Web page or an entire Web site. For example, maybe your telephone area code has changed and you need to change every instance of “630-” to “773-.” 22 476 Hour 22 , TO DO To Do: General Finding and Replacing in a File To perform a Find & Replace operation within a Web page, complete the following steps: 1. Open a Web page and open the Find & Replace window. 2. Type the text you want to find in the Find field and type the text you want to replace it with in the Replace field. If your page is in Layout mode, just use plain text in the Find & Replace fields. However, if you are in Source mode, you can use HTML source code for the Find & Replace fields. 3. Click the appropriate button when you are ready to execute the Find & Replace command. The buttons are described as follows: • Find—Finds the first instance of the text in the Find field but does not replace anything. • Find Next—Finds the next instance of the text in the Find field. This also does not replace any text. • Replace—Replaces only the selected instance of your found text. • Replace & Find—Combines the Replace and Find Next buttons into one action. • Replace All—Replaces every found instance of your Find text with the Replace text. You cannot undo a change made with the Find & Replace feature, so use it carefully or experiment on a copy of your page. , 4. When you are done with Find & Replace, save your Web page and close the Find window. Using Find Within an Entire Site Finding text in a single Web page is helpful, but finding common pieces of text throughout an entire Web site is a real timesaver. GoLive’s Find in Files settings enable you to search your entire Web site for every instance of a piece of text, and even reports which pages contain the text and how many times the text is used. When you perform a stewed find, make sure that you have the correct files added to the Files list. Select individual files in the Files list and click the Remove button to remove them from the list of files to be searched. You can also click the Remove All button to remove all the files from the Files list. Before you perform a find across your entire site, decide if you are searching for text in Layout mode or HTML source code as seen in Source mode. If you are searching for something such as your area code as mentioned before, you only need to search in Cleaning Up Your Web Site Layout mode. However, if you are searching for a string of HTML source code, you need to check the Source Mode option in the Find window. To search across an entire Web site, make sure that your Site window is open and in the foreground when you open the Find window. You can search selected files from your Web site by clicking the Add Files button. The Add Files button behaves the same as the Site, Finder, Add Files (Mac), and Site, Explorer, Add files (Windows) commands described in Hour 9, “Using GoLive’s Site Management Tools.” If you would prefer to find in every file on your Web site instead of only a limited selection of files, just click the Add Site button. Have you ever wondered how many pages are in your Web site? Use GoLive’s Find window to get a total page count by clicking the Add Site button, and looking at the number of files added to the Files list. Are you ready? Click the Find button if you want GoLive to open each page and show you what it finds. If you use the Find button, you can also use the Find Next button to find the next instance of your search text. If you would rather get an inventory of how many times your search text is used in what pages, click the Find All button. Watch GoLive as it scans all the pages you’ve added to the Files list. When the Find All command is finished, GoLive will display the number of times the search text was found on each page in the Hits column. You even get a report of how many total instances were found and how many total pages were searched. Figure 22.13 shows an example of a completed Find All command. FIGURE 22.13 The Find All command returns a simple report of what was found in the Files list. 477 22 478 Hour 22 Using Find & Replace Within an Entire Site Okay, we’ll discuss one more feature of the Find window, and then we’ll move on. If the Find window were a dramatic film, the capability to find and replace text across an entire Web site would be the climax. Until you are comfortable with this powerful feature, we suggest experimenting on a copy of your Web site so you don’t inadvertently inflict any irreparable harm. To find and replace text across an entire site, you’ll combine all the features you’ve already learned into one serious power feature. With your Site window open and all pages saved, enter the text you want to find in the Find field and the text you want to replace that with in the Replace field of the Find & Replace window. Then add specific files or your entire site to the Files list. Choose the Source Mode setting, if appropriate, and click the Replace All button to let it rip. Because you can’t undo a sitewide Find & Replace, we think it’s a good idea that GoLive presents a dialog box such as the one in Figure 22.14, asking you to confirm the Find & Replace function. If you are confident of the change you’ve asked GoLive to make, click the OK button and let GoLive get to work. FIGURE 22.14 GoLive warns you before completing a sitewide Find & Replace. In addition to finding and replacing text, the Find window also enables you to search for files within a large Web site. Cleaning Up Your Site with the Clean Up Site Function So far, you’ve learned how to fix errors in your Web site. During the rest of this hour, you’ll learn how to remove unnecessary files and resources that take up room on your hard drive and on your Web server. Cleaning Up Your Web Site The last bit of housekeeping you’ll do before you upload your site in Hour 23, “Uploading Your Web Site to Your Web Server with FTP,” is to use the Site, Clean Up Site command. Because of the power of the Clean Up Site command, we recommend learning this command on a copy of your Web site instead of the original. When you choose the Clean Up Site command, you’ll be presented with the Clean Up Site Options dialog box, as seen in Figure 22.15. FIGURE 22.15 The Clean Up Site Options dialog box is not as daunting as it looks. The first option is Refresh View. Always leave this option on because it ensures that the Site window is in sync with any file management you’ve done on your hard drive. This setting performs the same function as the Refresh command in the Site menu. Adding Used Items The next section of the Clean Up Site Options enables you to add items to your Site window. If you have any orphan file errors that have not been fixed yet, selecting the Files (Will Be Copied into Root Folder) option will copy those orphaned files into your Site Root and resolve any orphaned files errors. You can even prompt GoLive to show you a list of files it is going to copy before it copies them. The next three options of External Resources, Colors, and Font Sets correspond to the third, fourth, and fifth tabs of the Site window. If you have these options checked, GoLive will add all these used resources to their appropriate tab in the Site window. For example, all the colors used throughout the Web site will be added to the Colors tab of the Site window if the corresponding option is selected. Removing Unused Items As you might have already guessed, the remove settings perform the opposite function of the add settings. If you set the Clean Up Site Options to remove unreferenced files, they 479 22 480 Hour 22 will be placed in the Site Trash. If you have GoLive remove unused External References, Colors, or Font Sets, they will be deleted from the corresponding tab in the Site window. Default Settings Before you click OK and let GoLive clean up your site, let’s look briefly at two more settings. If you have your options set and you want to use these same settings over and over again, click the Set As default button. Now if you have your Clean Up Site Options set just how you want them, you might also want to check the Don’t Show Again option. This avoids having to look at this complicated dialog box every time you invoke the Clean Up Site command. However, to see this dialog box again or change these settings, you’ll have to use the Clean Up Site section of the Site Preferences window, as seen in Figure 22.16. FIGURE 22.16 If you choose the Don’t Show Again option, you’ll have to use the Application preferences to change the Clean Up Site options in the future. One word of caution before we finish this hour: Be careful when you let the Clean Up Site command remove unused files. Although GoLive is pretty smart software, it won’t recognize files referenced by a CGI or custom-coded JavaScript. When in doubt, experiment with a copy of your site. Summary In this hour, you learned a lot about fixing errors and cleaning up your Web site files. As your site grows, you’ll find these skills more and more valuable. Laying the groundwork now for good file management and organization will pay big dividends down the road when your Web site might include hundreds or thousands of files. Cleaning Up Your Web Site Can you believe it? You’re finally ready to upload your Web site. Enjoy the following activities and proceed to Hour 23, where you’ll learn how to upload your site to your Web server with FTP. Q&A Q Do I have to fix my errors before I upload my Web site or can I just leave them alone? A You have to fix your errors only if you want your visitors to have a pleasant experience. Because most errors indicate missing images and broken links, we strongly recommend that you take the time to fix your errors before uploading your site. Q Can I use the In & Out Links palette to change colors and font sets like I change file references? A Unfortunately, GoLive does not allow you to change colors and font sets with the In & Out Links palette. We hope this will be included in a future upgrade. Q When should I use the Clean Up Site function? A You can use the Clean Up Site function any time your Site window is open. Practically speaking, we suggest using the Clean Up Site command before you upload your Web site and then from time to time as you maintain the Web site. Quiz 1. Which icon represents a bug in a Web page in the Status column of the Site window? a. Red exclamation point b. Green bug c. Yellow circle d. Gray triangle 2. You can use the In & Out Links palette to change references for all the following except: a. Files b. Anchors c. Font sets d. Errors 481 22 482 Hour 22 3. The Find command works only in Layout mode. a. True b. False 4. The Clean Up Site command does the following: a. Deletes your entire Web site. b. Removes unreferenced files in your Web site. c. Deletes just your Site file. d. Deletes old files on your Web server. Quiz Answers 1. b. The green bug icon is used to show pages with errors. 2. c. You cannot use the In & Out Links palette to change font sets. 3. b. False. The Find command works in Layout, Source, Outline, and Preview modes. 4. b. The Clean Up Site command helps remove unreferenced files in your Web site. Exercises To learn more about cleaning up your Web site, try these exercises: 1. Use the Find window to find and replace a piece of text across your entire Web site. For example, you might find St. and replace it with Street. 2. Make a copy of your Web site on your hard drive and rearrange or rename a few files without the Site window. Now open the Site window and find the errors you have created. Use the tools you’ve learned to fix the errors you’ve created. 3. Make a copy of your Web site and use the Clean Up Site command. You might be surprised at what you find! HOUR 23 Uploading Your Web Site to Your Web Server with FTP In Hour 22, “Cleaning Up Your Web Site,” you learned how to fix errors, remove unreferenced files, and clean up your site in preparation for the launch of your Web site. Now that you have your site ready to go live, you need to find a place to host your Web site and learn how to use GoLive’s built-in FTP tools to upload your site to a Web server. During this hour, you learn about • Acquiring a domain name • Finding a Web hosting provider • Understanding how FTP works • Entering your FTP preferences • Uploading your Web site to your Web server • Maintaining your Web site with GoLive’s FTP features • Using GoLive’s standalone FTP browser • Troubleshooting network problems with the Network Status window 484 Hour 23 Acquiring a Domain Name Although it’s not required that you own your own domain name to have a Web site, it certainly exudes professionalism. Domain names such as http://www.exotype.com or http://www.amenco.com are much easier to remember than a long and cryptic URL such as http://members.somedomain.com/users/~adamp198. Having your own domain name also shows visitors you’re serious about the Web and not a fly-by-night outfit. If you’d like to register your own domain name, visit http://www.icann.org/ registrars/accredited-list.html to find an accredited registrar. Network Solutions (http://www.netsol.com/) is a very popular registrar that you might consider. Find a registrar that you would like to use and see whether the name you are interested in is still available. If you find a domain name you like and a hosting company you want to work with, ask your hosting company whether it will complete the domain registration process for you. If you are familiar with some of the technical aspects of Web hosting, such as DNS and IP addresses, feel free to register the domain name yourself. Domain names can consist only of letters, numbers, and the hyphen character, and can be no longer than 67 characters. Domain names are not case sensitive. Most people should select a domain name ending in .com, .org, or .net if the Web site is for a company, organization, or network. If the Web site is for an educational institution, you should probably pick a domain name ending in .edu. Finding a Web Hosting Provider Whether or not you own a domain name, you still need to find a place to host your Web site. Because your site needs to be responsive and available to the entire world 24 hours a day, seven days per week, you’ll need to find a reliable hosting provider for your Web site. Unless you have very high-end or specialized needs, you’ll probably lease space on a shared Web server for the modest cost of $20–$50 per month. This setup is usually called virtual hosting, and is much cheaper than the high costs and maintenance of owning your own Web server. There are several important factors to consider when choosing a hosting provider. We’ve listed several important factors with our recommended minimums in parentheses: • Amount of storage space (10 MB) • Traffic limits (1 GB/month) Uploading Your Web Site to Your Web Server with FTP 485 • Technical support options (e-mail and phone) • Number of e-mail addresses (whatever you need) • Speed of connection (redundant high-speed lines) • Speed of Web servers (ask for samples and test yourself) • Reliability of Web servers (95% uptime) • Availability of traffic statistics (ask for a sample) • Web-server platform (depends on your needs and preferences) Armed with a checklist like this, start hunting for a hosting provider you can trust. You might start by contacting your ISP, searching on the Web, or taking the recommendation of other Web designers. The good news is that most hosting companies don’t lock you into really long contracts that limit your options. If you are unhappy with your first choice, you can usually switch hosting providers with very little hassle. When you find a hosting provider to host your Web site, the provider should give you three pieces of vital information: • FTP server name • FTP username • FTP password Whatever you do, don’t lose this information! Also, don’t give this information out to anybody you would not trust to have access to your Web site files. This login information is what you’ll use to upload and maintain your Web site, so guard it carefully! Understanding How FTP Works Before you learn how to use FTP to upload your Web site, take a moment and make sure that you understand what FTP means and how it works. FTP is short for File Transfer Protocol. This is a fancy technical term for “getting files from here to there.” Practically speaking, FTP enables you to upload your Web site files, such as HTML pages and GIF and JPEG Web graphics, to your Web server. FTP also enables you to download files. It’s a two-way street. Several FTP applications are available for both Macintosh and Windows users, but GoLive has FTP functionality built right in to the Site window. This means you can do all your uploading, downloading, and updating in the GoLive Site window without having to use any extra software. 23 486 Hour 23 Entering Your FTP Preferences Now that you have a basic understanding of how FTP works, let’s learn how to set up GoLive to handle your FTP needs. GoLive stores unique FTP settings for each Web site you work on, so you’ll need to have your Site window open to set up your FTP preferences. Make sure that your Site window is in the foreground and choose Site, Settings from the menu. Select FTP & WebDAV Server on the left side of the dialog box that appears, and then select Edit Server from the FTP pop-up; you will see a screen like Figure 23.1. FIGURE 23.1 Enter all your FTP settings in the FTP Server section of the Site Settings dialog box. As you add additional sites a list of FTP information will be created. , TO DO To Do: Entering FTP Login Information Using the Site Settings dialog box, enter all the FTP login information provided by your hosting provider: 1. Click on the New Item icon in the lower-right corner of the window and choose a Nickname. This is the name that will appear in the FTP server pop-up window, so pick something descriptive. , 2. Enter the name of your server in the Server field. Skip the Directory field because we’ll enter that later. 3. Enter your username in the Username field. , Uploading Your Web Site to Your Web Server with FTP 487 4. Check the Save check box and enter your password in the Password field so that you can have GoLive store your FTP password for future use. 5. If you have root access to the server you can click on the Browse button to locate the exact name of your directory. Leave the Directory field blank if you are not sure where it is located. The username and password will access the assigned directory. 6. When you click OK in the Browse window, GoLive automatically includes the correct information in the Directory field for you. Figure 23.2 shows an example of what your FTP settings might look like when you are finished. FIGURE 23.2 Your FTP settings might look something like this after entering your server name, directory name, username, and password. 7. Click OK and proceed to upload your Web site as described in the next section of this hour. , 8. For most users, the preceding settings will work just fine. However, if you use a proxy server for FTP access, you might need to edit one more setting in the Application preferences. Choose Edit, Preferences and navigate to the Network section. As shown in Figure 23.3, check the box next to Use FTP Proxy and enter the name and port number of your FTP proxy server. Your network administrator should provide you with this information if it is necessary. If you are interested in learning about some of GoLive’s more advanced FTP features, please stick around. If you are not interested and just want to get your site uploaded, jump ahead to the next section of this lesson. 23 Hour 23 , 488 FIGURE 23.3 If you need to use a proxy server, edit that information in the network preferences. , Setting Your FTP Upload Preferences To control how GoLive uploads the files in your Web site, choose Site, Settings and select Upload/Sync Times on the left side of the Site Settings window, and click Site Specific Settings as shown in Figure 23.4. FIGURE 23.4 The Site Upload preferences enable you to control how your files are uploaded to your Web server. Uploading Your Web Site to Your Web Server with FTP 489 The first section of the Upload settings tells GoLive whether to honor the publish states of folders and files. To change the publish state of a file or folder, select the file or folder in the Files tab of the Site window and look in the first tab of the Inspector, as shown in Figure 23.5. FIGURE 23.5 Change the publish state of files or folders in the Inspector. 23 You have three publish states for files in GoLive’s File Inspector: • Never—Tells GoLive to never upload the selected file. • Always—Tells GoLive to always upload the selected file. • If referenced—Tells GoLive to upload this file only if it is reachable from the link hierarchy starting at the home page. You also have three similar options for publish states that apply to folders: • Never—Tells GoLive never to upload this folder and its contents. • Always—Tells GoLive always to upload this folder and its contents. • If not empty—Tells GoLive to export or upload this folder only if it has other files in it. If an empty folder is given, this publish state and the publish state for groups is honored, and the empty folder is ignored by GoLive during the upload process. Now that you’re familiar with how GoLive’s publish states work, you can decide whether to honor them in the upload process. To change the Publish State preferences, just click the check boxes next to Folders and Files. If you have a folder in your Web site that never needs to be updated, change its publish state to Never and make sure that publish states are honored in the Upload settings. 490 Hour 23 Before you upload, there are three more helpful settings to examine. The first setting, Upload Sync/Linked Files Only, tells GoLive to upload only files that are somehow referenced in the navigational structure of your Web site. That means if there are unused files in your Web site, GoLive does not bother to upload them. This setting can save you time, as well as Web server space, when you upload your files. The next setting, Show List of Files to Upload, enables you to determine whether GoLive shows you the list of files it is going to upload before it uploads them. This is a nice feature that enables you to double-check what files will be uploaded before it actually happens. The last FTP setting, Show Options Dialog, enables you turn on or off the FTP Options dialog box by default. The Upload Options dialog box is a small dialog box that normally appears before uploading. It enables you to fine-tune these advanced FTP settings. After you get your FTP settings just the way you want them, you might want to turn off this setting so that you aren’t annoyed by repeatedly dismissing the same dialog box. Uploading Your Web Site to Your Web Server Now that you have your FTP settings entered, you’re finally ready to upload your Web site with GoLive! From here on out, it’s very easy. In fact, now that you have your FTP server information entered, you can upload your entire Web site in just a few clicks. TO DO To Do: Uploading Your Web Site to Your Web Server To upload your Web site to your Web server, follow these steps: 1. Save any open pages and choose Site, FTP Server, Connect from the menu or click the FTP Server connect/disconnect button in the Toolbar, as shown in Figure 23.6. , FIGURE 23.6 The FTP Server Connect/Disconnect shortcut in the Toolbar is a convenient way to connect to or disconnect from your Web server. 2. When you connect to your Web server via FTP, GoLive will automatically open the right half of your Site window and bring the FTP tab to the front. , Uploading Your Web Site to Your Web Server with FTP 491 3. When connected to your Web server, you will see a list of files in the FTP tab of the Site window. If this is your first time uploading files, the file listing in the FTP tab will probably be empty. 4. Uploading files is similar to copying files on your computer with the Windows Explorer or the Macintosh Finder. Upload files and folders from your computer to the Web server by dragging files from the Files tab on the left side of the Site window to the FTP tab on the right side of the Site window, as shown in Figure 23.7. If you have nested folders, you can double-click directories to reveal more files. You can also click the drop-down triangle (Mac) or plus sign (Windows) to the left of folder names to reveal their contents. This will help you upload files to the correct location. FIGURE 23.7 Upload files and folders by dragging them from the Files tab to the FTP tab in the Site window. 5. You will see an Uploading Files progress bar until GoLive is finished uploading the files. , 6. To download files, drag them from the FTP tab to the Files tab. Maintaining Your Web Site with GoLive’s FTP Features If you have a small site, uploading files by hand is probably good enough. However, if your Web site is large and includes hundreds or thousands of files, it can be very difficult to remember which pages have been updated recently and which new files need to be uploaded to the Web server. 23 492 Hour 23 To solve this potential file management headache, GoLive includes four special FTP commands under the Site, FTP Server menu that will save you a lot of time: • Incremental Upload • Upload Modified Items • Upload Selection • Upload All Using the Incremental Upload Command If other people work with you on the same Web site but from different computers, use the Incremental Upload command to upload new files. When you invoke the Incremental Upload command, GoLive compares all the files on your local hard drive with all the files on your Web server and uploads only the newest ones. If you have a large site or your Internet connection is slow, it might take GoLive several minutes to compare all the files in your site with those on the Web server. Using the Upload Modified Items Command If you’re the only person working on a Web site, use the Upload Modified Items command because it’s much faster than the Incremental Upload command. Instead of comparing each file with the files on the Web server, GoLive just determines which files on your local hard drive have been updated since the last time you uploaded the site, and then uploads the new files for you. Using the Upload Selection Command The Upload Selection command is a real timesaver that you’ll grow to love. To use this command, select some files in the Files tab of the Site window and choose Site, FTP Server, Upload Selection from the menu; GoLive uploads only the selected files. To really take advantage of this unique feature, select multiple folders and files at different levels of your Web site’s file structure, and then use the Upload Selection command. Notice how GoLive intelligently uploads only the selected files and even puts them in their correct folders on the Web server. Using the Upload All Command The Upload All command uploads your entire Web site and enables you to strip out excess code (such as special GoLive code, comments, and extra spaces) in your pages and uploads the trimmed-down pages. The amount of file size you save with this command is usually so small that it’s not worth the extra effort. Uploading Your Web Site to Your Web Server with FTP 493 Uploading New Files to Your Web Server To use GoLive’s special upload features, you need to always use the same Site file for your Web site because the time and date information for each file is saved in the Site file. , TO DO To Do: Uploading New Files to Your Web Server To upload new files to your Web server, follow these steps: 1. Save any open pages and choose Site, FTP Server, Connect from the menu or click the FTP Server connect/disconnect button in the Toolbar. 2. Now, instead of uploading individual files and folders by hand, just choose the appropriate FTP command from the Site, FTP Server menu. 3. Unless you set the FTP options not to show the Upload Options dialog box, you’ll see an Upload Options dialog box like the one in Figure 23.8. FIGURE 23.8 The Upload Options dialog box enables you to override the default FTP upload settings. 4. The Upload Options dialog box enables you to honor publish states, strip out excess HTML source code, and display a list of files before they are uploaded. 5. When you are ready to proceed, click the OK button and GoLive will determine which files need uploaded. 6. If you have the Show List of Files to Upload setting turned on, GoLive shows you a list of new files it wants to upload, as shown in Figure 23.9. , FIGURE 23.9 If you keep the Show List of Files to Upload setting turned on, GoLive will show you which files it’s going to upload before it proceeds. 23 Hour 23 , 494 7. If you don’t want GoLive to upload all the files it lists, deselect the corresponding check boxes in the left column of the Upload dialog box, as shown in Figure 23.10, or click the Cancel button. FIGURE 23.10 The Upload dialog box gives you one last chance to tell GoLive which files should be uploaded to the Web server. 8. Click OK in the Upload dialog box to start uploading your files. GoLive will give you a countdown of how many files remain to be uploaded, but be aware that factors such as the size of your files and the speed of your Internet connection affect how long the upload will take. 9. When GoLive is done uploading your files, you should disconnect from the FTP server by using Site, FTP Server, Disconnect or the FTP Server Connect/Disconnect button in the Toolbar. , 10. Finally, save your Site File to make sure that GoLive saves all the new time and date information for your recently uploaded files. Now that you know how to use GoLive’s incremental FTP function, you can save a lot of time updating your Web site. Because GoLive keeps track of your newer files, you don’t need to remember which pages you have updated or which graphics you have added. GoLive stores all these changes in your Site file and uploads only new and changed files when you use the FTP commands. Using GoLive’s Standalone FTP Browser The FTP tools integrated into the Site window are very useful and a huge timesaver. However, uploading or downloading your Web site is not the only time Web designers use FTP. For example, most Web designers use FTP to upload files for clients and download software files. Having an FTP program handy is also helpful when you do not have a Site file already created for a certain site. Uploading Your Web Site to Your Web Server with FTP 495 Although there are many good FTP programs available for Macintosh and Windows users, GoLive has a nice standalone FTP utility built right in! TO DO To Do: Using GoLive’s FTP Browser To use GoLive’s built-in FTP browser, follow these steps: 1. Choose File, FTP Browser from the menu and you will see an FTP window like the one in Figure 23.11. FIGURE 23.11 GoLive’s built-in FTP browser is easy to use and works just like any other FTP client. 2. Select your server nickname from the pop-up menu. If you have not yet saved a setting for your FTP, enter your server name, directory, username, and password in the corresponding fields. 3. Click the Save check box if you want GoLive to save your password for future use. 4. When you are ready, click Connect to connect to the FTP server. , 5. Upload and download files from the FTP server by dragging files to and from your desktop or the Files tab of the Site window. When you are connected to your FTP server, you can upload and download files and folders just like a standalone FTP client. Drag and drop items from or to your desktop to upload or download. You can delete, rename, and move files and even create new folders, all within the FTP Upload and Download window. However, unlike the Site window, the standalone FTP client does not include the synchronization features because it is not related to a specific Web site. If you are making many revisions on several computers, you might want to pull pages off of the server first. That way, you can be sure you are working on the latest and greatest page. 23 496 Hour 23 Troubleshooting Network Problems with the Network Status Window The last feature we’ll look at in this hour is the Network Status window, which is found under the File menu. The Network Status window enables you to troubleshoot your network connection when you have problems uploading files to your Web server. , TO DO To Do: Using the Network Status Window To use GoLive’s Network Status window to troubleshoot connection problems, follow these steps: 1. If you experience problems connecting to your Web server or uploading files, choose File, Network Status from the menu and see whether there are any error messages, as seen in Figure 23.12. FIGURE 23.12 GoLive’s Network Status window can help you resolve connection problems by logging any errors you experience. 2. You should discuss any error messages with your Web hosting provider to help troubleshoot the problem. 3. If you want to see a more complete FTP log of your interaction with your Web server, change the Network Status section of the Network preferences under Edit, Preferences and enable Warnings and Status Messages, as seen in Figure 23.13. You can also control how many sessions the Network Status window stores in memory. , 4. To save a text copy of an FTP log, control+click (Mac) or right-click (Windows) in the session in the top half of the Network Status window and choose Save As. 5. Save this text file on your hard drive. Your Web hosting company might request that you e-mail the file for further diagnostics. 497 , Uploading Your Web Site to Your Web Server with FTP FIGURE 23.13 Edit the Network Status preferences to control what type of network activity is logged in the Network Status window. , The information recorded in the Network Status window can be very helpful in resolving connection problems. If your Web hosting provider requires you to make changes in GoLive such as changing to passive mode, simply review the directions earlier in this hour. Summary Great job! You’ve learned to build Web pages, combine them into a Web site, and upload them to your Web server. With these fundamental Web design skills, you’re empowered to learn more on your own. Before we’re done, Hour 24, “Making Your Web Site Search Engine Ready,” will teach you how to prepare your Web sites to be listed with the most popular search engines. Q&A Q Do I have to pay for a domain name? A Yes, domain names cost a nominal yearly fee. It’s a small price to pay for professionalism. Q Can’t I just use my computer as my own Web server and save money? A Web servers are computers that need special software and dedicated resources such as high-speed Internet access lines, battery backups, and more. It’s best to use a dedicated hosting company to host your Web site. 23 498 Hour 23 Q I created a new Site file, and the FTP synchronization is not working. GoLive wants to upload every file! How do I fix this? A Upload a fresh copy of the site within the GoLive Site window, and the FTP synchronization feature will work again. Quiz 1. Which FTP upload method should you use if you want to upload files that have changed since the last time you uploaded the site with GoLive, regardless of any newer files that might be on the Web server? a. Incremental Upload b. Upload Modified Items c. Network Status d. Passive Mode 2. If you are having trouble uploading your files to your Web server, which GoLive feature can help you troubleshoot the problem? a. Site, Site Report b. File, Network Status c. File, Document Encoding d. File, Download Page 3. What are the three items that you need from your service provider in order to connect to the FTP server? a. The directory, server name, and password b. The server name, username, and password c. The URL, password, and publish state d. The directory name, password, and URL Quiz Answers 1. b. You should use Upload Modified Items to upload files that have changed since the last time you uploaded the site with GoLive, regardless of any newer files that might be on the Web server. 2. b. Use File, Network Status to troubleshoot your network connection. 3. b. You need the server name, username, and password to connect to the server. Uploading Your Web Site to Your Web Server with FTP 499 Exercises To gain more experience with GoLive’s FTP tools, try the following exercises: 1. Upload your Web site. Then change one of the pages on your hard drive and invoke the Site, FTP Server, Upload Modified Items command. Watch as GoLive determines which files are new and should be uploaded. 2. When you connect to your FTP server, open the File, Network Status window and watch GoLive track your network activity. 23 HOUR 24 Making Your Web Site Search Engine Ready Now that you have built the ship, how do you cause people to get on? Typically, the goal of a Web site is to get people to visit it. If this is the case, you need to learn about search engines and the strategies used to attract visitors. In this hour, you learn the following: • Understanding what common search engines are looking for • Adding appropriate keyword Meta tags to your pages • Creating a clear description for your page • Avoiding common errors • Making your Web site known to search engines and indexes 502 Hour 24 Understanding What Common Search Engines Are Looking For Two main methods are used to help viewers find relevant pages. One is a search engine, which automatically creates an index of Web sites and the information contained within them by using spiders (programs that allow search engines to search Web sites). An example of a search engine is AltaVista.com. The other method is a directory, which indexes Web pages with human intervention. An example of the latter is Yahoo!, which requires a person to enter Web site details into the database manually. The ultimate goal of both methods is to make the viewer happy by producing good results. The more accurate the results, the more likely it is that he will return to that particular search engine in the future. In this lesson, we cover the steps necessary to get your site discovered by search engines. We will discuss directories in the final section when we cover other methods for promoting your site. Behind the Scenes How does a search engine find you? Depending upon the engine, there are several ways that your site can be discovered, but many rely on keywords and descriptions. Search engines generally have three major components that make them work. The first component is what is commonly referred to as a spider. A spider visits a Web site and crawls through other linked pages within the site. Typically, most spiders return on a regular basis to check for changes. The second component involves indexing or cataloging all the information that the spider returned into a huge database. The third component involves sifting through the catalog of information to match the requested information. Search engines rely on some simple rules to find you. One rule involves the frequency of keyword usage on a Web page; this also includes the proper use of a description. Follow these lessons to learn how to use the tools in GoLive effectively to be discovered! Create a Sensible Title Granted, “Welcome to GoLive 6” is a very nice title, but not for your Web page. Change the title to a descriptive phrase that says it all in approximately 15 characters. The title is not only what is searched, but also what is bookmarked if someone saves your site as a Making Your Web Site Search Engine Ready 503 favorite. When your site is found, the title is what the viewer sees as the main title of the Web page in the list of results. For a refresher on how to create a title, refer to Hour 3, “Creating a Web Page.” Adding Appropriate Keyword Meta Tags to Your Pages Keywords include important information that we want spiders to discover immediately. A keyword is a type of HTML Meta tag that is inserted in the Head section of the page. By appearing first on the page, the keyword Meta tag helps the spider find important information to index before moving down into the body of the page. For this hour, we will use the tools supplied on the Head section of the Objects palette, as shown in Figure 24.1. A Meta tag gives specific information to a spider, such as keywords or summaries about the site, in the form of a description. Essentially, Meta tags contain information about information that is not seen by the viewer, but is interpreted by the search engine. Meta Tag (Description) Keywords FIGURE 24.1 Help search engines index your page by using the Meta tag features in the Objects palette. Selecting Keywords By no means are keywords all-encompassing when a search engine is indexing your page, but they certainly can help. Here are some helpful tips to consider when creating keywords: • Choose logical keywords. If you were looking for your site, what would you type into the search engine’s text box? • Narrow down the competition. Keywords should always be at least two or more words long. One-word keywords will result in so many hits that you might be number 50 in the result list. 24 504 Hour 24 • Include keywords that are appropriate for your Web site. Use words that are referenced frequently in the body of your page. This assures the search engine that the keyword is thoroughly covered in the site. • Don’t repeat the same word over and over again. If you do repeat words many times, most search engines will disqualify your listing in the index, citing the possibility of spamming. Spamming is the repetition of the same word over and over again, in the hopes of gaining priority over other search results. • Put the list of words in order of importance. Some search engines look for only the first 15 words, and then stop searching. After you have compiled a list of keywords, you are ready to insert them into the page. , TO DO To Do: Inserting Keywords into Your Web Page In this lesson, you learn how to insert effective keywords into your Web page. 1. Have a new or GoLive page open for this exercise and change the title to “Cookbooks for the busy person.” 2. Access the Head section of the page by clicking on the arrow to the left of the Page icon, and drag the Keywords object from the Head section of the Objects palette into the Head section of your page, as shown in Figure 24.2. FIGURE 24.2 The Keywords object is dragged into the Head section of the page. , When you open the Head section of the page, you might notice some default tags already residing there. Look in the Inspector to see that one Meta tag provides the browser with information about what type of page follows, and the other gives credit to GoLive for creating the page. The content Meta tag and title tag should remain. What you do with the tag that gives GoLive credit as the creator is up to you. Permanently remove the GoLive Meta tag in future pages by unchecking Write Generator Adobe GoLive, located in the General preferences. , Making Your Web Site Search Engine Ready 505 3. In the Keywords Inspector, click the new icon (dog-eared icon) and type your first keyword into the text box at the bottom of the window, as shown in Figure 24.3. We will use a combination of both one- and two-word keywords for our example. Press the Enter key to add the keyword to the list. Insert the following keywords: cookbooks quick meals fast recipes FIGURE 24.3 Keywords are entered into the text box of the Inspector. 24 , 4. Keywords are entered in the order in which you type them. Change the order at any time by selecting a keyword and using the arrow keys to move the keyword up or down in the sequence. Delete any unwanted keywords by selecting the keyword and clicking the Delete button. You have now successfully entered your keywords, so save this file as meta_test.html. Keywords should be set up in order of priority, with the most important keywords first. Some search engines look for only a limited number of characters. Here is a new neat little feature added to GoLive 6. Select a word on your page that you think would make a good keyword. Choose Add to Keywords from the Special Menu. Your word will now be added as a keyword! 506 Hour 24 Creating a Clear Description for Your Page The description provides a summary of a Web page in a search result. In Figure 24.4, notice that American Graphics Institute Main Page is the title and Professional Web and Print Training… is the page description. Title FIGURE 24.4 This is how a title and description appear in a search engine. Description Before we add a description to this page, understand these basic rules: • Descriptions should be concise and clear. Remember that the description makes someone either want to visit your page or move on. • Try to keep descriptions to fewer than 25 words. Again, the rest will probably be ignored and most certainly cut off in the result window. • The description should be relevant to the rest of the page and include the same topics. , TO DO To Do: Inserting a Meta Tag for the Description In this lesson, we show how you can provide a clear description of your Web site. 1. Open the file we named meta_test.html, or create a new GoLive page. 2. Access the Head section of the page, and drag the Meta object into the Head section of the pages. 3. In the Inspector, the contents should be Name. In the second text box, enter the name of the Meta tag that we are designating this tag to be (description). You can also select description from the pop-up list to the right of the text box. In the third text box, enter the description copy: Cook good meals in minutes following these easy recipes. See Figure 24.5. , FIGURE 24.5 Use the Meta tag to enter a description into a Web page. , Making Your Web Site Search Engine Ready 507 , 4. The description has now been entered onto this page. It is a good idea to create a custom description for all the important pages in your site. Avoiding Common Errors Even though there is no exact, tried-and-true method that will make you discovered by all search engines, you should avoid some common errors. Don’t rely too much on keywords. Keywords help, but many search engines ignore them and dive right into the content of your page instead. Make sure that the body of your Web page contains pertinent text in the HTML source code. Even though your Web site might be beautiful, if all the text were created in a graphics editor, there would be nothing for the search engine to index. Remember those tags, and when images are used, make sure that they are referenced. They will be included in a typical text search. Be careful with frames. Generally, search engines don’t find much text to search in a page designated as a frame set, and they might not know where to “spider out” after they reach that page. You can add a message and link information on the layout page in GoLive to create a noframes message automatically, but viewers might still open a page without the frame, leaving them short of basic information and navigational tools. Promoting Your Web Site to the Search Engines Just because you inserted this wonderful information about your Web page does not mean that you can sit back and expect people to find you. Yes, there is more work to do. The first step is to submit the URL to some of the major players in the search engine industry. This gives you a head start in the indexing process. They eventually might find you on their own, but probably not. Most search engines have a “submit a site,” “suggest a site,” or other similarly worded link located on their main page. If it is a real search engine, you simply have to enter your URL (and possibly contact information) and click the Submit button. The rest is out of your hands. Eventually your site will be indexed, but don’t hold your breath. This process can take up to four weeks! Here are some samples of search engines to which you might submit your URL: • http://www.AltaVista.com • http://www.Lycos.com 24 508 Hour 24 • http://www.Excite.com • http://www.overture.com • http://www.Webcrawler.com • http://www.google.com (paid listing) Making Your Web Site Known to Directories Directories are a little different and require more work on your part. A directory search requires that you manually enter your Web page information into its database. This includes titles, descriptions, contact information, and categories in which you want to be included. A sample of a directory search is http://www.Yahoo.com. Summary In this hour, you learned how to get your Web page search engine ready. Keep in mind that keywords and descriptions can help, but are not a cure-all. Search engines look for lots of different criteria, and generally assign greater relevance to text located at the top of a page than to text located in the middle or at the bottom of the page. Take into account that search engines assume that Web page designers will present their most important information first. Build your pages and submit your site, and then, in a few weeks, test by searching for yourself. If you have no luck, go back and evaluate whether you need to improve some of your keywords or copy, but don’t go crazy. Competition could be high in your market. Don’t forget there are other methods to market yourself! Q&A Q What is the best way to increase traffic to my site? A Relate keywords to actual copy being used in the HTML content of the page, and then submit your site. Q Is it a good idea to resubmit a site once in a while? A Any time you make major changes to it, your site should be resubmitted. Many search engines will disqualify you from the index if you resubmit more than once in a 24-hour period. Making Your Web Site Search Engine Ready 509 Q The very first item on my page is a large imagemap; will this cause a problem? A Quite possibly. Remember that the search engines look for the first items on a page. If it is necessary to keep the imagemap at the top, make sure that there are detailed tags describing the imagemap information. Quiz 1. Which answer would best describe what a directory is? a. A directory automatically will find you using spiders out on the Web. There is no need to submit your Web page. b. A directory requires that you enter keywords and descriptions yourself. c. A directory requires only the URL, and it does the rest of the indexing. 2. What is the importance of a title? a. It is the first descriptive copy read when searched. b. Titles are not necessary in the search process. c. They are a GoLive-only feature that will not affect search engines. 3. Do you have to have keywords and descriptions? a. Yes, a Web page will not load properly without them. b. Yes, older browsers require a Meta tag in the Head section. c. No, they are beneficial, but are not required. Quiz Answers 1. b. A directory requires that you enter keywords and descriptions yourself. 2. a. A title is the first descriptive copy read when searched. 3. c. No, keywords and descriptions are beneficial, but are not required. Exercises Now that you have some understanding of the process of making your site known to search engines and directories, try some exercises on your own. 1. Go to a search engine and enter keywords for a common item, such as shoes, pets, and so on. Check out the source code of the first few selected pages that appear. View Source can be selected from the View menu in both Netscape and Internet Explorer. Look for the Meta tags used in the Head section, or the copy in the page to gain insight as to why a page might be selected over some others. 24 510 Hour 24 2. When building your Web site, try to incorporate important topics and keywords throughout the site. In other words, use words that you think people might enter into a search engine, right in the flow of the body copy. Submit your pages to search engines. After about three weeks, check whether your hard work has had any effect by searching for your site. INDEX SYMBOLS # character, 97 3D track, 340 A Action track, adding Action Marker, 303 Actions, 273, 290. See also JavaScript adding to animation time tracks, 302 Close Window Action, 286-287 Goto Link, 304 installing, 290 locating, 290 markers, 303 Open Window Action, 281 configuring, 283-285 opening, 282 Set Image URL Action, 287-289 third-party, 290 Actions palette, 283 Actions track (Timeline Editor), 299 Adam7, 107 Adaptive palette, 367 Add to Site dialog box, 41 adding Actions to animation time tracks, 302 annotations to site designs, 428-429 check boxes to UI (user input) forms, 262-264 Close Window Actions to pages, 286 colors, 205 columns, 138 content to site designs, 430 descriptions to Web pages, 506-507 keyframes to animations, 302 keywords to Web pages, 504-505 links to images, 122 Meta tags for Web page descriptions, 506 QuickTime movies to pages, 320 radio buttons to UI (user input) forms, 261 rows (tables), 138 Sound/Music tracks to movies, 343 source code in HTML Source Editor, 445 Submit and Reset buttons to UI (user input) forms, 266 text boxes, 80-82 Video tracks to movies, 342-343 addresses (URL), 95 Adobe GoLive Actions Xchange Web site, 290 Adobe GoLive. See GoLive Adobe Illustrator. See Illustrator advertising pages on search engines, 507 Align Objects options (Align palette), 168 Align palette, 167 512 aligning aligning images and text, 116, 119 layout grids on pages, 162 multiple floating box animations, 306 objects in layout grids, 167 setting alignment for tag, 411 table content, 141 tables, 133 text, 83 AltaVista, 60, 507 anchoring, 95-96 creating anchors, 97 site designs to pages, 422-423 Animation compressor, 351 animations, 296 Actions, 304 beginning/ending placements, 301 floating boxes empty, 307 Floating Box Grid Settings, 305 multiple, 304-306 setting attributes, 305 visibility and depth, 307-309 keyframes, 299 copying, 307 inserting additional, 302 invisible, 309 previewing, 302 recording, 296 saving, 302 Timeline Editor, 299 triggers, 311-312 annotating site designs, 427 adding annotations, 428-429 editing, 430 Annotation Inspector, 429-430 Annotations view (Design window), 422, 428-430 applications FTP, 485 plug-ins. See plug-ins word processing, 76 applying colors, 206 stationery files to GoLive pages, 218 assigning pages to frame sets, 237-239 attributes cells, 142 floating boxes, 178, 305 frames, 239-240 gridlines, 160 HTML tags, 50 layout grids, 158-160 tables, 131 Autoplay button (Timeline Editor), 299 B backgrounds color floating boxes, 181 layout grids, 162 images, 119-121 tables, 133 bandwidth, 104 banners, converting text to, 372-373 Base URL, 247 Basic Inspector, 337 BgImage option (tables), 134 bold text, 85 borders (tables), 133 Browse method, linking graphics with image placeholders, 114 Browser Profiles tab (Web Settings window), 403, 412 creating a default browser profile, 414 selecting profiles, 413 Browser Switch, 392 Browser Switch Head items, creating, 392 Browser Switch Inspector, 393 browsers compatibility components, 220 floating boxes, 176-177 HTML Source Editor options, 459 Netscape CSS fix, 395 style sheets, 392 creating profiles, 414 CSS, 377 fonts, 89-90 FTP, 494-495 FTP Browser (GoLive), 494 installation limitations, 68 plug-ins, 318 previewing pages, 67-68 text size issues, 381 browsing adding background images to pages, 120 for graphics on the hard drive, 114 bugs filtering, 467 finding, 466 fixing, 468-471 building Web sites, 53 bulleted lists, 88 buttons (Image Rollover objects), 275 C caching QuickTime movie files, 321 captions (tables), 134 Cascading Style Sheets. See CSS cells (tables), 131, 135 colors, 140 containing layout grids, 146 containing tables, 144-147 deselecting, 137 formatting text, 141-142 padding, 133, 258 selecting, 135 spacing, 133 CSS (Cascading Style Sheets) spanning, 139 width/height, 142 CGI (Common Gateway Interface), 256 Change All References tool, 202-204 Change References command (Site menu), 473 Change References dialog box, 470, 473 Change References tool, 473-474 changing number of rows/columns in tables, 131 titles, 60 Chapter track, 340 check boxes (user input forms), 261-264 Check Design tool (Staging view), 432 Check Syntax option (HTML Source Editor), 443 child pages, 424 Cinepack compressor, 351 Class Style selector, 380 Class style sheets, creating, 381 Clean Up Site command (Site menu), 479 Clean Up Site Options dialog box, 479 Close Window Action, 286-287 Cmd+2 (Mac) command, 10 code, 441. See also source code HTML, 51 source, viewing, 56 collections, 434 color Adaptive palette, 367 adding, 205 applying, 206 background floating boxes, 181 layout grids, 162 cells, rows and columns (tables), 140 deleting, 206 dithering, 367 finding, 204 hyperlink settings, 64-65 organizing, 204 page background, 65 posterizing, 367 tables, 133 text, 86 transparencies, 368 transparent (GIFs), 149 Color Preferences dialog box (HTML Source Editor), 461 columns (tables), 131 adding, 138 changing number of, 131 coloring, 140 deleting, 138 formatting text, 141-142 selecting, 137 comments (user input forms), 265-266 Common Gateway Interface (CGI), 256 compatibility issues browsers floating boxes, 176-177 HTML Source Editor options, 459 CSS, 377, 392, 395 components, 214 browser compatibility, 220 creating, 221 dynamic page elements, 220 embedding in pages, 222-223 modifying, 223 compressing movie files, 348-350 data rate, 352 Quality Slider, 351 sound files, 354-355 Compression Settings window, 350 configuring Goto Link Actions, 304 Modified Date objects, 274 Open Window Action, 283-285 513 contextual menus, 18 converting floating boxes to layout grids, 186-187 text to banners, 372-373 copying files, 43 keyframes, 307 text, 76-77 cost of Web site hosting services, 484 Counter feature (Timeline Editor), 300 creating. See also designing animations, 299 components, 220-221 folders, 197-198 hotspots, 123 keyboard shortcuts, 17 pages background images, 119-121 copying/pasting text, 76-77 dragging text, 79 graphics, 110 importing text, 76 previewing, 66-68 tables, 130 text formatting, 85-86 width, 62 stationeries as template files, 217 CSS (Cascading Style Sheets), 377 applying styles to existing pages, 389-390 browser compatibility, 377 Class style sheets, 381 compatibility issues, 392 creating default browser profiles, 415 defining fonts, 384 text attributes, 385-386 Element style sheets, 380 external style sheets, 395-396 ID style sheets, 382-383 margins, 388 Netscape CSS fix, 395 514 CSS (Cascading Style Sheets) selectors, 378 Class Style, 380 Element, 378-379 ID, 382 CSS Selector Inspector, 379 Ctrl+2 (Windows) command, 10 Ctrl+N (Windows) command, 9 Custom Snippets, 214-215 Custom tab (Site window), 225 customizing error checking, 468 palettes, 14 D data sorting (tables), 151 tracks, 339 .data folder, 215 data rate movie compression, 352 sound compression, 355 defining fonts with style sheets, 384 style sheet priority, 396 text attributes with style sheets, 385-386 deleting colors, 206 files, 45 folders, 45 fonts, 208 links, 201 rows/columns (tables), 138 delimiters, 150 depth (floating boxes), 307-309 descriptions (pages), 506-507 Design Annotation object (Objects palette), 429 Design Section Inspector, 424 Design tabs, 421 Design window, 430 Annotations view, 428 Staging view, 431 designing. See also creating Page Templates, 227 pages components, 214, 220-223 Custom Snippets, 215 floating boxes, 176-187 frames, 233 site extras, 215 Site Library Snippets, 224-225 stationeries, 214, 217-218 tables, 129, 144-146 sites from an existing Web site, 31 from existing folders, 30 from scratch, 28 site designs, 420-426, 430-433 DHTML (dynamic hypertext markup language) animations Action markers, 303 editing, 300-302 multiple floating boxes, 304-306 previewing, 302 recording, 296, 299 saving, 302 Timeline Editor, 299 overview, 296 DHTML Timeline Editor editing animations, 300 options, 299 Diagram window, 435-436 diagrams adding annotations, 427-428 elements to, 430 collections, 434 errors, 432 grouping selected pages, 426 merging with existing sites, 431 recalling from sites, 433 submitting to sites, 433 troubleshooting, 432 dimensions (layout grids), 156 directories, promoting sites to, 508 Display Line Numbers option (HTML Source Editor), 445 displaying HTML files in frames, 240 Distribute Objects options (Align palette), 168 Distribute Spacing options (Align palette), 169 dithering, 367 docking palettes, 15-16 Document window, 9, 63 documents dragging text between, 79 HEAD portion, 59 domain names, 484 downloading optimization, 360 plug-ins, 318 Web sites from HTTP servers, 32, 35 Drag and Drop method, adding background images to pages, 121 dragging graphics to site file, 110 moving text, 79 Dynamic HTML. See DHTML E Edit menu commands, 474 editing animations, 300-302 annotations within site designs, 430 collections, 434 Element style sheets, 380 font sets, 90 frame sets, 235 files HTML, 441 Element Finder, 453-457 HTML Outline Editor, 446-450 HTML Source Editor, 442-443 Source Code palette, 451-453 text wrap, 404 Web Settings window, 402-403 margins of styles, 388 movies, 335, 353 Network Status preferences, 496 pages, 56 changing titles, 60 copying/pasting text, 77 Layout Editor, 58 width, 62-63 Sample tracks, 345 source code, 388, 441, 454-457 text, 83-86 Toggle Source Split View, 58 tracks, 344 URL pop-ups, 278-281 video, 339 Web sites Change All References tool, 202-204 Change References feature, 473-474 Find & Replace feature, 474-478 Find feature, 476-477 In & Out Links palette, 471-472 editors HTML Outline Editor, 446-447 buttons, 446 editing source code, 447-450 HTML Source Editor, 442-443 adding source code, 445 browser compatibility options, 459 Colors preference, 460 font preferences, 459 setting highlight color preference, 461 viewing preferences, 458 Element Finder action choices, 457 finding code, 453 functionality, 454-456 overview, 454 Element selectors, 378-379 Element style sheets, 380 elements, dynamically linked, 220 e-mail creating links, 92-93 deleting unreferenced e-mail addresses, 201 links, 198-200 receiving UI (user input) form results, 268-269 setting mailto preference, 92 embedding components in pages, 222-223 Flash files in pages, 323 Error Inspector, 469 errors Check Syntax option (HTML Source Editor), 443 finding, 466 fixing, 468 missing files, 469-470 orphaned files, 470-471 listing pages with search engines, 507 site designs, 432 site diagrams, 432 URL filters, 467 Excite, 60, 507 Export format (LiveMotion), 369 Export Size Settings dialog box, 353 exporting movie files filter options, 352-353 for the Web, 348 pages from word processors, 78 515 text, 76 external links. See links external style sheets creating, 389-390 priority, 395-396 saving into sites, 390 F fields, hidden (user input forms), 269 file in use error, 432 File Inspector, 196-197, 489 file management GoLive Site Settings Folders, 27 problems with, 27 site data folders, 27 Site Files, 27 site root folders, 27 File menu commands creating new pages, 54 New Site Blank, 29 Copy from Template, 37 Import, 30 Print, 461 file size, 104 File Transfer Protocol. See FTP files caching (movies), 321 components, 214 copying, 43 deleting, 45 errors missing file errors, 469-470 orphaned file errors, 470-471 inserting copying files and rescanning root folder, 43 drag and drop, 42 new files, 45 from the Site menu, 41-42 managing, 194-197 516 files moving, 44 optimization, 360 organizing, 197-198 Publish States, 489 rearranging, 44 renaming, 46 Sound/Music tracks, 341 stationeries, 215 .swf, 322 updating, 198 uploading to Web servers, 493-494 Files list creating new pages, 53 opening pages, 55 Filter track, 345 filtering bugs, 467 filters generic, 340 movies options for exporting, 352-353 selecting, 345 Sample tracks, 345 Two-Source, 340 Find All command, 477 Find & Replace feature, 474 additional Find options, 475 find within a file function, 475 within a site, 478 within files, 475-476 Find command (Edit menu), 474 Find feature, within a site, 476-477 finding colors, 204 errors, 466 Meta tags, 503 search engines, 502 source code, 454-456 text, 475-476 fixing errors missing file errors, 469-470 orphaned file errors, 470-471 Flash, 322-324 flattening movie files, 348 Floating Box Grid Settings dialog box, 306 Floating Box Inspector, 179, 301 floating boxes, 121, 176 adding to pages, 178 text and graphics, 183 animations invisible keyframes, 309 multiple boxes, 304-306 triggers, 312 background color, 181 browser compatibility, 177 disadvantages, 176 empty, 307 Floating Box Grid Settings, 305 Floating Boxes palette, 185 hiding/showing, 186 locking/unlocking, 185 modifying, 178-180, 186-187 recording movement of, 296 setting attributes, 305 beginning and ending placements, 301 stacking, 182-183 visibility and depth, 307-309 Folder track, 341 folders creating, 197-198 deleting, 45 GoLive Site Settings Folders, 27 moving, 44 Publish States, 489 rearranging, 44 renaming, 46 Site Data Folders, 27 site root folders, 27 fonts changing with style sheets, 381 defining with style sheets, 384 deleting, 208 HTML Source Editor preferences, 459 managing, 206-208 serif/sans serif, 89 sets, 89-90 sizing, 85 Form Button Inspector, 267-268 Form Check Box Inspector, 263 Form Inspector, 268 Form Pop-up Inspector, 264 Form Radio Button Inspector, 262 Form Text Area Inspector, 265 Form Text Field Inspector, 260 formats Sound/Music tracks, 341 supported by Photoshop Smart Object, 362 formatting floating boxes, 184 graphics, 108 text, 83, 379. See also style sheets alignment, 83 applying styles, 85 bulleted lists, 88 color, 86 font size, 85 in tables, 141-142 increasing/decreasing list level, 88 numbered lists, 87 forms check boxes, 264 creating, 258-260, 264 UI (user input), 255 cell padding, 258 CGI, 256 check boxes, 262-264 comments, 265-266 creating, 257, 261-264 fields, 259-260 hidden fields, 269-270 lists, 264-265 radio buttons, 261 receiving e-mail results, 268-269 GoLive resetting, 266-267 submitting, 266-267 tables, 257-258 text areas, 265-266 UI (user input) pop-ups, 264-265 Frame Preview mode, 56 Frame Set Inspector options, 236 setting frame attributes, 237 frames, 233 attributes, 239-240 displaying HTML files, 240 frame sets, 234 assigning pages to, 237, 239 creating, 235, 243 editing, 235 previewing, 237 linking between, 123 nested, 244 opening HTML page assigned to them, 241 search engine concerns, 507 Target pop-up menu, 242 Target2Frames Action, 246 targeting pages outside sites, 244-245 pages within sites, 241-243 two frames with one line, 246-247 URLs, 239 Frames Layout mode, 235 Frames mode, 56 Frames per second (FPS) feature (Timeline Editor), 300 frames per second (movies), 352 FTP (File Transfer Protocol), 32, 485 applications, 485 FTP Browser (GoLive), 494 login information, 486 logs, 496 maintaining Web sites with GoLive, 491 overriding default upload settings, 493 preferences, 486 proxy servers, 487 upload preferences, 488-490 uploading Web sites to Web servers, 490-491 FTP servers, 31-33, 490 G Generate Links fields, 426 generic filter, 340 generic plug-ins, adding content to pages, 328 Generic Smart Image, 373 GIF (Graphics Interchange Format), 106 transparencies, 368 transparent color, 149 Global tab (Web Settings window), 405 Attribute Case option, 406 Color Name Translation option, 407 CSS Output option, 408 CSS-Default Unit option, 407 Indent With option, 405 Line Break Character option, 406 Quote Attribute Values option, 407 Tag Case option, 406 GoLive, 8 Actions Action markers, 303 adding to animation time tracks, 302 Close Window Action, 286-287 Goto Link, 304 installing, 290 locating, 290 517 Open Window Action, 281-285 Set Image URL Action, 287-289 Change References feature, 473-474 components, 221-223 copying/pasting text, 77 Custom tab, 225 customizing palettes, 14 DHTML, 296 Document window, 9 editing source code, 449 error checking, 468 Export window, 349 Find & Replace feature, 474 Frame Preview mode, 56 frame sets, 235 Frames mode, 56 FTP maintaining Web sites, 491 overriding default upload settings, 493 upload preferences, 488-490 uploading files to Web servers, 493 FTP Browser, 494 FTP preferences, 486 graphics animations, multiple floating boxes, 306 cautions, 115 HEAD pane, 61 headers, 84 imagemap-drawing tools, 123 Inspector palette, 12 JavaScripts, 273 Layout mode, 55 Markup tree, 451 menus, 17-18 modules, turning on/of, 21 Network Status window, 496 opening exported pages, 78 Outline mode, 56 518 GoLive overview, 8 Page Templates, 227 applying, 229 building, 227 using from Site window, 230 using in Objects palette, 229 plug-ins, 21, 319, 328 Preview mode, 56 previewing pages, 66 QuickTime Timeline, 339 tracks, 339-341 QuickTime Editor, 335-337 setting preferences, 19 site cleanup options, 480 site designs, 420 adding content, 430 anchoring to pages, 422-423 annotating, 427-430 checking, 432 common errors, 432 creating, 420-421 grouping pages, 426 merging with existing sites, 431-432 sections, 424-426 submitting sites, 433 site extras window, 215 Site Library Snippets, 224-225 Site window, 13 Smart Illustrator Objects, 365-368 file formats, 368 placing Illustrator files, 366 Smart LiveMotion Objects, 369-370 Smart Objects, 109 converting text to banners, 372-373 Generic Smart Image, 373 variables, 370-371 Smart Photoshop Objects, 361 adding to pages, 363-364 sizing images, 364 supported formats, 362 Source Code palette, 452 Source mode, 56 Source view, 451 split-screen mode, 450-451 stationery files, 218 style sheets, 378 Target2Frames Action, 246 Timeline Editor, 299 editing animations, 300-302 options, 299 Toolbar, 11 URL pop-ups, 278 workspace creating, 16 default, 9 GoLive Site Settings Folders, 27 google.com, 507 Goto Link Actions, 304 Graphical User Interfaces. See GUIs, 8 graphics, 104, 341. See also movies adding to floating boxes, 183 adding to site file, 109 drag method, 110 menu method, 109 Site Root Folder, 111 adding to sites, 109 dragging and dropping, 114 image placeholders, 111 Point and Shoot method, 112 alignment with text, 116, 119 animations adding Actions to time tracks, 302 beginning/ending placements, 301 floating boxes, 307 floating boxes, multiple, 304-306 previewing, 302 saving, 302 triggers, 311-312 backgrounds, 119-121 bandwidth, 104 DHTML, 296 animations, 296, 299-300 editing animations, 300-303 overview, 296 recording animations, 296, 299 Timeline Editor, 299 dithering, 367 file types, 106 GIF, 106 hotspots, 123 hyperlinks, 122 Image Mapping, 123 Image Rollover objects, 275 JPEG, 106 linking to image placeholders, 114 PNG, 107 resizing, 364 resolution, 104 Set Image URL Actions, 287 sizing, 115 Smart Linked, 362 Smart Photoshop Objects, 361 spacing around, 118 SVG, 327 table backgrounds, 134 tiling, 121 transparencies, 368 Graphics Interchange Format. See GIF gridlines (layout grids), 160-161 grids. See layout grids grouping pages (site designs), 426 GUIs (Graphical User Interfaces), 8 installing H H.263 compressor, 351 HEAD pane, adding tags, 61 HEAD portion (pages), 59 HEAD tags, 59 headers, 84 height cells, 142 layout grids, 158 tables, 132-133 hidden fields (user input forms), 269-270 hiding floating boxes, 186 home pages, 28 hosting providers, FTP login information, 486 hosting Web sites providers, 484 requirements, 485 HotBot, 60 hotkeys Objects palette, 10 opening Document window, 9 hotspots, 123 HREF track, 340 hspace, 118 HTML (hypertext markup language), 50 adding source code in HTML Source Editor, 445 DHTML animations, 296, 299-303 overview, 296 editing, 441 Element Finder, 453-457 HTML Outline Editor, 446-450 HTML Source Editor, 442-443 Source Code palette, 451-453 text wrap, 404 Web Settings window, 402-403, 406 frame sets, 234 limitations, 84 printing source code, 461 tags, 50 adding to the HEAD pane, 61 attributes, 50 , 52 META, 59, 503-506 page heads, 51 TARGET attribute, 94 , 60 tiling images, 121 viewing source, 56 writing, 51 HTML Outline Editor, 446-447 buttons, 446 editing source code, 447-450 HTML Source Editor, 442-443 adding source code, 445 browser compatibility options, 459 Check Syntax option, 443 Colors preference, 460 Display Line Numbers option, 445 font preferences, 459 setting highlight color preference, 461 viewing preferences, 458 HTTP (Hypertext Transfer Protocol), 32 HTTP servers, 35 hyperlinks, 25, 49 color changing, 65 confusion, 64 creating, 92 graphics, 122-123 Hypertext Markup Language. See HTML I ID selectors, 382 ID style sheets, 382-383 Illustrator, 368 Image Mapping, 123-125 519 image placeholders, 111, 114 Image Rollover objects, 275 adding links to, 277 creating, 276 naming images, 275 tag, 411 images. See graphics Import Tab-Text option (tables), 134 importing music files (MIDI) into movies, 343 text, 76, 150-151 Web sites via FTP, 32-33 In & Out Links palette, 471-472 Incremental Upload command, 492 Inline styles line height, 386 priority, 397 inserting files copying files and rescanning root folder, 43 drag and drop, 42 new files, 45 from the Site menu, 41-42 keyframes into animations, 302 Inspector Annotation Inspector, 430 Browser Switch, 393 Error Inspector, 469 File Inspector, 196 Form Pop-up Inspector, 264 Form Radio Button Inspector, 262 Form Text Area Inspector, 266 Keywords, 505 Root Style Sheet Inspector, 415 Inspector palette, 12 installing Actions, 290 plug-ins, 21 Instrument track, 341 520 Instrument track internal style sheets, 378 Class, 381 ID, 382-383 Internet Explorer, Windows installation, 68 invisible keyframes, 309 italicized text, 85 J-K JavaScript, 290. See also Actions Actions, 273 elements, 288 GoLive Actions, 246 JPEG (Joint Photographic Experts Group), 106, 368 Jukeboxes, 340 keyboard shortcuts, 17 Keyframe indicator (Timeline Editor), 299 keyframes, 352 adding to animations, 302 copying, 307 invisible, 309 Timeline Editor, 299 keywords inserting into pages, 504-505 priority, 505 search engines, 503 selecting, 503 Keywords Inspector, 505 L layout (floating boxes), 176 adding text and graphics, 183 adding to pages, 178 background color, 181 browser compatibility, 177 converting to layout grids, 186-187 disadvantages, 176 hiding/showing, 186 locking/unlocking, 185 modifying, 178-180 stacking, 182-183 layout grids, 81, 134, 155 adding objects to, 163-165 to pages, 156 text to, 166 adjusting attributes, 158-160 gridlines, 160-161 Align palette, 167 aligning objects in grids, 167 options (Toolbar), 165 on pages, 162 background color, 162 cautions, 158 converting floating boxes to, 186-187 default dimensions, 156 nesting in tables, 146 optimizing, 170 OS differences in displaying, 167 placement, 156 Source section, 157 text boxes, resizing, 166 Toolbar, 165 Layout mode, 55-57 Layout Text Box object, 81 Library tab (Site window), 225 line height, 385 Link button, 93 Link Warnings, 466 links adding rollovers, 277 between frames, 123 checking, 202 color, 64 creating anchors, 95-97 external URLs, 95 Link button, 93 Point and Shoot function, 94 deleting, 201 dynamically linked ele- ments (components), 220 e-mail, 92-93, 198-200 editing, 200-201 Change References feature, 473-474 Find & Replace feature, 474-478 Find feature, 476-477 In & Out Links palette, 472 external, 200 pages linked with frames, 244 verifying, 202 graphics, 114, 122 In & Out Links palette, 471 redirecting, 200-201 Smart Links, 362 targeting pages with frames, 241 two frames with one link, 246-247 lists bulleted, 88 increasing/decreasing level, 88 numbered, 87 Live Image Inspector, 370 loading external pages into frames, 245 pages with animations, 303 locating Actions, 290 locking floating boxes, 185 logs (FTP), 496 Loop option (Timeline Editor), 300 loops (movies), 322 Lycos.com, 507 M Macromedia Flash. See Flash, 322 mailto links, 198 mailto preference, 92 Network Solutions Web site maintenance (GoLive’s FTP features), 491 managing external links, 200 files, 194-197 floating boxes, 185 fonts, 206-208 margins, adjusting with style sheets, 388 markers (Action), 303 Markup tab (Web Settings window), 402-403 changing default element attributes, 408 changing default Image Settings, 411-412 editing tag, 410 Markup tree, 451 Master tab (Diagram window), 435-436 menus, 17-18 META tags, 59, 503 default, 504 page descriptions, 506 MIDI files, importing into movies, 343 missing file errors, 469-470 Modified Date object, 274 modifying, 235. See also editing components, 223 Custom Snippets, 215 Flash options, 324 floating boxes, 178-181 layout grid attributes, 158-160 pages, 275 stationery files, 215 table dimensions, 132 tracks, 344 modules, turning on/off, 21 .mov file, 320 Movie Inspector, 338, 353 Movie Settings window, 350 movies, 299. See also animations 3D track, 340 caching files, 321 cautions, 335 Chapter track, 340 compressing, 350 data rate, 352 Quality Slider, 351 sound files, 354-355 dimensions, 353 download time concerns, 353 exporting for the Web, 348, 352-353 filters, 345 Flash, 324 flattening files, 348 Folder track, 341 frames, 352 frames per second, 352 generic filter, 340 HREF track, 340 importing music files (MIDI), 343 Instrument track, 341 MPEG track, 340 narration, 355 One-Source track, 340 Picture track, 340 Quality Slider, 351 QuickTime, adding to pages, 320-322 QuickTime Editor, 335 opening, 337 previewing, 337 Timeline, 339 RealVideo, 324 saving for the Web, 348 slide shows, 341 sound settings, 354 Sound/Music tracks, 338, 341-343 Sprite track, 340 Streaming track, 341 SWF track, 340 Text track, 341 Three-Source Filter track, 340 tracks, 339-341 duration time, 344 sample, 345 setting options, 344 Timeline, 341 transitions, 340 Two-Source filters, 340 521 Video track, 338-340 adding, 342-343 transitions, 345-347 moving files, 44 folders, 44 MPEG track, 340 multimedia, 341. See also movies Flash, 322-324 generic plug-ins, 328 movies, 320-322 RealVideo adding content to pages, 324 customizing, 325 options, 325 SVG, adding content to pages, 327 multiple-user Web sites, 26 music compression (movie compression), 354 data rate, 354 narration, 355 Music track, 341-343 N-O naming, 484. See also domain names consistency, 54 frames, 239 pages, 53-54 pages, 59. See also titles tracks (Timeline), 344 UI (user input) form elements, 260 Web pages, 502 Web sites, 29 narration, 355 nesting, 129 frames, 244 tables, 144-145, 147 Netscape, CSS fix, 395 Network Solutions Web site, 484 Network Status window, 522 Network Status window 496 New Folder button (Site Toolbar), 197 numbered lists, 87 objects Image Rollover, 275 adding links to, 277 creating, 276 naming images, 275 layering (floating boxes), 176 Modified Date, 274 Objects palette, 10 adding anchor links, 97 Browser Switch icon, 393 creating new pages, 53 Design Annotation object, 429 Floating Box icons, 178, 297 Frame Set icons, 235 Layout Text Box object, 81 Library button, 226 Netscape CSS fix, 395 Page Templates, 229 Site Extras tab, 216 Smart Illustrator Objects, 366 Smart tab, 274 tables, 130 Objects window, Site tab, 202-203 One-Source track, 340 Open Window Action, 281 configuring, 283-285 opening, 282 opening exported pages, 78 files in native formats, 370 movies in QuickTime Editor, 337 Objects palette, 10 optimization, 360 layout grids, 170 Smart Photoshop Objects, 364 organizing files, 197-198 adding to a Site File, 198 creating new folders, 197 site colors, 204 orphaned file errors, 470-471 Outline Editor, 446-447 buttons, 446 editing source code, 447-450 Outline mode, 56 overture.com, 507 P padding cells, 133, 258 images, 118 Page Inspector, changing titles, 60 Page Templates, 227 applying, 229 building, 227 using from Site window, 230 using in Objects palette, 229 pages adding to site designs, 426 Smart Illustrator Objects, 365-368 Smart LiveMotion Objects, 369-370 Smart Photoshop Objects, 363-364 anchoring site designs, 422-423 backgrounds color, 65 images, 119-121 bandwidth, 104 child, 424 color applying, 206 text, 86 components, 214 browser compatibility, 220 creating, 221 dynamic page elements, 220 embedding, 222-223 modifying, 223 creating audience specifications, 62 File menu, 54 Objects palette, 53 Custom Snippets, 215 descriptions, 506-507 displaying, OS differences, 167 editing, 56 exporting from word processors, 78 Flash, 322-324 frames, 233 attributes, 239-240 displaying HTML files, 240 frame sets, 234-239 linking between, 123 targeting pages outside sites, 244-245 targeting pages within sites, 241-243 targeting two frames with one link, 246-247 generic plug-ins, 328 graphics. See graphics grouping (site designs), 426 HEAD portion, 59 hyperlinks, 92, 122 Image Rollover objects, 275 adding links to, 277 creating, 276 naming images, 275 inserting keywords, 504-505 plug-ins layout, 176-187 layout grids, 156 adding objects to, 163-165 adding text to, 166 Align palette, 167 aligning contained objects, 167 alignment, 162 attributes, adjusting, 158-160 background color, 162 cautions, 158 gridlines, adjusting, 160-161 optimizing, 170 placement, 156 Source section, 157 Toolbar, 165 links anchors, 95-97 creating, 93-94 email, 92-93 external URLs, 95 loading pages containing animations, 303 locking, 227 margins, adjusting with style sheets, 388 Modified Date objects, 274 naming, 53-54 opening from Files list, 55 previewing, 66, 412 in browsers, 67-68 in GoLive, 66 promoting on search engines, 507 QuickTime movies, 320-322 RealVideo adding content, 324 customizing, 325 options, 325 search engines, 60 site designs, adding content, 430 Site Library Snippet, 224-225 source code, viewing, 56 spell checking, 98-99 stationeries, 214 applying, 218 as template files, 217 style sheets benefits of, 383 Class, 381 compatibility issues, 392 defining fonts, 384 defining text attributes, 385-386 Element, 380 Element selectors, 378-379 external, 389-390 ID, 382-383 Netscape CSS fix, 395 priority, 395-396 SVG, adding content to pages, 327 tables, 130 appearance, 133 cells, 135 columns, 137-138 dimensions, 132-133 importing text, 150-151 layout grids, 146 modifying, 131 multiple, 148 nesting, 144-147 rows, 137-138 styles, 143-144 text bulleted lists, 88 copying/pasting, 76-77 dragging between documents/pages, 79 font sets, 89-90 formatting, 83-86 hyperlinks, 92 importing, 76 increasing/decreasing list level, 88 numbered lists, 87 typing, 80-82 View palette, 82 titles, 59-60 523 URL pop-ups, 278-281 viewing HEAD portion, 57 in Layout and Source modes simultaneously, 57 width, 62-63 palettes Actions, 283 Adaptive, 367 Align, 167 customizing, 14 docking, 15-16 Floating Box, 185, 305 In & Out Links palette, 471-472 Inspector, 12 Objects, 10 Source Code palette, 451 changing views, 452 functionality, 453 tear off tabs, 15 Palindrome option (Timeline Editor), 300 pasting text, 76-77 Photoshop Smart Photoshop Objects, 361-362 transparencies, 368 Picture track, 340 pixels, 105, 118 placeholders floating boxes, 178 image, 111 Playback buttons (Timeline Editor), 300 Plug-in Inspector, 323 plug-ins, 21, 317 browser, 318 creating shortcuts for, 319 downloading, 318 Flash, 322-324 generic, 328 GoLive recognition, 319 QuickTime. See QuickTime RealVideo adding content to pages, 324 customizing, 325 options, 325 524 plug-ins SVG, 327 third party, 318 Web site resources, 318 PNG (Portable Network Graphics), 107 Point and Shoot method, 94 adding graphics to pages, 112 background images, 120 creating anchors, 96 posterizing, 367 preferences, 19 FTP, 486 GoLive, 19 Network Status, 496 Preview mode, 56 previewing animations, 302 frame sets, 237 movies, 337 pages, 66, 412 in browsers, 67-68 in GoLive, 66 plug-in content, 319 Print command (File menu), 461 printing source code, 461 priority (style sheets), 395-396 programming with HTML, 51 promoting pages on search engines, 507 proxy servers, 487 Publish States, 489 Q QDesign Music 2 compressor, 354 Qualcom PureVoice compressor, 355 Quality Slider, 351 QuickDraw, inserting 3D files into movies, 340 QuickTime, 318 adding movies to pages, 320-322 QuicTime toolbar, 349 verifying installation, 336 QuickTime Editor, 335 interface overview, 337 movies adding Sound/Music tracks, 343 adding Video tracks, 342-343 compression, 350-352 exporting files for the Web, 348 filter options, 352-353 keyframes, 352 opening, 337 previewing, 337 Quality slider, 351 tracks, 339-341 Sample tools, 345 sound compression, 354-355 Timeline, 339, 344 transitions between two Video tracks, 346-347 R radio buttons (user input forms), 261 Real-Time Streaming Protocol (RTSP), 341 RealPlayer, 318 RealVideo adding content to pages, 324 customizing, 325 options, 325 rearranging files and folders, 44 Recall Design tool (Staging view), 432 recording DHTML animations, 296 redirecting links, 200-201 registrars (domain names), 484 remote rollovers, 287-288 renaming files and folders, 46 replacing text, 475-476 Rescan command (Site menu), 468 resetting UI (user input) forms, 266-267 resizing graphics, 115 images, 364 resolution, 104 resources, adding to Web sites, 40 rollovers adding links to, 277 creating, 276 remote, 287-288 states, 276 Root folder, Smart Objects source files, 365 Root Style Sheet Inspector, 415 rows (tables), 131 adding, 138 changing number of, 131 coloring, 140 deleting, 138 formatting text, 141-142 selecting, 137 RTSP (Real-Time Streaming Protocol), 341 S .swf files, 296 Sample tools (QuickTime Editor), 345 Sample tracks, 345 sans serif fonts, 89 Save For Web dialog box, 363 saving animations, 302 elements to Library Button, 226 external style sheets into sites, 390-391 FTP logs, 496 movie files for the Web, 348 Scalable Vector Graphics (SVG), 327 Smart Photoshop Objects Scenes option (Timeline Editor), 299 scratch pages, 422 search engines, 60, 502 avoiding common errors, 507 descriptions (of pages), 506-507 frames, 507 keywords, 503 inserting into pages, 504-505 priority, 505 selecting, 503 list of, 507 overview, 502 promoting sites to, 507 spiders, 503 titles (pages), 503 searching source code, 453-456 text, 475-476 section name error, 433 sections (design pages) creating, 424 filenames, 425 Generate Links fields, 426 selecting cells, 135 columns, 137 rows, 137 selectors (style sheets), 378 Class Style, 380 Element, 378-379 ID, 382 serif fonts, 89 servers FTP, 31-33, 490 HTTP servers, downloading Web sites, 35 proxies, 487 uploading files to, 493 Web sites to, 490-491 Set Image URL Action, 287, 289 setting floating box attributes, 305-309 FTP preferences, 486 gridline attributes, 160 layout grid background color, 162 page background color, 65 table dimensions, 132 track options (Timeline), 344 Shockwave, inserting files into movies, 340 Shockwave Flash, 318 shortcuts creating for plug-ins, 319 keyboard, 17 opening Objects palette, 10 showing floating boxes, 186 single-user Web sites, 26 Site Data Folders, 27 site designs, 420 adding pages, 426 anchoring to pages, 422-423 annotating, 427 adding annotations, 428-429 editing, 430 checking, 432 common errors, 432 content, 430 creating, 420-421 grouping pages, 426 merging with existing sites, 431-432 sections, 424 filenames, 425 Generate Links fields, 426 submitting to sites, 433 Site Extras tab (Objects palette), 216-217 site extras window, 215 Site Files, 27 Site Library Snippets, 224-225 Site menu commands Change References, 473 Clean Up Site, 479 Rescan, 468 View, Errors, 466 Site Root Folder, 27, 111 Site Settings dialog box, 486 Site Templates, 28, 36-37 525 Site Toolbar, 197 Site window, 13, 38 adding items to, 479 Colors tab, 39, 205-206 Custom tab, 39, 225 Designs tab, 38, 421 Errors tab, 39, 466 External tab, 38, 200-202 Extras tab, 39 Files tab, 38, 194-197 Font Sets tab, 39, 206-208 FTP tab, 39 Library tab, 225 managing Web sites, 44 page templates, 230 WebDAV tab, 40 sites. See Web sites sizing floating boxes, 180 font, 85 graphics, 105, 115 headers, 84 images, 364 layout grid text boxes, 166 movies, 322, 353 text fonts, 85 Window default settings, 63 slide shows, 341 Smart Illustrator Objects adding to pages, 365-368 colors, 368 placing Illustrator files, 366 Smart Links, 362 Smart LiveMotion Objects adding to pages, 370 Export format, 369 Smart Objects, 109, 360 converting text to banners, 372-373 embedding components in pages, 223 Generic Smart Image, 373 source files, 365 variables, 370-371 Smart Photoshop Objects, 361 adding to pages, 363-364 sizing images, 364 supported formats, 362 526 Snap options (gridlines) Snap options (gridlines), 160 software. See plug-ins Sorenson Video compressor, 351 sorting data in tables, 151 sound (movies), 354 Sound Settings window, 355 Sound track, 338, 341-343 Sount track, 341 source code, 56. See also HTML adding in HTML Source Editor, 445 editing, 388, 441 Element Finder, 453-457 HTML Outline Editor, 446-450 HTML Source Editor, 442-443 Source Code palette, 451-453 finding, 453-457 printing, 461 searching, 454-456 viewing, 56, 458 Source Code palette, 451 changing views, 452 functionality, 453 Source Editor, 56, 442-443 adding source code, 445 browser compatibility options, 459 Colors preference, 460 font preferences, 459 setting highlight color preference, 461 viewing pages in Layout mode simultaneously, 57 viewing preferences, 458 Source view, 451 spacing around images, 118 between words and letters, 386 cells, 133 spanning cells, 139 spell checking, 98-99 spiders, 503 split-screen mode, 450-451 Sprite track, 340 stacking floating boxes, 182-183 stacking order (floating boxes), 308 stage in scratch error, 433 Staging view, 422, 431-432 states Publish States, 489 rollovers, 276 stationeries, 214 applying files, 218 creating new pages as, 219 as template files, 217 Stationery pop-up window, 425 storing Site Library Snippets, 224 streaming (RealVideo), 324 Streaming track, 341 style sheets adding to existing pages, 389-390 benefits of, 383 Class, 381 compatibility issues, 392 creating default browser profiles, 415 in GoLive, 378 defining fonts, 384 text attributes, 385-386 Element, 380 external creating, 389-390 saving into sites, 390 ID, 382-383 internal, 378 margins, 388 Netscape CSS fix, 395 priority, 395-396 saving external style sheets into sites, 390 selectors, 378-379 styles (tables), 143-144 Submit Design tool (Staging view), 432 submitting designs to sites, 433 UI (user input) forms, 266-267 SVG (Scalable Vector Graphics), 318, 327 .swf files, 322 SWF track, 340 syntax highlighting (HTML Source Editor preferences), 460 T Table palette, selecting cells, 136 Table to Layout Grid option, 134 tables, 81, 129, 176. See also floating boxes; layout grid adding to pages, 130 alignment, 133 appearance, 133 captions, 134 cells, 135 colors, 140 padding, 133 selecting, 135 spacing, 133 spanning, 139 columns adding, 138 deleting, 138 selecting, 137 dimensions, 132-133 formatting text, 141-142 layout grids, 134, 146 modifying, 131-132 multiple tables on pages, 148 nesting, 129, 144-145 nesting one-cell tables within cells, 147 rows adding, 138 deleting, 138 selecting, 137 sorting data, 151 styles, 143-144 text, importing, 150-151 UI (user input) forms, 257-258 Two-Source Filter track Tag style sheets, 378 tags HTML, 50 adding to the HEAD pane, 61 attributes, 50 , 52 page heads, 51 META, 59, 503 default, 504 page descriptions, 506 TARGET attribute, 94 , 60 TARGET attribute, 94 target folder error, 432 target links, 243 Target pop-up menu, 242 Target2Frames Action, 246 TCP/IP, 32 tear off tabs, 15 teletype text, 85 Template Regions palette, 228 templates Page Templates, 227 applying, 229 building, 227 using from Site window, 230 using in Objects palette, 229 site templates, 36-37 stationaries as, 217-219 testing diagrams, 432 links, 202 text adding to floating boxes, 183 to layout grids, 166 alignment with graphics, 116, 119 attributes, 385-386 converting to banners, 372-373 copying, 76-77 dragging between documents/pages, 79 email links, 92-93 finding, 475-476 fonts, 206 defining with style sheets, 384 HTML Source Editor preferences, 459 sets, 89-90 formatting, 75, 83, 379. See also style sheets alignment, 83 applying styles, 85 bulleted lists, 88 color, 86 font size, 85 increasing/decreasing list level, 88 numbered lists, 87 tables, 141-142 headers, 84 hyperlinks, 92 importing, 76 line height, 385 links, 95-97 margins, 388 pasting, 76-77 replacing, 475-476 spacing between words and letters, 386 spell checking, 98-99 tables importing, 150-151 sorting data, 151 typing onto pages, 80, 82 viewing, 82 wrapping (HTML code), 404 text boxes, 80-82, 166 Text track, 341 third party plug-ins, 318 Three-Source Filter track, 340 tiling, 121 time and date (Modified Date objects), 275 Time cursors (Timeline Editor), 300, 338 Time track (Timeline Editor), 299, 309 Timeline Editor, 296, 339 Action Track, 303 adding Actions to time tracks, 302 527 animations, 300-302 keyframes, 299, 309 options, 299 setting track options, 344 tag, 60 titles changing, 60 pages, 59, 502 Toggle Source Split View, 58 Toolbar (GoLive), 11, 165 tracks, 339-341 3D, 340 Chapter, 340 duration time, 344 Folder, 341 generic filter, 340 HREF, 340 Instrument, 341 MPEG, 340 naming, 344 One-Source, 340 Picture, 340 sample, 345 setting options, 344 Sound/Music, 341-343 Sprite, 340 start time, 344 Streaming, 341 SWF, 340 Text, 341 Three-Source Filter, 340 Timeline, 341 transitions, 345-347 Two-Source filters, 340 Video, 340-343 transitions, 340, 345-347 transparencies, 107, 368 triggers (animations), 311-312 troubleshooting, 466. See also errors bugs, 467 errors in source code, 443 fixing errors in site diagrams, 432 listing Web pages with search engines, 507 Network Status window, 496 Two-Source Filter track, 346 528 Two-Source Filter Track Inspector Two-Source Filter Track Inspector, 346 Two-Source filters, 340 U UI (user input) forms, 255 CGI, 256 check boxes, 262-264 comments, 265-266 creating, 257-264, 268 fields, 259-260 hidden fields, 269-270 lists, 264-265 pop-ups, 264-265 radio buttons, 261 receiving e-mail results, 268-269 resetting, 266-267 submitting, 266-267 tables, 257-258 text areas, 265-266 unlocking floating boxes, 185 updating files, 198 Upload All command, 492 Upload Modified Items command, 492 Upload Options dialog box, 490, 493 Upload Selection command, 492 Upload Site dialog box, 494 uploading files/folders, 491 troubleshooting with Network Status window, 496 Web servers, 493 FTP, 485 Web sites to Web servers, 490 URL filters, 467 URLs(Universal Resource Locators), 32, 200 # character, 97 Base, 247 domain names, 484 frames, 239 linking to external, 95 linking to frames, 245 linking with HREF track, 340 pop-ups, 278-281 user input forms. See UI (user input) forms, 255 V variables (Smart Objects), 370-371 verifying links, 202 video compression, 350 Video track, 338-340 adding to movies, 342-343 transitions between multiple, 345-347 video. See movies View palette, 82 viewing pages in Layout and Source modes simultaneously, 57 sorce code, 56 text, 82 virtual hosting, 484 visibility (floating boxes), 307-309 vlink color, 64 vspace, 118 W-X-Y-Z Web pages. See pages Web servers Network Status window, 496 uploading files, 494 uploading files to, 493 Web Settings Attribute Inspector, 408 Web Settings window, 402 Browser Profiles tab, 403, 412 creating a default browser profile, 414 selecting profiles, 413 Global tab, 402, 405 Attribute Case option, 406 Color Name Translation option, 407 CSS-Default option, 407 CSS Output option, 408 Indent With option, 405 Line Break Character option, 406 Quote Attribute Values option, 407 Tag Case option, 406 Markup tab, 402-403 changing default Image Settings, 411-412 changing default element attributes, 408 editing tag, 410 Web sites, 49 adding Placeholder icons to pages, 111 resources to, 40 Adobe GoLive Actions Xchange, 290 animations, 296, 299 Action markers, 303 editing, 300-302 multiple floating boxes, 304-306 Timeline Editor, 299 bandwidth, 104 bugs filtering, 467 finding, 466 fixing, 468 missing files, 469-470 orphaned files, 470-471 Web sites cleaning up, 479 colors adding, 205 applying, 206 deleting, 206 finding, 204 organizing, 204 creating, 53, 420. See also site designs File menu, 54 floating boxes, 178 from existing folders, 30 from a FTP server, 31-33 from a HTTP server, 35 Objects palette, 53 from scratch, 28-29 from a site template, 36-37 from existing Web sites, 30-31 directories, 502, 508 domain names, 484 downloading from HTTP servers, 32 dynamically linked elements (components), 220 e-mail addresses, 198-200 editing Change All References tool, 202-204 Change References feature, 473-474 Find & Replace feature, 474-478 Find feature, 476-477 In & Out Links palette, 471-472 errors finding, 466 fixing, 468 missing files, 469-470 orphaned files, 470-471 URL filters, 467 file management copying files and rescanning root folder, 43 GoLive Site Settings Folders, 27 problems with, 27 site data folders, 27 Site Files, 27 from the Site menu, 41-42 site root folders, 27 Site window, 194-197 updating files, 198 with drag and drop, 42 Flash, 322-324 fonts deleting, 208 managing, 206-208 FTP, 485 overriding default upload settings, 493 proxy servers, 487 upload preferences, 488-490 uploading to Web servers, 490-491 graphics. See graphics hosting providers, 484 FTP login information, 486 requirements, 485 linking pages, 93 maintaing with GoLive’s FTP features, 491 managing, 44 merging with diagrams, 431 movies cautions, 335 flattening files, 348 saving files for the Web, 348 naming, 29 Network Solutions, 484 pages counting, 477 naming, 54 targeting external pages with frames, 244-245 targeting with frames, 241-243 targeting two frames with one link, 246-247 529 pages. See pages plug-ins, 318 QuickTime movies, 320-322 real.com, 324 RealVideo adding content to pages, 324 customizing, 325 options, 325 registrars (domain names), 484 search engines, 60, 502 avoiding common errors, 507 keywords, 503-505 list of, 507 overview, 502 page descriptions, 506-507 promoting, 507 single-/multiple-user, 26 Site window, 38 Colors tab, 39 Custom tab, 39 Designs tab, 38 Errors tab, 39 External tab, 38 Extras tab, 39 Files tab, 38 Font Sets tab, 39 FTP tab, 39 WebDAV tab, 40 Smart Illustrator Objects, 365-368 Smart LiveMotion Objects, 369-370 Smart Photoshop Objects, 363-364 style sheets compatibility issues, 392 Netscape CSS fix, 395 priority, 395-396 saving external into, 390 SVG adding content to pages, 327 online resources, 327 530 Web sites titles, helping search engines, 503 WebDAV, 40 whatis.com, 53 Yahoo!, 502 Webcrawler.com, 507 WebDAV, 40 What You See Is What You Get (WYSIWYG), 8, 55 whatis.com, 53 width cells, 142 layout grids, 158 pages, 62-63 tables, 132-133 Window Size menu, 63 Windows, Internet Explorer installation, 68 windows Document, 9 Objects window, 202-203 Site tab Site window, 13, 38 Colors tab, 39, 205-206 Custom tab, 39 Designs tab, 38 Errors tab, 39, 466 External tab, 38, 200-202 Extras tab, 39 Files tab, 38, 194-197 Font Sets tab, 39, 206-208 FTP tab, 39 WebDAV tab, 40 Web Settings window, 402 Browser Profiles tab, 403, 412-414 Global tab, 402, 405-408 Markup tab, 402-403, 408-412 word processors copying/pasting text, 76-77 exporting pages, 78 word wrap, 404 workspace creating, 16 default, 9 wrapping text, 404 WYSIWYG (What You See Is What You Get), 8 Yahoo!, 502 Z-index (floating boxes), 308 Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree Cookies