|
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):
- products
- services
- contact
- newprods
- oldprods
- newsreleases
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: http://personal-computer-tutor.com/abc2/v13/tina13.htm.)
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/.
|
