Enhancing Your Web Site

Core Training for Microsoft FrontPage 2002

Organizing Files and Folders

1	To view the navigation structure of the GardenCo Web site and fit the site onto the screen, on the Views bar, click the Navigation icon, and on the Formatting toolbar, click the Portrait/Landscape button.
2	To start organizing the files and folders that make up the Web site, on the Views bar, click the Folders icon.
3	To sort the files by type, on the upper portion of the Folder view window, click the Type heading.
4	To organize the graphic files into a separate folder and start moving the GIF files to the images folder, in the Folder view window, click the custrel1.gif file, press and hold down the SHIFT key, click the tgclogo_sm.gif file, and then release the SHIFT key.
5	To move the selected files to the images folder, position the mouse pointer on the selection, press and hold down the mouse button, drag the pointer up to the images folder, and then release the mouse button.
6	To select the JPG files, in the Folder view window, click the 7124.jpg file, press and hold down the SHIFT key, click the pxweser.jpg file, and then release the SHIFT key.
7	To move the selected files to the images folder, position the mouse pointer on the selection, press and hold down the mouse button, drag the pointer up to the images folder, and then release the mouse button.
8	To create a new folder and start organizing files by subject or level, click the File menu, point to New, and click Folder.
9	To assign a name to the new folder, type Products, and press the ENTER key.
10	To select the files containing product information, in the Folder view window, click the carnivorous_plants.htm file, press and hold down the SHIFT key, click the plants_home.htm file, and then release the SHIFT key.
11	To move the selected files to the Products folder, position the mouse pointer on the selection, press and hold down the mouse button, drag the pointer down until it is on the Products folder, and then release the mouse button.
12	To create another folder and start organizing a different category of files in the folder, click the File menu, point to New, and then click Folder.
13	To assign a name to the new folder, type Internal, and press the ENTER key.
14	To select the files containing product information, in the Folder view window, click the employee_info.htm file, press and hold down the SHIFT key, click the travel_policy.htm file, and then release the SHIFT key.
15	To move the selected files to the Internal folder, position the mouse pointer on the selection, press and hold down the mouse button, drag the pointer down until it is on the Internal folder, and then release the mouse button.
16	To sort the files and folders alphabetically, in the upper portion of the Folder view window, click the Name heading.

Creating a Subweb

1	To select and convert a folder to a subweb, press the DOWN arrow key two times.
2	To start creating a subweb, in the shortcut menu, click Convert to Web, and in the message box, click Yes.
3	To begin verifying that the Internal folder has been converted into a Web site, on the taskbar, click Start.
4	To locate the Web site, in the Start menu, point to All Programs, point to Accessories, and then click Windows Explorer.
5	To view the Internal folder, which is now a Web site, double-click the GardenCo folder.
6	To close Windows Explorer, in the upper-right corner of the window, click the Close button.

Adding Links Between Web Pages

