Presentation is loading. Please wait.

Presentation is loading. Please wait.

Adding Content to the Agency Web Site - Part 2. Adding individual web pages for success stories Agency Web Site Adding Content 2, Slide 2Copyright © 2004,

Similar presentations


Presentation on theme: "Adding Content to the Agency Web Site - Part 2. Adding individual web pages for success stories Agency Web Site Adding Content 2, Slide 2Copyright © 2004,"— Presentation transcript:

1 Adding Content to the Agency Web Site - Part 2

2 Adding individual web pages for success stories Agency Web Site Adding Content 2, Slide 2Copyright © 2004, Jim Schwab, University of Texas at Austin Rather than put all of our success stories on one web page, we will create a new web page for each of the four success stories. The Our Success Stories web page will use picture hyperlinks for navigation to each of the individual success stories. We want each of the individual success pages to navigate back to the Our Success Stories web page, but not to the other web pages. We will remove the shared border from each of the individual success stories, and add a link bar to the Our Success Stories web page.

3 Adding individual success story pages Agency Web Site Adding Content 2, Slide 3Copyright © 2004, Jim Schwab, University of Texas at Austin Click on the Web Site tab to return to the view where we add new web pages. Click on the New Page tool button to add a new page to the web site.

4 Adding individual success story pages - 2 Agency Web Site Adding Content 2, Slide 4Copyright © 2004, Jim Schwab, University of Texas at Austin Change the name of the new web page from new_page1.htm to dollyMadison.htm and the title of the new web page from New Page 1 to Dolly Madison. Add three additional web pages to the web site and change the names and titles to aaronBurr.htm and Aaron Burr, samuelAdams.htm and Samuel Adams, and johannBach.htm and Johann Bach.

5 Adding success pages to navigation structure - 1 Agency Web Site Adding Content 2, Slide 5Copyright © 2004, Jim Schwab, University of Texas at Austin Click on the Navigation tab at the bottom of the window to display the navigation structure. Hold the mouse down over the dollyMadison.htm file and drag it under the Our Success Stories web page. We want the four individual success story web pages to be accessible only through the Our Success Stories web page, so we will position them below that page.

6 Adding success pages to navigation structure - 2 Agency Web Site Adding Content 2, Slide 6Copyright © 2004, Jim Schwab, University of Texas at Austin Drag the other three success story web pages under the Our Success Stories web page.

7 Remove shared borders from success web pages - 1 Agency Web Site Adding Content 2, Slide 7Copyright © 2004, Jim Schwab, University of Texas at Austin First, select one of the individual success story web pages. Second, select Shared Borders from the Format menu. The navigation bar is located in the left shared border. To remove the navigation bar from the individual success story web pages, we will remove the left shared border.

8 Remove shared borders from success web pages - 2 Agency Web Site Adding Content 2, Slide 8Copyright © 2004, Jim Schwab, University of Texas at Austin In the Shared Borders dialog box, mark the option button to only make changes to Selected page(s). When the check box is cleared, the dashed vertical line marking the border disappears. In the Shared Borders dialog box, mark the option button to only make changes to Selected page(s). When the check box is cleared, the dashed vertical line marking the border disappears. Click on the OK button to apply the change.

9 Remove shared borders from success web pages - 3 Agency Web Site Adding Content 2, Slide 9Copyright © 2004, Jim Schwab, University of Texas at Austin Double click on the Johann Bach web page in the Navigation view to open the web page. We see that the navigation bar in the left border has been removed from the web page. Double click on the Johann Bach web page in the Navigation view to open the web page. We see that the navigation bar in the left border has been removed from the web page. The page banner and copyright notice are still shown on the web page because we kept the top and bottom shared borders. Return to the web site navigation view and remove the left shared border from the three other individual success story web pages.

10 Open the Our Success Stories web page Agency Web Site Adding Content 2, Slide 10Copyright © 2004, Jim Schwab, University of Texas at Austin Open the Our Success Stories web page in the front page. On Our Success Stories, we want to create a row of children's pictures as hyperlinks. When a user clicks on the child's picture, the browser will go to the adult success story associated with that child picture.

11 Copy a child's picture from Microsoft's clip art Agency Web Site Adding Content 2, Slide 11Copyright © 2004, Jim Schwab, University of Texas at Austin First, navigate to the Microsoft web site of clip art, and search for Photos of children. Second, go to page 8 of the photos matching the search criteria, and copy the first photo in the first row to the clipboard. I will use this picture as the child picture for Dolly Madison. Second, go to page 8 of the photos matching the search criteria, and copy the first photo in the first row to the clipboard. I will use this picture as the child picture for Dolly Madison.

12 Paste the clipboard picture in the web page Agency Web Site Adding Content 2, Slide 12Copyright © 2004, Jim Schwab, University of Texas at Austin Paste the clipboard picture into the Our Success Stories web page. We want a reduced size picture to use in our hyperlink, but we do not want a thumbnail that links to a full size picture. We will manually change the size of the picture. Right click on the picture and select Picture Properties from the popup menu. We want a reduced size picture to use in our hyperlink, but we do not want a thumbnail that links to a full size picture. We will manually change the size of the picture. Right click on the picture and select Picture Properties from the popup menu.

13 The picture properties dialog box - 1 Agency Web Site Adding Content 2, Slide 13Copyright © 2004, Jim Schwab, University of Texas at Austin In the Pictures Property dialog box, click on the tab for Appearance. To reduce the size of the photograph to 20% of its original size, we change the Width from 600 pixels to 120 pixels (20% x 600).

14 The picture properties dialog box - 2 Agency Web Site Adding Content 2, Slide 14Copyright © 2004, Jim Schwab, University of Texas at Austin With the Keep aspect ratio check box marked, when we change the Width from 600 to 120, the Height is automatically changed from 400 to 80.

15 The picture properties dialog box - 3 Agency Web Site Adding Content 2, Slide 15Copyright © 2004, Jim Schwab, University of Texas at Austin Click on the General tab to make the picture act as a hyperlink. To make the picture act as a hyperlink, we need to specify the file that we want to navigate to when the picture is clicked. Type dollyMadison.htm in the Location text box. To make the picture act as a hyperlink, we need to specify the file that we want to navigate to when the picture is clicked. Type dollyMadison.htm in the Location text box. Click on the OK button to apply the changes to the picture.

16 The hyperlink picture on the web page Agency Web Site Adding Content 2, Slide 16Copyright © 2004, Jim Schwab, University of Texas at Austin The reduced size picture to use as a hyperlink is displayed on the web page. FrontPage includes a drop down menu for Picture Actions that we can do with the resized picture. Mark the option to Resample Picture to Match Size, as this will usually give us a clearer image.

17 Test the picture hyperlink in the browser Agency Web Site Adding Content 2, Slide 17Copyright © 2004, Jim Schwab, University of Texas at Austin To test the picture hyperlink, select Preview in Browser > Microsoft Internet Explorer 6.0 (800 x 600) from the File menu.

18 Save the changes to the web page Agency Web Site Adding Content 2, Slide 18Copyright © 2004, Jim Schwab, University of Texas at Austin The picture image which we pasted in the web page as a hyperlink has not been saved. FrontPage prompts us to save the image. Click on the Yes button.

19 Rename and save the image Agency Web Site Adding Content 2, Slide 19Copyright © 2004, Jim Schwab, University of Texas at Austin This picture is the linked to the web page for Dolly Madison, so we name the picture file dollyMadison_child.jpg and store it in the images folder. Click on the OK button to save the image.

20 Testing the picture hyperlink Agency Web Site Adding Content 2, Slide 20Copyright © 2004, Jim Schwab, University of Texas at Austin The web page for Our Success Stories is opened in the web browser. If we position the cursor over the picture, we see that it becomes the finger pointer used to navigate hyperlinks. Click on the picture hyperlink. If we position the cursor over the picture, we see that it becomes the finger pointer used to navigate hyperlinks. Click on the picture hyperlink.

21 Navigating to the individual success story Agency Web Site Adding Content 2, Slide 21Copyright © 2004, Jim Schwab, University of Texas at Austin When we clicked on the picture hyperlink, the browser displayed the web page we created for the success story for Dolly Madison. We will add the content to this web page later. The picture hyperlink worked correctly. Close the browser window.

