Tải bản đầy đủ (.pdf) (30 trang)

Adobe GoLive 6.0- P10 potx

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.72 MB, 30 trang )

LESSON 7
276
Working with Frames
1 Select the navigation frame on the left of the page. In the Frame Inspector, click the
Browse button ( ), navigate to nav.html in 07Start/bugbody folder/bugbody/pages/,
and click Open. An icon representing the file appears in the frame.
In Mac OS, click the Preview Frame button ( ) in the Frame Inspector. The contents
list in nav.html appears in the frame. (You can click the button again to turn off the
display, but leave it on for now.) This feature is not available in Windows; however, you
can preview using the Preview tab.
Now you’ll try another technique for adding a content file. If the file resides in your Web
site, you can use the Point and Shoot button in the Frame Inspector to add content
to a frame.
2 If necessary, drag the document window to a place on your screen where you can see
both the main frame of your frame set and the files in your site window.
3 In the site window, open the pages folder.
4 In the document window, select the main frame.
5 In the Frame Inspector, drag from the Point and Shoot button ( ) to the head.html
file in the site window to create a link.
The final method for adding content to a frame—by dragging—is perhaps the easiest.
6 If necessary, drag the document window to a place on your screen where you can see
both the bottom frame of your frame set and the files in your site window. (You may need
to resize frameset.html to do this.)
7 Drag banner.html from your site window to the bottom frame. The banner.html file is
now linked to the frame, as indicated in the Inspector.
277
ADOBE GOLIVE 6.0
Classroom in a Book
8 Click the Preview tab (Windows) or the Frame Preview tab (Mac OS) in the document
window to display the contents of all three frames.
Note: When you want to add an image as the content of a frame, you must first put the image


into an HTML page. A frame will not show a plain image file.
Preview tab (Windows)
Frame Preview tab (Mac OS)
9 Choose File > Save to save your frame set.
When working with frames, keep in mind the following browser limitations:
• Single-frame pages do not display in Netscape browsers earlier than Netscape 6.
• Browsers tend to offset the content of a page from the edge of their main display area and from the inner
edges of frames by a few pixels. This behavior can cause sizing problems. To help solve this problem, you can
set the margins of the frame set document to zero.
• Nesting frame set documents within the frames of other frame sets is possible but can cause serious navi-
gation problems.
–From the Adobe GoLive 6.0 online Help.
LESSON 7
278
Working with Frames
Creating targeted links
Although your frames can be used simply to display these three Web pages, they are much
more powerful when used to navigate and view your entire site. You’ll enable a viewer to
change the content of the main frame by using targeted links from the navigation
(contents) pane to other pages.
1 In the site window, double-click the nav.html file to open it.
2 Select the word “Thorax” in the nav.html file.
3 In the Text Inspector, click the New Link button ( ), and then use the Point and
Shoot button to create a link to thorax.html in the site window.
This creates a link between the two pages. But which frame will it appear in? You want it
to appear in the main frame, so you must select that frame as the target.
4 In the Text Inspector, choose main from the Target pop-up menu.
Now when a visitor clicks on this link in the Contents, thorax.html will replace head.html
in the main frame.
5 Choose File > Save to save your work.

6 Click the Preview tab and click the Thorax link to test your link. The thorax.html file
should open. Close the thorax.html file when you are finished, and return to the Layout
view of the nav.html file.
Creating a return link to the home page
You are going to target the Welcome link on this page to the home page. This will allow
viewers to return to the home page at any time, and from anywhere in your site.
1 Select the Welcome link in nav.html.
2 In the site window, make sure that index.html is visible.
3 In the Text Inspector, click the New Link button, and then use the Point and Shoot
button to create a link to index.html.
279
ADOBE GOLIVE 6.0
Classroom in a Book
4 This time in the Text Inspector, choose _parent from the Target pop-up menu.
The _parent option specifies the browser window as the target and causes the browser to
change the content of the entire window. The browser will replace the frame set with one
pane that shows the home page; it will no longer display the navigation bar or banner.
The other two links have already been done for you.
5 Save and close the nav.html file.
6 In the file frameset.html, click the Frame Editor tab to return to the Frame Editor, and
make sure the frame set is selected and not one of the frames inside of it. (Select the frame
set by clicking any of its horizontal or vertical dividers.) Then click the Show in Browser
button in the upper right corner of the toolbar. The file frameset.html appears in the Web
browser that you specified in the GoLive Preferences dialog box.
7 Click each of the links in the Contents pane (select the Welcome link last). The linked
pages appear in the main pane.
Note: Some pages open in separate windows rather than in the frameset. Later in the lesson,
in the section “Adding an action to always load the frame set” on page 281, you’ll fix this so
that all pages open in the required frameset.
Notice that when you click the Welcome link, the site’s home page fills the entire browser

