With GoLive 6, you have a powerful additional toolthe Adobe Web Workgroup Server. If youre working in a team environment, the Web Workgroup Server gives your entire team access to a site and its les for a seamless interactive workow. It lets team members check out les, and prevents other team members from making changes until the les are checked back in. And when les are checked back in, it automatically veries and updates any changed link references. Additionally, the Adobe Web Workgroup Server provides version control. Each time a le is checked in, the Adobe Web Workgroup Server saves a separate version of the leyou can compare source code in different versions and revert to any version at any time. Even if you arent working in a team environment, you can use the Adobe Web Workgroup Server as a single user to take advantage of the version control features. For information on setting up and using a workgroup site, see the Adobe Web Workgroup Server User Guide.
Adding pages and page content
Once you have created a site with a home page (named index.html by default), youll probably need to add more pages, images, and other media les. GoLive makes it easy simply drag existing les into the site window or use the Import command. If you need a blank page, drag a Generic Page icon from the Site set of the Objects palette into the site window or create a new page using the New Page command. When youre designing pages within a Web site, consider using reusable templates, stationeries, components, and library objects. These not only save you design and construction time, but they add consistency to your design.
Templates are predesigned page layouts that you can use as the basis for new pages. When you update a template, you automatically update all pages based on that template. Stationery is similar to a template, except that pages based on stationery arent linked to the source. In other words, if you update a stationery le, any pages you developed based on that stationery wont be updated.

14 LESSON 1

Components are HTML source les that you can add to a page as a single object. For example, a navigation bar that contains buttons, images, and text can be saved as a component and used on each page of a site to give a consistent look to pages. As with templates, whenever you update a component, all the pages that use the component are updated automatically. Library objects, like components, are source les that you can add to a page as single objects. Unlike components, library objects dont remain linked to their source les when they are added to a page. You collect library objects either in the Library tab in the site window or in the Library set in the Objects palette. Library objects are not limited to HTMLfor example, you can drag snippet les (SSI les) from the site into the Library tab.

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

Laying out Web pages

In GoLive, you can build simple or complex professional-quality Web pages without writing any source code. You can lay out pages using layout grids, tables, oating boxes, or frame sets by simply dragging these objects from the Objects palette into a Web page. GoLive writes all the code for you.
Layout grids let you create table-based designs without having to deal with cells, rows and columns in HTML tables. And when youre nished, you can easily convert a layout grid to a table that has less HTML code. HTML tables are useful for positioning items on a page in much the same way as layout grids, but tables are more challenging to use. Tables are also used whenever information needs to be organized in columns or rows.

ADOBE GOLIVE 6.0 15

Floating boxes, based on Dynamic Hypertext Markup Language (DHTML), allow you to specify absolute positioning, overlap text and images, and add animations. Because you can attach JavaScript actions to oating boxes, they are often used to show and hide information based on mouse movements.
A. Layout grid B. Floating box C. Table icons in the Basic set of the Objects palette
You can also import Web pages created in other applications. For example, you can include a sliced Adobe Photoshop image (.psd) in your site window. When you drag the.psd le into your document window, GoLive converts the slices to Web-formatted images (.gif or.jpeg) and creates an HTML table to hold those images in place on the Web page. For more information on laying out pages, see Lesson 3, Designing Web Pages.
Designing pages in other applications
While you can create Web pages in GoLive, you can also use other applications, such as Adobe Photoshop, Adobe ImageReady, Adobe Illustrator, and Adobe LiveMotion to create images for rollovers and graphics, and even to build entire Web pages.
To create a design that is mostly graphics, consider using Photoshop to create graphics and lay out pages. To create a design that is mostly HTML with some graphics, consider using Photoshop to create graphics and GoLive to lay out the Web pages.
In GoLive 6.0 you can place non-optimized images (Photoshop and Illustrator les) directly on a Web page and let GoLive automatically convert them into Web-formatted graphics. See Lesson 6, Using Smart Objects.
To create images for complex rollovers and animations, consider using ImageReady.

16 LESSON 1