22 Copy a child's picture from Microsoft's clip art Agency Web Site Adding Content 2, Slide 22Copyright © 2004, Jim Schwab, University of Texas at Austin First, navigate to the Microsoft web site of clip art, and search for Photos of children. Second, go to page 51 of the photos matching the search criteria, and copy the third photo in the first row to the clipboard. This is the child picture for Aaron Burr. Second, go to page 51 of the photos matching the search criteria, and copy the third photo in the first row to the clipboard. This is the child picture for Aaron Burr.

23 Paste the clipboard picture in the web page Agency Web Site Adding Content 2, Slide 23Copyright © 2004, Jim Schwab, University of Texas at Austin Paste the clipboard picture into the Our Success Stories web page. We want a reduced size picture to use in our hyperlink, but we do not want a thumbnail that links to a full size picture. We will manually change the size of the picture. Right click on the picture and select Picture Properties from the popup menu. We want a reduced size picture to use in our hyperlink, but we do not want a thumbnail that links to a full size picture. We will manually change the size of the picture. Right click on the picture and select Picture Properties from the popup menu.

24 The picture properties dialog box - 1 Agency Web Site Adding Content 2, Slide 24Copyright © 2004, Jim Schwab, University of Texas at Austin In the Pictures Property dialog box, click on the tab for Appearance. To reduce the size of the photograph to 20% of its original size, we change the Width from 600 pixels to 120 pixels (20% x 600).

25 The picture properties dialog box - 2 Agency Web Site Adding Content 2, Slide 25Copyright © 2004, Jim Schwab, University of Texas at Austin With the Keep aspect ratio check box marked, when we change the Width from 600 to 120, the Height is automatically changed from 398 to 79.

26 The picture properties dialog box - 3 Agency Web Site Adding Content 2, Slide 26Copyright © 2004, Jim Schwab, University of Texas at Austin Click on the General tab to make the picture act as a hyperlink. To make the picture act as a hyperlink, we need to specify the file that we want to navigate to when the picture is clicked. Type aaronBurr.htm in the Location text box. To make the picture act as a hyperlink, we need to specify the file that we want to navigate to when the picture is clicked. Type aaronBurr.htm in the Location text box. Click on the OK button to apply the changes to the picture.

27 The hyperlink picture on the web page Agency Web Site Adding Content 2, Slide 27Copyright © 2004, Jim Schwab, University of Texas at Austin The reduced size picture to use as a hyperlink is displayed on the web page. To save the embedded picture, click on the Save tool button.

28 Rename and save the image Agency Web Site Adding Content 2, Slide 28Copyright © 2004, Jim Schwab, University of Texas at Austin This picture is the linked to the web page for Aaron Burr, so we name the picture file aaronBurr_child.jpg and store it in the images folder. Click on the OK button to save the image.

29 Copy a child's picture from Microsoft's clip art Agency Web Site Adding Content 2, Slide 29Copyright © 2004, Jim Schwab, University of Texas at Austin First, navigate to the Microsoft web site of clip art, and search for Photos of children. Second, go to page 6 of the photos matching the search criteria, and copy the fourth photo in the second row to the clipboard. This is the child picture for Johann Bach. Second, go to page 6 of the photos matching the search criteria, and copy the fourth photo in the second row to the clipboard. This is the child picture for Johann Bach.

30 Paste the clipboard picture in the web page Agency Web Site Adding Content 2, Slide 30Copyright © 2004, Jim Schwab, University of Texas at Austin Paste the clipboard picture into the Our Success Stories web page. We want a reduced size picture to use in our hyperlink, but we do not want a thumbnail that links to a full size picture. We will manually change the size of the picture. Right click on the picture and select Picture Properties from the popup menu. We want a reduced size picture to use in our hyperlink, but we do not want a thumbnail that links to a full size picture. We will manually change the size of the picture. Right click on the picture and select Picture Properties from the popup menu.

31 The picture properties dialog box - 1 Agency Web Site Adding Content 2, Slide 31Copyright © 2004, Jim Schwab, University of Texas at Austin In the Pictures Property dialog box, click on the tab for Appearance. To reduce the size of the photograph to 20% of its original size, we change the Width from 600 pixels to 120 pixels (20% x 600).

32 The picture properties dialog box - 2 Agency Web Site Adding Content 2, Slide 32Copyright © 2004, Jim Schwab, University of Texas at Austin With the Keep aspect ratio check box marked, when we change the Width from 600 to 120, the Height is automatically changed from 404 to 80.

