whitepaper
Mastering Adobe GoLive CS2 Basics
TABLE OF CONTENTS 1 Introduction Create a site The New dialog box The Site window Lay out pages

Introduction

Adobe GoLive CS2 contains everything you need to design, code, and manage even the most complex web projectswithout having to write a line of HTML. Even so, to work on the web you may need to learn a few new tricks. Images have to be compressed in certain ways, fonts dont always show up how you want them to, and layout may not be consistent across all web browsers. And unlike printed publications, websites constantly change and as a result need more sophisticated management tools. Adobe GoLive helps you deal with these challenges. Visual layout tools create clean, modern, standards-based code. Integration with Adobe Photoshop and other Adobe applications makes working with images easy. And the GoLive site management tools simplify the ongoing maintenance of your site. This document describes how to create a simple website using a typical GoLive workflow, and introduces you to the key tasks youll encounter as you build and manage your site. Youll learn how to: 1Create a Site folder, bring in assets, and add pages to your site. 2Lay out pages, manipulate images, add text boxes, and create links. 3Work with Smart Objects and add interactive scripts without coding them yourself. 4Publish your site on the Internet using the GoLive Publish Server feature.
11 Work with Smart Objects 13 The Actions palette 15 Upload your site 16 Additional resources

Create a site

When you start building a website, your first instinct may be to open a page and start placing text and objects where you want them. However, with GoLive, its better to begin building a site rather than a page. That way, GoLive can track all of your assets from the start, and you wont have to worry about losing a page or image.

The New dialog box

Work in the New dialog box to begin creating a site: 1In the GoLive Welcome screen, click New Document. (Or, if youve previously chosen not to display the Welcome screen, choose File > New.) 2Click Site in the left column of the New dialog box.
The New dialog box In addition to building websites, GoLive lets you build interactive movie files and sites for mobile phones. As you learn more about interactive design, youll find this dialog box a powerful starting point for many different workflows.
3 Select Blank Site and then click Next. 4 Name your site and choose a location to save it where it will be easy to find. Click Next. 5 Make sure Dont Use Version Control is selected and then click Next. 6 The next screen lets you specify a publish server that will host your website when youre done. Select Specify Server Later and then click Finish to open the Site window.
Whats in the Site window The GoLive Site window has ten different tabs you can use for various functions: Files: This is the root folder of your site. Upload these files to your server when youre done designing your site. External: Store commonly-used URLs and e-mail addresses so that you can quickly link to them when you build your site. Colors: Store the colors used in your site. Font sets: Store your favorite groups of webfriendly fonts. CSS: Find all the different CSS elements used on your site. Diagrams: Use the powerful site diagramming workflow from this tab. The Site window. Publish Server: Upload pages and images to a server. Collections: Store aliases or shortcuts to commonlyused assets here. Errors: If you have any broken links or missing files, GoLive tracks them in real time and displays them here. Extras: Find Smart Objects, InDesign Packages, and templates to use with your site.

The Site window

The Site window is the most important part of the GoLive workspace. Its here that you maintain, check, and even publish your website. The Files tab contains your root folder, or everything in your site that will be uploaded to a server. By default the root folder contains an item called index.html. Whenever a web browser goes to this folder, the first thing it loads is the default page. Therefore, in GoLive, index.html is your home page.
Adding pages To add more pages to your site: 1 Click the Create New Page icon in the GoLive toolbar.
Naming pages Wondering what to name a web page? You can use any name that contains letters and numbers, but not most punctuation marks (an underscore _ is ok). Usually web designers name their pages in lowercase letters according to what they contain. A typical design firms site, for example, would have pages named clients.html, portfolio.html, and content.html.
Create new pages in the GoLive toolbar.
2 Type a page name and then press return. 3 Repeat step 2 to create a few more pages. Adding subfolders Most web designers arrange the various files associated with a website into neatly organized sub-folders. With small sites, HTML pages normally go into one folder, images into another, and so on. When you arrange your folders, remember that you have to leave index.html, your homepage, in the top level of your Files list (this location is also known as the root folder) so that a web browser can find it. To create a folder: 1 Click the Create New Folder icon in the GoLive toolbar.
Create new folders in the GoLive toolbar.
2 Type a name for the folder, for example, html. Then drag and drop your newly created pages into it, just as you would in the Finder (Macintosh) or Explorer (Windows). Adding images The web only permits certain image formats, such as GIF and JPEG. You can easily create images in these formats using the Save For Web command in Photoshop or Adobe Illustrator (see sidebar). GoLive CS2 also allows you to work with Smart Objects. These objects let you specify a source file (often in a native Adobe file format) for which GoLive creates a target file in a web-optimized format. See Working with Smart Objects below for more information. To add web-ready images: 1Optimize an image for use on the web (see sidebar). 2In the GoLive Site window create a new subfolder called assets. 3Drag and drop the image or images into it.

