Twin navigation bars for big website

P

Publisher_rookie

I am having difficulty inserting nav bars. I have an approximately 60 page
site and wanted to split the links on either side versus having one long nav
bar. Can someone advise please because when I add new pages, it adds to both
nav bars.
 
M

Mike Koewler

Rookie,

If you have 60 items in a Nav Bar, that's at least 50 too many. The
whole idea of a Nav bar is to make navigation to key pages quick and
easy. Having to go through 60 of them is neither.

Mike
 
D

DavidF

One of the most difficult and most important parts of building a large site
is the navigation system. And the larger the site gets the harder it is to
manage, and the more you should consider moving to another program.
Publisher is a DTP with limited web building capability, and is primarily
good for small, static, simple web sites.

In your case you need to take a step back and figure out how you want to
organize your site. As Mike suggested your main menu should probably not be
60 links long. It should be links to your primary pages or sections, and
then you use submenus to get around in those sections.

As I see it you can live with the long menus, or abandon the navbar wizard
and build your own textual or graphic navbar...or perhaps break your site up
into more than one Publisher file. I use many Publisher files for the many
different sections, and build my own. Reference: Building a web site with
multiple Publisher web publication files:
http://msmvps.com/blogs/dbartosik/archive/2006/01/16/81264.aspx
I approach this a bit different as I create subfolders on my host to hold
the different sections and output from the different Publisher files.

DavidF
 
P

Publisher_rookie

OK, I have split the nav bar into 30 per side, one is to each of the 50 state
resource pages, one to federal, the rest to nonprofits and statististical
data. This is just a preliminary design And will be modified or programmed in
another web authoring software. I understand people may not get it, but it is
necessary for the template to be as complete as possible before sending
somewhere else to do final workup.
 
M

Mike Koewler

In that case, what I would do - to make navigating easier, not to
mention keeping the site less cluttered, is what most sites that have
dozens of links on a page do:
Set them up alphabetically.
A B C D E F G H, etc., with a note telling viewers to click for
that state's page. Under A you would have Alabama, Alaska, Arkansas, etc.
Remember, your first goal should be to make it easy for a user to find
what they are looking for. Having 30 links in one Nav bar is not going
to accomplish that. Plus, there are search engines that will not spider
Nav Bars unless they are text only (no JS).

Mike
 
M

Mike Koewler

David,

Great idea. I knew there was some way of using a combo box to create
links, I just couldn't think of how at the moment. That would keep the
page uncluttered, it will load quicker and viewers who have JS turned
off will still be easy to find everything!

Mike
 
D

DavidF

And if the OP does want to use javascript, a drop down list for the states
would work. Here is something I copied from somewhere:

"Two kinds of drop-down lists hyperlink to other pages: one, the page
changes when the selection changes; two, the page changes when the visitor
clicks a button. Both of these kinds are shown in the following sections.
Both use the same function, goToPage, to open the new page.

The following code shows the goToPage function that the drop-down lists
shown in this section use. This code uses the open method to open the page
specified in the url parameter, but you could also use the navigate method.

<script language="JavaScript">
function goToPage(url)
{
if (url != "")
{
window.open(url);
}
}
</script>

Page Changes When the Selection Changes
With a drop-down list that automatically opens a new page, the user doesn't
need to do anything except select the item from the drop-down list to open
the page. The following code contains the HTML for creating a drop-down
list. In this example, the onchange event for the list calls the goToPage
function shown previously and passes the value attribute of the selected
item (OPTION element).

<form>
<label><u>S</u>earch Engines</label>
<select accesskey="S"
onchange="goToPage(this.options(this.selectedIndex).value)">
<option selected>Please select one</option>
<option value="http://search.msn.com/">MSN Search</option>
<option value="http://www.google.com/">Google</option>
<option value="http://www.search.com/">Search.com</option>
<option value="http://www.dogpile.com/">Dogpile</option>
</select>
<form>
Page Changes When the User Clicks a Button
Creating a drop-down list that uses a Go button is just as simple. The user
selects an item from the drop-down list and clicks Go, and the new page
opens. The following code contains the HTML to create this drop-down list.
The main differences between this code and the code in the previous example
are as follows:

The SELECT element in this code doesn't contain the onchange event.
This code contains a BUTTON element for the Go button.
This code provides a value for the name attribute of the FORM and SELECT
elements, which are necessary for the script to function properly.

<form name="dropdown">
<label>Search <u>E</u>ngines</label>
<select name="list" accesskey="E">
<option selected>Please select one</option>
<option value="http://search.msn.com/">MSN Search</option>
<option value="http://www.google.com/">Google</option>
<option value="http://www.search.com/">Search.com</option>
<option value="http://www.dogpile.com/">Dogpile</option>
</select>
<button onclick="goToPage(document.dropdown.list.options(
document.dropdown.list.selectedIndex).value)">Go</button>
</form>