33 The picture properties dialog box - 3 Agency Web Site Adding Content 2, Slide 33Copyright © 2004, Jim Schwab, University of Texas at Austin Click on the General tab to make the picture act as a hyperlink. To make the picture act as a hyperlink, we need to specify the file that we want to navigate to when the picture is clicked. Type johannBach.htm in the Location text box. To make the picture act as a hyperlink, we need to specify the file that we want to navigate to when the picture is clicked. Type johannBach.htm in the Location text box. Click on the OK button to apply the changes to the picture.

34 The hyperlink picture on the web page Agency Web Site Adding Content 2, Slide 34Copyright © 2004, Jim Schwab, University of Texas at Austin The reduced size picture to use as a hyperlink is displayed on the web page. To save the embedded picture, click on the Save tool button.

35 Rename and save the image Agency Web Site Adding Content 2, Slide 35Copyright © 2004, Jim Schwab, University of Texas at Austin This picture is the linked to the web page for Johann Bach, so we name the picture file johannBach_child.jpg and store it in the images folder. Click on the OK button to save the image.

36 Copy a child's picture from Microsoft's clip art Agency Web Site Adding Content 2, Slide 36Copyright © 2004, Jim Schwab, University of Texas at Austin First, navigate to the Microsoft web site of clip art, and search for Photos of children. Second, go to page 39 of the photos matching the search criteria, and copy the second photo in the second row to the clipboard. This is the child picture for Samuel Adams. Second, go to page 39 of the photos matching the search criteria, and copy the second photo in the second row to the clipboard. This is the child picture for Samuel Adams.

37 Paste the clipboard picture in the web page Agency Web Site Adding Content 2, Slide 37Copyright © 2004, Jim Schwab, University of Texas at Austin Paste the clipboard picture into the Our Success Stories web page. We want a reduced size picture to use in our hyperlink, but we do not want a thumbnail that links to a full size picture. We will manually change the size of the picture. Right click on the picture and select Picture Properties from the popup menu. We want a reduced size picture to use in our hyperlink, but we do not want a thumbnail that links to a full size picture. We will manually change the size of the picture. Right click on the picture and select Picture Properties from the popup menu.

38 The picture properties dialog box - 1 Agency Web Site Adding Content 2, Slide 38Copyright © 2004, Jim Schwab, University of Texas at Austin In the Pictures Property dialog box, click on the tab for Appearance. To reduce the size of the photograph to 20% of its original size, we change the Width from 600 pixels to 120 pixels (20% x 600).

39 The picture properties dialog box - 2 Agency Web Site Adding Content 2, Slide 39Copyright © 2004, Jim Schwab, University of Texas at Austin With the Keep aspect ratio check box marked, when we change the Width from 600 to 120, the Height is automatically changed from 404 to 80.

40 The picture properties dialog box - 3 Agency Web Site Adding Content 2, Slide 40Copyright © 2004, Jim Schwab, University of Texas at Austin Click on the General tab to make the picture act as a hyperlink. To make the picture act as a hyperlink, we need to specify the file that we want to navigate to when the picture is clicked. Type samuelAdams.htm in the Location text box. To make the picture act as a hyperlink, we need to specify the file that we want to navigate to when the picture is clicked. Type samuelAdams.htm in the Location text box. Click on the OK button to apply the changes to the picture.

41 The hyperlink picture on the web page Agency Web Site Adding Content 2, Slide 41Copyright © 2004, Jim Schwab, University of Texas at Austin The reduced size picture to use as a hyperlink is displayed on the web page. To save the embedded picture, click on the Save tool button.

42 Rename and save the image Agency Web Site Adding Content 2, Slide 42Copyright © 2004, Jim Schwab, University of Texas at Austin This picture is the linked to the web page for Samuel Adams, so we name the picture file samuelAdams_child.jpg and store it in the images folder. Click on the OK button to save the image.

43 Add instruction for navigating to individual pages Agency Web Site Adding Content 2, Slide 43Copyright © 2004, Jim Schwab, University of Texas at Austin Reduce the font size to 2 (10 pt). We need to tell our users that there is more to our stories than the four pictures on the page, since the picture hyperlinks are not as obvious as text hyperlinks would be. Click before the first picture, add an instruction that tell users: Please click on a child's picture to see their success story, and press the enter key to add space between the instruction and pictures.

