Adobe GoLive 6.0- P10

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:30

lượt xem

Adobe GoLive 6.0- P10

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Adobe GoLive 6.0- P10: This book, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. The content of this book is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in this book

Chủ đề:

Nội dung Text: Adobe GoLive 6.0- P10

  1. 276 LESSON 7 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.
  2. ADOBE GOLIVE 6.0 277 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.
  3. 278 LESSON 7 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.
  4. ADOBE GOLIVE 6.0 279 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.
  5. 280 LESSON 7 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.
  6. ADOBE GOLIVE 6.0 281 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.
  7. 282 LESSON 7 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.
  8. ADOBE GOLIVE 6.0 283 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.
  9. 284 LESSON 7 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.
  10. 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.
  11. 288 LESSON 8 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, which specializes in selling trilobites, collectible fossils of one of the first arthropods. Note: The 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,, and the name,, 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.
  12. ADOBE GOLIVE 6.0 289 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 and shows a short trilobite GIF animation as the page is opened. The page contains a number of different rollover effects.
  13. 290 LESSON 8 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 Web site. 6 When you have finished viewing the home page, close it and exit or quit your browser.
  14. ADOBE GOLIVE 6.0 291 Classroom in a Book Opening the home page You’ll begin this lesson by opening the home page for the 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 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.
  15. 292 LESSON 8 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.)
  16. ADOBE GOLIVE 6.0 293 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.
  17. 294 LESSON 8 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.
  18. ADOBE GOLIVE 6.0 295 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.
  19. 296 LESSON 8 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.
  20. ADOBE GOLIVE 6.0 297 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.
Đồng bộ tài khoản