|
Understanding FrontPage 2002 Navigation
FrontPage has a built-in feature that allows you to create buttons or text links based on the navigation structure of your FrontPage web. You can create a hierarchical tree and place all of your pages in this tree, then direct your sight visitors to the pages you've included in this navigation structure. However, to do this, you must set your site up as a web, in order for this to work. So, let's walk through creating a very simple web so you can see how this works. All of my screenshots and instructions are based on FrontPage 2002, but this can be done similarly in FrontPage 2000. First, create a new empty web by opening FrontPage and going to the File menu and selecting New, then Page or Web… and your Task Pane will appear on the right side of your screen. Choose Empty Web from the New section, as shown in the image below:
When the Web Site Templates dialog box comes up, choose the Empty Web and click on the Browse button to choose a location and name:
When you click on the Browse button, the box in the image below comes up. Select your Desktop as the location, click the New Folder button to create a new folder, name the folder NavigationLesson, click OK, then click Open:
This will bring you back to the Web Site Templates box and you will see your location has been filled in, in the box that says Specify the location for your new web. Make sure Empty Web is highlighted and click OK. You will see a box for a few seconds that shows that FrontPage is creating a web for you. Then you will see your FrontPage interface again. The large gray area is blank because your web is still empty. You should see your Folder List on the left which shows the folders FrontPage creates for you when you make a new web. If you don't see the Folder List, click on the Folder List button. Then click on the New Page button to add a page to your web so it is no longer empty, as shown in the illustration below:
Once you click on the New Page button, FrontPage adds a blank white page based on the Normal Page template. Click on the Save button and you will see that FrontPage wants to name this index.htm because this will be the home page of your web. Leave this name as it is and click on the Save button in the bottom right corner of the Save As dialog box:
Repeat this process to create six more pages. However, obviously you won't be naming them all index.htm. Instead, name them the following (remember, it's best not to use capital letters or spaces in your web page names):
Once you have all of your pages created, they will all show in your Folder list (and if you use FrontPage 2002, they will also show as tabs at the top of your page view screen so you can easily flip between them):
Notice that your index.htm page has a different icon from the other pages, because FrontPage recognizes it as your home page:
Okay, now that we have a simple web set up, let's look at how to organize in a hierarchy, so we can add some navigation buttons. Go to the View menu in FrontPage and click on Navigation and you will see your Navigation View where there is one page called New Page 1. This is your home page, or index.htm:
Right click on the New Page 1 page you see in the Navigation view and choose Rename and name it Home. With a real web, you probably would want to name this with your web site's name, but remember that this name is what will appear on your navigation buttons or text links, so keep the name short so it doesn't get chopped off.
Now, click and drag the services.htm, products.htm, and contact.htm pages from your Folder List over to the Navigation screen. You will see lines attaching them to your Home page. Just drop them there and rename them all to be Services, Products, and Contact. Your navigation tree should now look like this:
So, our navigation now has two levels. Let's add a third. Click and drag your oldprods.htm and newprods.htm pages from the Folder List over to the Navigation, but drop them below the Products page so the lines connect them to that page. Then drag the newsreleases.htm page over so it is below and attached to the Services page. Rename them so they have names that will be more user friendly when they appear on your site. For example, I named them Old Products, New Products, and Hot News and my navigation now looks like this:
Getting the hang of it? Now, let's look at adding the actual navigation buttons to our pages, so visitors to your web site can easily find their way around. There are many ways to do this. You can add these buttons or text links
the simplest way by using Shared Borders. Shared Borders allow you to
put the navigation on one page and it will be added to all the pages that
share this border. Or, you can manually add navigation to individual pages,
simply by going to the Insert menu while you are on any page and
choosing Navigation. Or, the third way is to use Include Pages
where you insert the navigation and all pages linked to these Includes
will include the navigation. I will show you how to do this using
Shared Borders. Once you get the hang of how it works, you can try
inserting them manually from the Insert menu, or, once you've learned how to
use Include Pages, you can insert them that way also. (However, Include
Pages are a whole other topic in themselves and will not be taught as part
of this lesson. If you want to learn about Include Pages, read this article
by Tina Clarke, from my ABC newsletter:
First, go to your View menu in FrontPage and choose Page to leave the Navigation View and return to your blank pages. Click on your index.htm page so it is on your screen. Go to the Format menu and choose Shared Borders. When the Shared Borders dialog box comes up, choose to apply the borders to All Pages and put checks beside Top, Left, and Bottom and click OK.
Your blank page should now look like this, and since we chose to do this to All Pages, all of your pages should now look like this also:
When you add Shared Borders to your web, FrontPage adds another folder which includes an html page for each border, but this folder is hidden by default. To see this folder, go to the Tools menu and click on Web Settings. In there, click on the Advanced tab and put a check in the box that says Show hidden files and folders:
Now, double click on the page named bottom.htm in your _borders folder in your Folder List. When you have this page open, go to the Insert menu and choose Navigation. The first box you will see, is this. Choose Bar based on Navigation Structure, then click Next:
In the next box, scroll to the bottom of the choices and choose the one that looks like Xxxxx Xxxxx Xxxxx, then click Next:
In the next box, choose the Horizontal link style and click Finish:
Now, a box will come up that shows the different types of navigation structure you can use. Choose Child Pages Under Home and put a check in the box that says Home:
Click OK and then save your bottom.htm page. Once you've saved it, look at your other pages and you will see that they all have this at the bottom:
This is the easiest way to put Text links at the bottom of all of your pages that refer to your second level in your navigation and include a link to your Home page. Now, let's put graphic links at the top and sides of your pages. Open the file named top.htm and go through the steps above, but choose a graphic style instead of Xxxxx Xxxxx Xxxxx. Other than selecting a different type of style, do everything else exactly the same. Remember to save the top.htm file when you are done. Then, finally, open the left.htm file and choose the same graphic that you chose for the top.htm file, but select the Vertical style instead of horizontal, and when it comes to the part where you choose your navigation structure, do not choose Child Pages Under Home, but instead, choose Same Level and do NOT put a check where it says Home. Your final pages should look something like this:
Note that some pages do not have links on the left because there are no other pages on the same level in the hierachical tree. However, all pages will have links on the top and bottom, because those navigation bars are based on the structure of Child pages under home. Also, note all the instructional text that is inside your shared borders. This text will not appear in your final web. To see how they look and work, click on the Preview tab at the bottom of your page and click on the navigational links and buttons to see how you move around among your pages. You might want to add some text and/or graphics to the individual pages so you can see more clearly which pages you are moved to when you click. Have fun. If you want to learn more about FrontPage or any of the other Office programs, check out the free tutorials at my website, http://personal-computer-tutor.com and my newsletter, http://personal-computer-tutor.com/abc/. |
|
.
