Adobe Go Live!

7/31/2019 Adobe Go Live!

http://slidepdf.com/reader/full/adobe-go-live 1/17

whitepaper

Mastering Adobe GoLive CS2 Basics

IntroductionAdobe® GoLive® CS2 contains everything you need to design, code, and manage even

the most complex web projects—without having to write a line o HML. Even so, towork on the web you may need to learn a ew new tricks. Images have to be compressed

in certain ways, onts don’t 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

simpliy the ongoing maintenance o your site.

Tis document describes how to create a simple website using a typical GoLive work-

ow, and introduces you to the key tasks you’ll encounter as you build and manage

your site. You’ll learn how to:

1 Create a Site older, 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 yoursel.

4 Publish your site on the Internet using the GoLive Publish Server eature.

Create a siteWhen you start building a website, your rst instinct may be to open a page and start

placing text and objects where you want them. However, with GoLive, it’s better to

begin building a site rather than a page. Tat way, GoLive can track all o your assets

rom the start, and you won’t have to worry about losing a page or image.

The New dialog boxWork in the New dialog box to begin creating a site:

1 In the GoLive Welcome screen, click New Document. (Or, i you’ve previously chosen

not to display the Welcome screen, choose File > New.)

2 Click Site in the le column o the New dialog box.

TABLE OF CON TENTS

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




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 wil l be easy to nd. Click Next.

5 Make sure Don’t Use Version Control is selected and then click Next.

6 Te next screen lets you speciy a publish server that wil l host your website when you’re done.

Select Speciy 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 o the GoLive workspace. It’s here that you maintain,check, and even publish your website.

Te Files tab contains your root older, or everything in your site that will be uploaded to a

server. By deault the root older contains an item called index.html. Whenever a web browser

goes to this older, the rst thing it loads is the deault page. Tereore, in GoLive, index.html is

your home page.

What’s in the Site window

The GoLive Site window has ten dierent tabs you can

use or various unctions:

• Files: This is the root older o your site. Upload these

les to your server when you’re 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 avorite groups o web-

riendly onts.

• CSS: Find all the dierent CSS elements used on

your site.

• Diagrams: Use the powerul site diagramming

workfow rom this tab.

• Publish Server: Upload pages and images to a server

• Collections: Store aliases or shortcuts to commonly-

used assets here.

• Errors: I you have any broken links or missingles, GoLive tracks them in real time and displays

them here.

• Extras: Find Smart Objects, InDesign Packages, and

templates to use with your site.

The New dialog box

In addition to building websites, GoLive lets you

build interactive movie les and sites or mobile

phones. As you learn more about interactive

design, you’ll nd this dialog box a powerul

starting point or many dierent workfows.




Adding pages

o 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 ype a page name and then press return.

3 Repeat step 2 to create a ew more pages.

Adding subolders

Most web designers arrange the various les associated with a website into neatly organized

sub-olders. With small sites, HML pages normally go into one older, images into another,

and so on. When you arrange your olders, remember that you have to leave index.html, your

homepage, in the top level o your Files list (this location is also known as the root older) so

that a web browser can nd it.

o create a older:

1 Click the Create New Folder icon in the GoLive toolbar.

Create new olders in the GoLive toolbar.

2 ype a name or the older, or 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 ormats, such as GIF and JPEG. You can easily create imagesin these ormats 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 speciy a source

le (oen in a native Adobe le ormat) or which GoLive creates a target le in a web-optimized

ormat. See “Working with Smart Objects” below or more inormation.

o add web-ready images:

1 Optimize an image or use on the web (see sidebar).

2 In the GoLive Site window create a new subolder called “assets.”

3 Drag and drop the image or images into it.

The Save For Web command

To ormat les or use on the web, you’ll need to use theSave For Web command in Photoshop or Illustrator i

one o these applications is installed on your system.

1 With the le open in one o the two applications,

select File > Save For Web

2 At the top o the Save For Web - Powered By

ImageReady dialog box, select the 2-up tab. The

image on the let will now be your original, the one

on the right will be the compressed version. Select

the compressed image.

3 On the right side, you’ll see a range o 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 les 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 inormation on achieving this result, see

Photoshop or Illustrator Help.

5 When you’re satised with your settings, click Save

and ollow the instructions or 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 rm’s site, or example, would have pages

named clients.html , portfo lio.html , and content.html .




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 older or your site contains the ollowing items:

➤ Te root older (called web-content). Tis older contains the HML pages, images, and

other les that make up your website. Te contents o this older are displayed in the Site

window in GoLive.

➤ Te data older (called web-data). Tese are items used to create your website, such as

templates, Smart Objects, and InDesign Packages. Tese les do not get uploaded to the

