Adobe GoLive 6.0- P5 ppt

Now you’ll add text to the home page using layout text boxes on a layout grid.. 1 Drag the Layout Grid icon from the Basic set in the Objects palette to the empty area below the compo

Aligning and distributing multiple objects

Now that you’ve added all of the images, you’re ready to align and distribute them You’ll align the tops of the three images for the navigation bar using the Align palette

1 To display the Align palette, choose Window > Align.

The toolbar lets you align objects relative to a layout grid, while the Align palette lets you align and distribute objects relative to each other or their parent.

2 Click the Items In Stock image to select it Then Shift-click the Repairs image and the

Appraisals image to add them to the selection

3 In the Align palette, click the Vertical Align Top button ( ) under Align Objects (If the tops of the selected objects are already aligned, this button is dimmed.)

The tops of the selected images are aligned

• If you want to preserve multiple layers of a Photoshop design, you can import the layers of the image as

individual Web images in floating boxes (DHTML layers) Because the Web images are displayed in floating

boxes, you can completely reposition them, overlap them, and apply other actions to them such as the Show

Hide action (See “Hiding and showing floating boxes” and “Working with Photoshop layered files” in the

Adobe GoLive 6.0 online Help.)

• You can use your Photoshop-based design as a tracing image and save individual cutouts as Web images

in floating boxes If you want, you can create a duplicate page that places the tracings in a table-based design

by converting the floating boxes to a layout grid (See “Converting floating boxes into layout grids” and

“Building a Web page using tracing images” in the Adobe GoLive 6.0 online Help.)

4 With the three images still selected, click the Vertical Align Top button ( ) under Align to Parent

The three images are aligned with the top of the layout grid

5 Choose Window > Align to close the Align palette.

Now you’ll move the three images together using a keyboard shortcut

6 Click away from the three images to deselect them, and select only the Items In Stock

image on the page Then hold down Ctrl+Alt (Windows) or Option (Mac OS), and press the Left Arrow key until the image moves no further

7 Select only the Repairs image on the page, and use the same method to move it to the

left until it moves no further Then select only the Appraisals image, and move it to the left until it moves no further

The selected objects are moved horizontally on the page so that their edges touch each other

Note: By default, a layout grid has options set to snap objects to the grid To move a selected

object 16 pixels (the default spacing between the horizontal and vertical lines of the grid), press an arrow key To move a selected object 1 pixel, hold down Ctrl+Alt (Windows) or Option (Mac OS), and press an arrow key.

When you have finished placing objects on a grid, it’s a good idea to optimize the grid, which you’ll do now Optimizing a grid reduces its size, so that it takes up less space on the page

8 Click the layout grid to select it Then click Optimize in the Layout Grid Inspector.

Optimized layout grid

For the purposes of this lesson, you won’t add navigation links to the images You’ll add these links later in Lesson 5, “Creating Navigational Links.”

9 Choose File > Save to save navbar.html Then choose File > Close to close it.

Designing the home page

Now that you have finished creating the component for a navigation bar, you’re ready to design the home page for the Web site The home page will provide information that

introduces users to Gage Vintage Guitars First you’ll open the home page and change its title

1 In the Files tab of the site window, double-click index.html to open it.

2 Change the title of the page to Gage Vintage Guitars Select the default title next

to the Page icon ( ) in the upper left corner of the document window, and enter the

new title

Applying a background image

You can apply an image or color to the background of your page to visually enhance it You can also apply an image or color to the background of a container on the page, such

as a layout grid When choosing an image for the page background, keep in mind that GoLive and browsers treat the image as a tile that’s repeated to cover the page

Now you’ll add a background image to the home page First you’ll preview the image using the File Inspector

1 In the Files tab of the site window, select the wood.gif file in the images folder

The Inspector changes to the File Inspector and displays detailed information about the selected file

2 Click the Content tab of the File Inspector, and notice that a preview of wood.gif

appears

Now you’ll use the wood.gif file to add a background image to the page

3 Click the Page icon ( ) in the upper left corner of the document window, so that the

Inspector changes to the Page Inspector

4 In the Page tab of the Page Inspector, select (or check) the Image option under

Background

5 Drag from the Point and Shoot button ( ) in the Page Inspector to wood.gif in the

images folder within the site window

Specifying image to tile for page’s background

Result

The image of the wood is tiled to cover the page

6 Choose File > Save to save your work.

Adding a component using a placeholder

Now you’ll add the navigation bar to the home page using the component that you

created earlier in this lesson First you’ll add a component placeholder to the page, and

then you’ll link the placeholder to a file in the site’s Components folder

1 Drag the Component icon from the Smart set ( ) in the Objects palette to the upper