To create Macromedia Flash navigation elements, consider using LiveMotion for authoring in the SWF le format. There are benetssuch as adding interactivityto creating navigational elements in LiveMotion even if the output is GIF or JPEG. To create a page based on sliced images, consider using ImageReady or Photoshop (ImageReady has more slicing options than Photoshop).

Working with text

You can type directly onto a Web page; you can type in a text box, a table cell, a oating box; and you can paste or drag text onto a page from another application. You can apply formattingcolor, font, type size, and alignment, for exampleto individual words or blocks of text. You can format text into lists and indented paragraphs. GoLive provides three ways for formatting text on your Web page:
You can apply HTML text attributes using the toolbar and the Type menu. The toolbar includes attributes for headings, paragraphs, bold, italic, teletype, alignment, text size and color, and numbered and bulleted lists. This is an easy way to apply formatting to small chunks of text. You can save HTML text attributes applied using the toolbar and Type menu in the HTML Style palette, so that you can quickly and easily apply the same formatting to other text on other pages. HTML Styles are not linked to the text, however, so changing a style does not automatically update any text that the style has already been applied to. You can use cascading style sheets (CSS) to obtain the greatest consistency and control over text formatting and presentation. Cascading style sheets let you dene textformatting attributes on a style sheet that instructs Web browsers to reuse these attributes whenever text refers to them. Because the code is written once as an internal style sheet or as an external style sheet, CSS also saves download time. When you change a style in a cascading style sheet, all pages containing text that refers to the style are updated automatically.

ADOBE GOLIVE 6.0 17

Consider structuring text rst with HTML elements so you can be sure that a page will still look good in older browsers that dont support CSS. Use the Paragraph Format popup menu on the toolbar to add structure to text by applying HTML headings and other structural elements. Then create a style sheet and use the CSS Selector Inspector to set up tag selector styles that build upon the structure elements, adding color, fonts, and so on to each style. Because different browsers support CSS attributes differently, it is important to check your pages in various browsers. Remember also that users can turn off support for cascading style sheets or override the styles of a page with their own CSS le.

Text formatted using HTML structure elements A. Heading 1 B. Emphasis attribute for inline text C. Bulleted list
Adding interactivity to pages
You can add images, sound, movies, and animations to liven up Web pages.
Rollovers and image maps are easy to create. Use an approved naming convention for the image les, and after you link the rst rollover image, GoLive automatically links the remaining image les. Movies are easily added with the QuickTime movie editor included with GoLive. Place nonoptimized source les for images or animations directly on your pages using Smart Objects, and GoLive converts the les into Web-formatted graphics. When you resize or make other changes to the graphic on your page, GoLive uses the original source le to generate a new Web-formatted version.

18 LESSON 1

Adding links
As you build pages, youll add resource links to connect images and media in the pages to their source les, and youll add navigational links to move within pages, between pages, or to URLs. Not only is it easy to create links, but GoLive continually checks the integrity of links and helps resolve broken links. See Lesson 5, Creating Navigational Links.

Previewing pages

When youve nished with a page or a site, or when you just want to see how something is working out, you can preview pages using the Layout Preview in the GoLive document window, or you can preview pages in your favorite browsers using the GoLive Show in Browser button on the GoLive toolbar. GoLive also gives you access to browser proles that simulate different browsers on different platformsyou can even see how your work will look on wireless devices.

Managing a site

Once you have built a site, site management and maintenance is easy in the site window. Whenever you use the site window to move a page to a new folder, rename a page, add a new page to the site, or change an image le, GoLive automatically updates the paths between every related le, URL, or object on a page. GoLive checks the link integrity in HTML pages, with PDF les, QuickTime movies, SWF les, and embedded JavaScript source code in a site, as well as alerts you to pages that contain empty or incorrect reference links. See Lesson 14, Managing Web Sites.

Publishing a site

After you have set up Network preferences and FTP and WebDAV Server site settings, transferring your site les to the FTP server is only a button click away. Files and folders can be uploaded automatically. See Lesson 14, Managing Web Sites.

Getting started

Now that you have an understanding of the tasks involved in building a Web site, youll build a simple Web site for a ctional company called First Strike Matches. First youll view the nished site in a Web browser.

ADOBE GOLIVE 6.0 19