The Save For Web command To format files for use on the web, youll need to use the Save For Web command in Photoshop or Illustrator if one of these applications is installed on your system. 1 With the file open in one of the two applications, select File > Save For Web 2 At the top of the Save For Web - Powered By ImageReady dialog box, select the 2-up tab. The image on the left will now be your original, the one on the right will be the compressed version. Select the compressed image. 3 On the right side, youll see a range of options. The most important option is Optimized File Format. Choose GIF when selecting images with flat colors or repeating patterns, such as a logo. Choose JPEG when compressing photographs or files with smooth gradients. 4 In this dialog box you can also resize the image and adjust other settings. You want to get the best possible image with the smallest possible size. For more information on achieving this result, see Photoshop or Illustrator Help. 5 When youre satisfied with your settings, click Save and follow the instructions for your image type.
Site file structure GoLive organizes directories so that everything can be tracked with the site-management tools.
The site as it appears in Windows XP.
The site folder for your site contains the following items:
The root folder (called web-content). This folder contains the HTML pages, images, and other files that make up your website. The contents of this folder are displayed in the Site window in GoLive. The data folder (called web-data). These are items used to create your website, such as templates, Smart Objects, and InDesign Packages. These files do not get uploaded to the server. The settings folder (called web-settings). This folder contains the GoLive settings files.
The site file (you named this file). This file tracks everything in the folders described above. When you open the site file, it starts GoLive and displays the Site window.

Lay out pages

The Layout window has six different modes for viewing a webspage, but the most important mode is the Layout Editor where you can drag and drop files to create pages. Open a page to learn more about the layout tools in GoLive.
The Document window The Document window has six different tabs. Layout Editor: Create pages with easy-to-use visual tools. Frame Editor: Work with framesets if you use them. Source Code Editor: Write and edit source code here. Outline Editor: Access advanced code elements. Layout Preview: See a browser-like view of your site. Preview Layout as Adobe PDF: Generate a PDF of your page. Great for making and sending snapshots of your pages.
The document window with the Layout editor active.
The Objects toolbox The Objects toolbox has three sections. At the top, you can find selection tools, the middle has a category list of different objects you can add to your page, while the bottom contains the objects themselves.

Toolbar categories Heres a brief overview of what youll find in each of the categories in the Ob ject toolbar. Basic: Basic HTML elements for your page, such as layout boxes, tables, and more. Smart: Add and work with Smart Objects. CSS: Add CSS Block objects to build pages that are compatible with multiple browsers and platforms. Form: Tools to work with forms.

Categories

Head: Add metadata, such as keywords for search engines. Frame: Use this section to build pages with frames.

Objects

Site: This section can be used to add elements to the Site window. Diagram: Create site diagrams. Quicktime: These elements are used with the GoLive Quicktime editor. SMIL: Create Synchronized Multimedia Interaction Language documents. Primarily for developing content for mobile devices.

The Objects toolbox.

To add objects to your site: 1 From the bottom section of the Objects toolbox, drag the Layout Grid item (at top left) onto your page. (If Basic is not selected from the Draggable Objects category, you will not see the Layout Grid.)

The Layout Grid object.

2 Drag the handle at the bottom right hand corner of the grid so that the grid covers the work area.
The Layout editor after placing the Layout Grid object.
3 Drag a GIF or JPEG image from the Files tab of the Site window to the layout grid. If the image is too large, GoLive prompts you to convert it to a Smart Object. For now, use another image or see Working with Smart Objects below.
The layout editor with image added.
You can now drag and position the image anywhere you like.
Adding text boxes To add a text box, use the Grid Text Box tool: 1 Select the Grid Text Box tool, which is nested under the Layer tool. Click and drag to create a grid text box.

The Grid Text Box tool.

2 Select the Standard Editing tool and click inside the box.
The Standard Editing tool
3 Type text into the text box or paste a section of text from a document. 4 To move the text box, grasp it by the edge (when the pointer is positioned at the edge of the text box, the Standard Editing tool turns into the Hand tool) and drag it to another location. The Inspector palette The Inspector palette allows you to edit and customize selected objects. This palette is context sensitive, and it changes depending on which type of item you select. For example, if you select the layout grid, youll see options for changing its size, the spacing of the gridlines, and whether you want objects to snap to the gridlines or not. When there are too many options to fit in one panel of the palette, they are distributed across multiple tabs.
Adding links to images Use the Inspector palette to add links to images in your site: 1 Select an image that youve added to the page.

The Inspector palette.

2 The Inspector palette now has three tabs: Basic, More, and Link. Click the Link tab.
The link tab of the Inspector palette.
3 Type the URL for your page into the field or use the GoLive pick whip to link to another page in your site. To use the pick whip: a Click and drag from the Fetch URL icon, which is located at the left side of the link field.

The Fetch URL icon

bDrag the pick whip to the Files Tab of the Site Window. You may need to rearrange your windows to do so. To select a page, first hover over the HTML folder youve created, then select your page and release.

The pick whip.

GoLive creates the hyperlink for you. Dont worry if it takes you a few tries to get used to the pick whip. Once you become accustomed to it, youll love how quickly it lets you navigate through the file structure to locate the page you want. Adding links to text Adding links to text is a similar procedure as with images: 1 Using the Standard Editing tool, select the text youd like to link.
Text selected in the Layout editor.
2 Type a URL, or use the GoLive pick whip to link to another page in your site.
Check your work GoLive offers a number of ways for you to check your work in a browser-like environment. One of these methods is the Live Rendering browser. To access the Live Rendering browser, choose File > Preview in > Live Rendering.
Selecting the Live Rendering palette.
The Live Rendering browser updates as you work in your layout, so you can check the work youve done, including links youve created. Click the SSR (Small Screen Rendering) button at the top right to see how your webpage appears in the Opera Small Screen Rendering browser, one of the most popular browsers for cell phones and other mobile devices.
The Live Rendering browser updates as you work.
Summing up When you design your site, you may find that the Site window, the Layout window, the Objects toolbox, and the Inspector palette are the most important tools you will use. To learn more about these tools, see the Additional resources section at the end of this document.
Mastering Adobe GoLive CS2 Basics 10