left corner of the page

Adding component placeholder to page

A component placeholder is added to the page

2 Select the component placeholder, and the Inspector changes to the Component

Inspector Drag from the Point and Shoot button ( ) in the Component Inspector to navbar.html in the Components folder in the site window (Remember that the Compo-nents folder is displayed in the Extras tab in the right pane of the site window.)

The navigation bar is added to the top of the page

3 Choose File > Save to save the home page.

Adding text using layout text boxes

When you add text to a page using layout text boxes on a layout grid, you can easily

rearrange the location of the text by moving or aligning the boxes You can also add

images and other objects to layout text boxes, so that you can align objects within the text

or wrap text around objects

Now you’ll add text to the home page using layout text boxes on a layout grid First you’ll add a layout grid to the page

1 Drag the Layout Grid icon from the Basic set ( ) in the Objects palette to the empty

area below the component on the page

Now you’ll specify a width and height for the grid

2 In the Layout Grid Inspector, enter 600 for Width, press Tab to jump to the next text

box, and enter 300 for Height Press Enter or Return.

Now you’re ready to add the first layout text box to the layout grid You’ll use this box to add a main heading to the page

3 Drag the Layout Text Box icon from the Basic set in the Objects palette to the upper

center area of the layout grid

A layout text box is added to the grid If needed, you can adjust the position of the box by moving the pointer to an edge of the box so that it turns into a hand, and then dragging the box

4 Click inside the layout text box to create an insertion point, and type Welcome to Gage Vintage Guitars Then choose Header 1 from the Paragraph Format menu on the toolbar.

Text in layout text box, reformatted as Header 1

You can use the toolbar to position selected objects precisely on a layout grid Now you’ll use the toolbar to reposition the layout text box

5 Click an edge of the layout text box to select it Be sure to select the layout text box and

not the layout grid box

6 On the toolbar, enter 179 in the Horizontal Position text box, press Tab to jump to the

next text box, and enter 0 in the Vertical Position text box Press Enter or Return.

The layout text box is repositioned 179 pixels from the left edge of the layout grid and 0 pixels from the top of the grid

You can also use the toolbar to resize a selected object Now you’ll use the toolbar to resize the layout text box

7 On the toolbar, enter 400 in the Width text box, press Tab to jump to the next text box,

and enter 80 in the Height text box Press Enter or Return.

Note: If the values used in this section don’t work on your system, you can adjust them as

necessary Use the values given as a guide

Entering values to reposition and resize selected object

The layout text box is resized to 400 pixels in width and 80 pixels in height

Note: In a browser, a layout text box automatically adjusts its size in relation to its content,

which resizes according to the platform that the browser is using (for example, to

accom-modate fonts that appear larger in Windows and smaller in Mac OS) This can affect the size

of the layout grid, as well as the position of other items on the layout grid, altering the

intended design So that text size appears more consistently across platforms, you can assign

a pixel size definition for all text using a cascading style sheet.

Now you’ll add a second layout text box to the layout grid You’ll use this box to add a

subheading to the page

8 Drag the Layout Text Box icon from the Basic set in the Objects palette to the upper left

area of the grid

9 Click inside the second layout text box to create an insertion point, and type Check

Out This Week’s Hottest Buy! Then drag to select the text that you just typed, click the

Bold button ( ) on the toolbar, and choose 4 from the Font Size menu on the toolbar

After applying individual HTML attributes to text using the toolbar, you can save them

as a group in the HTML Style palette, and then use the palette to reapply the group of

attributes to other text in your site (see Lesson 4, “Working with Text and Tables,” for more information) You can also use cascading style sheets to define text formatting once and then instruct browsers to reuse the definitions whenever text on a page refers to them (see Lesson

12, “Using Cascading Style Sheets,” for more information).

10 To resize the second layout text box, click an edge of the box to select it, and drag one

of its handles

Resizing layout text box by dragging its handles

11 Choose File > Save to save index.html.

Adding text using a table

In addition to displaying information in rows and columns, tables can be used to lay out text and objects on a page To add text to a table, you can type directly in a table cell, copy and paste text from GoLive or another application, and import text from a text-only file created in a word-processing or spreadsheet application, for example

Now you’ll use a table to add text that introduces Gage Vintage Guitars to the home page Currently, the text resides in a text-only file To save time, you’ll copy and paste the text from the file into a single-cell table that you’ll add to the page You can place a table directly on the page or on a layout grid, which gives you more control over its placement but may result in more complex HTML code

1 Drag the Table icon from the Basic set ( ) in the Objects palette to the area below the

main heading on the layout grid

Adding table to layout grid

