Agency Web Site Navigation Structure

Building the agency web site Agency Web Site Navigation Structure, Slide 2Copyright © 2004, Jim Schwab, University of Texas at Austin The initial design for my web site was included on the Class 12 Worksheet. We will implement this design in a series of tutorials. First, in this tutorial, we will develop the basic navigation structure for the web site, focusing on five of the web pages: the Home Page, History of the Home, Tour of the Home, Friends and Supporters, and the first level of Our Success Stories. In the second tutorial, we will add content to four of these pages: the Home Page, History of the Home, Tour of the Home, and Friends and Supporters. In the third tutorial, we will add a second navigation bar for the individual success stories that uses pictures as hyperlinks to the individual success stories and supports return navigation only the Our Success Stories page. In the fourth tutorial, we will add pages to the navigation structure: a Frequently Asked Questions (FAQ) web page, a Contact Us web page, and a form for online donations to the home.

Starting a new web site If the task pane is not visible, select Task Pane from the View menu. If the task pane is visible, but Getting Started is not, select Getting Started from the drop down menu on the task pane. To start a new web site, click on the link Create a new page or site. Creating an Agency Web Site, Slide 3Copyright © 2004, Jim Schwab, University of Texas at Austin

Selecting a one page web site In the New task pane, click on the link One page Web site. We will start off with the template for a web site with a single page which we will make the home page. We will then add other pages to the web site. Creating an Agency Web Site, Slide 4Copyright © 2004, Jim Schwab, University of Texas at Austin

Saving the new web site to the hard drive First, accept the default template One Page Web Site which is located on the General tab. Second, type the location on our hard drive where we want to save the files for the web site: C:\My Documents\Agency Web Site. Third, click on the OK button to create the web site in the directory we specified. Note: FrontPage will create the folder Agency Web Site for us. Third, click on the OK button to create the web site in the directory we specified. Note: FrontPage will create the folder Agency Web Site for us. Creating an Agency Web Site, Slide 5Copyright © 2004, Jim Schwab, University of Texas at Austin

The one web page in the newly created site When we save the new web site, FrontPage opens the Folder List pane and the Web Site pane to show us the files that have been created thus far. The single file contained in the web site is called index.htm, which is generally the default web page that is opened when a user navigates to the web site. If the Folder List pane is not visible on the left side of the window, select Folder List from the View menu. Creating an Agency Web Site, Slide 6Copyright © 2004, Jim Schwab, University of Texas at Austin

Changing the title for index.htm Click once on the default title to select the text. Type the title we want to use for this page, Home Page, and press the Enter key. Note: if you double click on the title, it will open the page for editing, instead of selecting the text. If this happens, click on the close box for the web page. Then, click once on the text for the title to edit it. Creating an Agency Web Site, Slide 7Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding a new page to the web site To add a second page to the web site, click on the New Page tool button. Creating an Agency Web Site, Slide 8Copyright © 2004, Jim Schwab, University of Texas at Austin

The new page on the web site When we clicked on the Add Page button, FrontPage added a new web page to the site and assigned the name new_page_1.htm to the file and assigned New Page 1 to the title. Creating an Agency Web Site, Slide 9Copyright © 2004, Jim Schwab, University of Texas at Austin

Renaming new_page_1.htm Change the name of the file from new_page_1.htm to history.htm. Change the text of the title from New Page 1 to History of the Home. Change the name of the file from new_page_1.htm to history.htm. Change the text of the title from New Page 1 to History of the Home. Creating an Agency Web Site, Slide 10Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding the tour of the home web page Click again on the New Page tool button to add another web page to the web site. Change the default name of the file to tour.htm. Change the default title to Tour of the Home. Click again on the New Page tool button to add another web page to the web site. Change the default name of the file to tour.htm. Change the default title to Tour of the Home. Creating an Agency Web Site, Slide 11Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding the friends and supporters web page Click again on the New Page tool button to add another web page to the web site. Change the default name of the file to supporters.htm. Change the default title to Friends and Supporters. Click again on the New Page tool button to add another web page to the web site. Change the default name of the file to supporters.htm. Change the default title to Friends and Supporters. Creating an Agency Web Site, Slide 12Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding the our success stories web page Click again on the New Page tool button to add another web page to the web site. Change the default name of the file to success.htm. Change the default title to Our Success Stories. Click again on the New Page tool button to add another web page to the web site. Change the default name of the file to success.htm. Change the default title to Our Success Stories. Creating an Agency Web Site, Slide 13Copyright © 2004, Jim Schwab, University of Texas at Austin

