TSL Winter 2004: Web Page Creation II: Using Included Files

Technology Serving Learning Winter 2004 Institute

Using Included Files

Many Web pages are designed with certain “areas,” as shown below:

Text Box: Menu area Text Box: Content area

There are three ways to construct this design:

1. Put all of the content for all three areas onto a single page.

This is perhaps the simplest way, but also the worst. It is difficult to control exact similarity from page to page, and the Web site’s download time increases dramatically, as all three areas have to load each time the client accesses a new page.

2. Use frames.

Frames can eliminate the download time problem, as only one of the three areas has to load at a time. However, frames are difficult to construct and manage; further, they are usually not ADA compliant.

3. Use file includes.

Although this method is fairly complex (it involves some raw coding for your Web page), it offers a number of advantages: every page is exactly the same, because the exact same file will load into each area; download time is minimal, as (simply put) the browser only needs to load the changed area; include files are easy to construct and manage—in fact, a Web designer can change 20 pages that contain the same included file by changing the included file once, which saves the designer much time and effort; includes are also ADA compliant.

How to Make a Page with Included Files

1. The first thing to do is to design the parent page and all included pages. The parent page should include the areas you need, what files will go into which areas, and the size of the areas, defined usually in pixels:

Text Box: Menu area; 150x400 pixels; menu.htm Text Box: Content area; 450x300 pixels; main.htm

2. The next step is to construct the files that will be included in the parent page. To ensure that the files will fit correctly, they should be constructed in tables of the size of the appropriate area on the parent page. Thus, in our example, “menu.htm” would be constructed in a table that is 150 x 400 pixels, with however many rows and columns are needed.

3. After constructing the three included files, construct the parent page. You should construct a table that has a cell for each area; the border for the table should be set to “0.”

4. Save the parent page; make sure that you save it in the same directory as the files you wish to include. When you save the parent page, you want to save it as an “Active Server Pages” file type. You can change the file type by scrolling through the “File Type” drop down menu in the FrontPage “Save As” dialogue box.

5. With the parent page open, click on the “HTML” tag at the bottom of the FrontPage window. FrontPage will now show the code that creates your page.

At the top of the page, you will see something that looks like this:

<html>

<head>

</head>

Insert your cursor before the first line of text, and hit “Enter.” Put your cursor back on the first line, which should now be empty, and type the following:

<% @ LANGUAGE="VBScript" %>

The beginning of the code should now look like this:

<% @ LANGUAGE="VBScript" %>

<html>

<head>

</head>

Save your page.

7. The code that creates the table on your parent page will look something like this:

<table>

<tr>

</tr>

<tr>

</tr>

</table>

To include a file in the parent page, insert your cursor just before the “</td>” tag for the appropriate cell, hit enter twice, put your cursor on the empty line, and type the following:

Instead of “filename,” you would type the name of the appropriate file.

8. In our example, then, to include the “menu.htm” file, we would insert our cursor just before the “</td>” in line 3 of the code above and type

Thus, the code for our example, with all three files included, would look like this:

<table>

<tr>

</td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

9. Note that in most cases, “main.htm” would NOT be an included file. You should only include files that are the same on more than one page, such as menus and headers. Content, which changes from page to page, should be written as part of the parent page rather than as an included file.