The Active Server Page code used in this example is very simple and a great
way to get familiar with the power of ASP. So lets get started.
Step 1: If your web is a disk web, move the web to a
local web server
You can tell you are running a disk web if the top folder in the
FrontPage Folders list starts with a drive letter like "c:\..."
instead of "http://...". If your web is a served web, you can go
to Step 2.
If you are running a disk web, then you need to move the
web to an Active Server Pages (ASP) capable web server. The Personal Web
Server (PWS) that came w/ FP2000 or Windows 2000's Internet Information
Server (IIS) are both ASP servers. The easiest way
to do this is to use the publish web feature of FrontPage to publish the
disk web to the served web.
Use the PWS or IIS web manager to determine the local
server's URL. Also make sure the server has the FrontPage extensions
installed on it (this is typically the case). See your Operating System or
FrontPage documentation for more information.
Now bring up your disk web in FrontPage and select the
File->Publish Web... and enter your local server's web URL in the
location text field and press OK. The disk web will now be published to
the web server. You can then bring the new served web up in FrontPage and
go to Step 2.
Step 2: Add a Same Level and Child Level navigation
bars to the Left Border
Bring up the web site you wish to add the ASP based navigation system to.
If you started with a typical Super Theme web or template, you will
already have a "Pages under home" navigation bar in the left
shared border. Go to the _border folder and bring up the left shared
border in the FrontPage editor.
Note: if you cannot see the "_borders" directory in your FrontPage Folders list, then go to the Tools menu and Select the "Web Settings..." item. The Web Settings dialog will appear. Select the "Advanced" tab and check the "Show Hidden Files and Folders". Then press the "OK" button. You will be asked to refresh your web, press the "OK" button and continue. Now you should be able to see the "_borders" directory in your FrontPage Folders
list.
Now click on the navigation bar in the left shared
border, press control-c (copy) and then press control-v (Paste) three times. This should create 3 copies of the navigation bar in the left
shared border.
left.htm after inserting 3 navigation bars
Double-click the top one and make sure it is set to
"Child pages under home". Double-click the middle navigation bar and
make sure it is set to "Same Level". Double-click the bottom
navigation bar and make sure it is set to "Child Level".
Setting the middle navigation bar to "Same
Level"
Note: In my experience, I did not find the
"Parent level" navigation type to be very useful. Therefore I
did not add a parent navigation bar to the left shared border. Also the
"Top" and "Back and Next" navigation bars were not
added to the left shared border because the theme graphics are not
designed to match the left shared border look.
Step 3: Add the ASP Code to the Left Shared
border
Select the top navigation bar and then press the HTML view tab in
FrontPage. You should notice an area of text selected, This is the "webbot"
code for the selected navigation bar.
Middle Navigation webbot selection
Take note of the selected area, where it begins and
ends. Now add the following text before the selected area:
<%If
ChildPagesUnderHome = True Then%>
And the following text after the selected area.
<%End If%><br>
Now go back to the Normal mode in FrontPage, select the
middle navigation bar and then press the HTML tab to go to HTML mode.
Take note of the selected area, where it begins and ends.
Now add the following text before the selected area:
<%If SameLevel = True Then %>
And the following text after the selected area.
<%End If %><br>
Now go back to the Normal mode in FrontPage, select the
bottom navigation bar and then press the HTML tab to go to HTML mode.
Take note of the selected area, where it begins and ends.
Now add the following text before the selected area:
<%If ChildLevel = True Then %>
And the following text after the selected area.
<%End If %>
After adding the ASP code to the Left shared border
Now save and close the left.htm page. You
will now notice 3 sets of navigation bars in the left shared border of
every page in your web that uses shared borders.
Step 4: Create the Navigation Structure
Now you will need to organize your web into an information hierarchy. The
Home page will be at the top level and then first level locations
underneath the Home page.
Navigation view of a multi-level product web.
The child pages under the home page will
appear in the top shared border's navigation bar and on the top navigation
bar of the left shared border.
Note: We recommend that you set
the top shared border's navigation bar to "Child pages under
home". With this setting, pages at the top level will NOT be
linked to directly in the web structure. I put pages here that I don't
want accessed in the normal web structure, i.e., page that are global to
the entire web that might be accessed via special buttons (See tip
5 for how to make these special buttons) or non-public URLs.
Tip: You can use External Navigation
Links to place a page multiple times in the web structure.
Step 5: Add a Code to each page in the
web to enable one or more Navigation Bars
Now bring up each page in the web and decide which navigation bar you
would like to have on this page. I typically look at the buttons in the
left shared border and figure out which set of buttons is best suited for
the page.
Then switch to HTML mode and add one (or
more) of the following lines of code to the top of the page.
<%ChildPagesUnderHome = True%>
to select the "Child Pages under home" navigation bar, or
<%SameLevel = True%>
to select the "Same Level" navigation bar, or
<%ChildLevel = True
%>
to select the "Child Level"
navigation bar,
Important: This code segment must be
topmost text on the page.
ASP Code on the page to select which Navigation Bar to
display
Step 6: Rename the pages in your web to
use the ".asp" extension
Now rename the pages in the web that use the left shared border to use the
".asp" extension instead of the typical ".htm" or
".html" extension.
Now you can preview your page in the
browser by selecting the File->Preview in Browser... item. Navigate the
web site and make adjustments to the navigation as you wish.
And That's It!
Using this process you can create rich hierarchical navigation structures,
making it easier for your users to find their way around your web site.