To use this code, paste the script in the HEAD section of a page and paste
the form (with the nested elements) where you want the drop-down list to
appear on your page. However, do not nest the form inside another FORM
element.

After you place the drop-down list where you want it to appear, you can
change text displayed and the value attribute for each OPTION element in the
SELECT element as needed. The value attribute for each OPTION element should
contain a valid URL, including the "http://" prefix"

DavidF
 
P

Publisher_rookie

Thanks for the great tips guys. Much appreciated, and I will check back if I
need further assistance.
 
P

Publisher_rookie

Mike, umm, as my name suggests, I am indeed a rookie. I am so out of my depth
here, that I would have no idea where to insert that code as when I open my
publisher file it is not in code but in web format. The cliparts, icons, nav
bars, backgrounds are there, well, what I have done, and I wouldn't want to
mess it up. So if you could instruct me on this I could possibly do it, or
could sent the file to you lol?? Thanks, John
 
M

Mike Koewler

John,

You could create a separate page or at the bottom of the current page
list the Alphabet a second time, but under the letter would be any state
that starts with that letter. You would insert an anchor next to the
letter (I think maybe Pub calls them Bookmarks?). Then at the top of the
page, where your first Alphabet is, create a link to that anchor. So if
a visitor clicks on W, they will see Washington, West Virginia,
Wisconsin and Wyoming. Each state would have a link to its page.

Mike
 
D

DavidF

Since I gave you the code, I will reply...and tell you to forget that code.
It is designed to open the links in a new window, and you just want to open
a page on your site in the same window. So, instead use this:

----------------

<form name="jump">
<p align="center">
<select name="menu">
<option selected>Choose State</option>
<option value="http://yourdomain.com/index_files/Alaska.htm">Alaska</option>
<option value="http://yahoo.com">Yahoo</option>
<option value="http://microsoft.com">Microsoft</option>
</select>
<input type="button"
onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;"
value="GO">
</p>
</form>



-------------------

Copy all the code between the lines, and paste in Notepad. It will be easier
for you to rewrite it there, and then save it for future use.

But to get an idea of how it works and will look, just open your Pub file
and go to the page where you want to insert it. Then copy the code snippet,
go to Insert > html code fragment > and use CTRL + V to paste it in the code
fragment box. OK. Then resize the code fragment box so that it is a little
bigger than the drop down box that will be produced, and make sure it is
wide enough that the Go button is to the side. Then drag the box to where
you want it to appear on your page. Choose an empty spot...not in a text
box, picture or any other design element. Then do a web page preview. The
first link will not work, but try clicking on the Yahoo choice, and clicking
Go. You may need to do some webpage previews to figure out how big and how
wide to make the code fragment box.

I changed "Choose State" for your use, but you could put any text in that
part of the code. Then if you look at the first choice for Alaska, you
switch out 'yourdomain.com' for your domain. Be sure to use index_files and
not index files.

Now, I also made another change that will make it easier for you in the long
run. Right now when you publish to the web, each page of your site is given
an arbitrary page name such as "Page354.htm", but you have the option to
change that. Go to the page that has your Alaska details. Go to Tools > Web
Page Options. On that dialog, under Publish to the Web, and in the File Name
field put "Alaska". Now when you publish to the web, you will create a page
Alaska.htm instead of Page354.htm or some other hard to remember file name.
Go through each of your State pages and do the same, and then you are ready
to build your code snippet.

As I said open NotePad and work there rather than try to do this in the code
fragment box. After you change the domain name in the link to your Alaska
page, copy that line of code and paste it 49 more times below it, just as
you see the links to Yahoo and Microsoft, and of course delete those two
lines. Then go through them one at a time, and change out Alaska and
Alaska.htm for your other states. When you are done, save the NotePad file
so you don't have to redo all of this, copy all the code and paste it into
your Publisher page, and you should be good to go.

DavidF
 
P

Publisher_rookie

You guys rock, thanks for the help. Man this is gonna take some killer time,
as well the 250 man hours editing the background, ooof.
 
M

Mike Koewler

John,

Remember Cut and Paste. Besides, you could have asked before you started
all this! Don't think I am insulting you or giving you a hard time, I'm
not. I did the same thing and I think David has also. We start off not
knowing anything about web design, learn a bit, start adding things,
then go - oops, why didn't I think of this six months ago. I went
through it back in December and it took about three weeks of work to
change over. But since then - a piece of cake and I'm grateful I spent
the time doing it.

One other thing to consider - breaking you pages up into sections. Yes,
more time, but it will make life more simple in the future. I know, it's
easy for me to say since I don't have to do the work, but I might
consider a separate file for each state. You can still link to it, you
just use the full address rather than a relative one.

Mike
 
P

Publisher_rookie

Thanks again Mike and Dave for the help. Mike, I will keep that in mind. It
is on my many to do lists. Thanks again, and I really appreciate the help.
John
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top