44 Create link bar for return to our success stories Agency Web Site Adding Content 2, Slide 44Copyright © 2004, Jim Schwab, University of Texas at Austin Open dollyMadison.htm in the FrontPage Design view. While our picture link will navigate to the individual page, there is no link for navigating back to the parent page, Our Success Stories other than using the browser's Back button. We will add a hyperlink to Our Success Stories in the form of a link bar, so that its appearance takes on the theme for the web site. I want to locate the link bar in the left border so that the link has the same look and feel as the links on the other pages. To create this effect, I will use a borderless table that manages the placement of my content on individual success story pages. Open dollyMadison.htm in the FrontPage Design view. While our picture link will navigate to the individual page, there is no link for navigating back to the parent page, Our Success Stories other than using the browser's Back button. We will add a hyperlink to Our Success Stories in the form of a link bar, so that its appearance takes on the theme for the web site. I want to locate the link bar in the left border so that the link has the same look and feel as the links on the other pages. To create this effect, I will use a borderless table that manages the placement of my content on individual success story pages. Select a 1 by 2 table from the Insert Table tool button.

45 Insert a link bar in the first cell Agency Web Site Adding Content 2, Slide 45Copyright © 2004, Jim Schwab, University of Texas at Austin With the cursor in the left cell of the table, select Navigation from the Insert menu.

46 Choose a bar with custom links Agency Web Site Adding Content 2, Slide 46Copyright © 2004, Jim Schwab, University of Texas at Austin In the list box Choose a bar type, Bar with custom links is selected. Since this is the choice we want, we click on the Next button.

47 Format the link bar with page's theme Agency Web Site Adding Content 2, Slide 47Copyright © 2004, Jim Schwab, University of Texas at Austin The default theme for the link bar is the page's theme. Since this is what we want, we click on the Next button.

48 Choose a vertical orientation for the link bar Agency Web Site Adding Content 2, Slide 48Copyright © 2004, Jim Schwab, University of Texas at Austin With only one button on the link bar, it does not really matter whether or not the orientation is horizontal or vertical. Nevertheless, we will choose a vertical orientation in case we decide to add other buttons to the link bar later. Click on the Finish button to close the Insert Web Component dialog box.

49 Name the new link bar Agency Web Site Adding Content 2, Slide 49Copyright © 2004, Jim Schwab, University of Texas at Austin When we clicked on the Finish button to close the Insert Web Component dialog box, FrontPage opened the Link Bar Properties and the Create New Link Bar dialog boxes. In the Create New Link Bar dialog, FrontPage proposes that we name our link bar New Link Bar. Since that is an acceptable name, we click on the OK button. In the Create New Link Bar dialog, FrontPage proposes that we name our link bar New Link Bar. Since that is an acceptable name, we click on the OK button.

50 Add a link to the new link bar Agency Web Site Adding Content 2, Slide 50Copyright © 2004, Jim Schwab, University of Texas at Austin Click on the Add link button to add a link to the new link bar.

51 Specify the link to add to the link bar Agency Web Site Adding Content 2, Slide 51Copyright © 2004, Jim Schwab, University of Texas at Austin First, type the text for the link that will appear on the web page Our Success Stories in the Text to display text box. Second, click on success.htm in the list of web files that we want to navigate to when the link is clicked. Third, click on the OK button to add the link to the list in the Link Bar Properties dialog box.

52 Create the link bar Agency Web Site Adding Content 2, Slide 52Copyright © 2004, Jim Schwab, University of Texas at Austin The specifications for the link bar are complete. We click on the OK button to create the link bar on the web page.

53 The link bar on the individual success story page Agency Web Site Adding Content 2, Slide 53Copyright © 2004, Jim Schwab, University of Texas at Austin The Our Success Stories link is placed in the left cell of the table on the individual success story web page. The +add link is included in the design view as a convenience for modifying the link bar. It will not be displayed in the browser.

54 Resize the width of the cell containing the link Agency Web Site Adding Content 2, Slide 54Copyright © 2004, Jim Schwab, University of Texas at Austin When we insert content into the cell of a table, FrontPage gives that cell a very large size. We will reduce the width of the left cell to give the cell a width comparable to the width of the shared margin on other web pages. We scroll the window to the right, hold the mouse down over the cell boundary, and drag it to the left.

