whitepaper

Mastering
Adobe GoLive CS2 Basics
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.
Tis document describes how to create a simple website using a typical GoLive work-
fow, and introduces you to the key tasks youll encounter as you build and manage
your site. Youll learn how to:
1 Create a Site folder, bring in assets, and add pages to your site.
2 Lay out pages, manipulate images, add text boxes, and create links.
3 Work with Smart Objects and add interactive scripts without coding them yourself.
4 Publish your site on the Internet using the GoLive Publish Server feature.
Create a site
When you start building a website, your frst 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. Tat 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:
1 In the GoLive Welcome screen, click New Document. (Or, if youve previously chosen
not to display the Welcome screen, choose File > New.)
2 Click Site in the lef column of the New dialog box.
TABLE OF CONTENTS
1 Introduction
1 Create a site
1 The New dialog box
2 The Site window
4 Lay out pages
11 Work with Smart Objects
13 The Actions palette
15 Upload your site
16 Additional resources
2 Mastering Adobe GoLive CS2 Basics
The New dialog box
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 fnd. Click Next.
5 Make sure Dont Use Version Control is selected and then click Next.
6 Te 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.
The Site window.
The Site window
Te Site window is the most important part of the GoLive workspace. Its here that you maintain,
check, and even publish your website.
Te 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 frst thing it loads is the default page. Terefore, in GoLive, index.html is
your home page.
Whats in the Site window
The GoLive Site window has ten diferent tabs you can
use for various functions:
Files: This is the root folder of your site. Upload these
fles 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 web-
friendly fonts.
CSS: Find all the diferent CSS elements used on
your site.
Diagrams: Use the powerful site diagramming
workfow from this tab.
Publish Server: Upload pages and images to a server.
Collections: Store aliases or shortcuts to commonly-
used assets here.
Errors: If you have any broken links or missing
fles, GoLive tracks them in real time and displays
them here.
Extras: Find Smart Objects, InDesign Packages, and
templates to use with your site.
7he New diaIog box
In addition to building websites, GoLive lets you
build interactive movie fles and sites for mobile
phones. As you learn more about interactive
design, youll fnd this dialog box a powerful
starting point for many diferent workfows.
3 Mastering Adobe GoLive CS2 Basics
Adding pages
To add more pages to your site:
1 Click the Create New Page icon in the GoLive toolbar.
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 fles 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 fnd 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. Ten drag and drop your newly created pages
into it, just as you would in the Finder (Macintosh) or Explorer (Windows).
Adding images
Te 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. Tese objects let you specify a source
fle (ofen in a native Adobe fle format) for which GoLive creates a target fle in a web-optimized
format. See Working with Smart Objects below for more information.
To add web-ready images:
1 Optimize an image for use on the web (see sidebar).
2 In the GoLive Site window create a new subfolder called assets.
3 Drag and drop the image or images into it.
7he Save For Web command
To format fles 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 fle 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 fat colors
or repeating patterns, such as a logo. Choose
JPEG when compressing photographs or fles 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 satisfed with your settings, click Save
and follow the instructions for your image type.
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 frms site, for example, would have pages
named clients.html, portfolio.html, and content.html.
4 Mastering Adobe GoLive CS2 Basics
Site fle structure
GoLive organizes directories so that everything can be tracked with the site-management tools.
The site as it appears in Windows XP.
Te site folder for your site contains the following items:
Te root folder (called web-content). Tis folder contains the HTML pages, images, and
other fles that make up your website. Te contents of this folder are displayed in the Site
window in GoLive.
Te data folder (called web-data). Tese are items used to create your website, such as
templates, Smart Objects, and InDesign Packages. Tese fles do not get uploaded to the
server.
Te settings folder (called web-settings). Tis folder contains the GoLive settings fles.
Te site fle (you named this fle). Tis fle tracks everything in the folders described above.
When you open the site fle, it starts GoLive and displays the Site window.
Lay out pages
Te Layout window has six diferent modes for viewing a webspage, but the most important
mode is the Layout Editor where you can drag and drop fles to create pages.
Open a page to learn more about the layout tools in GoLive.
The document window with the Layout editor active.
7he Document window
The Document window has six diferent 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.
5 Mastering Adobe GoLive CS2 Basics
The Objects toolbox
Te Objects toolbox has three sections. At the top, you can fnd selection tools, the middle has
a category list of diferent objects you can add to your page, while the bottom contains the
objects themselves.
Tools
Categories
Objects
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 lef) onto
your page. (If Basic is not selected from the Draggable Objects category, you will not see the
Layout Grid.)
The Layout Grid object.
7ooIbar categories
Heres a brief overview of what youll fnd 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.
Head: Add metadata, such as keywords for search
engines.
Frame: Use this section to build pages with frames.
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.
6 Mastering Adobe GoLive CS2 Basics
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.
7 Mastering Adobe GoLive CS2 Basics
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
Te Inspector palette allows you to edit and customize selected objects. Tis 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 ft in one
panel of the palette, they are distributed across multiple tabs.
8 Mastering Adobe GoLive CS2 Basics
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 Te 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 feld 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 lef side of the link feld.
The Fetch URL icon
9 Mastering Adobe GoLive CS2 Basics
b Drag 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, frst 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
fle 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.
10 Mastering Adobe GoLive CS2 Basics
Check your work
GoLive ofers 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.
Te 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 fnd 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.
11 Mastering Adobe GoLive CS2 Basics
Work with Smart Objects
Tough 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 fles. 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 fle, 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 fle.
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 frst have to add one to the site. Since you
wont be uploading your Smart Objects to a server, the procedure is slightly diferent 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 fle into the Smart Objects folder.
Adding a fle to the Smart Objects folder.
3 Drag a Smart Object into the Layout Editor. Te 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.
12 Mastering Adobe GoLive CS2 Basics
4 If youve added a Photoshop fle 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 fle. (Tis
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 fle. Te target fle 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.
Te fle now appears in both the Layout Editor and the Files tab of the Site folder.
13 Mastering Adobe GoLive CS2 Basics
The Actions palette
To add interactivity to a page, use the Actions palette. Note that there is a diference 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 specifc action on a webpage.
GoLive includes more than a hundred actions, and you can fnd 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 Te Events feld in the top lef of the Actions palette lets you choose the event you want to have
trigger the action. Te 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.
14 Mastering Adobe GoLive CS2 Basics
3 ? None appears in the Actions feld, indicating that you havent specifed 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 feld 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.
15 Mastering Adobe GoLive CS2 Basics
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
Te 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.
16 Mastering Adobe GoLive CS2 Basics
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. Ten 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 fles the server contains
are displayed in a list.
The Connect To Publish Server button.
5 To upload fles, click the Upload Modifed 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 Modifed Files button.
Site maintenance
If you want to change something on your site, open the fle from the GoLive Site window and
work on it in the Layout window. When youre fnished, make sure youre connected to the
Internet and choose File > Save And Upload. Or, if youve updated multiple fles, save them all
frst and then click the Upload Modifed 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. Tis
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, textbook-
style introduction to GoLive.
Adobe GoLive CS2 User Guide. Te GoLive manual is a comprehensive resource that can help you
explore new topics as your confdence grows.
Designing With Web Standards, by Jefrey Zeldman. Tough not specifcally about
GoLive, this book ofers 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 fnd out more.
Adobe Exchange: http://share.studio.adobe.com. Youll fnd many free, downloadable templates,
actions, extensions, and tutorials.
Video
GoLive CS2 Essential Training with Garrick Chow. Tis 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 1ose, 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