window. This shows the effect of setting the link’s target to _parent. However, you will also
notice that nothing happens when you click Enter. You’ll fix this link next.
8 Close your browser.
LESSON 7
280
Working with Frames
Linking the frame set to your home page
Now you need to create a link from your home page to the new frame set. This link usually
says something like Enter. When a viewer clicks it, the frame set opens, displaying your
site’s opening content pages.
Note that you don’t create a link to a content page. Instead you create a link to
frameset.html, which will open showing the three content pages in its frames.
1 In the site window, double-click the index.html file to open it. Make sure that the site
window is visible, and that the pages folder is open.
2 In index.html, select the text Enter.
3 In the Text Inspector, click the New Link button ( ), and then use the Point and
Shoot button to create a link to frameset.html.
4 Choose File > Save to save both index.html and frameset.html.
You can test the Enter/Welcome link using the Show in Browser button if you wish. Close
your browser when you are finished.
281
ADOBE GOLIVE 6.0
Classroom in a Book
Adding an action to always load the frame set
As the bugbody site is set up now, it’s still possible to browse an individual page (such as
abdomen.html) without the frame set, so that it fills the entire browser window. This
could produce unwanted consequences if the site were actually on the Web. For example,
a search engine might locate content in the abdomen.html page and return the URL for
that page to a viewer. Clicking on that URL would open abdomen.html in the entire
browser window, with no access to the navigation bar or any other page in the site.

To prevent this from happening, you can add a ForceFrame action to the individual
content pages in your site. The ForceFrame action identifies the frame set associated with
the page and instructs the browser to load the page in the frame set, thus preserving the
site structure.
1 In the site window, double-click the abdomen.html file in the pages folder to open it.
2 Click the triangle at the top left of the page to open the head section pane of the
document window.
3 Click the Smart button ( ) at the top of the Objects palette.
4 Drag the Head Action icon from the Smart set of the Objects palette to the head
section pane.
LESSON 7
282
Working with Frames
5 In the Head Action Inspector, make sure that OnLoad is chosen from the Exec. pop-up
menu. From the Action pop-up menu, choose Link > ForceFrame.
6 Now you need to select the frame set. Either use the Point and Shoot button and create
a link to frameset.html in the site window, or use the Browse button to select
frameset.html.
7 Close the head section pane of the document window.
8 Save and close all open HTML files.
283
ADOBE GOLIVE 6.0
Classroom in a Book
Previewing in a Web browser
Now that you’ve created a frame set and content frames for your Web site, you can
preview the finished site in a browser.
1 In your browser, locate and open the completed index.html file in
Lessons/Lesson07/07Start/bugbody folder/bugbody/.
2 Click the Enter link in the index.html file, and explore the site.
3 When you’ve finished viewing the pages in the site, close your browser.

LESSON 7
284
Working with Frames
Review questions
1 Where will you find a set of ready-made frame layouts?
2 How do you set a frame size to a specific number of pixels?
3 How do you add color to a frame border?
4 How do you add a scrollbar to a frame?
5 What are the three ways to fill a frame with content?
6 How can you preview the content in your frame set without launching a browser?
7 Why would you add a ForceFrame action to a Web page?
Review answers
1 You will find a set of ready-made frame layouts in the Frames set of the Objects palette.
2 Select the frame. In the Frame Inspector, choose Pixel from the Width or Height pop-
up menu, and enter the number of pixels in the text box.
3 Select the frame border. In the Frame Set Inspector, select the BorderColor option, and
then click on the color field to open the Color palette. Click the Web Color List button in
the Color palette, and select the color that you want.
4 Select a frame. In the Frame Inspector, choose Yes from the Scrolling pop-up menu.
5 Select a frame. You can fill it with content:
• By browsing for a file in the Frame Inspector.
• By using the Point and Shoot button on the Frame Inspector to link to a file.
• By dragging a file from the site window to the frame.
6 Click the Preview tab (Windows) or Frame Preview tab (Mac OS) of the document
window, or double-click on the page icon in a frame to open its content file in another
window.
7 You add a ForceFrame action to the head section of a page to make sure that the page
is always viewed as part of a frame set, rather than as an individual page filling the browser
window.
8 Creating Rollovers

