FrontPage Includes

FrontPage Includes

For those of you using FrontPage, here are specific instructions for utilizing the Include Page component of FP.

FP's Include Page component functions similar to an SSI (Server Side Include). There are some differences in how the included pages are set up and I'm going to explain those here.

Building your FrontPage Include Pages

First thing I'm going to do is develop a sub-directory called

/nav/

. Within that directory will be all of my included navigation content. Today we will work with top, right, bottom and left navigation elements.

Sub-Directory Structure

/nav/bottom.asp
/nav/left.asp
/nav/right.asp
/nav/top.asp

With FP, you build include pages just like any other page. They contain all of the same HTML/XHTML that any other page of your web would have. And yes, you do leave in all of the

<head></head>

information just as it appears on all other pages. Why? *Well, in FP's WYSIWYG environment, you get to see exactly how those includes will appear at the browser level. Without the

<head></head>

information, you'll get an unformatted page that will not display in WYSIWYG mode.

*See notes below on how FP included content is rendered at the browser level.

For example, here is the

/nav/top.asp

page...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigation Top Main</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="/js/file.js"></script>
<style type="text/css">@import url("/css/file.css");</style>
</head>
<body>[b]Top Navigation Content Here[/b]</body>
</html>

Note: I'm going to keep code examples to a minimum and keep this topic as short as possible. The above should give you a general idea of what I am referring to when saying that your FP Include Pages contain the same

<head></head>

content that all of your other FP pages do.

You then go through the process of developing all of the other included navigation elements.

Building Your Template Page

Once you've got those set up, now it is time to start building your main template page. At this point, the main template page is going to be somewhat void of any HTML content. Why? Because you've not yet included any of the navigation.

If you are working with tables, it gets a little tricky in how you build your navigation. If you are working with CSS and positioning, things are a little simpler by design. For a table based layout, the best way to start is to build your template page and get your tables set up exactly as you want them. You'll have a table at top to include your top navigation. You'll have a table at left and right to include that navigation. And then you'll have a table at bottom to include your bottom navigation. Then there will be the tables in the middle of all that where your content will be displayed.

Once you've got your tables set up and tweaked to your liking, you can now start adding the FP Include Page components. This is done by positioning your cursor inside the table/cell where the included content will go. You then go to > Insert > Web Component > Included Content > Page and click the Finish button. You'll now be presented with a dialog to browse to your Include Page. Click the Browse button and locate your file. Click it, click Okay and then Okay again and you've inserted the FP

<webbot>

code that triggers the Include Page component. That code may look like this...

<table><tr><td><!--webbot bot="include" u-include="http://www.example.com/nav/top.asp" tag="body" --></td></tr></table>

Content Viewable at the WYSIWYG Level

If you've done everything correctly up to this point, you should now see your top navigation appear in the table where you inserted the Include Page component. One thing to watch out for when using tables is that you don't end up with too many nested tables. This is something to consider when you are planning your template and navigation pages. Do you use tables in your include page? Or, do you utilize the tables in your template page? This is a choice you have to make.

With FP's Include Page component, you can build a website with 5 main pages...

/nav/bottom.asp
/nav/left.asp
/nav/right.asp
/nav/top.asp
/template.asp

Once you've built that

template.asp

page, you would use that as the starting page for each new page developed in the web. Each time you make a new page, you do a save as and then rename the

template.asp

. So, for example, I am now going to make my home page. I open the

template.asp

page and save as

index.asp

. I then add my content for the home page. Remember, that template contains all of the navigation elements. The only thing you should be concentrating on is the main content for the page you are building.

Notes

Use absolute URIs for included content.
```
http://www.example.com/nav/top.asp
```
Use absolute URIs for all links within included content.
Keep your navigation elements within a sub-directory by themselves for easy maintenance.
You cannot edit FP Include Pages at the page level. You must open the original file in the
```
/nav/
```
directory and edit there. As soon as you save the page, FP will automatically update across all pages where the included content is referenced.
If the same content appears on multiple pages, it qualifies for an FP include.
In my examples I used .asp. This can be done with any technology i.e. .htm, .php, etc.
FP included content is viewable at the WYSIWYG level. This is unlike other include methods which can only be viewed at the browser level after the server executes the code. This makes for a visual development environment that is as close to the finished product as can be.
FP included content does not work across sub webs. You will need to copy the included pages over to the sub web.
When FP included content is displayed at the browser level, the only content that is served from the included pages is that which is between the
```
<body></body>
```
tags. Nothing else above or below those tags will display. This is one of the added bonuses of working with FP Includes Pages at the WYSIWYG level.
If you are an advanced FP user, you'll most likely work in FP's HTML view more often than normal view. You can easily cut and paste the
```
<webbot>
```
for included content.

This topic is now open for Q&A.

<edit>Updated incorrect information for sub webs. They cannot be included from the main web. A copy of all included content must reside within the sub web. Sorry about that, I don't use sub webs.

[edited by: pageoneresults at 4:35 pm (utc) on April 19, 2004]

FrontPage Includes

Tutorial for Building FP Included Content

pageoneresults

bill

pageoneresults

reddevil

Macro

gecko001

reddevil

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week