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,

Adding Content to the Agency Web Site - Part 2

Adding individual web pages for success stories

Agency Web Site Adding Content 2, Slide 2 Copyright © 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.

Adding individual success story pages


Click on the Web Site tab to return to the view where we add new web pages.

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.

Click on the New Page tool button to add a new page to the web site.

Adding individual success story pages - 2


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.

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.

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.

Adding success pages to navigation structure - 1


Click on the Navigation tab at the bottom of the window to display the navigation structure.

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.

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.

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.

Adding success pages to navigation structure - 2


Drag the other three success story web pages under the Our Success Stories web page.

Drag the other three success story web pages under the Our Success Stories web page.

Remove shared borders from success web pages - 1


First, select one of the individual success story web pages.

First, select one of the individual success story web pages.

Second, select Shared Borders from the Format menu.

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.

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.



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.




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.

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.

Return to the web site navigation view and remove the left shared border from the three other individual success story web pages.

Open the Our Success Stories web page


Open the Our Success Stories web page in the front page.

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.

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.

Copy a child's picture from Microsoft's clip art


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.

Paste the clipboard picture in the web page


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.



The picture properties dialog box - 1


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).




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.




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.


Type dollyMadison.htm in the Location text box.

Click on the OK button to apply the changes to the picture.


The hyperlink picture on the web page


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.

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.

Test the picture hyperlink in the browser


To test the picture hyperlink, select Preview in Browser > Microsoft Internet Explorer 6.0 (800 x 600) from the File menu.

To test the picture hyperlink, select Preview in Browser > Microsoft Internet Explorer 6.0 (800 x 600) from the File menu.

Save the changes to the web page


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.

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.

Rename and save the image


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.

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.


Testing the picture hyperlink


The web page for Our Success Stories is opened in the web browser.

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.

Navigating to the individual success story


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.

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.

The picture hyperlink worked correctly. Close the browser window.





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.
























Type aaronBurr.htm in the Location text box.


Type aaronBurr.htm in the Location text box.







To save the embedded picture, click on the Save tool button.




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.

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.







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.
























Type johannBach.htm in the Location text box.


Type johannBach.htm in the Location text box.











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.

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.







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.
























Type samuelAdams.htm in the Location text box.


Type samuelAdams.htm in the Location text box.











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.

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.



Add instruction for navigating to individual pages


Reduce the font size to 2 (10 pt).

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.

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.

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.

Create link bar for return to our success stories


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.

Select a 1 by 2 table from the Insert Table tool button.

Insert a link bar in the first cell


With the cursor in the left cell of the table, select Navigation from the Insert menu.

With the cursor in the left cell of the table, select Navigation from the Insert menu.

Choose a bar with custom links


In the list box Choose a bar type, Bar with custom links is selected.

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.

Since this is the choice we want, we click on the Next button.

Format the link bar with page's theme


The default theme for the link bar is the page's theme.

The default theme for the link bar is the page's theme.

Since this is what we want, we click on the Next button.

Since this is what we want, we click on the Next button.

Choose a vertical orientation for the link bar


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.

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.

Click on the Finish button to close the Insert Web Component dialog box.

Name the new link bar


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.

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.

Add a link to the new link bar


Click on the Add link button to add a link to the new link bar.

Click on the Add link button to add a link to the new link bar.

Specify the link to add to the link bar


First, type the text for the link that will appear on the web page Our Success Stories in the Text to display text box.

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.

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.

Third, click on the OK button to add the link to the list in the Link Bar Properties dialog box.

Create the link bar


The specifications for the link bar are complete. We click on the OK button to create the link bar on the web page.

The specifications for the link bar are complete. We click on the OK button to create the link bar on the web page.

The link bar on the individual success story page


The Our Success Stories link is placed in the left cell of the table on the individual success story web page.

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.

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.

Resize the width of the cell containing the link


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.

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.

We scroll the window to the right, hold the mouse down over the cell boundary, and drag it to the left.

Copy the table with the link to the clipboard


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.

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.

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.

Second, click on the Copy tool button to copy the table to the clipboard.

Paste the table to another individual success story


First, click on aaronBurr.htm in the Folder List to open the Aaron Burr web page.

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.

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.

Open the johannBach.htm and samuelAdams.htm web pages and paste the table with the link bar on these web pages.

Locate the picture for Dolly Madison


Open Microsoft's Office Online Clip Art collection and search for doctors in Photos.

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.

Choose the first phone in the second row as a picture of Doctor Dolly Madison and copy it to the clipboard.

Paste the picture for Dolly Madison


First, return to the web page for Dolly Madison in FrontPage. Click the cursor in the right cell of the table.

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.

Second, click on the Paste tool button to paste the picture in the table.

The picture pasted in the table on the web page


The picture is too large to display on the web page. We will reduce its size.

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.

To change the size of the picture, right click on the picture and select Picture Properties from the popup menu.

Changing the size of the picture


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.

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.



The smaller picture pasted in the table


The smaller picture is easier to view in the web page.

The smaller picture is easier to view in the web page.

Copy success story page content to clipboard


Select the text in the document below the title Dolly Madison and copy it to the clipboard.

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.

Open the Class 12 Worksheet, if necessary, and scroll down to Web Page Content.

Paste clipboard content into the success story page


On the Dolly Madison page, make certain the insertion cursor is located to the right of the picture in the right cell.

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.

Since we want to specify how the text in Word appears in the web page, select Paste Special from the Edit command.

Convert the pasted text


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.

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.

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.

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.

The success story page content


The text appears below the photograph. We will change the way the text flows around the picture.

The text appears below the photograph. We will change the way the text flows around the picture.

Change the text flow by editing the picture properties


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.

Change the wrapping style


In the Picture Properties dialog box, click on Left in the Wrapping style panel to change the way the text flows around the picture.

In the Picture Properties dialog box, click on Left in the Wrapping style panel to change the way the text flows around the picture.



The text wrapped around the picture


The picture is now located to the left of the text, with the text wrapping on the right and bottom of the picture.

The picture is now located to the left of the text, with the text wrapping on the right and bottom of the picture.

Change the position of the link bar in the table cell


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.

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.

Right click on the left cell and choose Cell Properties from the popup menu.

Change the vertical alignment of the cell


In the Cell Properties dialog box, select Top from the Vertical alignment drop down menu.

In the Cell Properties dialog box, select Top from the Vertical alignment drop down menu.



Remove the table border


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.

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.

Right click in the left cell and select Table Properties from the popup menu.

Changing the size of the border


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.

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.



Saving the embedded picture - 1


To save the embedded picture of Dolly Madison which we copied from the Microsoft Clip Art site, click on the Save tool button.

To save the embedded picture of Dolly Madison which we copied from the Microsoft Clip Art site, click on the Save tool button.

Saving the embedded picture - 2


Change the name of the picture file to dollyMadison.jpg and save it to the images folder.

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.

Click on the OK button to save the picture.

Show the success story in the browser


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.

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.

Success story for Dolly Madison in the browser


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.

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.

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.

Success story for Aaron Burr in the browser


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.

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.


Success story for Johann Bach in the browser


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.

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.

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.

Success story for Samuel Adams in the browser


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.

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.



Documents

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,