In this lesson, you’ll design a navigation
bar for the home page of a Web site. First
you’ll create rollover buttons that change
in appearance when your mouse moves
over them. Next you’ll create a drop-
down menu effect, assigning actions to
the rollover buttons so that drop-down
menus appear when your mouse moves
over the buttons.
LESSON 8
288
Creating Rollovers
About this lesson
In this lesson, you’ll learn how to do the following:
• Add floating boxes to a page, so that you can overlap objects.
• Create rollover buttons inside floating boxes on a page.
• Add images inside floating boxes on a page.
• Add actions to rollover buttons for showing and hiding floating boxes.
• Add actions to a rollover button to create a drop-down menu effect.
• Link a rollover button to a page on the Web.
• Preview a page in a Web browser.
This lesson takes approximately 45 minutes to complete.
If needed, copy the Lessons/Lesson08/ folder onto your hard drive. As you work on this
lesson you’ll overwrite the start files. If you need to restore the start files, copy them from
the Adobe GoLive 6.0 Classroom in a Book CD.
Note: Windows users need to unlock the lesson files before using them. For more information,
see “Copying the Classroom in a Book files” on page 3.
Getting started
In this lesson, you’ll work on the design of the home page of a Web site for a company
called Trilobite.com, which specializes in selling trilobites, collectible fossils of one of the

first arthropods.
Note: The trilobite.com Web site you’ll work on in this lesson is a prototype developed solely
for this lesson. The contents of the Web page are created for the purpose of this lesson only and
are the creation of the staff at Adobe Systems. The URL, www.trilobite.com, and the name,
Trilobite.com, are used with the generous permission of Hammer & Hammer Paleotek.
You’ll work on the design of a navigation bar for the page by adding rollover buttons to
the page and then assigning actions to these buttons.
289
ADOBE GOLIVE 6.0
Classroom in a Book
Rollover buttons are buttons that change in appearance when your mouse moves over
them or clicks them (referred to as the Over and Down state in Adobe GoLive, respec-
tively). You can assign actions to rollover buttons that are triggered by mouse events.
Examples of actions that you can assign to a rollover button are showing and hiding a
floating box or jumping to another destination. For more complete information on using
actions, see Lesson 10, “Using Actions and JavaScript.”
First you’ll view the finished home page in your Web browser.
1 Start your browser.
2 Open the index.html file, the home page for the site, in
Lessons/Lesson08/08End/trilobite folder/trilobite/.
The home page welcomes viewers to Trilobite.com and shows a short trilobite GIF
animation as the page is opened. The page contains a number of different rollover effects.
LESSON 8
290
Creating Rollovers
3 Move your mouse over the green, aqua, and orange rollover buttons to see the rollover
animations. Notice how the star changes in appearance if you pause over it. Move your
mouse over the text labeled Trilobites, History, and About Us. Notice that pausing on any
of these rollover buttons causes a drop-down menu to appear. Drag your mouse over the
items in the drop-down menu and notice that each item in the drop-down menu is a

separate rollover whose appearance changes when you move the mouse over it. And lastly
notice the show and hide effects as you move from one drop-down menu to another. In
this lesson, you’ll learn how to create all these effects.
In a finished site, these drop-down menu items would be a second level of navigation.
Because this site isn’t finished—it contains only this home page—only one of these
second levels of navigation is active.
4 In the About Us drop-down menu, click Contact Us. For this lesson, we linked the
Contact Us button to the Adobe Web site, so that you can see how a button can be linked
to another page on the Web.
5 Click the Back button in your browser to return to the home page for the Trilobite.com
Web site.
6 When you have finished viewing the home page, close it and exit or quit your browser.
291
ADOBE GOLIVE 6.0
Classroom in a Book
Opening the home page
You’ll begin this lesson by opening the home page for the Trilobite.com Web site in
Adobe GoLive. To make this lesson manageable, we have already created two of the
navigation bar elements—Trilobites and History—for you, together with their drop-
down menus. As you work through this lesson, note the naming convention used for the
image files. Using a consistent naming and numbering style makes it easier to manage the
large number of images used in a project like this one.
1 Start Adobe GoLive.
By default, an introductory screen appears prompting you to create a new page, create a
new site, or open an existing file.
Note: You can set preferences for the introductory screen to not appear when you start GoLive.
If the introductory screen doesn’t appear, choose File > Open and go to step 3.
2 Click Open to open an existing file.
3 Open the trilobite.site file in Lessons/Lesson08/08Start/trilobite folder/.
The site window for the Trilobite Web site appears with the Files tab selected.

