Using Frames to Display Database Results in Web Pages

1. Project 5 Using Frames to Display Database Results in Web Pages

2. Objectives • Describe frames pages and explain how they work • Use the Database Results Wizard • Use a custom SQL query • Use a frames page template • Save a frames page

3. Objectives • Set an existing Web page as the initial page in a frame • Modify the size of a frame • Create a new Web page for the initial page in a frame • Modify the properties of a frame • Modify the properties of a frames page

4. Objectives • Import files into an existing FrontPage Web site • Create hyperlinks to pages in a frame • Create a hyperlink to a whole page • Display the No Frames view • Print framed Web pages

5. Starting FrontPage and Opening an Existing Web Site • Click the Start button on the taskbar. Point to All Programs on the Start menu • Click Microsoft Office on the All Programs submenu • Click Microsoft Office FrontPage 2003 on the Microsoft Office submenu

6. Starting FrontPage and Opening an Existing Web Site • Click the Open button arrow on the Standard toolbar • Click Open Site on the Open menu. If necessary, when FrontPage displays the Open Site dialog box, click the Look in box arrow and select the folder location where you stored the Web site for Project 4 (e.g., C:\jkeeler) • Click the Open button

7. Starting FrontPage and Opening an Existing Web Site

8. Importing Files into an Existing FrontPage Web Site • Insert the Data Disk in drive A • If necessary, select the C:\jkeeler folder in the Folder List pane • Click File on the menu bar • Click Import • Click the Add File button

9. Importing Files into an Existing FrontPage Web Site • If necessary, when FrontPage displays the Add File to Import List dialog box, click the Look in box arrow and then click 3½ Floppy (A:) • If necessary, double-click the Project5 folder • Hold down the CTRL key and select the files JobOpsBanner, Internship.asp, Tutoring.asp, and Volunteer.asp • Click the Open button • Click the OK button

10. Importing Files into an Existing FrontPage Web Site

11. Creating a Database Results Region and Custom SQL Query • Click the New Page button at the top of the Folder List pane • When the new file appears in the Folder List pane, type FullTime.asp as the new page name • Press the ENTER key • Click on the title of the new page and leave the mouse steady until the text box appears around the page title • Type Full-time Positions as the page title

12. Creating a Database Results Region and Custom SQL Query • Press the ENTER key • Double-click the FullTime.asp page in the Folder List pane to open the page in Design view • If necessary, position the insertion point at the top of the new page, click 5 (18 pt) in the Font size box, select the Arial font in the Font box, type Full-time Positions, and then press the ENTER key • Click Insert on the menu bar and then point to Database • Click Results

13. Creating a Database Results Region and Custom SQL Query • When FrontPage displays the first page of the Database Results Wizard dialog box, click the Next button • When FrontPage displays the next page of the Database Results Wizard dialog box, click Custom query • Click the Edit button • If necessary, when FrontPage displays the Custom Query dialog box, select all of the text in the SQL Statement text area • Type SELECT Description, Compensation, Contact, Phone, ('<a href=' & Chr$(34) & 'mailto:' & EMailAddress & Chr$(34) & '>' & EMailAddress & '</a>') as email FROM Results WHERE (Category = 'FullTime')

14. Creating a Database Results Region and Custom SQL Query • Click the OK button • Click the Next button • Click the Next button • Click the Next button • When FrontPage displays the next page of the Database Results Wizard dialog box, select Display all records together

15. Creating a Database Results Region and Custom SQL Query • Click the Finish button • Select the text in the column heading, email, and then type E-mail Address as the new column heading • Right-click the database column value component, <<email>> • Click Database Column Value Properties

16. Creating a Database Results Region and Custom SQL Query • When FrontPage displays the Database Column Value dialog box, click Column value contains HTML • Click the OK button • Drag through the <<Compensation>>, <<Contact>>, <<Phone>>, and <<email>> cells to select the four cells • Right-click anywhere on the selected cells and when FrontPage displays the shortcut menu, click Cell Properties

17. Creating a Database Results Region and Custom SQL Query • Select Top in the Vertical alignment box • Click the OK button • Right-click the FullTime.asp tab • Click Save