Select the navigation view Click on the Navigation view button at the bottom of the FrontPage window to create the navigation structure for the web site. Creating an Agency Web Site, Slide 14Copyright © 2004, Jim Schwab, University of Texas at Austin The Navigation View enables us to create a visual display of the relationships or linkages among our web pages. The relationships that we set up will become the basis for the navigation structure.

Add the history web page under the home page In the Folder List pane, click on the history.htm file and hold down the mouse button. Drag the icon under the Home Page icon so that a connecting line appears between the two page. Release the mouse button. Drag the icon under the Home Page icon so that a connecting line appears between the two page. Release the mouse button. Creating an Agency Web Site, Slide 15Copyright © 2004, Jim Schwab, University of Texas at Austin

The history page beneath the home page When we release the mouse button, the History of the Home web page is positioned beneath the Home Page. We are telling FrontPage that we will want it to create links to navigate between the Home Page and the History Page. When we release the mouse button, the History of the Home web page is positioned beneath the Home Page. We are telling FrontPage that we will want it to create links to navigate between the Home Page and the History Page. Creating an Agency Web Site, Slide 16Copyright © 2004, Jim Schwab, University of Texas at Austin

Add the tour web page under the home page In the Folder List pane, click on the tour.htm file and hold down the mouse button. Drag the icon under the Home Page icon so that a connecting line appears between the two page. Release the mouse button. In the Folder List pane, click on the tour.htm file and hold down the mouse button. Drag the icon under the Home Page icon so that a connecting line appears between the two page. Release the mouse button. Creating an Agency Web Site, Slide 17Copyright © 2004, Jim Schwab, University of Texas at Austin

The tour page beneath the home page When we release the mouse button, the Tour of the Home web page is positioned beneath the Home Page. Creating an Agency Web Site, Slide 18Copyright © 2004, Jim Schwab, University of Texas at Austin

Supporters and success pages added to structure Agency Web Site Navigation Structure, Slide 19Copyright © 2004, Jim Schwab, University of Texas at Austin Select and add both the supporters page and the success stories page to the navigation structure beneath the home page. Next, we want FrontPage to create the link bar that supports navigation between the pages in our structure. To make the same link bar to appear in the same place on each page, we will put the link bar in what FrontPage calls shared borders. We will also put a page banner and copyright notice in shared borders.

Set up shared borders for web page features We want to add a banner heading to each page, a set of navigation links among the web pages, and a copyright and update notice to each web page. We will position these elements within a set of page borders common to each page. Select Shared Borders from the Format menu. We want to add a banner heading to each page, a set of navigation links among the web pages, and a copyright and update notice to each web page. We will position these elements within a set of page borders common to each page. Select Shared Borders from the Format menu. If the Shared Borders command is grayed out, activate it by selecting Page Options from the Tools menu. In the Page Options dialog box, select the Authoring tab and mark the check box for Shared Borders. Creating an Agency Web Site, Slide 20Copyright © 2004, Jim Schwab, University of Texas at Austin

Specifying shared borders to add to web pages - 1 We mark the options buttons and check boxes to specify the shared borders we want to include on each web page. First, make sure the option button for All pages is marked so that the borders are shared on each page in the web site. Second, mark the Top check box. When the check box is marked, the border is shown across the top of the page with a dashed line. We will use the top border of each page for a banner containing the title of the page. Creating an Agency Web Site, Slide 21Copyright © 2004, Jim Schwab, University of Texas at Austin