Work with Smart Objects

Though the web requires all images to be in certain formats, such as GIF and JPEG, GoLive Smart Objects let you work with native Photoshop and Illustrator files. Say, for example, that you have a photo that youve compressed, but when you open it in GoLive, you notice that youd neglected to color correct it properly. Normally, youd have to throw out the compressed file, go back to the original photo, color correct it, and save it again for the web. With GoLive, you can double-click the Smart Object to start Photoshop (if it is installed). You can then make the corrections and save the image. GoLive detects the changes and updates the file. Smart Objects have other advantages. You can crop and resize them inside the Layout window, or set text layers as variables so you can change the text without opening another application. Using Smart Objects In order to start working with Smart Objects, you will first have to add one to the site. Since you wont be uploading your Smart Objects to a server, the procedure is slightly different than with compressed images. 1 Click the Extras tab in the right side of the Site window.

The Extras tab.

2 Drag a Photoshop or Illustrator file into the Smart Objects folder.
Adding a file to the Smart Objects folder.
3 Drag a Smart Object into the Layout Editor. The GoLive Save For Web window opens and you can choose settings to make your image web-ready. You may also want to reduce the image size to something manageable, but remember, since its a Smart Object, you can always readjust it once its on your page.
4 If youve added a Photoshop file with a text layer as the topmost layer, the Variable Settings dialog box opens. You can use this box to change the text string in the Photoshop file. (This method is a great way to save time when you need to create multiple headings, buttons, and similar items. To learn more about this feature, see the Additional resources section at the end of this document. )
The Save for Web Powered by ImageReady window.
5 When you have adjusted the settings, click Save. 6 GoLive prompts you to save your target file. The target file is the compressed, web-friendly version of the Smart Object, and it needs to go into your sites web-content folder. To do so, click the Site Folder icon.

Select the Root folder.

7 Select Root and then click Save. The file now appears in both the Layout Editor and the Files tab of the Site folder.
Mastering Adobe GoLive CS2 Basics 12

The Actions palette

To add interactivity to a page, use the Actions palette. Note that there is a difference between actions in GoLive and actions used in Photoshop and Illustrator. In Photoshop, actions direct the application to perform a series of set tasks. In GoLive, an action is a prewritten script that tells a web browser to do something whenever a user performs a specific action on a webpage. GoLive includes more than a hundred actions, and you can find more on Adobe Studio Exchange website at http://share.studio.adobe.com. To add an action to a page: 1 Choose Window > Actions and then select an image or a link on the page.

The Actions palette.

2 The Events field in the top left of the Actions palette lets you choose the event you want to have trigger the action. The most commonly used events are Mouse Click, for which the user clicks on the object, or Mouse Enter, for which the user moves the pointer over an object. Select Mouse Click and then click the Create New Item icon at the bottom of the Actions section at the right side of the palette.

Create a new item in the Actions palette.
3 ? None appears in the Actions field, indicating that you havent specified what action youd like the browser to perform. To specify the action, click the Action button located just below to see a list of Action categories.
Select an Action in the Actions palette.
4 Choose Link > Open Window to open a new browser window when a user performs the event you chose in step 2. 5 You now need to specify the URL of the page that will open. You can either type a web address into the Link field or use the pick whip to select a page in your site. 6 To complete the action, you also need to specify the size of the page youd like to have open. Enter 800 for width and 600 for height.
The Open Window action when complete.
Your action is now complete. To learn more about actions, please see see the Additional resources section at the end of this document.

Upload your site

When youve designed all your pages, its time to publish your site to a server. Before you can upload a site, you need a web server to host it. Contact your Internet Service Provider (ISP) or server administrator. One of these sources will be able to provide your sites IP address (a number similar to 217.123.12.4), the path to your folder or directory on the server, your user ID, and your password. The Publish Server tab The Publish server tab lets you upload and manage your websites: 1 Choose Site > Publish Server > Set Up Server.
Select the Set Up Server option.
2 In the right side of the window, youll see an empty box. Click the New Server icon at the bottom of this box.

Add a new server.

3 Name the server, enter the server information, and then click OK. 4 In order to connect to the web server, you need to connect to the Internet. Then click Connect To Publish Server in the GoLive toolbar. Notice that the Publish Server tab of the Site window is automatically selected upon connecting to the server, and that any files the server contains are displayed in a list.
The Connect To Publish Server button.

5 To upload files, click the Upload Modified Files button next to the Connect To Publish Server button in the GoLive toolbar. Follow the on-screen instructions to upload your site.
The Upload Modified Files button.
Site maintenance If you want to change something on your site, open the file from the GoLive Site window and work on it in the Layout window. When youre finished, make sure youre connected to the Internet and choose File > Save And Upload. Or, if youve updated multiple files, save them all first and then click the Upload Modified Files button. GoLive uploads only the parts of your site you change.

Additional resources