18. Create a Frames Page Using a Frames Page Template • Click the Close button on the Design view window • Click the Create a new normal page button arrow • Click Page

19. Create a Frames Page Using a Frames Page Template • Click the Frames Pages tab • If necessary, click the Banner and Contents icon • Click the OK button

20. Saving the Frames Web Site • Click the border between any of the frames to select the frames page as the current active page • Click the Save button • Click the Change title button • When FrontPage displays the Set Page Title dialog box, type Job Opportunities main frames page in the Page title text box

21. Saving the Frames Web Site • Click the OK button • Drag through the file name in the File name text box, and then type JobOppsMain as the new file name • Click the Save button

22. Setting an Existing Web Page as the Initial Page in a Frame • Click the Set Initial Page button in the top frame • If necessary, when FrontPage displays the Insert Hyperlink dialog box, scroll through the Look in list until the file, JobOpsBanner.htm, appears • Click the file, JobOpsBanner.htm • Click the OK button

23. Setting an Existing Web Page as the Initial Page in a Frame • Click View on the menu bar and then click Navigation • Drag the JobOpsBanner.htm file from the Folder List pane and drop it into the Navigation pane under the Resume page icon • Click the JobOppsMain.htm tab

24. Modifying the Size of a Frame • Point to the horizontal frame border below the banner frame • Drag the border down until the text in the banner frame is visible

25. Saving Changes to the Frames Page • Click the Save button on the Standard toolbar

26. Creating a New Web Page for the Initial Page in a Frame • Click the New Page button in the main frame

27. Inserting Text in the Initial Page for the Main Frame • If necessary, click the Web page in the main frame to position the insertion point • Type Welcome to my Job Opportunity Posting Page for Trelane College. and then press the ENTER key • Type To post a new job opportunity or to view job opportunities by category, click the corresponding link in the frame to the left. To enter the remaining text

28. Inserting Text in the Initial Page for the Main Frame

29. Saving the Initial Page for the Main Frame • Click the Save button on the Standard toolbar • Type JobOppsWelcome in the File name text box • Click the Change title button

30. Saving the Initial Page for the Main Frame • When FrontPage displays the Set Page Title dialog box, type Welcome to my Job Opportunity Posting Page in the Page title text box • Click the OK button • Click the Save button

31. Creating the Initial Page for the Contents Frame • Click the New Page button in the contents frame. Right-click the page and then click Page Properties on the shortcut menu. Type Contents Page in the Title text box. Click the OK button • Click the Save button on the Standard toolbar. When the Save As dialog box is displayed, type JobOppsTOC in the File name text box. Click the Save button in the Save As dialog box

32. Creating the Initial Page for the Contents Frame

33. Modifying the Properties of a Frame • Right-click the contents frame • Click Frame Properties • When FrontPage displays the Frame Properties dialog box, click the Show scrollbars box arrow in the Options area and then click Never • If necessary, click Resizable in browser • Click the OK button

34. Modifying the Properties of a Frame

35. Modifying the Properties of the Frames Page • Click the border between any of the frames to select the frames page • Click File on the menu bar • Click Properties • Click the Frames tab

36. Modifying the Properties of the Frames Page • If necessary, type 1 in the Frame Spacing box • Click the OK button • Click the Save button on the Standard toolbar

37. Creating a Link Bar Targeting the Default Frame • If necessary, click the contents frame to position the insertion point. Click Insert on the menu bar and then click Navigation. When FrontPage displays the Insert Web Component dialog box, click Bar based on navigation structure in the Choose a bar type list. Click the Next button. When FrontPage displays the Choose a bar style list in the Insert Web Component dialog box, verify that the Use Page’s Theme icon is selected and then click the Next button. When the Choose an orientation list is displayed in the Insert Web Component dialog box, click the second icon to insert the link bar with the links arranged vertically. Click the Finish button

38. Creating a Link Bar Targeting the Default Frame • If necessary, when the Link Bar Properties dialog box appears, click the General tab. Verify that child level is selected in the Hyperlinks to add to page area and that no pages are selected in the Additional pages area. Click the OK button. Click the Save button on the Standard toolbar