server.

➤ Te settings older (called web-settings). Tis older contains the GoLive settings les.

➤ Te site le (you named this le). Tis le tracks everything in the olders described above.

When you open the site le, it starts GoLive and displays the Site window.

Lay out pagesTe Layout window has six diferent modes or viewing a webspage, but the most important

mode is the Layout Editor where you can drag and drop les to create pages.

Open a page to learn more about the layout tools in GoLive.

The document window with the Layout editor active.

The Document window

The Document window has six dierent tabs.

• Layout Editor: Create pages with easy-to-use

visual tools.

• Frame Editor: Work with ramesets i 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 o your site.• Preview Layout as Adobe PDF: Generate a PDF o

your page. Great or making and sending snapshots

o your pages.




The Objects toolbox

Te Objects toolbox has three sections. At the top, you can nd selection tools, the middle has

a category list o diferent objects you can add to your page, while the bottom contains the

objects themselves.

Tools

Categories

Objects

The Objects toolbox.

o add objects to your site:

1 From the bottom section o the Objects toolbox, drag the Layout Grid item (at top le) onto

your page. (I Basic is not selected rom the Draggable Objects category, you will not see the

Layout Grid.)

The Layout Grid object.

Toolbar categories

Here’s a brie overview o what you’ll nd in each o

the categories in the Ob ject toolbar.

• Basic: Basic HTML elements or 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 platorms.

• Form: Tools to work with orms.

• Head: Add metadata, such as keywords or searchengines.

• Frame: Use this section to build pages with rames.

• 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 or developing

content or mobile devices.




2 Drag the handle at the bottom right hand corner o the grid so that the grid covers the work area.

The Layout editor ater placing the Layout Grid object.

3 Drag a GIF or JPEG image rom the Files tab o the Site window to the layout grid. I 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

o add a text box, use the Grid ext Box tool:

1 Select the Grid ext 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 ype text into the text box or paste a section o text rom a document.