A table is added to the grid, and the Inspector changes to the Table Inspector By default, the table has three rows and three columns You’ll change the number of rows and columns using the Table Inspector

2 In the Table tab of the Table Inspector, enter 1 for Rows, press Tab to jump to the next

text box, and enter 1 for Columns Press Enter or Return.

Now you’ll specify the width of the table You’ll also set the table’s border width to 0, so that the borders appear as a solid or dashed outline in the Layout Editor but don’t appear

in the browser

3 In the Table tab of the Table Inspector, enter 400 for Width If it isn’t already chosen,

choose Pixel from the menu to the right of the Width text box Enter 0 for Border Press

Enter or Return

Now you’ll copy and paste text from a text-only file into the table

4 Navigate to the folder Lessons/Lesson03/03Start, and double-click the intro.txt file to

open it in a text editor

5 Create an insertion point anywhere in the text, and choose Edit > Select All to select all

the text Choose Edit > Copy to copy the text, and then choose File > Close to close the

text file without saving any changes

6 In the index.html document window in GoLive, click in the newly added table to create

an insertion point, and choose Edit > Paste

Text from the intro.txt file is added to the table

Now you’ll precisely position the table using the toolbar

7 Move the pointer over the top left of the table until it turns into this ( ), and then click

to select the table in the document window

8 On the toolbar, enter 179 in the Horizontal Position text box, press Tab to jump to the

next text box, and enter 80 in the Vertical Position text box Press Enter or Return.

Now you’ll optimize the layout grid to reduce its size

9 Click the layout grid to select it Then click Optimize in the Layout Grid Inspector.

10 Choose File > Save to save index.html.

Creating a custom color palette and adding color to text

You can collect and organize colors for a site in the Colors tab of the site window The colors appear in both the Colors tab and the Site Color List in the Color palette, either of which you can use as a custom color palette to color text and objects on a page When you change a site color in the Colors tab, GoLive automatically updates every occurrence of the color in the site on pages that are closed

As an alternative to applying color using the Colors tab or the Color palette, you can create

a cascading style sheet to apply color to text and objects Cascading style sheets simplify the maintenance of text and other attributes on a page and throughout a site.

Now you’ll add color to emphasize text on the page

1 In the site window, click the Colors tab to bring it to the front So that you can see all

the information listed in the Colors tab, close the right pane of the site window by clicking the double-headed arrow ( ) below the scroll bar for the left pane

Colors tab in site window

Notice that the Colors tab contains a New Colors folder that contains a site color named white, which is used as the default background color for the home page

2 Choose Window > Color, or click the Color tab to open the Color palette.

3 In the Color palette, make sure that the Web Color List button ( ) is selected In the

Value text box, enter 990000 Press Enter or Return.

The selected color appears in the vertical preview pane on the left side of the Color palette

4 Drag the color from the preview pane, and drop it on the New Colors folder

Dragging color from preview pane to Colors tab in site window

An untitled color—the color you selected in the Color palette—is added to the Color tab Now you’ll rename the color according to how you’ll use it in the site Because you’ll use the color to emphasize text, you’ll name the color “emphasis.”

5 In the Colors tab of the site window, click the name of the untitled color to select it

Enter emphasis to rename the color.

Now you’ll color some of the text on the page using the emphasis color

6 In the document window, drag to select the text “Check Out This Week’s Hottest Buy!”

7 Drag the emphasis color from the Colors tab of the site window to the selected text on

the page Then click in the blank area outside the selected text to deselect it

The color of the selected text changes to red.

Dragging color from site window to selected text

You can use the Color palette’s eyedropper to extract a color from an image or other element on the screen Then you can find the closest Web-safe approximation of the color

in the Web Color List and add the color to the Colors tab This feature is useful when you want to match the color of two objects on a page, such as an image and page background.Now you’ll add another untitled color to the Colors tab, extract a color from the company logo in the component on the page, and add a Web-safe approximation of it to the Colors tab

8 Drag the Color icon from the Site set ( ) in the Objects palette, and drop it on the New

Colors folder in the Colors tab of the site window

An untitled color is added to the New Colors folder Now you’ll extract a color from the company logo

9 Move the pointer to any color swatch in the Color palette, so that the pointer turns into

an eyedropper

10 Drag the eyedropper from the Color palette to the shadow of the guitar pick on the

page, and release the mouse Notice that the color changes in the preview pane of the

Color palette as you drag the eyedropper

Extracting color from image on page

When you release the mouse, the extracted color appears in the preview pane, and the

Web-safe colors that most closely match it appear at the top of the list on the right side of the palette Ours was 999966

Now you’ll change the untitled color in the New Colors folder to the selected color