Specifying shared borders to add to web pages - 2 First, mark the Left check box to include a left border region on the web pages. Second, mark the Include navigation buttons to indicate that this border will contain the navigation buttons to move between pages, also referred to as a link bar. When the left check box is marked, the border is shown down the left side of the page with a dashed line. When the check box to include buttons is marked, a set of blue buttons indicates where the navigation buttons will be located. Creating an Agency Web Site, Slide 22Copyright © 2004, Jim Schwab, University of Texas at Austin

Specifying shared borders to add to web pages - 3 First, mark the Bottom check box to include a bottom border region on the web pages. Second, click on the OK button to add the shared borders to the web pages. When the bottom check box is marked, the border is shown down the bottom of the page with a dashed line. We will locate copyright and update information in this border. Creating an Agency Web Site, Slide 23Copyright © 2004, Jim Schwab, University of Texas at Austin

Open the Home Page web page Adding shared borders does not have any visible effect on the navigation structure. To see the effect of shared borders, we will open the home page. Double click on the Home Page icon to open the web page. Creating an Agency Web Site, Slide 24Copyright © 2004, Jim Schwab, University of Texas at Austin

The initial home page When a web page is opened, a tab with the file name is added beneath the tool bars. The top, left, and bottom shared borders are shown on the web page with dashed lines. An initial link bar (set of navigation buttons) is added to the left border. The link bar does not contain a link to return to the home page, so we will change the link bar to include a link to the home page. An initial link bar (set of navigation buttons) is added to the left border. The link bar does not contain a link to return to the home page, so we will change the link bar to include a link to the home page. Creating an Agency Web Site, Slide 25Copyright © 2004, Jim Schwab, University of Texas at Austin

Editing the link bar Agency Web Site Navigation Structure, Slide 26Copyright © 2004, Jim Schwab, University of Texas at Austin Right click on the link bar, and select Link Bar Properties from the popup menu. We will edit the link bar so that it also contains a navigation button to the home page.

Indicate the pages to include in the link bar We mark the option button to include Child pages under Home. This will include links for the history of the home, the tour of the home, friends and supports, and our success stories. We mark the check box for Home page to include a link back to the home page in the link bar. Creating an Agency Web Site, Slide 27Copyright © 2004, Jim Schwab, University of Texas at Austin

Select the style for the link bar Second, select Use Page’s Theme for the style of the link bar. This will assure a compatible visual appearance when we select the theme for the appearance of our web site. First, click on the Style tab to access these settings. Fourth, click on the OK button to change the link bar. Third, accept the default of a Vertical orientation for the link bar. Creating an Agency Web Site, Slide 28Copyright © 2004, Jim Schwab, University of Texas at Austin

The revised link bar The link bar now contains links for all five of the pages on the web site. Note that the link for Home is not underlined as a link. FrontPage will print a link in plain text instead of underlined text when we are the page that the link would connect to. The link bar now contains links for all five of the pages on the web site. Note that the link for Home is not underlined as a link. FrontPage will print a link in plain text instead of underlined text when we are the page that the link would connect to. Creating an Agency Web Site, Slide 29Copyright © 2004, Jim Schwab, University of Texas at Austin

Clearing the text from the top shared border We will add a banner to the top of our web pages in the shared top border, but before we can do this, we need to clear the comment text which FrontPage put in the border area. Select all of the text, right click on the selected text, and select the Cut command from the popup menu. Creating an Agency Web Site, Slide 30Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding a page banner - 1 With the cursor located in the top border, select Page Banner from the Insert menu. Creating an Agency Web Site, Slide 31Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding a page banner - 2 Accept the default settings to include a picture in the banner and to use the title of each page as the text that appears in the banner. Click on the OK button to create the banner. The picture that will be used in the banner at the top of each page will come from the formatting theme that we will select for the web site. If the theme we choose does not include a picture, only the text will appear. Creating an Agency Web Site, Slide 32Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding a page banner - 3 The title of the page appears in the top border above the link bar in the left border. Though the banner will be formatted when we add a theme to the web site, for now we will center the title in the top shared border so that we can distinguish it from the page names in the link bar. Creating an Agency Web Site, Slide 33Copyright © 2004, Jim Schwab, University of Texas at Austin