1	To familiarize yourself with the structure of the site, on the Views bar, click the Navigation icon.
2	To start creating a navigational system for your Web site, on the Views bar, click the Page icon, and in the Folder List, double-click index.htm.
3	To edit the index.htm page, in the left shared border of the page, click the comment, and press the DELETE key.
4	To insert a bar that will link the pages of the Web site, click the Insert menu, and then click Navigation.
5	To choose a bar type, in the Insert Web Component dialog box, in the Choose a bar type box, click Bar based on navigation structure, and click Next.
6	To view an available bar style, in the Choose a bar style box, click once below the scroll box on the scroll bar, and click on the displayed style.
7	To select a bar style, in the Choose a bar style box, click the style that is on display, and click Next.
8	To choose an orientation for the links in the bar, in the Choose an orientation box, click the Vertical icon, and then click Finish.
9	To set the link bar to show the home page and second-level pages, in the Link Bar Properties dialog box, click the Child pages under Home button, in the Additional pages section, click the Home page check box, and then click OK.
10	To get an overview of the navigation structure of the Web site, on the Views bar, click the Navigation icon.
11	To add search.htm as a child page, in the Folder List, position the mouse pointer over search.htm, press and hold down the mouse button, drag the pointer into the Navigation view window until the page outline appears to the right of the Contact Us child page, and then release the mouse button.
12	To enable visitors to find pages within the Products page, in the Folder List, double-click Products.htm.
13	To add a hyperlink to the first subheading, in the Page view editing window, click to the left of the Plants for your home! subheading, press and hold down the SHIFTkey, click to the right of the exclamation mark (!), and release the SHIFT key.
14	To insert a hyperlink, on the Standard toolbar, click the Insert Hyperlink button.
15	To link the selected heading to a source file, in the Insert Hyperlink dialog box, in the display pane, double-click the Products folder, click plants_home, and click OK.
16	To turn the company logo into an image map, click the logo, and in the Pictures toolbar, click the Polygonal Hotspot button (third button from right).
17	To draw a shape for the image map, position the pencil pointer over the upper-right corner of the logo, click the mouse button, move the pointer left along the edge of the image until it reaches the point where the upper semi-circle border starts, and then click again.
18	To complete drawing the shape, move the pencil pointer up along the right edge of the logo until it reaches the starting point in the upper-right corner, and then click the mouse button.
19	To link the shape to a source file, in the Insert Hyperlink dialog box, click the Up One Folder button (with the up arrow), click index, and click OK.
20	To identify the hotspots on this page, on the Pictures toolbar, click the Highlight Hotspots button (second button from right).
21	To remove the highlight and close the toolbar, on the Pictures toolbar, click the Highlight Hotspots button again, and then click the Close button on the toolbar.
22	To preview the Web site in the Internet Explorer window, click the File menu, click Preview in Browser, and in the Preview in Browser dialog box, click Preview.
23	To view a product category, in the page, click the subheading Plants for your home!, and after viewing its contents, on the left side of the page, click Products.
24	To view the home page, on the upper portion of the page, click The Garden Company logo.
25	To view two other links, on the left side of the page, click Class Offerings, and then click Press Releases.
26	To close the browser window, in the upper-right corner of the window, click the Close button.

Adding Links Between Web Sites

1	To open the index page and start adding links between Web sites, in the Folder List, double-click index.htm.
2	To start adding a new link in the page, in the left shared border, click once, press the END key, and then press the ENTER key.
3	To base the new link on employee info and center-align the text, type Employees Only, and then on the Formatting toolbar, click the Center button.
4	To start editing the text and match it to the above buttons, press and hold down the SHIFT key, click once to the left of the letter E, and then release the SHIFT key.
5	To start inserting appropriate spacing for the new text, click the Format menu, and click Paragraph.
6	To specify the desired spacing, in the Paragraph dialog box, in the Spacing section, click once in the Before box, type 6, press the TAB key, type 3, and click OK.
7	To add a hyperlink to the new text Employees Only, on the Standard toolbar, click the Insert Hyperlink button.
8	To link Employees Only to a source file, in the Insert Hyperlink dialog box, in the display pane, double-click the Internal subweb, click employee_info, and click OK.
9	To view the page in a browser window, click the File menu, and then click Preview in Browser.
10	To view the page in Internet Explorer, in the Preview in Browser dialog box that appears, click the Preview button.
11	To verify the newly-added hyperlink, on the lower-left corner of the browser window, click the Employees Only link.
12	To close the browser window, in the upper-right corner of the window, click the Close button.
13	To add a hyperlink to a page in the Products folder, in the Folder List, click the plus sign to the left of the Products folder, and then double-click carnivorous_plants.htm.
14	To start adding the hyperlink, in the Page view editing window, click once below the scroll box on the scroll bar, under the Other Resources subheading, click to the left of the text Carnivorous Plant Database, press and hold down the SHIFT key, click to the right of the text, and then release the SHIFT key.
15	To link the selected text to an external Web site, on the Standard toolbar, click the Insert Hyperlink button, and in the Address text box, type http://www2.
16	To configure the hyperlink, in the Insert Hyperlink dialog box, click the Target Frame button.
17	To open the target page in a new window, in the Target Frame dialog box, in the Common targets box, click New Window.
18	To ensure that every hyperlink opened from this page opens in a new window, click the Set as page default check box, click OK, and then in the Insert Hyperlink dialog box, click OK again.
19	To view the page in browser window, click the File menu, and then click Preview in Browser.
20	To view the page in Internet Explorer, in the Preview in Browser dialog box, click the Preview button.
21	To verify the hyperlink you added, in the browser, click once below the scroll box on the scroll bar, and under the Other Resources subheading, click Carnivorous Plant Database.
22	To close the Carnivorous Plant Database Web site that opens in a new browser window, in the upper-right corner of the window, click the Close button.
23	To close the main browser window, in the upper-right corner of the window, click the Close button.
24	To view the hyperlinks structure for the carnivorous_plants.htm file, on the Views bar, click the Hyperlinks icon, and in the Hyperlinks view window, click three times to the right of the scroll box on the horizontal scroll bar.
25	To automatically repair the hyperlinks and update and synchronize the information, click the Tools menu, and click Recalculate Hyperlinks.
26	To proceed, in the Recalculate Hyperlinks dialog box, click Yes.

