Core Training for Microsoft Office FrontPage 2003
Enhancing the Capabilities of Your Web Site
Organizing a Web Site and Creating a Subsite
| 1 | To view the navigational structure of the Web site, at the bottom of the window, click the Navigation View button. |
| 2 | To switch to Folders view, at the bottom of the Page view editing window, click the Folders View button. |
| 3 | Notice the long list of HTML and graphics files that make up this Web site. To begin organizing this Web site into a useful folder structure, on the Folder List title bar, click the New Folder button. |
| 4 | To specify a name for the new folder that appears at the bottom of the Folder List, for the purposes of this exercise, press SPACEBAR to have the name typed for you, and then press ENTER. |
| 5 | To display the contents of the Web site, in the Folder List, click the index.htm file. |
| 6 | To sort the files by type, at the top of the Web Site tab, click the heading for the Type column, as indicated. |
| 7 | To select all the GIF image files, click the custrel1.gif file, hold down the SHIFT key, and then click the tgclogo_sm.gif file. |
| 8 | To move the selected image files to the images folder, drag the selected files to the images folder, as indicated. |
| 9 | To begin moving the rest of the image files to the images folder, on the Web Site tab, click once below the scroll box on the vertical scroll bar. |
| 10 | To select all the JPG image files, click the 7124.jpg file, hold down the SHIFT key, and then click the pxweser.jpg file. |
| 11 | To move the selected JPG files to the images folder, drag the selected files to the images folder above. |
| 12 | To begin creating a subsite, on the Folder List title bar, click the New Folder button. |
| 13 | To specify a folder name for the new folder that appears at the bottom of the Folder List, press SPACEBAR to have the name typed for you. Then press ENTER. |
| 14 | To view the Web site structure, in the Folder List, click the index.htm file. |
| 15 | To select all the files related to employee information, in the Folders View, click handbook.htm, hold down the CTRL key, click employee_info.htm, click policies.htm, and then click travel_policy.htm. |
| 16 | To move the selected files to the Internal folder, drag the selected files to the Internal folder above. |
| 17 | To create a subsite within an existing Web site, in the Folder List, click the Internal folder, click the File menu, and then click Convert to Web. |
| 18 | To confirm converting the folder to a Web site, in response to the warning that appears in the Microsoft Office FrontPage message box, click Yes. |
| 19 | Notice that the Internal folder icon has been replaced with a Web site icon. To view the contents of the Internal Web site, in the Folder List, double-click the Internal subsite folder. |
| 20 | Notice that the Internal subsite opens in its own instance of FrontPage. To close this window, click the Close button. |
Adding Links Between Web Pages
| 1 | To begin creating a navigation system for a Web site, in the Folder List, double-click the index.htm file. |
| 2 | To delete the comment text in the left shared border, on the index.htm page, click the comment to select it, and then press the DELETE key. |
| 3 | To add navigation links to the border, click the Insert menu, and then click Navigation. |
| 4 | In the Insert Web Component dialog box, in the Component type list, verify that Link Bars is selected, and in the Choose a bar type list, click Bar based on navigation structure. |
| 5 | To display a list of styles you can use for the link bar, in the Insert Web Component dialog box, click Next. |
| 6 | In the Choose a bar style list, drag the scroll box to the halfway point on the vertical scroll bar, until you see the Nature bar style. |
| 7 | To apply the Nature bar style to the link bar, click the Nature bar style, and then click Next. |
| 8 | To insert the link bar with the links arranged vertically, under Choose an orientation, click the Vertical orientation, as indicated, and then click Finish. |
| 9 | To select pages that can be accessed from the link bar, in the Link Bar Properties dialog box, on the General tab, under Hyperlinks to add to page, click Child pages under Home. |
| 10 | To include a link to the home page, under Additional pages, select the Home page check box, and then click OK. |
| 11 | To verify that the Products, Class Offerings, Press Releases, and Contact Us pages shown on the link bar are all child pages of the home page, click the Web Site tab. |
| 12 | To add the Search Page to Navigation view as a second-level page, in the Folder List, drag the search.htm page to the space between the Contact Us and Press Releases pages in the Navigation view window. |
| 13 | To verify that the Search Page has been added to the link bar, at the top of the Navigation view window, click the index.htm tab. |
| 14 | To verify that the link bar appears on other pages of the Web site, in the Folder List, double-click the products.htm page. |
| 15 | To begin using hyperlinks to navigate to third-level pages, in the Folder List, click the plus (+) sign to the left of the products folder. |
| 16 | In the Page view editing window, drag to select the Plants for your home! heading, and on the Standard toolbar, click the Insert Hyperlink button, as indicated. |
| 17 | In the Insert Hyperlink dialog box, verify that Existing File or Web Page is selected on the Link to bar and Current Folder is selected in the Look in box, and in the file list, double-click the Products folder. |
| 18 | To insert a hyperlink from the selected heading to a file in this folder, in the file list, click plants_home, and then click OK. |
| 19 | To begin creating an image map, in the top shared border, click the company logo, and on the Pictures toolbar, click the Polygonal Hotspot button, as indicated. |
| 20 | To begin configuring the hot spot region on the logo, click the indicated point on the logo, move the mouse to the left to draw a line, and then click the indicated left corner of the logo to connect the two points. |
| 21 | To finish configuring the logo as a hot spot, click the starting point of the line, as indicated. |
| 22 | To link the logo to the home page, in the Insert Hyperlink dialog box, click the Look in arrow, click the GardenCo folder, click below the scroll box on the vertical scroll bar, and then double-click index.htm. |
| 23 | To begin using the link bar to navigate to the files at different levels, on the Standard toolbar, click the Preview in Microsoft Internet Explorer 6.0 button. |
| 24 | In the Microsoft Office FrontPage message box that appears, asking you to confirm saving the changes made, click Yes. |
| 25 | To navigate to the classes.htm page, on the link bar, click Class Offerings. |
| 26 | To navigate to the home page, in the Class Offerings – Microsoft Internet Explorer browser window, click The Garden Company logo. |
| 27 | To navigate to the Products page, on the link bar, click Products. |
| 28 | To view the home plants details, on the Products page, click the Plants for your home! link. |
Adding Links Between Web Sites
| 1 | To begin inserting a hyperlink to a subsite, in the left shared border, click the link bar to select it, press the END key, and then press ENTER. |
| 2 | To specify a name for the new link, for the purposes of this exercise, press SPACEBAR to have the name typed for you, and then press ENTER. |
| 3 | To link the selected text to a file on the Internal subsite, on the Standard toolbar, click the Insert Hyperlink button, as indicated. |
| 4 | In the Insert Hyperlink dialog box, verify that the Current Folder is set to the GardenCo Web site, in the Look in box, double-click the Internal folder, and then double-click the employee_info file. |
| 5 | To test the new link, on the Standard toolbar, click the Save button, and then click the Preview in Microsoft Internet Explorer 6.0 button. |
| 6 | In the Internet Explorer window, click the Employees Only link. |
| 7 | To switch back to FrontPage, on the title bar of the browser, click the Close button. |
| 8 | To begin inserting hyperlinks to an external Web site, in the Folder List, click the plus (+) sign to the left of products, and then double-click the carnivorous_plants.htm file. |
| 9 | To select text for the hyperlink, click once below the scroll box on the vertical scroll bar, and then drag to select the text Carnivorous Plant Database in the first bulleted item. |
| 10 | To link this text to an external Web site, on the Standard toolbar, click the Insert Hyperlink button. |
| 11 | To specify the URL of the external Web site, in the Insert Hyperlink dialog box, press SPACEBAR to have the URL typed for you in the Address box, and then click Target Frame. |
| 12 | To cause the target Web site to open in a new browser window, in the Target Frame dialog box, in the Common targets box, click New Window, select the Set as page default check box, and then click OK. |
| 13 | To insert the hyperlink, in the Insert Hyperlink dialog box, click OK. |
| 14 | To begin testing an external hyperlink, on the Standard toolbar, click the Save button, and then click the Preview in Microsoft Internet Explorer 6.0 button. |
| 15 | In the Internet Explorer window, click once below the scroll box on the vertical scroll bar, and then click the Carnivorous Plant Database link. |
| 16 | To return to FrontPage, on the title bar of each of the browser windows, click the Close button. |
| 17 | To use FrontPage to automatically test links to an external Web site, in the FrontPage window, click the Web Site tab, and at the bottom of the window, click the Reports View button. |
| 18 | In the Reports view window, click the External hyperlinks link, and in the Reports View message box that appears, click Yes. |
Adding Web Components and Dynamic Effects to a Web Page
| 1 | To begin adding a hit counter component to a Web site, in the shared border at the bottom of the index.htm page, drag to select the indicated Insert hit counter here text. |
| 2 | To replace the selected text, for the purposes of this exercise, press SPACEBAR to have the sentence typed for you. |
| 3 | To add the hit counter component, on the Standard toolbar, click the Web Component button, as indicated. |
| 4 | In the Insert Web Component dialog box, in the Component type list, click Hit Counter. |
| 5 | To select a style for the hit counter, in the Choose a counter style list, click below the scroll box on the scroll bar, click the last style in the list, and then click Finish. |
| 6 | In the Hit Counter Properties dialog box, select the Reset counter to check box, double-click in the adjacent text box, and then press SPACEBAR to have the number typed for you. |
| 7 | To set the number of hit counter digits, select the Fixed number of digits check box, double-click in the adjacent text box, and press SPACEBAR to have the number typed for you. Then click OK. |
| 8 | To begin inserting a scrolling marquee on a Web page, at the top of the Page view editing window, click the classes.htm tab, and then on the Standard toolbar, click the Web Component button. |
| 9 | In the Insert Web Component dialog box, verify that Dynamic Effects is selected in the Component type list box and Marquee is selected in the Choose an effect box, and then click Finish. |
| 10 | To specify the marquee text, in the Marquee Properties dialog box, press SPACEBAR to have text typed for you in the Text box. |
| 11 | To add effects to the marquee text, under Behavior, click Alternate, click the Background color arrow, click the indicated square for the color Green, and then click OK. |
| 12 | To preview the marquee, at the bottom of the Page view editing window, click the Show Preview View button. |
| 13 | To switch to another Web page, at the top of the Page view editing window, click the press.htm tab. |
| 14 | To begin making a sound play each time this page loads, click the Format menu, and then click Behaviors. |
| 15 | To select the entire page, on the Quick Tag Selector toolbar, click the body tag, as indicated. |
| 16 | To select a behavior, in the Behaviors task pane, click Insert, and then click Play Sound. |
| 17 | To locate the audio file that will be used to play the sound, in the Play Sound dialog box, click Browse. |
| 18 | To select the audio file, in the Browse dialog box, in the list of files, double-click the VCTRN_01 file, and in the Play Sound dialog box, click OK. |
| 19 | In the Behaviors task pane, verify that onload and Play Sound appear under Events and Actions respectively, and to save your changes, on the Standard toolbar, click the Save button. |
| 20 | To save changes made to all open files, click the File menu, and then click Save All. |
| 21 | To play the sound by loading the page in your Web browser, on the Standard toolbar, click the Preview in Microsoft Internet Explorer 6.0 button. |
| 22 | To display the placeholder for the hit counter on the index page, in the browser window, on the link bar, click Home, and then click below the scroll box on the vertical scroll bar. |
| 23 | To close the browser window, and return to FrontPage, on the title bar of the browser window, click the Close button. |
| 24 | To close the Behaviors task pane, on the title bar of the task pane, click the Close button. |
| 25 | To switch to another Web page, at the top of the Page view editing window, click the products.htm tab. |
| 26 | To add an interactive button to this page, click the Insert menu, and then click Interactive Button. |
| 27 | To select a button style, in the Interactive Buttons dialog box, in the Buttons list, click Border Bottom 2, as indicated. |
| 28 | To specify the text that will appear on the button, triple-click in the Text box, and then press SPACEBAR to have the text typed for you. |
| 29 | To link the button to the Contact Us page on your Web site, click Browse. |
| 30 | In the Edit Hyperlink dialog box, in the file list, click below the scroll box on the vertical scroll bar, double-click the contact.htm file, and then to close the Interactive Buttons dialog box, click OK. |