University of Bahrain College of Applied Studies CSA 212: Human Interface and Design Activity 5: Front page 2003 Name : Student ID No : Section Instructor : : Demonstrator : Date : Total Marks : 10 Marks Distribution Table TOTAL (10) 1
Activity 5: Microsoft FrontPage 2003 PART1 Frames A frameset allow user to display multiple web pages on one screen at the same time. An example of frames might be a browser screen containing a table of contents on the side, each item leading to its own link that is opened in the main portion of the page. A frames page may also have a banner linking to different pages and a footer containing links as well. In this part we will learn: Choosing a Frames Page Style Setting an Initial Page vs. Creating a New Page Saving a Frames Page Frames Page Views 1. On the Standard toolbar, click BLANK PAGE»select Page... The Page Templates dialog box appears. 2
2. Select the Frames Pages tab A list of various frames page styles appears. 3. OPTIONAL: To preview a style, click the appropriate icon In the Preview area, a sample appears. In the Description area, a brief description of the previewed style appears. 4. Select the desired frames style 5. Click OK Setting an Initial Page When you open a blank frames page, you will find it divided in the style you chose. You have the options to 1. Select one of your existing pages 2. Link to an external page, 3. Search the Web For a page to use. In each frame, there are two buttons: SET INITIAL PAGE If you would like to use an existing page for the frame, either in your files or on the Web. NEW PAGE you may create a page by clicking NEW PAGE. 3
Setting an Initial Page: Using an Existing Page 1. In the frame where you want to set an initial page, click SET INITIAL PAGE... 2. Using the Look in pull-down list, locate and select the desired page 3. Click OK The selected page is opened and set in that frame. Setting an Initial Page: Using an External Page 1. In the frame where you want to set an initial page, click SET INITIAL PAGE... 2. In the Address text box, type the URL of an external page to set in the frame 3. Click OK The selected page is opened and set in that frame. Setting an Initial Page: Searching the Web 1. In the frame where you want to set an initial page, click SET INITIAL PAGE... 2. Click BROWSE THE WEB The default web browser opens. 3. Browse to the page or file you want to use 4. Return to FrontPage In the Insert Hyperlink dialog box, the URL of the last page you visited appears in the Address text box. 5. Click OK The selected page is opened and set in that frame. Creating a New Page 1. In the frame where you want to create a new page, click NEW PAGE The selected frame opens a blank page. 2. Create this frame as you would create a new web page. Saving Individual Frames 1. Place the insertion point in the desired frame 2. From the File menu, select Save The Save As dialog box appears, displaying the selected frame; only this frame will be saved. 4
NOTE: The first time you save, if you have created a new page, you will be prompted to save each frame separately. After the frames are saved, you will also be prompted to save the frameset. 3. In the File name text box, type the desired filename for the selected frame 4. To save this frame, click SAVE 5. Repeat steps 1-3 for other frames Saving the Frameset If you are not saving for the first time you will be prompted to save the frameset, rather than individual frames. 1. Place the insertion point in your frames page 2. From the File menu, select Save As... The Save As dialog box appears, displaying the selected frameset. 3. In the File name text box, type the desired filename for your frames page 4. To save the frameset, click SAVE Frames Page Views Once you have selected a frames style and your new frames page is open, you have an additional option for viewing your page. The No Frames option displays the message that will be shown when a web browser does not support frames. PART2 Forms: Creating Forms Forms are often used to request comments about a website, submit an application, or place an order. They might also be used for an online quiz, or to request information from friends or students.a form is a web page that contains form fields, which are used to collect information from users. Form fields allow users to enter information in the form fields, generally by entering text in text boxes, selecting checkboxes and radio buttons, or selecting an option from a menu of choices. Users submit their information by clicking the SUBMIT button Starting the Form Inserting the First Form Field 1. Open a FrontPage document 2. Place the insertion point where you want to insert a form field 3. From the Insert menu, select Form» select a form field The form field appears. 5
EXAMPLE: Textbox Inserting Subsequent Form Fields Inserting all subsequent form fields involves not only the insertion process, but also assigning the namevalue pair for the form field. Depending on the type of form field you would like to insert. Push Buttons Text Boxes Check Boxes Option Buttons Drop-Down Menus Hidden Fields Opening the Form Field Properties Dialog Box: Format Menu Option 1. Insert a form field 2. Select the form field (choose text box) 3. From the Format menu, select Properties The Form Field Properties dialog box appears corresponding to the type of form field you select. EXAMPLE: The Text Box Properties dialog box appears if you select a text box field. Opening the Form Field Properties Dialog Box: Quick Menu Option 1. Insert a form field 2. Right click the form field» select Form Field Properties... The Form Field Properties dialog box appears corresponding to the type of form field you select. EXAMPLE: The Text Box Properties dialog box appears if you select a text box field. 6
Opening the Form Field Properties Dialog Box: Mouse Option 1. Insert a form field 2. Double click the form field The Form Field Properties dialog box appears corresponding to the type of form field you select. EXAMPLE: The Text Box Properties dialog box appears if you select a text box field. Inserting Push Buttons 1. Open a FrontPage document 2. Within the form boundary, place your insertion point where you want to insert the form field 3. From the Insert menu, select Form» Push Button A push button appears. Assigning the Name-Value Pair The name of a push button generally describes the form field's purpose. The value of a push button is visible to users; the value is the text that appears on the button (e.g., Send Information, Submit, Clear, Reset). To Assign the Name-Value Pair 1. Double click the push button OR Right click the push button» select Form Field Properties... The Push Button Properties dialog box appears. 2. In the Name text box, type the desired name 3. In the Value / label text box, type the desired value HINT: This is the text that appears on the button. 4. Under Button type, depending on whether you want the button to submit the form inputs or clear the form inputs, select Submit or Reset Click OK 7
PART3.FrontPage Image Maps Image Maps: Creating Hotspots An image map is an image containing one or more clickable sections (i.e., hotspots), which are assigned hyperlinks Creating Hotspots In FrontPage, you can create five different types of hotspots, including the following: Default this procedure allows all parts of an image to contain a default hyperlink. Therefore, if you click on part of an image not containing a hyperlink, you will be automatically taken to the default hyperlink. Circular this procedure allows you to create a circular hotspot. Polygonal This procedure allows you to create a hotspot with an irregular shape. Text This procedure allows you to create text that acts as the hotspot. NOTE: Text hotspots can only be used with GIF images. Setting a Default Hyperlink This procedure allows you to create a default hyperlink for all portions of an image not containing hotspots. After setting the default hyperlink, you can proceed to create circular/rectangular, polygonal, or text hotspots. 1. Double click the desired image OR Right click the desired image» select Picture Properties... The Picture Properties dialog box appears. 2. Select the General tab 3. For an absolute link, under Default hyperlink, in the Location text box, type the complete URL Click OK The default hyperlink is set. Creating Circular or Rectangular Hotspots To insert a circular or rectangular hotspot into your image, use the following instructions: 8
1. Select the image that will contain the hotspot(s) The Pictures toolbar appears. 2. On the Pictures toolbar, click CIRCULAR HOTSPOT or RECTANGULAR HOTSPOT 3. Position the pointer over the selected image The pointer becomes a pencil. 4. To shape the desired size of the hotspot, click and drag the pencil pointer 5. When you have drawn the entire shape, release the mouse button 6. In the Address text box, type the desired URL for the hotspot link 7. Click OK The hotspot is created. Creating Text Hotspots Text hotspots are an easy way to create links for image text or image labels. Select the image that will contain the hotspot(s) 1. On the Pictures toolbar, click TEXT A rectangle-shaped text box appears. 2. In the text box, type the desired text for the hotspot 3. Double click the text box 4. In the Address text box, type the desired URL for the hotspot link 5. Click OK The text hotspot is created. 9