Mastering_Adobe GoLive.pdf

whitepaper

Mastering

Adobe GoLive CS2 Basics

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

Introduction

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

the most complex web projects—without 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 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

simplify the ongoing maintenance of your site.

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

low, 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 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 irst 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. hat way, GoLive can track all of your assets

from the start, and you won’t 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 you’ve previously chosen

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

2 Click Site in the let column of the New dialog box.

The New dialog box

In addition to building websites, GoLive lets you

build interactive movie iles and sites for mobile

phones. As you learn more about interactive

design, you’ll ind this dialog box a powerful

starting point for many diferent worklows.

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 ind. Click Next.

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

6 he next screen lets you specify a publish server that will host your website when you’re done.

Select Specify Server Later and then click Finish to open the Site window.

The Site window.

What’s 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

iles 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 favorite groups of web-

friendly fonts.

• CSS: Find all the diferent CSS elements used on

your site.

• Diagrams: Use the powerful site diagramming

worklow 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

iles, 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

he Site window is the most important part of the GoLive workspace. It’s here that you maintain,

check, and even publish your website.

he 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 irst thing it loads is the default page. herefore, in GoLive, index.html is

your home page.

Mastering Adobe GoLive CS2 Basics

Adding pages

To add more pages to your site:

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 irm’s site, for example, would have pages

named clients.html , portfolio.html , and content.html .

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 iles 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 ind 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. hen drag and drop your newly created pages

into it, just as you would in the Finder (Macintosh) or Explorer (Windows).

Adding images

he 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. hese objects let you specify a source

ile (oten in a native Adobe ile format) for which GoLive creates a target ile in a web-optimized

format. See “Working with Smart Objects” below for more information.

The Save For Web command

To format iles for use on the web, you’ll 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 ile 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, you’ll see a range of options. The

most important option is Optimized File Format.

Choose GIF when selecting images with lat colors

or repeating patterns, such as a logo. Choose

JPEG when compressing photographs or iles 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 you’re satisied with your settings, click Save

and follow the instructions for your image type.

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.

Mastering Adobe GoLive CS2 Basics

Site ile structure

GoLive organizes directories so that everything can be tracked with the site-management tools.

The site as it appears in Windows XP.

he site folder for your site contains the following items:

➤ he root folder (called web-content). his folder contains the HTML pages, images, and

other iles that make up your website. he contents of this folder are displayed in the Site

window in GoLive.

➤ he data folder (called web-data). hese are items used to create your website, such as

templates, Smart Objects, and InDesign Packages. hese iles do not get uploaded to the

server.

➤ he settings folder (called web-settings). his folder contains the GoLive settings iles.

➤ he site ile (you named this ile). his ile tracks everything in the folders described above.

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

Lay out pages

he 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 iles to create pages.

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

The 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.

The document window with the Layout editor active.

Mastering Adobe GoLive CS2 Basics

The Objects toolbox

Toolbar categories

Here’s a brief overview of what you’ll ind 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.

he Objects toolbox has three sections. At the top, you can ind 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

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: