Modifying your page files


The first thing you need to do for this lesson, after you have created a new folder containing all of the artwork needed, is to copy your page files from lesson one into it and rename your index.html file as home.html.

Next you need to create a new file that will be used for the navigation buttons. Make a copy of your home.html fie and name it buttons.html. After you have created this new file, remove the first part of the code for the table and strip out everything in the file that comes after the code for the buttons. Remember to also change the heading title to "Navigation Buttons". Since your home page has been renamed to "home" instead of "index", your "home" button's hyperlink will need to be changed to reflect this as well.

Your buttons.html file should now look like this:

<HTML>
<HEAD>
<TITLE>Navigation Buttons</TITLE>
</HEAD>
<BODY BACKGROUND="backgrnd.gif">

<A HREF="home.html">
<IMG SRC="homebutton.gif" WIDTH=88 HEIGHT=70 BORDER=0></A><BR>

<A HREF="aboutus.html">
<IMG SRC="aboutusbutton.gif" WIDTH=88 HEIGHT=70 BORDER=0></A><BR>

<A HREF="orderform.html">
<IMG SRC="orderformbutton.gif" WIDTH=88 HEIGHT=70 BORDER=0></A><BR>

<A HREF="mailto:[email protected]?Subject=Request for more information">
<IMG SRC="emailbutton.gif" WIDTH=88 HEIGHT=70 BORDER=0></A><BR>

</BODY>
</HTML>


Now that you have a separate file that contains your navigation buttons, you no longer need them in your other page files. Open up your home.html file again and strip out the table and button codes so that all that remains for the body content part of your file is the elements that you want for your main homepage. You will also need to change the background image to the same one that is used for the order form page since you will be using the one with the color bar in your buttons frame and therefore it won't be needed in the regular page files anymore.

Your home.html file should now look like this:

<HEAD>
<TITLE>Adventure Travel Service</TITLE>
</HEAD>
<BODY BACKGROUND="backgrnd2.gif">

<BR>
<CENTER>
<IMG SRC="maintitle.gif"><BR>
<IMG SRC="mainpic.gif"><BR>
<STRONG>
33025 18th Pl. South, Suite E-201<BR>
Federal Way, Washington 98003<BR>
Phone: (206) 555-1212; Fax: (206) 555-2121
</STRONG>
<BR><BR>
</CENTER>

</BODY>
</HTML>


Now make the same changes to your aboutus.html file. Change the background image, and remove the table and button codes so that only the main content on the page remains.

The top section of your file should now read like this:

<HTML>
<HEAD>
<TITLE>About Us</TITLE>
</HEAD>
<BODY BACKGROUND="backgrnd2.gif">

<BR>
<CENTER><IMG SRC="maintitle.gif"></CENTER><BR>


The middle section of your code should stay the way it is written, so once you have stripped out the appropriate code at the top of your file, all you need to do now is to go down to the bottom of your file and strip out the table ending codes.

The bottom section of your file should now read like this:

<HR>
<BR>
<CENTER><STRONG><EM>
See travel agent for prices, schedules, and space availability.
</EM></STRONG></CENTER>

<BR><BR>

</BODY>
</HTML>


Since you have already planned the order form page to be a full page without the navigation buttons on it, you don't have to make any new alterations to it.


















Hosted by www.Geocities.ws

1