Congratulations, youre on your way to creating great websites with Adobe GoLive CS2. This guide has provided a basic overview of the website building capabilities of GoLive. To learn more about GoLive and the web, see the following resources: Books Adobe GoLive CS2 Tips and Tricks, by Adam Pratt and Lynn Grillo. An excellent introduction to the basics of GoLive, together with handy tips for saving time and increasing productivity. Adobe GoLive CS2 Classroom in a Book, by the Adobe Creative Team. A step-by-step, textbookstyle introduction to GoLive. Adobe GoLive CS2 User Guide. The GoLive manual is a comprehensive resource that can help you explore new topics as your confidence grows. Designing With Web Standards, by Jeffrey Zeldman. Though not specifically about GoLive, this book offers a great introduction to web technology and the emergence of a standards-based approach to web development and design. Websites Adobe Resource Center: http://studio.adobe.com. Adobe Resource Center contains many tips and tricks, and is excellent for a user who has learned the basics and wants to find out more. Adobe Exchange: http://share.studio.adobe.com. Youll find many free, downloadable templates, actions, extensions, and tutorials.
Video GoLive CS2 Essential Training with Garrick Chow. This basic tutorial teaches how to work with text and images, create links, add rollovers and JavaScript actions, create liquid layouts, and manage your site. It is available at www.lynda.com. Total Training For Adobe GoLive CS2. Host Lynn Grillo provides detailed instruction on advanced GoLive CS2 topics such as page building with forms, tables, image maps, and Cascading Style Sheets (CSS).

Adobe Systems Incorporated 345 Park Avenue, San Jose, CA 95110-2704 USA www.adobe.com Adobe, the Adobe logo, GoLive, Illustrator, and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Mac and Macintosh are trademarks of Apple Computer, Inc., registered in the United States and other countries. Microsoft and Windows are trademarks of Microsoft Corporation in the United States and other countries. All other trademarks are the property of their respective owners. 2005 Adobe Systems Incorporated. All rights reserved. Printed in the USA. 8/05

A Quick Tour of Adobe GoLive CS2
In this tour, you will create a university Web site. Using GoLive CS2 you will create a collection of pages that are organized and appropriately linked to each other. This is a rather fast-paced tour, so if you are not yet familiar with the work area, you may want to review Lesson 1, Getting to Know the Work Area first. Before you begin, restore the default preferences for Adobe GoLive CS2. Then open the finished art file for this lesson to see the finished product. 1 To ensure that the tools and palettes function exactly as described in this lesson, delete or deactivate (by renaming) the Adobe GoLive CS2 preferences file. 2 Open GoLive CS2. If the Welcome Screen appears, choose Open Document, or choose File > Open. Navigate to the GOL_CIB\ Lesson00 folder and open it. Open the lesson00_site folder and select the tour.site file. Choose Open.
A site window appears listing several items, including an index.html file, a css folder, an images folder, and a pages folder.
The GoLive CS2 workspace with the opened tour.site.
Notice the Objects palette with toolbar, and three palette groups in the work area. You will be using these items throughout the tour. Note: If your palettes do not appear as shown, choose Window > Workspace > Default Workspace.
ADOBE GOLIVE CSClassroom in a Book
Double-click the index.html file to open the page in GoLive.
4 You will create a Web page similar to the one that appears in the GoLive document window. You can leave the file open as a reference, or choose File > Close. Note: Always choose File > Open to open sites or individual pages in GoLive. If the files are not opened from within GoLive, they may default to opening in your browser. 5 Choose File > Close to close the tour.site window. When the Adobe GoLive CS2 window appears, click OK. You do want to close the site window.

Creating your own site

In this next section, you will create a blank site, typical if you are starting with little or few existing pages. You will then add files to the site, such as existing images and pages. 1 Choose File > New. Choose Site > and click the radio button to the left Blank site. This creates a new Web site with a blank.html page. Use this if you have no main page created for your Web site but have images and other assets ready. 2 Click the Next button in the lower right and type the name virtechu in the Name text field. Choose Browse to locate the GOL_CIB\Lesson00 folder you copied onto your hard drive. Click OK (Windows) or Choose (Mac OS).
3 Click the Next button. In the Use a Version Control System? window, leave Dont Use Version Control selected, and click Next again. 4 In the Publish Server Options window, leave the selection for Specify Server Later selected. Select Finish. A site window appears that includes a css folder for Cascading Style Sheets, and a blank index.html page.
The new blank site includes some assets to get you started.
Adding assets to your site
It is critical that you keep assets, such as images and pages, within the GoLive site window. By doing this, you can be assured that links and references do not become broken. It also helps to assure that all necessary assets make it to your FTP server when uploaded. Using a GoLive site also allows you to take advantage of the many helpful features, such as error control and automatic updating. In this section, you will create folders for the site assets and import files into the site. First you will create folders in the site. You can do this in the Files tab of the GoLive site window. Dont reorganize your site files using your computer's directory system. GoLive will not be aware of, and therefore not able to update, new paths to links that have already been referenced. Before following the next steps, confirm that you see the index.html file in the site window and that all folders are closed. 1 With the virtechu site window open, click on the New Folder button in the far left side of the Main toolbar.
A folder appears, ready to be re-named. Type images for the folder name, and then press Return or Enter. Note: Typically, it is best to keep all folder names, asset names, and other references in lower case. This allows for consistency and is easy to remember when referencing links. Double-click to open the images folder, which is currently empty. Choose File > Import > Files to Site.
You can also access this menu item contextually by right-clicking in the images folder window (Windows) or Ctrl+clicking (Mac OS), and selecting New > Add Files. 4 Navigate to the GOL_CIB\Lesson00 folder and open the lesson00_assets folder.

