Adobe GoLive 6.0- P13

Adobe GoLive 6.0- P13: This book, as well as the software described in it, is furnished under license and may be used or copied only in accordance with theterms of such license. The content of this book is furnished for informational use only, is subject to change without notice, andshould not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibilityor liability for any errors or inaccuracies that may appear in this book
Nội dung trích xuất từ tài liệu:
Adobe GoLive 6.0- P13 ADOBE GOLIVE 6.0 373 Classroom in a Book4 Change the Floating Box pop-up menu that reads ACMEInfo to FOOZInfo.Remember that ACMEInfo and FOOZInfo are the names of the two More Info floatingboxes. This will now display the proper information for the row.Choosing FOOZInfo from pop-upmenu5 Choose File > Save.6 Click the Show in Browser button in the upper right of the toolbar. The documentappears in the Web browser that you specified in the GoLive Preferences dialog box. Atthis point in the lesson you can open the More Info box to reveal stock information, butyou can’t close it. You’ll add that action in the next section.7 Close your browser.374 LESSON 10 Using Actions and JavaScript Adding actions to text links As you saw in your browser, once a More Info box is opened, there is no way to close it. You can fix this by adding mouse events to the “close this” text link already set up in the two More Info floating boxes, ACMEInfo and FOOZInfo. If you look at the text link in the Inspector, you’ll notice that it’s set as a link to #—the same technique that you used earlier with images so that you could assign actions to them. 1 In the Floating Boxes palette, select ACMEInfo in the ID column to show the ACMEInfo floating box. Make the floating box visible and editable by clicking in the eye column. Selecting the floating box Selected floating box 2 In the document window, drag to select the “close this” text. (Be sure that you have the ACMEInfo ID selected in the Floating Boxes palette before you try to select the “close this” text in the document window.) 3 In the Actions palette, select the Mouse Click event, and add two actions by clicking the New button ( ) twice. 4 Select the first newly added None action, and choose Others > Scroll Left from the Action pop-up menu, setting Scroll Pixels to 300 and Scroll Speed to 50. 5 Select the second None action, and choose Multimedia > ShowHide from the Action pop-up menu. ADOBE GOLIVE 6.0 375 Classroom in a Book6 Set Floating Box to be the ACMEInfo floating box and Mode to Hide.Choosing Hide from Mode pop-upmenu7 Hide the ACMEInfo floating box by clicking in the eye column in the Floating Boxespalette.8 Repeat steps 1–7 for the FOOZInfo floating box.9 Choose File > Save.10 Click the Show in Browser button in the upper right corner of the toolbar to previewthe document in the Web browser that you specified in the GoLive Preferences dialog box.You should now be able to close the stock information box.11 Close your browser.376 LESSON 10 Using Actions and JavaScript Assigning JavaScript scripts to page elements In this section, you’ll see how to assign JavaScript scripts to various page elements. We’ve already inserted several scripts in the head section of the document. You could also write your own custom scripts and use them in your own projects. The included JavaScript scripts serve as functions that let viewers increase, decrease, or dump an amount of stock at the Web site, and then show an update in the lower part of the page for the current number of stocks in the visitor’s portfolio. You’ll first add some buttons that will call these scripts when triggered. 1 Drag the Image icon from the Basic set ( ) of the Objects palette to the row immedi- ately below the text about ACME Industries (to the left of the first return arrow) and add a space by pressing the Spacebar once. If you have difficulty dragging the Image icon, you can place your cursor at the required point in the table and double-click the icon in the Basic set of the Objects palette. The icon will be placed at the location of the cursor. Dragging Image icon to row below text ADOBE GOLIVE 6.0 377 Classroom in a Book2 Repeat step 1 twice so that you have three images, each separated from the previous oneby a space. Create an insertion point on the first empty line below the text. Double-click the Imageicon i ...