55 Copy the table with the link to the clipboard Agency Web Site Adding Content 2, Slide 55Copyright © 2004, Jim Schwab, University of Texas at Austin Before we add content to the other cell in the table, we will copy the table, including the link bar, to the other individual success story web pages. First, drag select the table so that the entire table is selected. Second, click on the Copy tool button to copy the table to the clipboard.

56 Paste the table to another individual success story Agency Web Site Adding Content 2, Slide 56Copyright © 2004, Jim Schwab, University of Texas at Austin First, click on aaronBurr.htm in the Folder List to open the Aaron Burr web page. Second, click on the Paste tool button to paste the table with the Our Success Stories link on the web page. Open the johannBach.htm and samuelAdams.htm web pages and paste the table with the link bar on these web pages.

57 Locate the picture for Dolly Madison Agency Web Site Adding Content 2, Slide 57Copyright © 2004, Jim Schwab, University of Texas at Austin Open Microsoft's Office Online Clip Art collection and search for doctors in Photos. Choose the first phone in the second row as a picture of Doctor Dolly Madison and copy it to the clipboard.

58 Paste the picture for Dolly Madison Agency Web Site Adding Content 2, Slide 58Copyright © 2004, Jim Schwab, University of Texas at Austin First, return to the web page for Dolly Madison in FrontPage. Click the cursor in the right cell of the table. Second, click on the Paste tool button to paste the picture in the table.

59 The picture pasted in the table on the web page Agency Web Site Adding Content 2, Slide 59Copyright © 2004, Jim Schwab, University of Texas at Austin The picture is too large to display on the web page. We will reduce its size. To change the size of the picture, right click on the picture and select Picture Properties from the popup menu.

60 Changing the size of the picture Agency Web Site Adding Content 2, Slide 60Copyright © 2004, Jim Schwab, University of Texas at Austin In the Picture Properties dialog box, we change the Width of the picture from 600 to 300 pixels. With the Keep aspect ratio check box marked, the Height of the picture is automatically changed to 198. Click on the OK button to apply the change.

61 The smaller picture pasted in the table Agency Web Site Adding Content 2, Slide 61Copyright © 2004, Jim Schwab, University of Texas at Austin The smaller picture is easier to view in the web page.

62 Copy success story page content to clipboard Agency Web Site Adding Content 2, Slide 62Copyright © 2004, Jim Schwab, University of Texas at Austin Select the text in the document below the title Dolly Madison and copy it to the clipboard. Open the Class 12 Worksheet, if necessary, and scroll down to Web Page Content.

63 Paste clipboard content into the success story page Agency Web Site Adding Content 2, Slide 63Copyright © 2004, Jim Schwab, University of Texas at Austin On the Dolly Madison page, make certain the insertion cursor is located to the right of the picture in the right cell. Since we want to specify how the text in Word appears in the web page, select Paste Special from the Edit command.

64 Convert the pasted text Agency Web Site Adding Content 2, Slide 64Copyright © 2004, Jim Schwab, University of Texas at Austin The format that will correctly display the text in our home page is Normal paragraphs with line breaks. Click on this option button to select it. Click on the OK button to complete the paste. Normal paragraphs will format each Word paragraph separated by a blank line as a separate paragraph on the web page. Successive lines of text, e.g. the name and address of the agency, will be formatted with line breaks, so that each phrase appears on a separate line without extra spaces between the lines.

65 The success story page content Agency Web Site Adding Content 2, Slide 65Copyright © 2004, Jim Schwab, University of Texas at Austin The text appears below the photograph. We will change the way the text flows around the picture.

66 Change the text flow by editing the picture properties Agency Web Site Adding Content 2, Slide 66Copyright © 2004, Jim Schwab, University of Texas at Austin The way the text flows around a picture is a property of the picture, not the text. To change the picture property, right click on the picture and select Picture Properties from the popup menu. The way the text flows around a picture is a property of the picture, not the text. To change the picture property, right click on the picture and select Picture Properties from the popup menu.

67 Change the wrapping style Agency Web Site Adding Content 2, Slide 67Copyright © 2004, Jim Schwab, University of Texas at Austin In the Picture Properties dialog box, click on Left in the Wrapping style panel to change the way the text flows around the picture. Click on the OK button to apply the change.