5 Press Ctrl+A (Windows) or Command+A (Mac OS) to select all the imagery, and click Open (Windows) or Choose (Mac OS). You can also select the first item and Shift+click the last item to select all the imagery. The images are now added to your site window. Note: When you choose to import files into a site, GoLive copies the selected images to the site folder, leaving them in their original location. Learn more about sites in Lesson 2, Creating a GoLive Site. 6 Press the Go up button ( ) in the upper left of the site window to go up one file level; this reveals the images folder and the existing index.html page.
Navigate up from folders using the Go up button.
7 Click on the New Folder button in the upper left of the Main toolbar to create another folder. When the folder appears, type the name pages for the folder name, then press Return or Enter.
8 Double-click to open the pages folder and choose File > Import > Files to Site. In the Open window, browse to locate the folder named lesson00_pages in the GOL_CIB\ Lesson00 folder. 9 Select the page named contact.html and Shift+click the other page named events.html. Click Open (Windows) or Choose (Mac OS). When the Copy Files alert window appears click OK. Note: By unchecking Update in the Alert window, the paths to any links will be left unchanged, and not reference the files in the original folder. The pages are added to the pages folder in your site window. 10 Press the Go up button in the upper left of the site window to go up one file level. You now have three folders: css, images, and pages, including the existing index.html page.
Adding metadata to your page
In this section you will work under the hood, building the foundation of a good Web page; one that will help your page be found more easily by the viewer. 1 Double-click on the index.html page; a blank page appears. When the page opens, notice the tabs across the top. You will use some of these later to see the page in different views. At this time you should be in the Layout tab. Titling your page accurately is of the utmost importance. This is how your page will be labeled in the viewers browser if saved as a Bookmark or Favorite. It also appears when the cursor is crossed over a link to the page. Many search engines display and use this information in search results. To change the title of this page, click on Untitled Page to the right of Title. Change the name to VirtechU University of the future. Press Enter.
Now you will add a page description. A clear description helps search engines find your page and is frequently listed after the title in search results. If you do not provide a description, the first lines of text in your page might be used. This usually does not provide the most accurate representation of the page. 4 Click on the black arrow to the right of the Draggable Basic Objects button to show the palette menu, and select Head. The Head objects are revealed.

Click and hold on black arrow to see categories.
Note: The contents of the head section is not visible to the viewer, but contains valuable information such as meta (keywords and descriptions), scripts, actions, and cascading style information. The objects in the Head category of the Objects palette are to be placed in the head section of the page.
5 Access the head section of your page by clicking once on the Toggle Head Section arrow to the left of the word Head.
The head section window pane appears directly below. You will see existing objects, such as the encode object (providing valuable information to the browser so it can recognize the page contents), title, cascading styles, and existing default metadata. 6 Cross over the Head objects in the Objects palette to see the tooltips. Locate and select the object named Meta and drag it to the head section of the page.
When the Meta object is selected, the Inspector becomes a Meta Inspector, displaying the Name and Content of generic. 7 Using the drop-down menu directly to the right of the first text field that states generic; choose description.
8 In the Content text field, replace the word generic with a more appropriate description of your page. Put the most important information first, as some search engines may truncate (cut off) part of your description. Count on approximately 15 words showing up. For this example use, VirtechU, learn online or on campus. Discover the latest in virtual technology.
Creating a Meta object for a page description.
Click on the arrow to the left of Head to close the section and choose File > Save.
Creating the layout of the page
Now that you have set up the page with the non-visual information, it is time to put the visual information together. In this section you will learn how to use the new layout grid, a feature that builds your page with Cascading Style Sheet technology. This creates a faster-loading page and is typically more compliant with accessibility programs (such as for the visually impaired). 1 Click on the Draggable Head Objects button on the Objects palette and select Basic. The Basic objects are revealed.
2 Position the mouse over the first object, and note that a tooltip appears, indicating that this is the Layout Grid object. 3 Drag and drop the Layout Grid object on the page. A cursor with a plus sign appears (Windows), or a hand (Mac OS), indicating that you are adding it to the page. When the mouse is released, the layout grid is positioned in the upper left of the page.
Click and drag the Layout Grid object to the page.
The layout grid gives you the ability to lay out a Web page, much like you would in a program such as InDesign or PageMaker. In Adobe GoLive CS2 the layout grid creates a CSS-based (Cascading Style Sheet-based) or table-based layout grid (your choice) that enables you to create designs by freely positioning objects anywhere on the grid. You can convert a CSS-based layout grid to a table-based layout grid with one click. You can also convert a table-based layout grid to a Hypertext Markup Language (HTML) table. With the layout grid selected, the Inspector is a Layout Grid Inspector, giving you the opportunity to change the attributes of the grid. 4 Change the size of the grid by typing 720 in the width text field and 475 in the height text field. Press Enter. Note: The size of your page should be determined by the needs of your viewers. A typical 14" screen is 640 pixels wide; a 17" monitor is 720 pixels wide. Choose a size and be consistent throughout your site.

5 Center the entire layout grid by selecting the Align Center button from the Main toolbar. The layout grid will now stay centered as the viewer widens or closes the browser window.
Choose File > Save; leave this document open.
Adding a background image to a page
You can be very creative with backgrounds. In this example, you'll add a simple stripe to the background of this page. As a default, HTML repeats a background image to fit the page. That works well in this instance but not always. Keep in mind that pages with busy backgrounds are difficult to read. 1 Choose the Show page properties button in the upper right of the page. The Inspector becomes a Page Inspector.

The Page Properties.