1 Open a Web browser (Netscape Communicator or Microsoft Internet Explorer, for example). From the File menu of your Web browser, open the index.html le in Lessons/Lesson01/01End/matchbox folder/matchbox/ on your hard drive. (The command used to open a page depends on the browser you use, but it is usually File > Open or File > Open File.) Note: As you work through the lessons in this book, make sure that your operating system is set to display le extensions. Working without le extensions turned on will be difcult.
Some features of the Web pages youll view require browsers that support JavaScript and Dynamic Hypertext Markup Language (DHTML). If you dont have an appropriate browser, you can use GoLive to preview some elements of the site, as described in Previewing a Web page on page 35. 2 Click the links in the Web page, and explore the site. You must have QuickTime 5.0 loaded in order to see the video at the bottom of the Questions page (questions.html). 3 When you have nished viewing the Web site, close your browser.

20 LESSON 1

Creating a new site
Now youll begin creating your own version of the First Strike Matches Web site. If as you work through this lesson, you nd youre having difculty with the GoLive interface, move on to Lesson 2, Getting to Know the Work Area, and return to this lesson later. 1 Start Adobe GoLive. When GoLive rst launches you can choose one of the following options from the GoLive dialog box:
New Page to create a new untitled HTML page. New Site to open the Site Wizard for creating a new site. Open to open an existing Web page or an existing site project le.
Note: If you have set your preferences for the introductory screen to not appear when you start GoLive, choose File > New Site and go to step 3.

To avoid clutter, youll close any palettes that are open. You can easily re-open palettes as they are needed. 5 To close all open palettes, choose Window > Workspace > Hide Palettes.
First youll change the title of the Web page. The title that you enter appears in the title bar of a Web browser when your page is viewed. The title is also used, together with keywords, by Internet search engines and browsers to identify content in your pages. The title is not the same as the le name. 6 Click the text Welcome to Adobe GoLive 6 located next to the Page icon ( ) at the top of the document window to make the text editable. Replace this text with the new title, First Strike Matches. You can use the Backspace button to erase the existing text, or you can drag to select the text and type over it.

26 LESSON 1

To add text or apply a value that you enter in the GoLive work area, you can either press Enter or Return or change the focus by clicking elsewhere in the work area.
For this lesson, youll use the default page size. When designing Web pages, youll usually want to make them no wider than your viewers screen. You can choose 580 from the menu at the bottom right of the document window to display the current page at 580 pixels wide, the standard default width for 14-inch monitors. This helps prevent you from adding objects, such as large graphic banners, that are too wide to display on a standard page. If you know the monitor size of your target audience, consider subtracting 60 pixels from the width and 120 pixels from the height of the monitor resolution to get the optimal size for your page without scrolling.

Adding text

When youre adding content to your Web pages, youll often use the layout grid. Creating a layout using GoLive layout grids is generally easier than creating a layout using HTML tables. Layout grids let you create table-based designs without having to deal with cells, rows, and columns. And when youre nished, you can easily convert a layout grid to a table. The layout grid automatically lengthens to accommodate objects you place on it. The layout grid is one of the many objects available in the Objects palette that allow you to add elements to Web pages. For more information on the layout grid, see Lesson 3, Designing Web Pages. 1 Choose Window> Objects to display the Objects palette. Make sure the Basic button ( ) is selected at the top of the Objects palette. Notice the tooltips that appear as your mouse pauses over the buttons at the top of the palette. Notice also that the names of the objects in the palette appear at the bottom of the palette as your mouse passes over them.

ADOBE GOLIVE 6.0 27

2 Drag the Layout Grid icon from the Basic set of the Objects palette to your Web page.
You can type directly onto a Web page in GoLive, but because youve added a layout grid, youll need to place a container called a layout text box onto the layout grid before you can add text. After you add the layout text box, you can resize the box and move it around the grid to easily position text on your page. 3 Drag the Layout Text Box icon from the Basic set of the Objects palette to the top left corner of the layout grid on the Web page.
You can reposition the layout text box (or any object) by selecting it and moving the mouse pointer to any of its edges. When the pointer turns into a side-ways hand, drag the layout text box to where you want it. You can move any selected object one pixel at a time by holding down Ctrl+Alt (Windows) or Option (Mac OS) and pressing an arrow key.