Inserting Ready-Made Components in a Web Page

1	To create a separate section in which a ready-made component will be added, in the Page view editing window, click once below the scroll box on the scroll bar, click below the page text, and press the ENTER key.
2	To add a heading to the section, type How's the weather.
3	To start inserting a Web component, click the Insert menu, click Web Component, and then, in the Insert Web Component dialog box, in the Component type box, click once below the scroll box on the scroll bar, and click MSNBC Components.
4	To select a component for MSNBC, in the Choose a MSNBC component box, click Weather forecast from MSNBC, and click Finish.
5	To set the properties of the weather component, in the Weather forecast from MSNBC Properties dialog box, in the Search for a city by name or U.S. zip code text box, type Seattle, and click Next.
6	To finish inserting the Web component and close the dialog box, click Finish.
7	To test the Web component, on the Standard toolbar, click the Preview in Browser button.
8	To connect the MSNBC weather page on the Web, click once below the scroll box on the scroll bar, and then at the bottom of the page, click the link For extended forecasts, go to MSNBC.com.
9	To close the browser window, in the upper-right corner of the window, click the Close button.
10	To start adding a hit counter to the site, in the Page view editing window, click once below the scroll box on the vertical scroll bar, at the bottom shared border, click to the left of the Insert hit counter here text, press and hold down the SHIFT key, at the end of the text, click to the right of text, and then release the SHIFT key.
11	To add a text for the hit counter, type Thanks.
12	To insert the hit counter, on the Standard toolbar, click the Web Component button, and then, in the Insert Web Component dialog box, in the Component type box, click Hit Counter.
13	To select a style for the hit counter, in the Choose a counter style box, click once below the scroll bar, click the last counter style, and then click Finish.
14	To enter the number of visitors that might already have visited the site, in the Hit Counter Properties dialog box, click the Reset counter to check box, press the TAB key, and type 100.
15	To set the hit counter to a four digit number, click in the Fixed number of digits check box, press the TAB key, type 4, and click OK.
16	To open the search page and start adding a search component to the site, in the Folder List, double-click search.htm.
17	To assign a location for the search component, in the Page view editing window, click to the left of the text Insert search component here, press and hold down the SHIFT key, click to the right of the text, and release the SHIFT key.
18	To insert the search component, on the Standard toolbar, click the Web Component button, and then, in the Insert Web Component dialog box, in the Component type box, click Web Search, and click Finish.
19	To accept the default settings, in the Search Form Properties dialog box, click OK, and then press the ENTER key.
20	To have a text on the event of a searched query within site yielding no result, type If you can't find it on our site, search the Web!.
21	To remove the italic formatting of the text, press and hold down the SHIFT key, at the beginning of the text, click to the left of the letter I, release the key, and on the Formatting toolbar, click the Italic button.
22	To start adding a Web component for searching the Web, press the RIGHT arrow key, press the ENTER key, and then on the Standard toolbar, click the Web Component button.
23	To select a component type, in the Insert Web Component dialog box, in the Component type box, click once below the scroll box on the scroll bar, and then click MSN Components.
24	To accept Choose an MSN component, the default selection and finish inserting the Web component, click Finish.
25	To save the changes, open the page in a browser window, and test the search components, on the Standard toolbar, click the Preview in Browser button, and in the warning box, click OK.
26	To search for a query within the site, in the browser window, click in the Search for text box, type carnivorous, and click Start Search.
27	No page is displayed because the site has not yet been published. To search the Web, on the browser's Standard toolbar, click the Back button, click in Search the Web for text box, type carnivorous, and click Search.
28	To close the browser window and save the changes, in the upper-right corner of the window, click the Close button, and on the Standard toolbar, click Save.