Now you’ll open the home page for the Trilobite Web site.
4 Double-click the index.html file in the Files tab of the site window.
LESSON 8
292
Creating Rollovers
The home page appears with the Layout tab selected. The page contains a single, large
image and several floating boxes. One floating box contains an animated GIF image. Two
additional floating boxes contain rollovers and images—Trilobites and History. Two
hidden floating boxes contain drop-down menus that were created in advance for you.
These are the rollovers and drop-down menus that you previewed in “Getting started” on
page 288.
5 Choose Window > Inspector to display the Inspector, or click the tab if the Inspector
is collapsed.
6 Click anywhere on the home page except on the floating box that contains the trilobite
image. Notice how most of the content of the page is selected. This is because this page
consists of one large image on which are placed a number of floating boxes. The Inspector
changes to the Image Inspector, confirming that you have selected an image. (As a
reminder, the word “Image” appears at the bottom of the Inspector to indicate that it has
changed to the Image Inspector.)
293
ADOBE GOLIVE 6.0
Classroom in a Book
7 Now click on the border of the monochrome trilobite image on the right of the page.
The floating box is selected when the hand points to the left. Notice that the Inspector
becomes the Floating Box Inspector. If you click on the image placeholder inside the
floating box, the Inspector becomes the Image Inspector.
8 Scroll down to the bottom of the page, where you’ll see a stack of yellow floating box
markers in the left corner.
9 Notice that the first or top marker is selected. Notice that the name in the Floating Box
Inspector is animation. This is the floating box that contains the trilobite animation.

10 Select the second floating box marker. The name in the Floating Box Inspector is
Button01. This is the floating box that contains the green star and the text, Trilobites.
11 Select the fourth floating box marker. The name in the Floating Box Inspector is
Navigation01. Note also that the Visible option is deselected.
If possible, enlarge the document window so you can see both the floating box icon and
the top of the document. You can reduce the size of the document window when you
finish this section.
LESSON 8
294
Creating Rollovers
12 If necessary, scroll to the top of the page so you can see the floating box containing the
Trilobites text. In the Floating Box Inspector, select the Visible option. A floating box that
contains the drop-down menu appears.
Selecting the Visible option reveals the drop-down menu.
You’ll leave this drop-down menu visible as you continue with the lesson. There is a
similar hidden floating box for the History drop-down menu. You’ll leave it hidden.
Adding a floating box to hold a rollover button
Now you’re ready to finish the navigation bar by adding the About Us portion. When
finished, the navigation bar will contain six rollovers at the top level—three stars each
with a rollover effect, and three text images that trigger the appearance of a drop-down
menu. Each star and text pair is placed inside a floating box on the page. Floating boxes
are useful because they allow you to overlap objects on a page. Using floating boxes, you
can position the rollover buttons on top of the single, large image that makes up the
background of this page. Understand, however, that you don’t need to place rollover buttons
in floating boxes—you can place rollover buttons directly on a page, on a layout grid, or inside
a table cell.
First you’ll add a floating box to the page. Then you’ll place the rollover button inside the
floating box.
295
ADOBE GOLIVE 6.0

Classroom in a Book
1 Scroll downward in the document window until you reach the series of yellow markers
for the floating boxes that contain the animated trilobite GIF image and the Trilobite- and
History-related floating boxes.
Even if you change the position of a floating box, its marker remains at the original point
of insertion.
2 Click in the blank space to the right of the last floating box marker, so that a cursor
appears.
3 Choose Window > Objects to display the Objects palette, or click the Objects tab if the
palette is collapsed.
4 Drag a Floating Box icon from the Basic set ( ) of the Objects palette to the cursor in
the document window. You can also double-click the Floating Box icon to automatically
place a marker and a floating box at your cursor location.
An empty floating box is added to the document window, and the Inspector changes to
the Floating Box Inspector.
5 Scroll downward in the document window, so that you can view the floating box that
you’ve added to the page.
Dragging Floating Box icon to cursor Result
Now you’ll use the Floating Box Inspector to set attributes for the floating box. First you’ll
name the floating box, so that you can differentiate it from other floating boxes that you’ll
add to the page. Then you’ll specify its position on the page and its size.
6 Make sure that the floating box is selected. To select a floating box, move the pointer
over an edge of the floating box, so that the pointer turns into a hand pointing left. Then
click an edge of the floating box to select it.
LESSON 8
296
Creating Rollovers
7 Because the floating boxes for the Trilobites and History elements are named Button01
and Button02, enter Button03 for Name in the Floating Box Inspector. Enter 234 for Left,
enter 76 for Top, and enter 115 for Width and 38 for Height. Select Pixels from the pop-

