1. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) Agenda Video Last Class Front Page Tutorial 2: Adding a New Web Page to a Web Site Agenda for Next Class 1

2. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) Last Class Front Page Tutorial 1 –Front Page is a Web page authoring and site management program –HTML uses tags to define characteristics about text, images, hyperlinks and so on –The WWW is a collection of electronic documents connected to related documents via hyperlinks –A Web page can contain text, images, sound, video and so on –A browser is used to access web pages 2

3. FrontPage 2003 M i c r o s o f t O f f i c e Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) Project 2 Adding a New Web Page to a Web Site

4. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 4 Objectives List Web page design criteria Add a new Web page to an existing FrontPage Web site and rename the Web page Change the title and label of a Web page Change the theme and set the background color for a single Web page Insert a table in a Web page

5. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 5 Objectives Merge cells in a table and change table properties Undo and redo actions in FrontPage Insert a clip art image in a Web page and replace an image Copy and paste items in a Web page Add a heading and normal text to a Web page

6. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 6 Objectives Insert a horizontal rule Add a link bar and a Photo Gallery component to a Web page Print preview a Web page Save a Web page with embedded images Publish changes to an existing FrontPage Web site

7. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 7 Starting FrontPage Click the Start button on the Windows taskbar, point to All Programs on the Start menu, and then point to Microsoft Office on the All Programs submenu Click Microsoft Office FrontPage 2003 on the Microsoft Office submenu If FrontPage opened a Web site, click File on the menu bar and then click Close Site. If FrontPage opened a Web page, click File on the menu bar and then click Close

8. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 8 Opening an Existing FrontPage Web Site Click the Open button arrow on the Standard toolbar Click Open Site If necessary, when the Open Site dialog box is displayed, click the Look in box arrow and select the folder location where you stored the Web site for Project 1 (e.g., C:\jkeeler) Click the Open button Double-click index.htm in the Folder List pane

9. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 9 Opening an Existing FrontPage Web Site

10. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 10 Adding a New Web Page to an Existing Web Site Click the View command on the menu bar Click Navigation Right-click the Home Page icon Point to the New command

11. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 11 Adding a New Web Page to an Existing Web Site Click Page When FrontPage adds the new page to the navigation structure, click View on the menu bar Click Refresh

12. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 12 Renaming a Web Page Right-click the file name new_page_1.htm Click Rename on the shortcut menu Type photos.htm as the new file name and then press the ENTER key

13. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 13 Changing the Title of a Web Page Right-click the New Page 1 page icon Click Properties If necessary, click the General tab Type Marketing Experience in the Title text box Click the OK button

14. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 14 Changing the Page Label of a Web Page Right-click the New Page 1 page icon Click Rename Type Photos in the edit text box Press the ENTER key to save the new label

15. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 15 Editing a Web Page in Design View Double-click the Photos page icon in the Navigation pane

16. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 16 Changing the Theme for a Web Page Click Format on the menu bar and then click Theme Scroll the Select a theme scroll bar until the No theme selection is displayed in the list Click No theme Click the Theme task pane Close button

17. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 17 Changing the Background Color Click Format on the menu bar Click Background If necessary, click the Formatting tab Click the Background box arrow

18. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 18 Changing the Background Color Click More Colors Click the indicated color in Figure 2-27 on page FP 101 Click the OK button Click the OK button in the Page Properties dialog box

19. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 19 Inserting a Table in a Web Page Click the Insert Table button on the Standard toolbar Point to the cell in the third row and third column to select nine squares in the grid Click the cell in the third row and third column

20. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 20 Merging Cells in a Table Click the left cell in the middle row of the table Hold down the SHIFT key and click the right cell in the middle row Right-click one of the selected cells Click Merge Cells Click the upper-left cell to remove the highlighting

21. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 21 Inserting a Clip Art Image in a Web Page If necessary, click the upper-left cell of the table to position the insertion point Click Insert on the menu bar and then point to Picture Click Clip Art When the Clip Art task pane appears, type diploma in the Search for text box Click the Go button

22. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 22 Inserting a Clip Art Image in a Web Page If necessary, scroll down the Results list until an image of a diploma is displayed, or another image of your choice Point to the image Click the box arrow and then click Insert on the shortcut menu to insert the clip art in the Web page Click the Close button on the Clip Art task pane

23. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 23 Replacing a Clip Art Image in a Web Page Right-click the image to be replaced Click Picture Properties If necessary, when the Picture Properties dialog box is displayed, click the General tab Click the Browse button Insert the Data Disk in drive A

24. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 24 Replacing a Clip Art Image in a Web Page If necessary, when FrontPage displays the Picture dialog box, click the Look in box arrow and select the graduation.gif file in the Project2 folder Click the Open button Click the OK button Resize the replacement image by dragging the sizing handles to the approximate size shown here

25. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 25 Copying and Pasting an Image on a Web Page If necessary, click the clip art image to select it Click Edit on the menu bar Click Copy and then click the upper- right cell of the table to position the insertion point Click Edit on the menu bar Click Paste

26. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 26 Aligning Items on a Web Page If necessary, click the clip art image in the left cell to select it Click the Align Right button on the Formatting toolbar

27. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 27 Adjusting Table Cell Borders Point to the cell border between the first and second cell in the top row Drag the cell border left, to the approximate position shown in Figure 2-52 on page FP 116, and release the mouse button Point to the cell border between the second and third cell in the top row Drag the cell border right, toward the left edge of the clip art image, so that the right cell is approximately the same size as the left cell

28. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 28 Modifying the Properties of a Table If necessary, click one of the cells of the table Click Table on the menu bar and then point to Table Properties Click Table on the Table Properties submenu When FrontPage displays the Table Properties dialog box, click the Alignment box down arrow in the Layout area Click Center

29. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 29 Modifying the Properties of a Table If necessary, in the Layout area, click Specify width and click In pixels Type 688 in the Specify width text box In the Borders area, click the Size box down arrow until zero (0) appears in the Size box Click the OK button

30. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 30 Adding a Heading to a Web Page If necessary, click the top center table cell to position the insertion point Click the Style box arrow If necessary, scroll down to Heading 2 in the Style list Click Heading 2

31. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 31 Adding a Heading to a Web Page Click the Center button on the Formatting toolbar Type Marketing Experience in the top center cell Press SHIFT+ENTER Type Photo Album to enter the remainder of the text

32. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 32 Adding a Heading to a Web Page Drag through the text to select it Click the Font Color button arrow Click the Green button Click the second row of the table to deselect the text

33. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 33 Adding a Horizontal Rule to a Web Page If necessary, click the second table row to position the insertion point Click Insert on the menu bar Click Horizontal Line Press the DELETE key to remove the trailing blank line

34. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 34 Adding Normal Text to a Web Page Right-click the lower-left cell Click Cell Properties When FrontPage displays the Cell Properties dialog box, click the Vertical alignment box arrow in the Layout area Click Top Click the OK button

35. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 35 Adding Normal Text to a Web Page If necessary, click Normal in the Style list If necessary, click the Font box arrow on the Formatting toolbar and then click Times New Roman Click the Align Right button on the Formatting toolbar Click the Font Size box arrow on the Formatting toolbar Click 2 (10 pt)

36. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 36 Adding Normal Text to a Web Page Type Point to an image to see a caption in the lower-left cell Drag through the entered text to select it Click the Font Color button arrow on the Formatting toolbar and then click the Green button in the color palette Click the bottom center cell to deselect the text Click the lower-right cell to position the insertion point

37. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 37 Adding Normal Text to a Web Page If necessary, click Normal in the Style list and click Times New Roman in the Font list Click the Font Size box arrow and then click 2 (10 pt) Type Click an image to see a larger view in the cell

38. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 38 Adding Normal Text to a Web Page Drag through the entered text to select it Click the Font Color button arrow on the Formatting toolbar and then click the Green button in the color palette Click the bottom center cell

39. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 39 Adding a Photo Gallery Component If necessary, click the middle cell in the bottom row of the table to position the insertion point Click the Center button on the Formatting toolbar Click Insert on the menu bar Click Web Component When FrontPage displays the Insert Web Component dialog box, click Photo Gallery in the Component type list

40. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 40 Adding a Photo Gallery Component Click the montage arrangement icon in the Choose a Photo Gallery Option list Click the Finish button If necessary, when FrontPage displays the Photo Gallery Properties dialog box, click the Pictures tab Click the Add button Click Pictures from Files

41. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 41 Adding a Photo Gallery Component Insert the Data Disk in drive A If necessary, when the File Open dialog box is displayed, click the Look in box arrow and select the Senior group project.jpg file in the Project2 folder Click the Open button When FrontPage closes the File Open dialog box and the Photo Gallery Properties dialog box again is visible, click the Caption text box and type Burning the midnight oil working on our Senior group project. in the text box Verify that a check mark is displayed in the Maintain aspect ratio check box

42. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 42 Adding a Photo Gallery Component Repeat the previous steps for the photos listed in Table 2-2 on page FP 133, typing the associated text for each photo caption Click the OK button If necessary, drag the table borders to adjust positioning of the text and images

43. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 43 Adding a Link Bar Component Position the insertion point at the end of the text in the lower-left cell of the table Press the ENTER key Click Insert on the menu bar Click Navigation When FrontPage displays the Insert Web Component dialog box, click Bar based on navigation structure in the Choose a bar type list

44. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 44 Adding a Link Bar Component Click the Next button If necessary, when FrontPage displays the Choose a bar style list in the Insert Web Component dialog box, scroll down, and then click the icon for a graphical style based on the Bars theme Click the Next button When FrontPage displays the Choose an orientation list in the Insert Web Component dialog box, click the icon to insert the link bar with the links arranged vertically

45. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 45 Adding a Link Bar Component Click the Finish button If necessary, when FrontPage displays the Link Bar Properties dialog box, click the General tab Click Child pages under Home in the Hyperlinks to add to page area Click Home page in the Additional pages area

46. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 46 Adding a Link Bar Component Click the OK button If necessary, drag the cell borders to adjust positioning of the text Click the Preview button and position the mouse pointer over a picture in the Photo Gallery Click the Design button

47. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 47 Previewing and Printing a Web Page Ready the printer according to the printer instructions Verify that the Design button is selected Click File on the menu bar

48. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 48 Previewing and Printing a Web Page Click Print Preview Click the Print button on the Print Preview toolbar Click the OK button in the Print dialog box

49. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 49 Saving the Web Page and Embedded Images Click the Save button on the Standard toolbar Click the Change Folder button When FrontPage displays the Change Folder dialog box, click the images folder

50. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 50 Saving the Web Page and Embedded Images Click the OK button in the Change Folder dialog box Click the OK button Click the index.htm tab to view the Home page

51. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 51 Publishing Changes to an Existing FrontPage Web Site Click the Publish Site button on the Standard toolbar. Because this Web site was published previously, FrontPage does not display the Publish Destination dialog box, but assumes that you want to publish to the same location If prompted, type your user name and password, and click the OK button Click the index.htm tab to display the Home page

52. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 52 Quitting Microsoft FrontPage Click File on the menu bar and then click Close Site Click the Close button on the FrontPage title bar

53. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 53 Project Summary List Web page design criteria Add a new Web page to an existing FrontPage Web site and rename the Web page Change the title and label of a Web page Change the theme and set the background color for a single Web page Insert a table in a Web page

54. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 54 Project Summary Merge cells in a table and change table properties Undo and redo actions in FrontPage Insert a clip art image in a Web page and replace an image Copy and paste items in a Web page Add a heading and normal text to a Web page

55. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 55 Project Summary Insert a horizontal rule Add a link bar and a Photo Gallery component to a Web page Print preview a Web page Save a Web page with embedded images Publish changes to an existing FrontPage Web site

56. FrontPage 2003 M i c r o s o f t O f f i c e Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) Project 2 Complete

57. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) Next Class Front Page Tutorial 3 57

58. Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) Questions 58