Adding Dynamic Elements to a Web Page

1	To begin inserting dynamic effects in the classes Web page, on the Standard toolbar, click the Web Component button.
2	The Dynamic Effects component is selected by default in the Component type box. To select an effect for the default selection, in the Insert Web Component dialog box, in the Choose an effect box, click Marquee.
3	To finish inserting dynamic effects, click Finish.
4	To display a text in the marquee, in the Marquee Properties dialog box, in the Text box, type Register Now for Upcoming Classes!.
5	To set the behavior pattern of the marquee, in the Marquee Properties dialog box, in the Behavior section, click Alternate.
6	To set a background for the marquee, click the arrow next to the Background color text box, click the Green color box (upper row, third from left), and then click OK.
7	To format the marquee text, in the Page view editing window, click the marquee text, on the Formatting toolbar, click the Bold button and then click the Italic button.
8	To assign a color to the marquee text contrasting with its background, on the Formatting toolbar, click the arrow next to the Font Color button, and click the White color box (upper row, second from left).
9	To preview the marquee, in the lower-left corner of the Page view editing window, click the Preview button.
10	To add dynamic effects to the contact Web page, in the Folder List, double-click contact.htm.
11	To specify a position for the dynamic efects, in the Page view editing window, at the beginning of the second paragraph of text, which begins with Please feel free, click once to the left of P, and press the ENTER key.
12	To start inserting dynamic effects, press the UP arrow key, and on the Standard toolbar, click the Web Component button.
13	The Dynamic Effects component is selected by default in the Component type box. To select an effect for the default selection, in the Insert Web Component dialog box, in the Choose an effect box, click Banner Ad Manager.
14	To finish inserting dynamic effects, click Finish.
15	To set the width and height of the Banner, in the Banner Ad Manager Properties dialog box, in the Width box, type 264, press the TAB key, and in the Height box, type 72.
16	To select an effect for the transition of pictures in the Banner Ad, click the arrow next to the Transition effect text box, and click Blinds Horizontal.
17	To set a time for which each picture will be shown in the Banner Ad, press the TAB key, and in the Show each picture for (seconds) box, type 2.
18	To start adding a picture in the Banner Ad, next to the Pictures to display box, click the Add button.
19	To select a picture, in the Add Picture for Banner Ad dialog box, click banner1, and click Open.
20	To add a second picture, click Add, and then, in the Add Picture for Banner Ad dialog box, click banner2, and then click Open.
21	To finish inserting pictures, in the Banner Ad Manager Properties dialog box, click OK.
22	To center align the Banner Ad in the page, in the Page view editing window, click the Banner Ad, and then on the Formatting toolbar, click the Center button.
23	To save the embedded graphic files and preview the page in browser window, on the Standard toolbar, click the Preview in Browser button, and then, in the Save Embedded Files dialog box, click OK.
24	To close the browser window, in the upper-right corner of the window, click the Close button.
25	To save the changes, on the Standard toolbar, click Save.