up menus for Width and Height. Press Enter or Return.
8 Scroll upward in the document window, so that you can see the new position and size
of the floating box.
This is the floating box that will hold your orange star rollover and the rollover, About Us,
that you’ll associate with the drop-down menu.
9 Choose File > Save.
Note: To display properly, floating boxes require Web browser versions 4.0 or later. To
see what a floating box would look like in a Web browser that does not support cascading
style sheets, turn off CSS support in the browser’s preferences.
297
ADOBE GOLIVE 6.0
Classroom in a Book
About naming rollovers
Rollovers require two or three similar images, which appear in the same spot on the page.
The first image (named Normal in the Rollover Inspector) is the normal appearance of
the rollover—the way it appears when the mouse pointer is somewhere else on the page
in a browser. The second image (named Over in the Rollover Inspector) is a different
version of the image (for example, a highlighted appearance), which appears when the
user's mouse pointer is on top of the rollover. The third image (named Down in the
Rollover Inspector) appears when the user clicks on the rollover.
In GoLive you can add rollovers in two ways. You can use the Smart Rollover icon from
the Smart set of the Objects palette, or you can add an image placeholder from the Basic
set of the Objects palette and set rollover properties in the Rollover tab of the Image
Inspector. Either way, you can use the Detect Rollover Images feature to automatically
assign images to rollovers, which saves time and ensures consistency. (This feature is on
by default.)
You can also convert Smart rollovers to Lean rollovers using the Convert Selected to Lean
Rollover command in the Rollover Inspector palette menu.
Note: When you use the Image object rather than the Rollover object to create a rollover, you
get a leaner rollover with less source code. This is useful when you want to create simple

rollover buttons with only a few or no actions attached to them.
The Detect Rollover Images feature automatically assigns Over and Down rollover images
in one step. You just specify the filename of the normal image (the one that displays when
the page is first opened), and GoLive automatically finds the respective over and down
state images if you used the appropriate naming convention. For example, if you specify
your normal image as filename, GoLive automatically looks for and references
filename_over and filename_down. Your rollover image names must also have the proper
file extensions, such as .gif, .jpg, or .png, and be in the same folder.
Note: You can view the three sets of naming conventions used by the Detect Rollover Image
feature, and you can edit the settings if you have your own naming convention for rollover
images. Click the small triangle icon in the upper right corner of the Rollover Inspector
(Smart) or Image Inspector (Lean) or Ctrl-click the tab if the palette is collapsed, and in the
palette menu, choose Settings or Rollover Settings to open the Rollover Settings dialog box.
For more information on Smart and Lean rollovers, see “Creating mouse rollovers” in the
Adobe GoLive 6.0 User Guide.
LESSON 8
298
Creating Rollovers
Creating a Smart rollover button
Now you’ll add a placeholder for the smart rollover button you’re going to place in the
floating box.
1 Click the Smart set button ( ) at the top of the Objects palette, and drag the Rollover
icon from the Smart set of the Objects palette to the empty floating box in the document
window.
Dragging Rollover icon to floating box
Using Smart rollovers
A rollover is an image that changes when the user positions the mouse over it or clicks it (referred to as Over
and Down states). A rollover can be used as a button that links to another Web page or image when the user
clicks it. You can create a rollover by creating two or three separate images then letting GoLive create the
JavaScript code to display the correct image depending on the user’s action.

GoLive offers two easy methods of creating rollovers: Smart and Lean. Smart rollovers allow the nesting of
actions. Though Smart rollovers generate more JavaScript code than Lean rollovers, GoLive can strip out all
the JavaScript code and place it in an external JavaScript file. This ultimately can provide better performance
than having the JavaScript written directly into the source code inline.
Lean rollovers may be practical for those who only need to create a single Web page or for those who hand-
off a page design to a Web programmer. Lean rollovers do not have all the benefits of Smart rollovers, but may
result in leaner HTML code.
Whether you use Smart or Lean rollovers, GoLive manages the links inside the JavaScript code. GoLive can
also export all JavaScript code into a separate file, which carries the same performance benefit as images that
are cached in browser cache. This makes your Web sites load faster when they’re downloaded and viewed in
a browser. Photoshop has a preference to generate this type of code for GoLive.
–From the Adobe GoLive 6.0 online Help.
299
ADOBE GOLIVE 6.0
Classroom in a Book
The Inspector changes to the Rollover Inspector. The Rollover Inspector lets you specify
three different images for three different states of a rollover button: how the button
appears by default (Normal), how the button appears when your mouse moves over it
(Over), and how the button appears when held down (Down).
First you’ll specify an image for how the button appears by default.
2 In the Files tab of the site window, open the images folder and locate the 03_star.gif file.
3 Make sure the Rollover placeholder is selected in the index.html document.
4 In the Rollover Inspector, make sure that the Normal icon is selected. Then drag from
the top Point and Shoot button ( ) to the 03_star.gif file in the Files tab of the site
window.
Notice that the Detect Rollover Images feature in GoLive automatically references the
Over image, 03_star_over.gif.
Referencing the Normal image automatically references the Over image if the files are named correctly
The path to the file appears in the text box of the Rollover Inspector, and the button image
appears in the document window.

If you are creating your rollover images in ImageReady, set the HTML output options to
Include GoLive Code so your rollovers are fully editable in GoLive.
LESSON 8
300
Creating Rollovers
5 In the Rollover Inspector, click the Over icon to select it. Verify that the correct path
and file name appear in the text box.
If you were adding a third action, associated with clicking the mouse button, for example,
you would name the third source file for the button image filename_down.gif, and GoLive
would automatically find and link to the correct image for the Down state of the button.
Both Smart and Lean rollovers manage their links within the JavaScript code. If you
change the name or location of any file referenced by a Smart rollover object, GoLive
automatically asks you whether to update the links for the Smart rollover. You don’t have
to keep track of rollover links yourself. You can test this by changing the name (in the site
window) of one of the image rollover files you just linked, and pressing Enter or Return.
GoLive will ask you if you want to update the necessary files. Click OK, and verify in the
Inspector that the rollover image file name has been changed. If you do this, don’t forget
to change the filename back to the correct file name when you’re finished.
6 Choose File > Save to save the index.html file.
Rollover images normally display with the same dimensions as the base image. If any of
your rollover images have different dimensions, you can resize them in a graphic editor, or
simply change the base image’s Width and Height values in GoLive from Pixel to Image in the
Image Inspector.
301
ADOBE GOLIVE 6.0
Classroom in a Book
Adding an image to a floating box
Now you’ll complete the navigational button by adding an image that contains the text
“About Us.”
1 From the Basic set ( ) of the Objects palette, drag an image icon into the floating box

that you added earlier and drop it to the right of the orange star.
2 Be sure the image placeholder is selected, and in the Basic tab of the Inspector, drag
from the Point and Shoot button to the 03_about.gif in the image folder in the Files tab
of the site window.
LESSON 8
302
Creating Rollovers
3 In the Alt Text text box of the Image Inspector, enter About Us. Alternative text is
displayed in browsers that are configured not to display images; it is also used by voice-
recognition software. In Windows, alternative text also appears in a browser window
when a user’s pointer hovers over the image.
4 Choose File > Save to save your work.
Creating a drop-down menu
The drop-down menu you’ll create in this lesson involves three steps. First you’ll create the
content of the drop-down menu, then you’ll add actions to show and hide the menu, and
finally you’ll specify that the drop-down menu is hidden when the page loads.
Adding the drop-down menu content
Now you’ll add the secondary level of navigation that will become the drop-down menu.
You’ll add one more floating box below the “About Us” rollover, and you’ll place three
rollover object boxes in it that could be linked to other parts of the Trilobite.com Web site
or to another Web site. Later in this lesson, you’ll add an action to the “About Us” rollover
to show and hide this secondary level of navigation.
First you’ll add another floating box to the page.
1 Scroll downward in the document window until you reach its end.

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay
×