Using PageBuilder Navigation Options

INTRODUCTION

This demo webpage and the links herein provides a guide for PageBuilder webpage navigation options, and some of the possible problems and their solution.

The first part of this demo is about the problems with the PB built-in multipage (w/page breaks) navigational links at the bottom of our webpages, when we use a base href in the head tag of a PB AE document. I also discuss adding your own custom links at the bottom or our webpages to link many separate, single webpages together in a multipage document. And I suggest a template for a navigational bar at the bottom of our webpages.

I do not discuss many of the other relative addressing subjects in this demo, because they've been thoroughly discussed in other turorials! My original "relative addressing" tutorial is at: http://community-2.webtv.net/jaxred/RelAddys/; and, my friend Charlie, aka mikan71@webtv.net, has more comprehensive relative linking tutorials, at: http://community-2.webtv.net/mikan71/pgb_rel_lnk/, and http://community-2.webtv.net/mikan71/using_base/ - check them out!

PageBuilder Automatic Pagination

If you use PageBuilder's automatic "Pagination" system by adding "Page breaks" to your document, your beginning page will automatically have the "index.html" suffix applied to your "first" page by the PageBuilder software; and, subsequent pages (from added page breaks) will be numbered: "page2.html," "page3.html," etc, successively for all the pages in your document. The "index.html" part of your URL will not show on the PB Index page or the "Info" key unless you type it into the the "Go To" box, or click on a URL with the "index.html" suffix - it's always assumed by the PageBuilder webserver directory that your first page has the "index.html" file extension.

This PageBuilder "Page break" pagination system actually creates separate "webpages" – each of the three (3) pages noted above, of a 3-page document, are actually published as separate webpages, but are listed only by your first page in your PageBuilder Index. This automatic page-break system adds relative URL navagation links, "Next page" and "Previous page" where applicable, to the bottoms of each successive webpage in a multi-page document. You can open and edit any page of a multipage document by clicking on the separate page division, between pagebreaks, in your PB Basic Editor screen.

If you do not put any title entries in the "Title" text box of any page you create, the PageBuilder software will use the automatic "doc" numbering system. Your untitled documents will simply show: "doc0," "doc1," "doc2," etc. A single first ceated, untitled webpage would be automatically titled "doc0/," following your "username" in your URL, by PageBuilder. And then you could add the "index.html" suffix to your URL if you like, as noted above. If you create a multi-page untiled document, PageBuilder will automatically title and number your webpages; as an example, for the 3-page document noted above: "doc0/index.html," "doc0/page2.html," and "doc0/page3.html" following your "username" in your URL.

USING BASE TAGS

You CAN NOT USE a <base> tag in the extended head tag of a PB AE MULTIPAGE document, unless you make code changes in the navigational links at the bottom of each page!

Why? Because the built-in navigational links PageBuilder automatically adds at the bottom of our webpages every time we add Page Breaks are RELATIVE LINKS; therefore, our "next page" and "previous page" navigational links at the bottom of our webpages will make our links RELATIVE TO THE BASE HREF instead of the MSN-TV webservers! You'll get an alert saying that your page " ... cannot be found ... " at your base href! I havent seen this little reminder in any of the "tutes" posted in the PB NG's about relative and base tag linking?

Note: the dummy links I use below in the page navigational links will cause an alert saying " ... did not respond to your request ... "!

So, how to use a <base> tag in a PageBuilder multipage document when you have lots of links and images and want to save lots of time by not typing out many long URL's? Just use your base href link tag in the head tag, then use relative URL's for all your link and image links; and then, just use absolute URL's for new links at the bottom of your page. You also will need to C&P the regular PageBuilder built-in page ending code to the end of the webpage, and void the built-in page ending with a single begining <noscript> tag, like this:

<table border="0" width="100%"> <tr> <td align="left"> <a href="http://URLofPreviousPage">< previous page</a> </td> <td width="*"> </td> <td align="right"> <a href="http://URLofNextPage">next page > </a> </td> </tr> </table> </TD> </TR> </TABLE> <table border="0" cellpadding="0" cellspacing="2" width="100%"> <tr height=0> <td height=0> <spacer type=block width=30% height=0> <td height=0> <spacer type=block width=30% height=0> <td height=0> <spacer type=block width=30% height=0> </tr> <tr> <td colspan="3"> <hr> </td> </tr> <tr> <td valign=middle width=30%> </td> <td valign=middle width=30%> <center> <a href="http://www.msntv.com">Powered by MSN TV</a> </center> </td> <td align=right valign=middle width=30%> </td> </td> </tr> <tr> <td colspan="3"> <hr> </td> </tr> </table> </BODY> </HTML> <noscript>  </plaintext> Note: The effect of this code can be seen at the bottom of this page. View the source code to see how how it was done! The method is not a violation of the TOS, and is completely legal because it exactly replicates the original link using PageBuilder's built-in code! OK, you see what I did here, folks? I added absolute URL's for my NEW navigatonal links at the bottom of the page, Then, I copied the PageBuilder built-in page ending code and pasted in after my added link code; and, then VOIDED the regular built-in page ending code with a single begining <NOSCRIPT> tag! But, the most unique "trick" in the above code is the use of the asterisk as a "wild card" width value for the inside empty spacer table cell; ie: <td width="*"> </td>. Hey, anybody ever heard of that? No? And , it's not in the textbooks, either! Without the asterisk wild card width value, I would have had to C&P the required number of non-breaking spaces (&nbsp;) inside the table cell tags to keep the table cell from collapsing, and to push the links to the left and right, as well as put alignment attributes in the outer table cells! A table is all you can use for the links to be appear on the same line - other container elements cause line breaks and offsett the links on separate lines! Also, notice how I properly replaced the closing table tags and paragraph tag, shown in capital letters in the code, in the proper sequence to close PB "Add text" box table template? Just like when using an advanced editor method, you must replace blocked-out table tags, or your webpage may not display correctly in some browsers! Simple, right? Yeah, if you have a ready made template you can just C&P with minimum typing! It's hardly worth the effort if you have to type this code multiple times in a multipage document! <h3> JUST LINK SINGLE PAGES TOGETHER </h3> But, there's a simpler way, many of you may have thought of while reading this! Just use a single PB AE webpage; ie: no page breaks. Use single webpages for the subsequent pages of a multipage document, and use this simple code at the bottom of each webpage to link all the single pages into a multipage document: <plaintext> <table border="0" width="100%"> <tr> <td align="left"> <a href="http://URLofPreviousPage">< previous page</a> </td> <td width="*"> </td> <td align="right"> <a href="http://URLofNextPage">next page > </a> </td> </tr> </table> </plaintext> Here's the way these simple navigational links will look at the bottom of your webpage, above the MSN-TV link, which is not shown here: <table border="0" width="100%"> <tr> <td align="left"> <a href="http://URLofPreviousPage">< previous page</a> </td> <td width="*"> </td> <td align="right"> <a href="http://URLofNextPage">next page > </a> </td> </tr> </table> This way you don't have to worry about messing with the MSN-TV link at the bottom of our webpages. This is the preferred method, and is much simpler, too! Just remember, which ever method you use, to use absolute URL's in your page navigational links when you use a base href in the head tag. I only mentioned the previous method because I used it to jazz up the MSN-TV link on a CSS demo webpage – I put a background image behind the link, that kinda sets it off. See the demo at: <a href="http://community-2.webtv.net/jaxred/style/">http://community-2.webtv.net/jaxred/style/</a>. Scroll down to the bottom of the page and check the way the first code above can be used on our PB webpages. <h3> <uALWAYS USE PRELOAD LINKS> </h3> OK, now there's only one other little "tidbit" of info you need to know about and use when using this method, that is often forgotten when linking subsequent pages of multipage documents - don't forget to put the "next page" and "previous page" links in the head tag of your document so the viewer's browser will cache the pages ready for instant loading from RAM when the viewer clicks the next page, instead of causing a delay while having to retrieve the webpage from a remote server. Use this code: <link rel="prev" href="&#104ttp://URLofYourPrviousPage"> <link rel="next" href="&#104ttp://URLofYourNextPage"> These are the same type of links that are created by PageBuilder's automatic page break option! You probably notice that our PageBuilder webpages only use "next" page links, because it is assumed that we navigate from the first page foward, and cache the previously visited webpage; but, that's not always true - therefore, here I suggest we use a previous page link too, in case a viewer goes to a another page and then wants to go to the previous page, which will not be cached because the viewer hasn't visited the previous page, or the homepage, yet. Simple, but often overlooked courtesy for faster webpage loading, you can add for your viewers! And, here's more about the link tag: you can pre-load (cache) as many different webapges as you like, up to the practical limit of RAM in the viewer's browser - remember the old Classics only have a total of 2meg RAM! The "rel" attribute can have such values as: "help", "index", "alternate", "ref", "bio", "spec", etc. The "rel" attribute value can actually be any arbitrarily chosen "name", and is solely for labeling the link in the source code for the author's information, and has no other purpose. The link's URL's are used to cache the link and deliver the webpage when called. Just a few simple linking options discussed here and in Charlie's webpages can make needed enhancements to your PageBuilder navigation options. Use them, folks; and your viewers will enjoy visiting your webpages! <h3> MAKE A NAVIGATION BAR </h3> If you don't like the WebTV PageBuilder navigational links at the bottom of your multipage document, you can add your own custom navigation bar. The navigation bar can be a simple full-width, one row high table at the bottom of each successive page with some of your favorite links. You can use background colors and simple text for the links in each table cell, or you can use fancy gif symbols for both links and table cell backgrounds. When you use your own custom navigation bar, instead of using pagebreaks in your multipage document, you just have to create a series of single page documents and link them thru your navigation bars on each page. You can add your favorite links to online tools and other resources you think your viewers may like to visit for related additional info on the subject matter of each page. Below is an example of a simple table navigation bar which can be used to go back, home, and to the next page in this document just like the built-in links PageBuilder puts at the bottom of successive pages. I have seen many PageBuilder webpages with custom navigation links, but none with a navigation bar similar to the one below. Below is what a navigation bar could look like at the bottom of our webpages – that surely looks better than those dorky "previous" and "next" links the PageBuilder program places at the bottom of our webpages. <table width="100%" bgcolor="skyblue" border="4"><tr><td align="left" bgcolor="#c6eff7"><a href="http://community-2.webtv.net/jaxred/NavPge/backpage.html"><< BACK</a></td><td align="center" bgcolor="#def38d"><a href="http://community-2.webtv.net/jaxred/NavPge/index.html">HOME</a></td><td align="center" bgcolor="#ffffc6"><a href="http://www.draac.com/">DRAAC's</a></td><td align="center" bgcolor="#ffe7c6"><a href="http://www.msntv.com/">MSN-TV</a></td><td align="center" bgcolor="#f7bdde"><a href="http://www.bethcandy.com/">BETH</a></td><td align="center" bgcolor="#e0e0e0"><a href="http://community-2.webtv.net/jaxred/NavPge/nextpage.html">NEXT >> </a></td></tr></table><table border="0" cellpadding="0" cellspacing="2" width="100%"> <tr> <td> <hr> </td> </tr> <tr> <td align=center valign=middle> <a href="http://www.webtv.net">Powered by WebTV</a> </td> </tr> <tr> <td> <hr> </td> </tr> </table>  Here's the code for the navigation bar: <plaintext> <table width="100%" bgcolor="skyblue" border="4"><tr><td align="left" bgcolor="#c6eff7"><a href="http://community-2.webtv.net/jaxred/NavPge/backpage.html"><< BACK</a></td><td align="center" bgcolor="#def38d"><a href="http://community-2.webtv.net/jaxred/NavPge/index.html">HOME</a></td><td align="center" bgcolor="#ffffc6"><a href="http://www.draac.com/">DRAAC's</a></td><td align="center" bgcolor="#ffe7c6"><a href="http://www.msntv.com/">MSN-TV</a></td><td align="center" bgcolor="#f7bdde"><a href="http://www.bethcandy.com/">BETH</a></td><td align="center" bgcolor="#e0e0e0"><a href="http://community-2.webtv.net/jaxred/NavPge/nextpage.html">NEXT >> </a></td></tr></table><table border="0" cellpadding="0" cellspacing="2" width="100%"> <tr> <td> <hr> </td> </tr> <tr> <td align=center valign=middle> <a href="http://www.webtv.net">Powered by WebTV</a> </td> </tr> <tr> <td> <hr> </td> </tr> </table>  </plaintext> OK, I know the above navigation bar is rather simplistic, but it's good for a demo and a basic starting template. Try to make navigation bars for your own multipage document using the basic template I show above. Customize the border, background, <a href="http://www.angelfire.com/md2/fred/tutorial/buttons.html">buttons</a> and text colors, add custom graphic backgrounds and symbols, add multiple table rows, and add your favorite links. PageBuilders can certainly create better custom navigation than the simple, funky links the PageBuilder program gives our webpages. Our WebTV PageBuilder expert table builders can create some really neat navigation bars. I hope our expert table makers will post a few neat table navigation bar templates for us to use. Also, I'm sure many of you are thinking that we can also use client-side image maps for navigation bars. Image map navigation bars are a little more complex than the scope of this tutorial at this time – maybe more on this subject later. However, our image map experts could post several good image map templates that we could use to change the coordinates (link hot-spots) to our choice of links. You can visit Draac's <a href="http://www.draac.com/imagemap/main1.html">Image Map Generator</a> and make a neat image map navigation bar for your webpages! At Draac's, read the short tutorial, and go to the "Mapper" to make your image map. Search for other online image map generators in the major search engines. Remember: If you use custom navigation bars, you will not have the link tag automatically installed in the head tag to preload (cache) the next page as explained above. If you want the link installed, you will have to extend the head tag using any of the PB AE methods, so you can put the link tag in the extended head tag to be legal and work with all browsers – the HTML DTD provides that the <link> tag is legal only within the head tag. Also, if you use an extended head tag, why not use all link relationship values to link to and preload (cache) the: start (home), previous, help, index, and next pages of your multipage document; ie: rel="start | previous | next | etc", as previous discussed above. <h3> SUMMARY </h3> Navigational option enhancemet is one of the best ways to make your webpages more appealing and "viewer-friendly"! Your webpage navigational options should allow your viewers to select their own choices, instead of being forceably shuttled from page to page they may not want to visit. Give your viewers clear link descriptions and let them make the choices of what subjects they want to visit! When I find additional information and links to other's PageBuilder linking and navigation tutorials, I will add them to this webpage. If you have other informaton on this subject you think others may need to know, let me know, and I will add your suggestions to this tutorial and give you full credit herein! <div align="center">Thanks for visiting my webpage, folks! Have a great day! My best wishes to all Webbers, their families, friends, and neighbors! JaxRed<hr align="center" width="18%"> </div> © 2002 JaxRed - All Rights For Sale - $1,000,000.00 fee per page - Maximum $100,000,000.00 per website - Please mail cashier check contributions to your local and national charities and send me a copy of your receipts totaling the appropriate fee amount for the webpages you use this copyrighted method on - All Lady PageBuilders are exempt from all fees - :-) <grin> P.S. I use the above procedure and code in the links below, even though this is only a single page demo document! Use the Thunderstone WebTV Source Code Viewer to see the code. Remember, you must not remove the MSN-TV link (they can't sell that space to another sucker like B&N!) from the bottom of our webpages - it's a major TOS violation! <hr> <div align="center"><h3>VIEW THE SOURCE CODE OF THIS PAGE</h3> <form method="post" action="http://www.thunderstone.com/texis/demos/dox?demo=http://community-2.webtv.net/jaxred/link0/">View the <input type="submit" name="demo" value="Source Code" onClick="form.submit()" usestyle borderimage="file://rom/borders/buttonborder3.bif"> of this webpage with the Thunderstone WebTV Source Code Viewer. Put a "Source Code" <a href="http://community-2.webtv.net/jaxred/Viewers/">Viewer</a> on your webpages.</form> <table border="0" width="100%"> <tr> <td align="left"> <a href="http://URLofPreviousPage">< previous page</a> </td> <td width="*"> </td> <td align="right"> <a href="http://URLofNextPage">next page > </a> </td> </tr> </table> </TD> </TR> </TABLE> <table border="0" cellpadding="0" cellspacing="2" width="100%"> <tr height=0> <td height=0> <spacer type=block width=30% height=0> <td height=0> <spacer type=block width=30% height=0> <td height=0> <spacer type=block width=30% height=0> </tr> <tr> <td colspan="3"> <hr> </td> </tr> <tr> <td valign=middle width=30%> </td> <td valign=middle width=30%> <center> <a href="http://www.msntv.com">Powered by MSN TV</a> </center> </td> <td align=right valign=middle width=30%> </td> </td> </tr> <tr> <td colspan="3"> <hr> </td> </tr> </table> </BODY> </HTML> <noscript>  </TD></TR></TABLE> <table border="0" cellpadding="0" cellspacing="2" width="100%"> <tr height=0> <td height=0> <spacer type=block width=30% height=0> <td height=0> <spacer type=block width=30% height=0> <td height=0> <spacer type=block width=30% height=0> </tr> <tr> <td colspan="3"> <hr> </td> </tr> <tr> <td valign=middle width=30%> </td> <td valign=middle width=30%> <center> <a href="http://www.msntv.com">Powered by MSN TV</a> </center> </td> <td align=right valign=middle width=30%> </td> </td> </tr> <tr> <td colspan="3"> <hr> </td> </tr> </table> </BODY> </HTML>