The home page with a text banner Agency Web Site Navigation Structure, Slide 34Copyright © 2004, Jim Schwab, University of Texas at Austin The title for the web page is now clearly displayed at the top of the page.

Clearing the text from the bottom border We want to add a copyright notice to our web pages and the date that the page was last updated in the bottom border, but before we can do this, we need to clear the comment text which FrontPage put in the bottom border area. Select all of the text, right click on the selected text, and select the Cut command from the popup menu. Creating an Agency Web Site, Slide 35Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding copyright and last update - 1 With the cursor in the bottom border, type the word Copyright, followed by a space. It is customary to add the copyright symbol after the word copyright. Creating an Agency Web Site, Slide 36Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding copyright and last update - 2 To add a symbol, select Symbol from the FrontPage Insert menu. Creating an Agency Web Site, Slide 37Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding copyright and last update - 3 Scroll down the list of characters until the copyright symbol is visible. Click on the symbol to select it. Click on the Insert button to add the symbol to the phrase we are typing. Creating an Agency Web Site, Slide 38Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding copyright and last update - 4 First, scroll down the list of characters until the copyright symbol is visible. Click on the symbol to select it. Second, click on the Insert button to add the symbol to the phrase we are typing. Third, when we clicked on the Insert button, the Cancel button was renamed Close. Click on the Close button to close the Symbol dialog box. Creating an Agency Web Site, Slide 39Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding copyright and last update - 5 Complete the text for the copyright message. When the text is complete, press the enter key to position the cursor on the new line where we will add the update message. Creating an Agency Web Site, Slide 40Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding copyright and last update - 6 Agency Web Site Navigation Structure, Slide 41Copyright © 2004, Jim Schwab, University of Texas at Austin On the new line, type the introductory phrase: Last Updated on followed by a space. Next will have FrontPage add the date to the phrase. On the new line, type the introductory phrase: Last Updated on followed by a space. Next will have FrontPage add the date to the phrase.

Adding copyright and last update - 7 To add the date to the phrase, select Date and Time from the Insert menu. Creating an Agency Web Site, Slide 42Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding copyright and last update - 8 First, we accept the default choice for Display, Date this page was last edited. This represents the data when we changed the content of the page. Second, from the Date format drop down menu, I selected a format that includes the name of the month. Third, we accept the default Time format of (none), which means that the time will not appear on the page. Fourth, we click on the OK button to add the date to our phrase. Creating an Agency Web Site, Slide 43Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding copyright and last update - 9 Finally, we add a period to complete our update phrase. When we pressed the enter key to start the second line of the statement, FrontPage started a new paragraph, including the extra space between the lines of text. I would rather not have this extra space, so I will insert a line break, rather than start a new paragraph. When we pressed the enter key to start the second line of the statement, FrontPage started a new paragraph, including the extra space between the lines of text. I would rather not have this extra space, so I will insert a line break, rather than start a new paragraph. Creating an Agency Web Site, Slide 44Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding copyright and last update - 10 First, delete the space between the lines by position the cursor at the start of the second line and pressing the Backspace key. Keep the insertion cursor between the words Children. and Last. Second, select Break from the Insert menu. Creating an Agency Web Site, Slide 45Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding copyright and last update - 11 First, we accept the default Normal line break, which will divide the text over two lines without the extra space included for a new paragraph. Second, we click on the OK button to confirm the line break which FrontPage is already displaying between the lines of text. Creating an Agency Web Site, Slide 46Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding copyright and last update - 12 The text of the copyright and page update appear on two separate lines beneath the text of the link bar. Though the text will be formatted when we add a theme to the web site, for now we will center the text in the bottom shared border so that we can distinguish it from the text of the pages in the link bar. With the text in the bottom border selected, click on the Center tool button. Creating an Agency Web Site, Slide 47Copyright © 2004, Jim Schwab, University of Texas at Austin