Use Page Properties to change standard page attributes, including the background color and image. 2 Check the box to the left of Image, then use the Browse button ( ) to navigate to the virtechu folder you created inside the GOL_CIB\Lesson00 folder. Choose web-content > images > bg.gif. Click Open. The image is now placed on the page as a background. Note: It is important that you select the image from the images folder within the webcontent folder of your site to maintain proper links.
The background may look checkered with the layout grid guides showing through. Select the Preview tab to get a better look at the background, then return to the Layout Editor by clicking on the Layout tab.
Choose File > Save; leave the file open.
Placing images onto your GoLive page
1 Using the palette menu of the Objects palette, choose Smart. The Smart section of the palette menu offers all sorts of incredible coding shortcuts from auto time stamping, smart favorite icons, and URL pop-ups. Choose the Smart Photoshop object. Click and drag to place it in the upper left corner of the layout grid.
You can click and drag to reposition the Smart Photoshop object anywhere there is room on your layout grid, and it stays in place. If you understand HTML, you realize that elements typically do not stay in place unless you have a formatting element, such as a table or CSS layer. 2 If you have moved the Smart Photoshop object, click and drag it back to the upper left corner of the grid. While it is active, notice that the Inspector is now a Smart Photoshop Inspector. There are three tabs on the Image Inspector: Basic, More, and Link. If you are not on the Basic tab of the Inspector, click to select it now.

The Smart Photoshop Inspector.
So what exactly is a Smart Photoshop object, and what can it do for you? This object is probably one of the best tools to help better streamline your workflow when creating Web imagery. Using this object, you can import a native Photoshop file and optimize it for the Web directly in GoLive. This gives you the freedom to frequently change the optimization settings, image size, and even text layers without having to return to Photoshop. Read more about this feature in Lesson 7, Using Graphics in GoLive. This feature can revolutionize the way you design your pages. 3 Choose the Browse button to the right of the Source (EmptyReference!) text field and navigate to the GOL_CIB\Lesson00 folder on your hard drive. Open the GOL_CIB\ Lesson00 folder and select the image photobanner.psd. A Variable Settings window appears.
Variables allow you to overwrite existing text from the topmost Photoshop layer. This exciting option makes it easy to create buttons, navbars, and banners using GoLive. 4 In the Variable Settings window, check the box under Use, for the Topmost Textlayer. 5 In the text box that appears at the bottom of the window, type School of thought., and click OK. The Save for Web window appears.
Understand that the font, alignment, and size attributes are determined in Photoshop. If you change the font in the original file, it will be updated, maintaining your variable text in GoLive. Next you will choose the optimization settings for the image in the Save for Web window. Optimization of an image creates an image that retains its quality with a reduced file size. 6 When the Save for Web window appears, click on the 2-Up tab. This allows you to compare the original image with the image that is being optimized for Web use. 7 You can experiment with optimization settings, as well as the image size. For this example, choose the GIF 64 No Dither from the Preset drop-down menu.
Note: You can also change these settings after the image has been placed by selecting the Settings button on the Inspector. 8 Click the Save button. In the Save As dialog window, select the Site Folder button ( ) at the bottom of the window and choose Root (Windows) or Root folder (Mac OS); this directs you back to the web-content folder, which contains the files you see in the Files tab of the site window.

When a site is open, you can locate it's web-content folder by selecting Root.
9 The GoLive Save for Web window automatically provides your file with a unique name based upon the original file name and the variable text you entered, photobanner_Schoolofthought.gif. Click Save. 10 Choose File > Save to save your updated Web page.

Creating grid text boxes

Putting text on the layout grid is easyeven more so if you are familiar with creating text frames in popular page layout programs. In this section, you will add two layout text boxes to your grid.
1 Note that your Objects palette, in its default form, has a top tool section and then the section with the objects below. Click and hold on the Layer tool to reveal the Grid Text Box tool.
2 With the Grid Text Box tool selected, position your cursor over an open area of the Layout grid, then click and drag from the top-left corner to the lower right. This creates a grid text area. The exact size does not matter, as you will adjust it later.
Click and drag to create a grid text box.
3 Choose the Object Selection tool ( ) and click on the anchor points to resize the text object to approximately 160 pixels wide x 240 pixels high. Use the measurement hint that displays in the Grid Text box as you adjust it. If it is not positioned on the left side of the page, click and drag to position it now.
4 Though you can type directly in GoLive, you can also open a text file, then copy and paste. Choose File > Open and locate the file named virtechu_copy.txt in the GOL_CIB\ Lesson00 folder. Click Open. A new window named virtechu_copy.txt appears. Select the text from Events to Site Map and choose Edit > Cut from the menu items. Choose Window > index.html to bring forward the page you are creating.
7 Choose the Standard Editing tool ( ) from the toolbar and click in the text area you created. Then select Edit > Paste. The text is now placed in the text area. 8 Choose Edit > Select All and choose the Align Left button from the Main toolbar.

Select the text.

Copy and paste into grid text box.

Choose File > Save.

Formatting text using Cascading Style Sheets
Cascading Style Sheets (CSS) make it easy to update text properties and other attributes throughout a Web site. If a CSS style needs to be updated, you simply edit the style, and all content that uses the style automatically reflects the new properties. With style sheets, you can set text size to display more consistently across different platforms, and control the position of content on a page with pixel-level precision. An External Style Sheet can be shared by an entire site, giving your pages a consistent presence and enabling you to update the sites styles with a single file.

