FrontPage Tips FrontPage Includes Tutorial - FP 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


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.

For example, here is the /nav/top.asp page...

<title>Navigation Top Main</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="/js/file.js"></script>
<style type="text/css">@import url("/css/file.css");</style>
<body>Top Navigation Content Here</body>

Note: I'm going to keep code examples to a minimum. 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.

Building Your Template Page

Once you've got your included navigation elements 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...

<td><!--webbot bot="include" u-include="" tag="body" --></td>

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...


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.


Examples of FrontPage Includes

For open discussion on these procedures, visit WebmasterWorld and view this topic posted 2004-04-19...

FrontPage Includes - Tutorial for Building FP Included Content


SEO Consultants Directory