The home page with content in all three borders We have now completed the addition of content to all three borders: the page title in the top border, a link bar for navigation between pages in the left border, and a copyright and update notice in the bottom border. Next we will format the web site by adding a theme. We have now completed the addition of content to all three borders: the page title in the top border, a link bar for navigation between pages in the left border, and a copyright and update notice in the bottom border. Next we will format the web site by adding a theme. Creating an Agency Web Site, Slide 48Copyright © 2004, Jim Schwab, University of Texas at Austin

Adding a theme to the web site To add a theme to the pages in our web site, select Theme from the Format menu. Theme are a set of formatting properties that include a coordinated palette of colors, button styles, text formatting, bullet styles, and page background formatting. Their purpose is to give our web site a look that is visually integrated. Creating an Agency Web Site, Slide 49Copyright © 2004, Jim Schwab, University of Texas at Austin

Selecting the theme When we selected Theme from the Format menu, FrontPage opened the Theme task pane which we can use to try out and select a theme. To try out a theme, click on it. FrontPage applies the theme to the home page so we can see what it looks like. If you do not like the current theme, click on another to select and apply it. Creating an Agency Web Site, Slide 50Copyright © 2004, Jim Schwab, University of Texas at Austin

Applying the theme I decide to use the theme named Network. This theme will be used for all pages of the web site, unless we specifically select a different them for a particular page. To apply it to the web site, click on the down arrow on the right size of the theme icon and select Apply as default theme from the popup menu. Close the task pane after selecting the theme. Creating an Agency Web Site, Slide 51Copyright © 2004, Jim Schwab, University of Texas at Austin

The theme applied to the home page Overall, I like the look of the home page, except for the text in the bottom border. I will change the font and size of this text to blend in better with other text on the web page. Creating an Agency Web Site, Slide 52Copyright © 2004, Jim Schwab, University of Texas at Austin

Changing the font style of the text First, select all of the text in the bottom shared border. Second, choose trebuchet ms, arial, helvetica from the Font drop down menu. This instructs browsers to display the text in fonts from the san serif family of fonts, preferably trebuchet ms. Creating an Agency Web Site, Slide 53Copyright © 2004, Jim Schwab, University of Texas at Austin

Changing the font size of the text With all of the text in the bottom shared border still selected, choose the smallest font size, 1 (8 pt), from the font size drop down menu. Creating an Agency Web Site, Slide 54Copyright © 2004, Jim Schwab, University of Texas at Austin

The text in the bottom shared border The text in the bottom shared border now appears less intrusive and more like it belongs to the overall theme of the web page. Creating an Agency Web Site, Slide 55Copyright © 2004, Jim Schwab, University of Texas at Austin

Previewing the web site Before we add content to our web pages, we can preview the overall structure of the site in a browser. Select Preview in Browser > Microsoft Internet Explorer 6.0 (800 x 600) from the File menu. Creating an Agency Web Site, Slide 56Copyright © 2004, Jim Schwab, University of Texas at Austin

The home page opened in a browser Creating an Agency Web Site, Slide 57Copyright © 2004, Jim Schwab, University of Texas at Austin When we issued the Preview in Browser command, our web site was opened in Internet Explorer. We can see what the over pages look like by clicking on the one of the page names in the link bar.

Other web pages opened in the browser Creating an Agency Web Site, Slide 58Copyright © 2004, Jim Schwab, University of Texas at Austin The other web pages have the same general appearance as the home page. This was the purpose of using a common theme. The common theme provides visual reinforcement that these pages are all part of a single web site. When we have looked at each page and tested out all of our links, we close Internet Explorer.