In this exercise you will be introduced to Cascading Style Sheets (CSS). Read Lesson 5, Adding and Formatting Text, for more details. 1 If the index.html page in your tour.site is not open, use File > Open Recent to open it now. 2 Click on the Source tab to view the underlying code of this page. The three main components you see in the source code of a typical HTML page are the <DOCTYPE>, <head> and <body>. The <DOCTYPE> makes the browser aware of what version of HTML to use when checking the documents syntax. The <head> section, as discussed earlier, contains essential information such as scripting, Metadata, and cascading styles. The <body> contains information visible on the page. A clear example of a basic Cascading Style Sheet is one that takes advantage of existing HTML tags, such as <body>. The <body> tag encompasses the visible elements on a Web page. By defining an element style named body, you automatically choose styles that format the text on a page. 3 Click on the Layout tab and select the Open CSS Editor button in the upper right of the GoLive workspace.

The CSS Editor button.

4 Select the Create a Style That Applies to Markup Elements button ( ). The window changes to show the style name (called the Selector) on the left (element). The properties of the element style are on the right. Change the element name to body. Press Enter. Now, when properties are changed they will apply to any contents in the <body>.
Click on the Font Properties tab.
Change element name to body, and choose the Font Properties tab.
You can click and hold the Create a Style That Applies to Markup Elements button to select from a variety of common element tags. 6 Type 12px in the Size text box. By using px, you define your font size in pixels. This provides more consistent sizing between platforms. 7 Type 14px in the Line Height text box. This controls the leading, which is the space between the lines of text. 8 Change the text to the Helvetica font set by choosing the Create new font family button at the bottom of the properties window. Click and hold to select the Helvetica Set. This instructs the browser to look for the Helvetica font on the viewers system; if it is not loaded, the next font in the set will be used, and so on down the font list.

Close the CSS Editor; the font properties are applied to the text.
10 Choose File > Save. Leave all windows open for the next part of this lesson.
Creating a second text area
1 If the Grid Text Box tool ( ) is not visible on the toolbar, click and hold on the Layer tool ( ) to reveal the hidden Grid Text Box tool. If your tools are not active, click in the existing text area once. 2 With the Grid Text Box tool selected, position your cursor over an open area of your Layout grid to the right of the existing text. Click and drag to create a new text area. 3 Switch to the Object Selection tool ( ) to resize the text object or reposition it. Make the text area approximately 240 pixels wide x 272 pixels high. Use the measurement hint that displays in the Grid Text box as you adjust it.
4 Choose Window > virtechu_copy.txt to bring the text window forward. If the virtechu_copy.txt window is no longer open, choose File > Open and locate it in the GOL_CIB\Lesson00 folder. 5 Select the text from the words VirtechU to community, then choose Edit > Cut. If you do not see all the text, select the Word Wrap button ( ) at the top of the text page. Choose Window > index.html to bring forward the page you are creating. 6 Choose the Standard Editing tool ( ) from the toolbar and click in the text box you created. A cursor appears. Select Edit > Paste. The text is now placed in the text box.
7 Using the Standard Editing tool, insert the cursor into the newly created text box and select Edit > Select All or Ctrl+A (Windows), Command+A (Mac OS). Choose the Align Left button in the Main toolbar. 8 With the text still selected, double-click on the Set text color box in the Main toolbar to open the color picker. Type ffffff in the #: text box. This is the hexadecimal color value for white. Click OK (Windows) or press Return, then OK (Mac OS). Note: The Color Picker on the Mac OS requires you to confirm any entries into the Hexadecimal text field with a Return before clicking OK. 9 If the text area is not lined up next to the previous text box, pass the cursor over the edge of the Grid Text Box to reveal a hand. Click and hold while dragging to relocate the box. Note: If the cursor does not change to a hand, click inside the text box to deselect the text then pass the cursor over the edge of the Grid Text Box to reveal the hand.

Arrange the text box on the page to allow for additional objects.
10 Select the first word in the text area, VirtechU, and choose the Strong button ( ) from the Main toolbar. The text becomes bolder. 11 Choose File > Save. Leave the file open.
Placing an optimized image
Now you will place an image with the Basic Image object. This is the object you would use to place an image that has already been optimized for the Web. 1 If you are not in the Basic section of the Objects palette, use the palette menu to choose Basic. Select the Image object ( ) and drag it to the right of the existing text boxes. 2 Using the Image Inspector, click on the Browse button to the right of the Source text field. 3 Navigate to the virtechu folder you created and open web-content > images > building.gif. The image is now placed on the page. You can also add an image to your page by simply dragging an image from your Site window right onto the page! 4 With the image selected, select the Basic tab of the Image Inspector if it is not forward. 5 Type Our building in the Alt text box. Alt text will show up before the complete download of the page, and also identifies the image for viewers using accessibility software.
The page with the image added.
Alt text is added to identify the image.
Choose File > Save. Leave the file open.

Creating a table

You can use a table to format an entire page or just to clarify tab-delimited data on your page. This could be for dates, prices, or other data that would be viewed in columns and rows. In this section, you will create a new, empty table and import tab-delimited text from a text file. 1 If you are not in the Basic section of the Objects palette, use the palette menu to choose Basic. Select the Table object ( ) and drag it to a location underneath the image of the building.
Drag a table object to the page.
2 As a default, the table has three rows, and three columns. GoLive remembers the last table configuration, so if yours is different choose Window > Inspector to see the Table Inspector. In the Table tab, change the Rows to 3 and the Columns to 3. 3 Select any cell by positioning your cursor next to an edge of a cell and clicking, or with the Standard Editing tool ( ), click to insert a cursor in any of the cells, and press Ctrl+Enter. (This works on both Windows and Mac OS.) The cell becomes highlighted with a dark border, signifying that it is selected. 4 Choose Edit > Select All. All cells become selected. 5 Choose Special > Table > Import tab-delimited text. In the Open dialog window, navigate to the GOL_CIB\Lesson00 folder on your hard drive and select launch.txt.
The text is automatically entered into the table, creating the necessary cells and rows.