28 LESSON 1

4 Click inside the layout text box to create an insertion point, and type Welcome to First Strike Matches. 5 Press Enter to create a second paragraph, and type For answers to your burning questions about our matches, use the links below.
You can edit and format the text as easily as in a word processor. 6 Place the cursor at the beginning of the text you just entered, and drag to select the text Welcome to First Strike Matches. 7 On the toolbar, click the Align Center ( ) and Bold ( ) buttons and choose Header 2 from the Paragraph Format menu. (To show the toolbar, choose Window > Toolbar.)

ADOBE GOLIVE 6.0 29

8 Resize the layout text box (or any object) by selecting it. Move the pointer over the edge of the text box until the pointer changes into a left-pointing hand, and then click to select the text box. Move the pointer to one of the box handles. When the pointer turns into a double sided arrow, drag the handle until the box is the size you want.
9 Choose File > Save. It is good practice to save your project regularly as you work. Save both the document window and the site window. 10 Click in the site window to activate it, and choose File > Save.

Adding color to text

Now youll add color to the text you entered and to the background of the page. 1 In the document window, place the cursor at the beginning or end of the text Welcome to First Strike Matches, and drag to select the text. 2 Choose Window > Color to display the Color palette. The Color palette has several color sets representing different color spaces. The color set youll use most often is the Web-safe (also called browser-safe) color set. Its a good idea to use Web-safe colors because they keep your colors from dithering (shifting) when viewed on monitors that cant display more than 256 colors. 3 In the Color palette, click the Web Color List button ( ) at the top of the Color palette.

ADOBE GOLIVE 6.0 35

Previewing a Web page
You have just completed your rst Web page built with GoLive. You can preview your page within GoLive or by using your browser. Not all objects on a Web page can be previewed in GoLive. For example, GoLive cannot show certain JavaScript actions, anchors, and animations. For this reason, it is always a good idea to preview pages using a browser as well as GoLive. First youll check your preferences for previewing the home page in GoLive. Youll need to make sure that the Preview Mode is activated in the Modules preferences. 1 Choose Edit > Preferences. 2 To display the Modules preferences, click Modules in the left pane of the dialog box. You can use the Modules preferences to activate or deactivate modules. By deactivating unused modules, you can reduce the programs memory requirements, which can improve the programs launch time and responsiveness. 3 To read a description of the Preview Mode module, select Preview Mode in the right pane of the dialog box. Then click the triangle next to Show Item Information. To hide the description, click the triangle again.

36 LESSON 1

4 To activate the Preview Mode module, make sure that the checkbox next to Preview Mode is selected.
Preview Mode module activated
5 Click OK to close the Preferences dialog box. 6 In the document window, click the Preview tab ( Layout Preview. ) to preview the document in
The Layout Preview shows you what your page will look like in a generic browser. Remember, though, that the Layout Preview is not a substitute for viewing your pages in actual browsers. 7 When youve nished, click the Layout tab to return to the Layout Editor. Now youll set up your preferences for viewing pages in a Web browser. To preview the home page in a browser, you need to have installed a browser on your hard disk. Youll also need to set preferences for browsers in GoLive, which youll do now.

ADOBE GOLIVE 6.0 37

8 In GoLive, choose Edit > Preferences, and click the Browsers icon in the left pane of the Preferences dialog box.

Displaying Browsers preferences
9 Do one of the following:
To add all browsers on your hard disk to the browser list, click Find All. (Recommended.) To add a single browser, click Add. Then select the browser, and click Open (Windows), or click Add (Mac OS) and then click Done.
10 In the scrolling window, click in the box next to the name of the browser that you want to be launched when you either click the Show in Browser button ( )( ) on the toolbar or choose File > Preview In > Default Browser.

38 LESSON 1