39. Creating a Link Bar Targeting the Default Frame • Double-click the file, jobopportunity.asp, in the Folder List pane to open the Job Opportunity Posting page in Design view. Delete the page banner and all text above the form, including the blank line above the form. Click the Save button on the Standard toolbar. Close the Job Opportunity Posting page

40. Creating a Link Bar Targeting the Default Frame • Click View on the menu bar and then click Navigation. Right-click the Job Opportunity Posting icon. Click Rename on the shortcut menu. Type Post Job Opportunity as the new page label and then press the ENTER key. Drag and drop the file, JobOppsTOC.htm, below the Job Opportunities icon. Drag and drop the Post Job Opportunity icon below the Contents Page icon

41. Creating a Link Bar Targeting the Default Frame • Drag the file, FullTime.asp, from the Folder List pane and drop it below the Contents Page icon to the right of the Post Job Opportunity icon. Drag the file, Volunteer.asp, from the Folder List pane and drop it below the Contents Page icon to the right of the Full-time icon. Drag the file, Internship.asp, from the Folder List pane and drop it below the Contents Page icon to the right of the Volunteer icon. Drag the file, Tutoring.asp, from the Folder List pane and drop it below the Contents Page icon to the right of the Internship icon • Click the JobOppsMain.htm tab to display the JobOppsMain.htm page in Design view. If necessary, drag the right border of the contents frame, to adjust the size of the frame to accommodate the link bar. Click the Save button on the Standard toolbar

42. Creating a Link Bar Targeting the Default Frame

43. Inserting an Image from the Current Theme • Click the contents frame to position the insertion point at the top and left of the frame • Click Insert on the menu bar, point to Picture, and then click From File on the Picture submenu. When FrontPage displays the Picture dialog box, double-click the _themes folder and then double-click the capsules folder. Click the file, capnavva.gif, and then click the Insert button. The _themes folder typically is hidden. If you cannot access hidden folders, obtain the file from the Project5 folder on the Data Disk • If necessary, when the Picture dialog box is closed, hold down the SHIFT key and press the ENTER key. Click the newly inserted image and then click the Text button on the Pictures toolbar. If necessary, open the Pictures toolbar. Type Home as the label text. Drag through the text to select it

44. Inserting an Image from the Current Theme • Click the Font Color button arrow on the Formatting toolbar and then click [white] on the color palette. If necessary, click the Font Size button arrow on the Formatting toolbar and then click 2 (10 pt). If necessary, click the Bold button on the Formatting toolbar to remove bold formatting. Click the Font button arrow and select Arial for the font • Click the contents frame, to the left of the Home image, to deselect the image

45. Inserting an Image from the Current Theme

46. Creating a Hyperlink to a Whole Page • Right-click the Home image, not the text, and then click Hyperlink on the shortcut menu • When FrontPage displays the Insert Hyperlink dialog box, click index.htm and then point to the Target Frame button • Click the Target Frame button • When FrontPage displays the Target Frame dialog box, click Whole Page in the Common targets area • Click the OK button

47. Creating a Hyperlink to a Whole Page • Click the OK button • When the Insert Hyperlink dialog box closes, click the contents frame, to the left of the Link bar component, to deselect the image • Click the Save button on the Standard toolbar • If prompted to save the capnavva.gif file, save the file as an embedded file to the images folder • Position the mouse pointer over the image hyperlink

48. Creating a Hyperlink to a Whole Page

49. Displaying the No Frames View • Click the No Frames tab at the bottom of the FrontPage window • Click the Design button

50. Modifying a Hyperlink to Link to a Frames Page • Double-click the index.htm file in the Folder List pane to display the Home page in Design view • If necessary, scroll down, and drag through the text, Post a, and then type Visit my as the replacement text. • Drag through the text, Opportunity, in the hyperlink and then type Opportunities as the replacement text • Right-click the hyperlink and then click Hyperlink Properties on the shortcut menu. When FrontPage displays the Edit Hyperlink dialog box, click the file, JobOppsMain.htm, and then click the OK button. Click the Save button on the Standard toolbar. Click the hyperlink to remove the selection