Building & Managing Web Sites with Microsoft Technologies
Lab 5 - Using Advanced FrontPage Features

 
    Home   Lectures   Labs   Resources   Discussion   Search  
In this lab you will create a new child web on your Personal Web Server (PWS) that includes several pages using some of the advanced features of FrontPage. Many of these features require the web server to have the FrontPage Extensions installed, which we did earlier when we installed PWS. At the end of the lab you will publish your child web from PWS to a child web created for you on the class webserver. This assignment will not be graded.

1. Create a New Child Web
Create a new child web on your PWS called Lab5.

2. Timestamp Component
Create a new page called default.htm. Add some content to the page, and at the bottom of the page, add a timestamp by going to the "INSERT" menu, selecting "Timestamp...". Note the available options (press the HELP button for more details), and select the "March 1, 1999" date format. Close the dialog and note the both the date and that the robot icon appears when you hover over the data. You can right-click on the component and edit its properties. You should consider adding a timestamp to many if not most of your pages, e.g., "Last updated: February 14, 1999"

3. Substitution Component
In FrontPage Explorer, go to the "TOOLS" menu and select "Web Settings..." and then the "Parameters" tab. Create a parameter called "webmaster" and make the value your e-mail address, and close the dialog. Now open or create a new page, open it FrontPage Editor, go to the "TOOLS" menu and select "FrontPage Component...", and select "Substitution". In the "Substitution Component Properties" dialog, select your "webmaster" parameter, but also note the other default parameters that are available (click on HELP for more details). Close the dialog and note the results. Create another Substitution Component on this page that lists the page URL. Examine the HTML of your page to see FrontPage Server Extensions code.

4. File Include Component
Create a new file in "_private" directory called "footer.htm". This will be a very small file that begins with a <HR>, then URL to the home page of your web, then your name and e-mail address. Close the file, and then create a new page in the root directory of your child web called "foottest.htm". Add some content to the top of the page, and at the bottom of the page, go to the "INSERT" menu, select "FrontPage Component", then select "Include Page", browse to your footer.htm file in the "_private" directory, select it, and close the dialog. Note that the contents of your footer.htm page is inserted at the bottom of the foottest.htm page. Examine the HTML of your page to see FrontPage Server Extensions code. Repeat the procedure above for another page in a subdirectory of your child web, and examine the differences in the FrontPage Server Extension code.

Now use this same technique to add a common navigation bar to multiple pages. Create a file in the "_private" directory called "navbar.htm" and add four links, each in its own paragraph as listed below:

  • "Home" linked to the absolute address of your child web home page.
  • "CSC96B" lined to the URL of the class web site.
  • "Microsoft FrontPage" linked to the Microsoft FrontPage home page (see Resources page).

Now create a new page, and add a table of 100% width like below:

My Title
 

 

 

Put your cursor in the green cell, and use the "Include Page" component to insert the navigation links into the page.

5. Scheduled Image Component
This component is commonly used to add a "New" graphic next to a link for a limited period of time. Add the "New" graphic below to the "images" directory of your child web.  Then select the "Scheduled Image" component, and include the image on your page and configure several of the settings. Examine the "Scheduled Include Page" component as well.
New

6. Search Form
If you publish your web to a webserver that supports the FrontPage Server Extensions, the Extension include a program that indexes the contents of your pages. Using this, it is very easy to create a simple search feature for your site. First, make sure you have a few pages in your child web with a unique word or two on each page that can be searched. Then create a new page in your root directory called "search.htm". After adding a page title, go to the "INSERT" menu, select "Active Elements...", and select "Search Form...".  Note the features and options in the "Search Form Properties" dialog box.  Add the search feature, then open the page in your web browser by going to "FILE" menu, and selecting "Preview in Browser..." (the search form will normally not work in the FrontPage Preview view). Experiment with the options of the search feature.

7. Experimentation
If you have time, try out some of the other FrontPage Components and Active Elements, like the page counter or the Banner Manager. Most of them are pretty obvious to use, and most also include HELP features.

8. Publish your child web to class webserver
At some point, you should publish your child web from the "development" environment of your Personal Web Server to the "production" environment of our class webserver. First, if you have not already done so, go to the class web site home page and enter your class ID to get the name of your child web and its username/password.   Then, close FrontPage Editor, go to the "FILE" menu in FrontPage Explorer, and select "Publish FrontPage Web...".  In the "Publish" dialog, FrontPage will take a guess where you want to publish this, but it is typically wrong, so click on the "More Webs..." button.  In the "Publish FrontPage Web" dialog, enter the URL of your personal child web on our class webserver: http://deathstar/[yourweb]   .  Then click "OK", provide the username and password, and FrontPage will begin publishing all of your pages to the class webserver.

Use your web browser to make sure your child web is there and works.  Then close FrontPage98, restart it, and open your child web on the class webserver by selecting "More Webs...", type in "Deathstar", select your child web, and enter your username/password. Now you are editing the child web on the class webserver.

[csc96b/_private/footer.htm]