68 The text wrapped around the picture Agency Web Site Adding Content 2, Slide 68Copyright © 2004, Jim Schwab, University of Texas at Austin The picture is now located to the left of the text, with the text wrapping on the right and bottom of the picture.

69 Change the position of the link bar in the table cell Agency Web Site Adding Content 2, Slide 69Copyright © 2004, Jim Schwab, University of Texas at Austin The link bar is centered vertically in the left cell. To match the navigation links on other pages, it should be located at the top of the cell. Right click on the left cell and choose Cell Properties from the popup menu.

70 Change the vertical alignment of the cell Agency Web Site Adding Content 2, Slide 70Copyright © 2004, Jim Schwab, University of Texas at Austin In the Cell Properties dialog box, select Top from the Vertical alignment drop down menu. Click on the OK button to apply the change.

71 Remove the table border Agency Web Site Adding Content 2, Slide 71Copyright © 2004, Jim Schwab, University of Texas at Austin The last thing we need to change to make the format of this page match the other web pages is to remove the table border. Right click in the left cell and select Table Properties from the popup menu.

72 Changing the size of the border Agency Web Site Adding Content 2, Slide 72Copyright © 2004, Jim Schwab, University of Texas at Austin We can remove the border by setting its size to 0 thickness. The border will not be shown in the web pages, but will be shown as a dashed line in the FrontPage Design view. Click on the OK button to apply the change.

73 Saving the embedded picture - 1 Agency Web Site Adding Content 2, Slide 73Copyright © 2004, Jim Schwab, University of Texas at Austin To save the embedded picture of Dolly Madison which we copied from the Microsoft Clip Art site, click on the Save tool button.

74 Saving the embedded picture - 2 Agency Web Site Adding Content 2, Slide 74Copyright © 2004, Jim Schwab, University of Texas at Austin Change the name of the picture file to dollyMadison.jpg and save it to the images folder. Click on the OK button to save the picture.

75 Show the success story in the browser Agency Web Site Adding Content 2, Slide 75Copyright © 2004, Jim Schwab, University of Texas at Austin To show what the success story will look like in a web browser, select Preview in Browser > Microsoft Internet Explorer 6.0 (800 x 600) from the File menu.

76 Success story for Dolly Madison in the browser Agency Web Site Adding Content 2, Slide 76Copyright © 2004, Jim Schwab, University of Texas at Austin The individual success story contains a picture and brief description of the former resident of the home. The link back to the parent page, Our Success Stories, has the same look and feel of the navigation buttons on other pages. Follow the same procedure that we used to create the story for Dolly Madison to create the success stories for Aaron Burr, Samuel Adams, and Johann Bach.

77 Success story for Aaron Burr in the browser Agency Web Site Adding Content 2, Slide 77Copyright © 2004, Jim Schwab, University of Texas at Austin To find the picture for Aaron Burr, open Microsoft's Office Online Clip Art collection and search for football player in Photos. The picture for Aaron Burr is the fourth picture in the first row on page 1 of the pictures matching the criteria. The text for Aaron Burr is copied and pasted from the Class 12 Worksheet. The Wrapping style for the text around the picture was set to Right.

78 Success story for Johann Bach in the browser Agency Web Site Adding Content 2, Slide 78Copyright © 2004, Jim Schwab, University of Texas at Austin To find the picture for Johann Bach, open Microsoft's Office Online Clip Art collection and search for musician in Photos. The picture for Johann Bach is the second picture in the third row on page 2 of the pictures matching the criteria. The text for Aaron Burr is copied and pasted from the Class 12 Worksheet. The Wrapping style for the text around the picture was set to Left.

79 Success story for Samuel Adams in the browser Agency Web Site Adding Content 2, Slide 79Copyright © 2004, Jim Schwab, University of Texas at Austin To find the picture for Samuel Adams, open Microsoft's Office Online Clip Art collection and search for minister in Photos. The picture for Samuel Adams is the second picture in the first row on page 1 of the pictures matching the criteria. The text for Aaron Burr is copied and pasted from the Class 12 Worksheet. The Wrapping style for the text around the picture was set to Right.


Download ppt "Adding Content to the Agency Web Site - Part 2. Adding individual web pages for success stories Agency Web Site Adding Content 2, Slide 2Copyright © 2004,"

Similar presentations


Ads by Google