Microsoft FrontPage: Building A Web Site---Adding Features To The Page

Adding animation effects

You may also want to look at FrontPage 2000’s new feature that lets you know whether or not an effect is compatible with a particular browser—especially if you want viewers with older browsers to see the effects included on your Web site. See the Selecting target browsers section in the Designing a Web Site chapter of this book for more information.

To add DHTML animation to a heading

1. On the Views toolbar, click Page.

2. Double-click home_page.htm.

3. On the Format menu, click Dynamic HTML effects. The DHTML Effects toolbar appears.

4. Select the heading .

5. In the On box, select Page load, so that visitors to your site see the effect as the page loads in their browser.

6. In the Apply box, select Elastic. The heading stretches like elastic as the page loads.

7. To see the effect, on the File menu click Preview in Browser. If you are prompted, save your work. You see the effect as your browser loads the page.

Creating a table

On Web pages, information often appears in tables with invisible borders. Tables help you control your page layout so that everything is easy to find and to read. Tables display information in a side-by-side format, in rows and columns. Each block of information is called a cell, which can contain text, images, lists, and even other tables. Choose from one of FrontPage’s multiple templates for tables the table that suits your needs.

In FrontPage , tables are simple to create. In fact, you can set up tables with FrontPage in much the same way you can in Microsoft Word.

To set up a table

1. Position the mouse pointer where you want to insert the table on the page.

2. Click the Table button.

3. Drag the cursor over the three columns and five rows. To expand the number of columns or rows available in the box, click and drag the cursor while highlighting the appropriate number of cells. The table appears in your Web page.

4. Enter the information in the table.

To create new table cells

5. On the View menu, click Table Toolbar.

6. On the Table toolbar, click the Draw Table button. The mouse pointer becomes a pencil.

7. With the pencil, in the top right cell, draw a vertical line from the right of Room Number down through the bottom cell, so that you "cut" the column in half.

8. On the Table toolbar, click the Draw Table button to de-select the pencil.

9. Place the mouse pointer on the line between the Phone Extension # and Room Number columns.

10. When the double-arrow appears, click and drag the column border to the left.

11. Using the double-arrow, resize all the columns to make them equal.

Adding interactivity to a Web with forms

With FrontPage, you can use forms for visitors to you Web site to fill out. With the forms, you can gather all kinds of information. Set up forms for alumni polls, faculty surveys, and student research projects. Forms can contain text, tables, images, and fields that visitors fill out and send to you. You can also easily customize a form by adding bulleted lists, pop-up menus, buttons, check boxes, labels, and places for visitors to enter text. In the following lessons, you create a form that uses buttons and text areas. After collecting the information, you can then send it to a database and publish the database on another Web page.

To format a form title

1. Type the title on the first line, and select it.

2. On the Format toolbar, click the Bold button.

3. Change the font size from Normal to 16 pt.

4. On the Format toolbar, click the Center button.

5. Click below the title, and press ENTER.

6. On the Format toolbar, click the Align Left button.

To create radio buttons

Radio buttons require you to select one option from the button choices.

1. On the Insert menu, click Forms, and then click Radio Button.

2. Click in front of the radio button you just inserted, and press ENTER to move the button down so you can type above the radio button.

3. Press the UP ARROW key, and type the sentence.

4. Click between the radio button and the Submit button, and press ENTER.

5. Click after the radio button, and type Yes.

6. Press TAB several times. Follow step 1 to insert another radio button.

7. Type No after the button, and press ENTER.

To create check boxes

Check boxes allow you to select several options.

1. Type If yes, what year(s) did you attend High School?, and press ENTER.

2. On the Insert menu, click Forms, and then click Check Box.

3. Place the cursor after the check box, type 1968, and press TAB.

4. Repeat steps 2 and 3 to insert check boxes for subsequent years.

5. Press ENTER.

To create one-line text boxes

A one-line text box limits the amount of text you can type in the box.

1. Place the cursor on a blank line below the check boxes. Type First Name.

2. On the Insert menu, click Forms, and then click One-Line Text Box.

3. Press TAB twice, type Last Name: and then repeat step 2 to add another one-line text box, press ENTER.

To create a scrolling text box

A scrolling text box does not limit the amount of text you can type in the box.

1. Place the cursor below the one-line text box, and type Comments:.

2. On the Insert menu, click Forms, and then click Scrolling Text Box.

3. Click the scrolling text box and drag the handles to resize the text box to the size you would like. Although the box is a particular size on screen, this does not limit the amount of text someone can type in the box.

4. Save your page and click the Preview tab to see what it looks like in a browser.

You must publish your Web site before data can be submitted from your form. To find out more about publishing your Web site, see the Publishing a Web Site chapter in this book.

Using form results with a database

After you collect information from the alumni, you can save the information on a database and publish the database information on your Web. In this section you learn to send the data from the form to a Microsoft Access database, and then show the contents of the database on a Web page.

The database integration features require you to host your pages on a server with Active Server Pages (ASP) capabilities, such as Microsoft Internet Information Server. You can use these capabilities with any ODBC-compliant database. In this exercise, it is assumed that you have an ASP-capable server. If you are not, you can author on your hard drive or a network drive, and later publish to your ASP-capable Web server.

To save form results in a database

1. Return to Page view.

2. Right-click the radio button with yes next to it, and then click Form Properties.

3. Select the Send to Database option, and then click the Options button.

4. Click Create Database. FrontPage automatically creates the Access database file and places it in the newly created directory in your Web.

