Adobe GoLive 6.0- P2 ppt

The site now consists of a file named index.html the home page of the site and two folders—the media folder that you imported, which contains several image files, and the pages folder th

3 In the Add to Site dialog box, navigate to Lessons/Lesson01/01Start/ Select the media

folder (but don’t open it) in the 01Start folder, click Add Folder (Windows) or Add

(Mac OS), and then click Done

4 In the site window, click the plus sign (Windows) or the triangle (Mac OS) next to the

media folder to display the folder’s contents These are the images you’ll use to build your Web pages Click the symbol next to the media folder again to close the folder

Creating a new folder

Next you’ll add a new folder to the site to hold some of the pages you’ll create

1 Be sure to click the title bar of the site window to make the site window active.

2 To create a new folder, click the New Folder button( ) on the GoLive toolbar

3 Rename the new untitled folder pages.

Most Web servers are case-sensitive and restrict the characters you can use in filenames and folder names When naming files and folders, avoid using a forward slash (/), space, or ampersand (&) Avoid using a period (.) except as part of an extension (for example,

index.html), and avoid using the hyphen (-) as the first character in a filename or folder

name Your Web server may have additional requirements.

The site now consists of a file named index.html (the home page of the site) and two folders—the media folder that you imported, which contains several image files, and the pages folder that you created, which is currently empty.

Designing a first Web page

Now that you’ve added some folder structure to the site, you’ll begin designing your first Web page

In the next lesson, Lesson 2, “Getting to Know the Work Area,” you’ll learn how to

customize your desktop in GoLive For the moment, you’ll simply move your site window

to the bottom of your monitor display, and position the document window above it

1 To reposition your site window, drag it by its title bar to the bottom left of the screen.

2 In the Files tab of the site window, double click the index.html file to open the home

page in its own document window

3 Drag the document window by its title bar and position it above the site window

If you need to resize either the site window or document window, do so

4 To resize a window, drag the lower right corner.

If needed, you can toggle between the site window and the document window by clicking the Select Window button ( ) ( ) on the toolbar

To avoid clutter, you’ll 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 you’ll 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 file 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

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, you’ll use the default page size

When designing Web pages, you’ll usually want to make them no wider than your viewer’s 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 you’re adding content to your Web pages, you’ll 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 you’re finished, 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

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 you’ve added a layout grid, you’ll 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

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

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 you’ll 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 you’ll use most often is the Web-safe (also called “browser-safe”) color set It’s a good idea

to use Web-safe colors because they keep your colors from dithering (shifting) when

viewed on monitors that can’t display more than 256 colors

3 In the Color palette, click the Web Color List button ( ) at the top of the Color palette.

4 Select a color by using the grid of sample swatches, by scrolling down the list, or by

entering a value in the Value text box and pressing Enter or Return (We chose the color labeled #CC6600.)

A Color space icons B Preview pane

C Swatches

5 Place your cursor over the preview pane, and drag the color from the preview pane to

the Text Color field on the toolbar or to the selected text in the Web page Then click away from the text on the Web page to see the result

As with many features in GoLive, there are several ways to set the color of text You can set text color using cascading style sheets or you can use the HTML Styles palette Consider using cascading style sheets if you are likely to be making global changes to text styles; consider using HTML styles if you are more likely to be making only localized changes

Changing the background color of a page

Now you’ll change the background color of your page

1 Select a color from the Color palette for the background (We chose the color labeled

#66CCCC.)

A

C B

2 Drag the color from the preview pane of the Color palette to the Page icon ( ) near

the top left corner of the document window The background color changes

3 Choose File > Save.

Adding images

To make your Web page more visually appealing, you can use images in your design

In this part of the lesson, you’ll add three images to the page You’ll add each image

by putting an image placeholder on the page and then linking the placeholder to an

image file

The standard image formats for the Web are Graphical Interchange Format (GIF) and Joint Photographic Experts Group (JPEG) GIF images are typically used for line art, and JPEGs are typically used for photographs and other images with more than 256 colors In this lesson, you’ll use GIF images Portable Network Graphics (PNG) images are not a

fully supported format, but have combined qualities of GIF and JPEG

You’ll begin by enlarging the grid

1 Click anywhere on the edge of the layout grid to select it Blue handles appear when the

grid is selected Position your cursor over the blue square handle on the right side of the layout grid, and when the cursor changes to a double- headed arrow ( ) drag about two inches to the right to widen the layout grid You need to widen the layout grid to have

enough space to add the image placeholder

2 Click the Objects tab to bring the Objects palette to the front and hide the Color palette.

3 Drag the Image icon from the Basic set of the Objects palette, and place it on the layout

grid to the right of the layout text box on your Web page

GoLive provides a context-sensitive Inspector that lets you quickly customize objects without using commands in the menu bar You’ll use the Inspector now to work with the image placeholder

4 Choose Window > Inspector to display the Inspector

Because an image placeholder is selected, the Inspector appears as the Image Inspector The Source text box in the Basic tab of the Image Inspector contains the text (Empty Reference!) because the image placeholder in your Web page does not refer to an image yet

Now you’ll “point and shoot” to connect the placeholder on the Web page with an image file in the site window

5 Make sure you can see the matchbox.gif file in the Files tab of the site window Expand

the media folder if necessary by clicking the plus sign or triangle next to the folder

6 Select the image placeholder in the document window, and drag from the Point and

Shoot button ( ) in the Basic tab of the Image Inspector to the file matchbox.gif in the media folder in the site window

You have successfully made the connection when the line from the Point and Shoot

button connects with and highlights the filename in the site window At this point, you can release the mouse button

The GIF image appears on the Web page, and the Source text box in the Basic tab of the Image Inspector shows the relative path of the image (media/matchbox.gif) That’s all

there is to placing an image on your Web page

7 To lengthen the layout grid so that you can place more images, click the edge of the grid

so that the Inspector changes to the Layout Grid Inspector In the Layout Grid Inspector,

enter 360 for Height, and press Enter or Return.

8 If necessary, scroll down the document window Drag two more Image icons from the

Basic set of the Objects palette and place them next to each other near the bottom of the layout grid on the page Make your page look like the following

9 Select the empty image placeholder on the left and use the Point & Shoot button in the

Basic tab of the Image Inspector to link it to the file features.gif in the site window Review the procedure in steps 5 and 6 if necessary

10 Select the remaining image placeholder and use the same procedure to link it from the

Basic tab of the Image Inspector to the file questions.gif

Note: If you drag from the Point and Shoot button and the target image file isn’t visible, you

can hold the mouse over a folder to open that folder If the target image file name is off the bottom of the window, you can hold the mouse at the bottom of the site window (below the visible file names) to scroll down the window.

To keep this lesson manageable, you’ll not take time to align the images perfectly You’ll learn how to do this in Lesson 3, “Designing Web Pages.”

11 Choose File > Save to save your work

12 In the site window, click the icon next to the media folder to hide the contents of the

folder

Previewing a Web page

You have just completed your first 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 you’ll check your preferences for previewing the home page in GoLive You’ll 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 program’s memory requirements, which can

improve the program’s 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

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 ( ) to preview the document in Layout Preview

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 you’ve finished, click the Layout tab to return to the Layout Editor.

Now you’ll 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 You’ll also need to set preferences for browsers in GoLive, which you’ll do now

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

(Recom-mended.)

• 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