Important: GoLive lets you select multiple browsers to be launched at the same time when previewing. However, its recommended that you only select a single browser to be launched to reduce memory requirements. Other browsers listed in the Preferences (but not checked) can be launched on demand by clicking the arrow to the right of the Show in Browser button and then selecting the required browser. 11 Click OK to save your preferences. Now you can see what your Web page looks like in your browser of choice. 12 Open your Web page in your browser by clicking the Show in Browser button on the toolbar. The browser displays the current page, index.html. 13 Close your browser. In GoLive, click in the document window to activate it, and choose File > Close to close the index.html page.
Creating a second Web page
Youre now ready to create a second Web page for the site. When you are nished, this page will contain formatted text, a rollover, a table, and a QuickTime movie.

Importing a Web page

Youll create this second page by importing a page that has been partly built for you and then adding to the content of the page. 1 In the Files tab of the site window, click the pages folder to select it. Selecting the pages folder, ensures that the page you are about to add will be added inside the pages folder. 2 Choose File > Import > Files to Site. 3 In the Add to Site dialog box, navigate to the folder /Lessons/Lesson01/01Start/, and select the le questions.html. Click Add and then Done. Click OK in the Copy Files dialog box to copy the page to your site.

ADOBE GOLIVE 6.0 39

4 Click the plus sign or triangle next to the pages folder to expand the folder. Youve added the questions.html page to your site, but as you can see, its status shows that the page has broken links ( ).
Youll x that shortly as you link the empty placeholders to images. 5 Open the questions.html page by double clicking it in the site window. Your new page already has a title, Burning Questions for First Strike Matches, and the background color has been added, as have a layout grid and several image placeholders. Before you link the placeholders to images, youll open the media folder in your site window. 6 In the site window, click the plus sign or triangle next to the media folder to show its contents. 7 Scroll to the top of the document window if necessary, and click to select the image placeholder at the top left of the page.

Creating stationery

Because youre going to use this same page design to create a third page for your site, youll save the page youve just created as stationery by copying the questions.html page to the Stationery folder in the Extras tab of the site window. 1 Click the double-headed arrow ( ) in the lower-right corner of the site window to open up the right pane and an additional set of tabs. The Extras tab contains folders (created automatically by GoLive) for special resource les that save you time creating Web pages and help you maintain consistency from page to page. All of the les shown in the Extras tab can be reused in your site. You can drag the vertical bar between the two panes in the site window to resize the panes if you wish. 2 In the Files tab of the site window, click the plus sign or the triangle next to the media folder to hide the contents. 3 Select the questions.html le in the pages folder, and Ctrl-drag (Windows) or Optiondrag (Mac OS) the file to the Stationery folder in the Extras tab to copy it from the Files tab to the Stationery folder.

ADOBE GOLIVE 6.0 43

4 If a Move Files dialog box appears, click OK.
5 Click the plus sign (Windows) or the triangle (Mac OS) next to the Stationery folder to show its contents. Select the questions.html le you just copied, and rename it fs_stationery.html. Stationery les stored in the Stationery folder also appear in the Site Extras set in the Objects palette, as youll now see. 6 Click the Site Extras button ( ) at the top of the Objects palette, and make sure that Stationery is selected from the pop-up menu at the bottom of the palette. Notice that the icon for the fs_stationery.html le appears in this palette. Roll your pointer over the icon to see the name of the stationery at the bottom of the palette.
Later in this lesson, youll use this stationery to create a third Web page. But rst youll add a table to your Web page.

44 LESSON 1

Formatting a table
Instead of using a layout text box to add text as you did on the rst page, youll use a table to place text on this page. This will give you more control over the spacing between paragraphs. For this lesson, weve already created the table and text for you. In later lessons, youll learn how to add tables to the layout grid and how to import or copy and paste text into tables. 1 Double-click the questions.html le in the Files tab of the document window to open the le. 2 Scroll up in the questions.html document window if necessary so you can see the Burning Questions image at the top of the page. 3 Choose File > Open from the GoLive command bar, and open the le table_text.html in the folder Lessons/Lesson01/01Start/. This le contains the table and text that you will add to the questions.html page. 4 Move your pointer over the top left corner of the table until the pointer turns into this ( ), then click to select the table. A border appears around the table when it is selected, and the Inspector becomes the Table Inspector.

8 Choose File > Save to save your work. Next youll add a pre-prepared graphic that outlines the features of First Strike Matches. 9 Drag an image icon from the Basic set of the Objects palette, and place it on the layout grid below the Product Features image on the left side of the page. 10 With the image placeholder selected, in the Basic tab of the Image Inspector, drag from the Point and Shoot button to the chart.gif le in the media folder in the Files tab of the site window.

ADOBE GOLIVE 6.0 49

11 Use the arrow keys on your keyboard to reposition the image that youve just added until you are pleased with the vertical spacing on the page. You can also click the Align Center button ( ) on the toolbar to center the image between the left and right margins of the layout grid. 12 Choose File > Save to save the page. 13 Choose File > Close to close the page.

Creating links

You now have three pages with varying amounts of content. But as yet, there is no way viewers can get from one page to another. Youll link the text in the index.html page so that viewers can click there to go to the other two pages. 1 Double-click the index.html le in the site window to open that page for editing. 2 In the document window, drag to select the text burning questions under the heading Welcome to First Strike Matches. The Inspector changes to the Text Inspector. 3 Click the New Link button ( ) in the Text Inspector.
4 Drag from the Point and Shoot button ( ) in the Text Inspector to questions.html in the pages folder in the site window. Then click away from the text to deselect it. The text in index.html is now blue and underlined to indicate it is a link. You have just created your rst link in GoLive. 5 Choose File > Save.

Linking from images

In addition to linking from text, you can also link from a graphic. Now youll link the buttons you created on the index.html page to the features.html and questions.html pages. 1 In the Layout view of index.html, select the Features image (features.gif) at the bottom left of the page. The Inspector changes to the Image Inspector. 2 Click the Link tab in the Image Inspector, and click the New Link button ( ).

50 LESSON 1

3 Drag from the Point and Shoot button ( ) in the Link tab of the Image Inspector to the Features page, features.html, in the pages folder in the site window. If the features.html le isnt visible, position the pointer over the icon to the left of the pages folder until the folder opens, and then drag to select the le.
Notice that the link you make on the Basic tab of the Inspector is to an image or graphic that appears on the page, whereas the link you make on the Link tab is a navigational link. Youll learn more about links, including setting e-mail links, in Lesson 5, Creating Navigational Links. 4 Select the Questions image (questions.gif) at the bottom right of the index.html page. Create a link using the same steps that you used for the Features image, but this time link the Questions image to the Questions page, questions.html, in the pages folder of the site window. 5 Choose File > Save. If you wish, you can repeat these steps to link the navigation images on the features.html page and the questions.html page. In each case, the main.gif image links to the home page, index.html. Youre now ready to test your links in the browser.

54 LESSON 1

Review questions
1 What is the GoLive site project le, and why is it important? 2 What are some of the ways you can add existing pages and folders to your site window? 3 What is a layout grid used for? 4 What are the standard image formats used on Web pages? 5 How does GoLive manage le name changes, links, and le synchronization?

Review answers

1 The GoLive site project le, named yoursitename.site, is a special document that GoLive creates to help you work with all of your pages, media les, and resources. The site project le opens up the site window, displaying an exact replica of the les and folder structure on your desktop. It is from the site window that you build and restructure your site, link pages and images, store reusable site assets (like page templates), and transfer and synchronize the site les with your server. 2 You can add pages and folders to your site window in a number of ways:
Drag a Generic Page icon or a Folder icon from the Site set of the Objects palette into the site window. Import les into the site window using the File > Import > Files to Site command. Drag les into the site window from the desktop.
3 A layout grid is used for laying out Web pages. You can drag text boxes, images, and other objects onto the layout grid to lay out a page precisely without having to work with HTML tables. The layout grid is an HTML table that GoLive formats for you. 4 The standard image formats for the Web are Graphical Interchange Format (GIF) and Joint Photographic Experts Group (JPEG). GIF files are typically used for line art; JPEG les are typically used for photographs and images with more than 256 colors. Portable Network Graphics (PNG) images are not a fully supported format, but have combined qualities of GIF and JPEG. 5 Name changes, link updates, and le synchronization are managed automatically by GoLive in the site window. If you do change le names or add les to your site outside the site window, you should always refresh the site window to synchronize the les on your hard drive with those in the site window. Changing a le name outside the site project le can break the links if the page contains any references.