Note: If the table does not automatically expand, select the Preview tab and then return to the Layout tab of the document window. GoLive automatically recognizes tabs as new columns, and returns as new rows, when importing text into a table. If you are a Macintosh user and plan on using this feature with your own text you must File > Open your.txt file in GoLive and then save it. Otherwise, you will not be able to select it. 6 Using the Object Selection tool ( ), hold down the Alt key (Windows) or the Option key (Mac OS) and click and drag on the cell borders. This adjusts the cells visually.
Hold down the Alt/Opt key to size cells manually.
Make precise adjustments by selecting one cell, and then choosing Edit > Select All. With all the cells selected, choose the Cell tab of the Table Inspector and choose Percent from the drop-down menu to the right of Width, then type 33 into the Width text field. GoLive will even-out the width of the columns. Read more about controlling tables in Lesson 3, Creating Page Layouts in GoLive.

Spanning a column

Next, you will span, or join, a column with its neighboring columns in order to create a more efficient table. 1 Using the Standard Editing tool ( ), select the cell with the text Learning Launch Dates. Remember that you can insert the cursor into the text of the cell and use Ctrl+Enter (both Windows and Mac OS) to select the cell. 2 Hold down the Shift key and press the right arrow () twice, one time for each column that you wish to span into. The text is now spanning across three columns.

A spanned column.

Repeat steps 1-2 for the column containing the text Log-in dates.
4 The page design is complete. Choose File > Save. Leave the page open for the next part of this lesson.

Creating hyperlinks

A hyperlink is a function that allows viewers to navigate from one HTML file or location to another. A link can direct the viewer to an entirely different document, another location in the current document, a PDF document, an e-mail address, and more. Now that the page is complete, you will create hyperlinks from this page to two existing pages. 1 With the index.html open, and the Standard Editing tool selected ( ), locate and select the text labeled Events in the far left text area. 2 If the Inspector window is not visible, choose Window > Inspector. Click on the Create link button ( ). 3 Replace (EmptyReference!) with a path to a page by choosing the Browse button( ) to the right of the reference text field. Navigate to the virtechu folder you created in the GOL_CIB\Lesson00 folder. Choose web-content > pages > events.html. Click Open. The Events text is now linked to the events.html page.

Test your link by choosing the Preview tab and clicking on the text Events. Return to the Layout Editor by choosing the Layout tab. 4 Create the second link by selecting the words Contact Us. This time, use the Fetch URL button ( ) that is to the right of the link buttons. Note: For all the icons to appear, GoLive CS2 must be at a display resolution of 1024 x 768 or higher. 5 Click and drag. A directional line follows your cursor as you drag. Point it to the Select window button ( ) in the Main toolbar. This brings the site window forward dont let go! Continue dragging down, then point at the pages folder until it opens. Before releasing the mouse, position the cursor over the contact page. When it is highlighted, release. The page has been referenced.
Click and drag the Fetch URL button to the Select window button in the Main toolbar.
When the site window comes forward, point at the file you wish to link to.
6 Choose Window > index.html to bring your page forward. Test your links by choosing the Preview tab and clicking on the text Contact Us. 7 Choose File > Save. Leave the file open.
Using the Live Rendering feature
If you have a large screen monitor, or don't mind clicking back and forth from one window to another, you should consider using the Live Rendering feature in GoLive. As you build your page in the Layout Editor, changes are automatically reflected in the Live Rendering browser window.
Note: If you have multiple document windows open, the Live Rendering browser previews the currently selected document. This section is optional for this lesson. Click and hold on the Preview in Browser button ( Select Live Rendering and release. ) in the Main toolbar.
3 You can preview your page as it will appear on a mobile device, by clicking the SSR button ( ) in the Live Rendering browser. Click on SSR to return to the normal page view.
You can preview your Web page appears on a small screen in the Live Rendering window.
Choose File > Close to close the Live Rendering window. Choose File > Save.
Using Cascading Styles for hyperlinks
Want to rid your hyperlinks of the underline, or even spice up your page with simple text rollovers? Then this section is for you!
1 Select the text Events using the Standard Editing tool ( ), and switch to the Source tab of the GoLive window. Notice that GoLive keeps your text selected so that you can locate it in the source code.
The Source view maintains your selection from Layout to Source view.
Notice that the text is selected by a tag starting with an a, followed by href=, and then references the page that you selected as the destination page. You will use this information to build a cascading style that will affect the appearance of your hyperlinks. 2 The style you will create to change the text in the hyperlinks on this page is called an element style. To access the CSS Editor and create this style, return to the Layout view and click once on the Open CSS Editor button in the upper right of the GoLive workspace.

3 Select the Create a Style That Applies to Markup Elements button ( ). The window changes to show the style name on the left and the properties that can be altered on the right. While the Selector is selected, change the name from element to a. Press Enter. When properties are changed, they will apply to any contents in the <a> tag.