4 o move the text box, grasp it by the edge (when the pointer is positioned at the edge o 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 o item you select. For example, i you select

the layout grid, you’ll see options or changing its size, the spacing o the gridlines, and whether

you want objects to snap to the gridlines or not. When there are too many options to t in one

panel o the palette, t hey 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 you’ve 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 o the Inspector palette.

3 ype the URL or your page into the eld or use the GoLive pick whip to link to another page

in your site. o use the pick whip:

a Click and drag rom the Fetch URL icon, which is located at the le side o the link eld.

The Fetch URL icon




b Drag the pick whip to the Files ab o the Site Window. You may need to rearrange your

windows to do so. o select a page, rst hover over the HML older you’ve created, then

select your page and release.

The pick whip.

GoLive creates the hyperlink or you. Don’t worry i it takes you a ew tries to get used to the pick

whip. Once you become accustomed to it, you’ll love how quickly it lets you navigate through the

le 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 you’d like to link.

Text selected in the Layout editor.

2 ype a URL, or use the GoLive pick whip to link to another page in your site.



1Mastering Adobe GoLive CS2 Basics

Check your work

GoLive ofers a number o ways or you to check your work in a browser-like environment.

One o these methods is the Live Rendering browser.

o 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

you’ve done, including links you’ve 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 o

the most popular browsers or cell phones and other mobile devices.

The Live Rendering browser updates as you work .

Summing up

When you design your site, you may nd that the Site window, the Layout window, the Objects

toolbox, and the Inspector palette are the most important tools you will use. o learn more about

these tools, see the “Additional resources” section at the end o this document.




Work with Smart ObjectsTough the web requires all images to be in certain ormats, such as GIF and JPEG, GoLive

Smart Objects let you work with native Photoshop and Illustrator les. Say, or example, that

you have a photo that you’ve compressed, but when you open it in GoLive, you notice that you’d

neglected to color correct it properly. Normally, you’d have to throw out the compressed le, go

back to the original photo, color correct it, and save it again or the web.

With GoLive, you can double-click the Smart Object to start Photoshop (i it is installed). You

can then make the corrections and save the image. GoLive detects the changes and updates

the le.

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 rst have to add one to the site. Since you

won’t 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 o the Site window.

The Extras tab.

2 Drag a Photoshop or Illustrator le into the Smart Objects older.

Adding a le to the Smart Objects older.

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 it’s a Smart Object, you can always readjust

it once it’s on your page.




4 I you’ve added a Photoshop le 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 le. (Tis

method is a great way to save time when you need to create multiple headings, buttons, and

similar items. o learn more about this eature, see the “Additional resources” section at the

end o this document. )

The Save or Web Powered by ImageReady window.

5 When you have adjusted the settings, click Save.

6 GoLive prompts you to save your target le. Te target le is the compressed, web-riendly

version o the Smart Object , and it needs to go into your site’s web-content older. o do so,

click the Site Folder icon.

Select the Root older.

7 Select Root and then click Save.

Te le now appears in both the Layout Editor and the Files tab o the Site older.




The Actions paletteo 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 perorm a series o set tasks. In GoLive, an action is a prewritten script that tells a

web browser to do something whenever a user perorms a specic action on a webpage.

GoLive includes more than a hundred actions, and you can nd more on Adobe Studio Exchange

website at http://share.studio.adobe.com .

o 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 eld in the top le o the Actions palet te lets you choose the event you want to have

trigger the action. Te most commonly used events are Mouse Click, or which the user clicks

on the object, or Mouse Enter, or which the user moves the pointer over an object. Select

Mouse Click and then click the Create New Item icon at the bottom o the Actions section at

the right side o the palette.

Create a new item in the Actions palette.




3 “? None” appears in the Actions eld, indicating that you haven’t specied what action you’d

like the browser to perorm. o speciy the action, click the Action button located just below to

see a list o Action categories.

Select an Action in the Actions palette.

4 Choose Link > Open Window to open a new browser window when a user perorms the eventyou chose in step 2.

5 You now need to speciy the URL o the page that will open. You can either type a web address

into the Link eld or use the pick whip to select a page in your site.

6 o complete the action, you also need to speciy the size o the page you’d like to have open.

Enter 800 or width and 600 or height.

The Open Window action when complete.

Your action is now complete. o learn more about actions, please see see the “Additional

resources” section at the end o this document.




Upload your siteWhen you’ve designed all your pages, it’s time to publish your site to a server. Beore you can

upload a site, you need a web server to host it. Contact your Internet Service Provider (ISP)

or server administrator. One o these sources will be able to provide your site’s IP address

(a number similar to 217.123.12.4), the path to your older 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 o the window, you’ll see an empty box. Click the New Server icon at the

bottom o this box.

Add a new server.




3 Name the server, enter the server inormation, and then click OK.

4 In order to connect to the web server, you need to connect to the Internet. Ten click Connect

o Publish Server in the GoLive toolbar. Notice that the Publish Server tab o the Site window

is automatically selected upon connecting to the server, and that any les the server contains

are displayed in a list.

The Connect To Publish Server button.

5 o upload les, click the Upload Modied Files button next to the Connect o Publish Server

button in the GoLive toolbar. Follow the on-screen instructions to upload your site.

The Upload Modied Files but ton.

Site maintenance

I you want to change something on your site, open the le rom the GoLive Site window and

work on it in the Layout window. When you’re nished, make sure you’re connected to theInternet and choose File > Save And Upload. Or, i you’ve updated multiple les, save them all

rst and then click the Upload Modied Files button. GoLive uploads only the parts o your site

you change.

Additional resourcesCongratulations, you’re on your way to creating great websites with Adobe GoLive CS2. Tis

guide has provided a basic overview o the website building capabilities o GoLive. o learn more

about GoLive and the web, see the ollowing resources:

Books

Adobe GoLive CS2 Tips and Tricks, by Adam Pratt and Lynn Grillo. An excellent introduction to

the basics o GoLive, together with handy tips or saving time and increasing productivity.

Adobe GoLive CS2 Classroom in a Book, by the Adobe Creative eam. 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 condence grows.

Designing With Web Standards, by Jefrey Zeldman. Tough not specically about

GoLive, this book ofers a great introduction to web technology and the emergence o

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 or a user who has learned the basics and wants to nd out more.

Adobe Exchange: http://share.studio.adobe.com . You’ll nd many ree, downloadable templates,actions, extensions, and tutorials.

http://studio.adobe.com/

http://share.studio.adobe.com/

http://share.studio.adobe.com/

http://studio.adobe.com/



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 orms, tables, image maps, and

Cascading Style Sheets (CSS).

Adobe Systems Incorporated • Park Avenue,

San Jose, CA 110-0 USA •www.adobe.com

Adobe, the Adobe logo, GoLive, Illustrator, and Photoshop areeither registered trademarks or trademarks o Adobe SystemsIncorporated in the United States and/or other countries. Mac andMacintosh are trademarks o Apple Computer, Inc., registered inthe United States and other countries. Microsot and Windowsare trademarks o Microsot Corporation in the United States andother countries. All other trademarks are the property o theirrespective owners.

© 2005 Adobe Systems Incorporated. All rights reserved. Printedi th USA 8/05

http://www.lynda.com/

http://www.adobe.com/

http://www.adobe.com/

http://www.lynda.com/

Documents

Adobe Go Live!