5. In the dialog that appears, click OK to confirm that the database has been created. The Options for Saving Results to Database dialog box appears.

6. Click OK, and then click OK again in the Form Properties dialog box. Another dialog box appears warning you that the page should be saved as ASP.

7. Click OK again.

To save the page

1. On the File menu, click Save As, and then click OK.

2. In the File Name box, type Alumni, and in the Save As Type box, select Active Server Pages, and then click Save.

1. Go to Page view and click the New Page button.

2. On the Insert menu, click Database, and then click Results.

3. Select the Use an Existing Database Connection option, select the form, and then click Next.

4. Continue to click Next in the following dialogs, and then click Finish.

5. Save the page as results.asp.

Adding hover buttons

Hover buttons are like other buttons that contain hyperlinks to other pages or files, making Webs more fun to visit. When you hover your mouse pointer over a hover button, it can glow, display a custom picture, or play a sound effect.

To add a hover button

1. Click the Insert Component button, and then click Hover Button.

2. In the Button text box, type Link to Home Page as the label for the hover button.

3. In the Link to box, type _home_page.htm.

4. In the Button color box select a theme color.

5. In the Effect color box select a theme color that compliments the button color you have chosen.

6. In the Effect box, select Glow.

7. Click OK.

8. Resize the button by clicking and dragging the handles until it is the appropriate size.

9. To view this effect, save your file and click the Preview tab.

Exploring discussion Webs

Discussion webs are interactive webs that let site visitors discuss topics by reading articles or messages that have been posted, replying to articles, and posting new ones. For example, your Web site may have a discussion group for students to create an on-line study group. Create a discussion web by using the Discussion Web Wizard. The wizard asks for the features you want to use, then creates a Web and sets up the pages for you. After you create the Web, you can open the pages and customize them.

To create a discussion Web

1. On the File menu, point to New, and then click Web.

2. On the Web Site tab, click Discussion Web Wizard. Check the Add to current Web check box, and then click OK.

3. Once the Discussion Web Wizard opens, follow the on-screen directions to create a discussion group. Accept the wizard’s default settings, except for the following:

· In Enter a descriptive title for this discussion, Discussion Group, and then click OK.

· In the Do you want the Table of Contents for this discussion to be the home page for this web? box, select No.

· In the Frame options box, select the Dual interface option. This allows the server to adjust the discussion page based on whether or not the viewer’s browser can see frames.

4. Click Finish to generate your discussion Web. This creates several new HTML pages in your folder. The main page of the discussion Web is named disc1_frm.htm, which is where you want to direct hyperlinks.

5. After the wizard has set up your Web pages, modify them as you would any other Web page.

6. To preview the discussion web, double-click disc1_frm.htm. You must publish your Web site before you can have a fully functional discussion Web. To find out more about publishing your site, review the Publishing a Web Site chapter.

Creating and adding a hit counter

A hit counter tallies and displays the number of times a page has been visited. To see how many people have visited your Web site, you can add a hit counter. For example, add a hit counter to your alumni page so that you and site visitors can see how many times the alumni page has been visited.

To install a hit counter

1. Click the Insert Components button, and then click Hit Counter.

2. In the Hit Counter Properties dialog box, select a counter.

3. Select Reset counter to, and type 0 in the text box.

4. Select Fixed number of digits, type 5 in the text box, and click OK.

5. Click the Save button. You must publish your Web site before you preview the hit counter.

Working with frames

Frames determine how Web pages are displayed in the browser window. Frames, which divide the Web browser window into different areas, can retrieve and display a separate page in your Web. You control the display of the page in a frame by creating a hyperlink to the page and specifying the frame as the target of the hyperlink.

FrontPage has a set of templates for creating Frames pages. These allow you to place many frames in a frame layout document. A simple frames page has two frames, one containing hyperlinks, and the other displaying the pages that the hyperlinks point to. In other words, when a visitor clicks a hyperlink in the first frame, the page the hyperlink points to is displayed in the second frame.

To add frames to a page

Example:

1. On the File menu, click New and then click Page.

2. In the New dialog box, click the Frames Pages tab and select the template Contents.

3. Click OK.

4. Click inside the left frame to select it, then click New Page.

5. At the top of the left frame type Alumni Directory, highlight the text, and then select Heading 2 from the Style drop-down list.

6. Below the heading, type 1968 and press ENTER, 1969 and press ENTER, 1970 and press ENTER, 1971 and press ENTER, and type Alumni Survey.

7. Click inside the right frame to select it, then click New Page.

8. Type Welcome to Alumni Directory, highlight the text, select Heading 2 from the Style drop-down list, and then Press ENTER.

9. Type, If you would like to submit alumni information, please fill out the alumni survey.

To save a frames page

The page you just created actually consists of three individual HTML pages. When saving a new frames page, you are prompted to save all three.

1. Click the Save button.

2. In the File Name box, type alumni_directory.htm.

3. Click Save. The Save dialog box remains on-screen and you are prompted to save the two remaining documents.

4. In the File Name box, type year_of_attendance.htm.

5. Click Save.

6. In the File Name box, type directory_main_page.htm.

7. Click Save.

To create a link on a frames page

1. In the left-hand frame, select the text.

2. Click the Insert Hyperlink button.

3. In the Edit Hyperlink dialog box, select alumni_activities.htm.

4. Click OK.

5. Test the link by previewing this page. When you click on the hyperlink, the new page should load in the right frame, and the left frame should remain the same.