|
25 Years of Programming
An open source source for C, C++, OWL, BASIC, MDB, XLS, DOT, and more... |
Home Projects Sitemap Search Blog Forum+Chat About Us Privacy Terms of Use Feedback FAQ Images Services Ads Donate |
|
Blogging: Monetize website:
|
Convert FrontPage 2003 webbot shared borders, link bars, and themes to include pages, HTML link bars, and CSS - Part 2
IntroductionThe reasons these conversions can be worth doing are given in the Introduction for this series, which is in Part 1 (see above). What is a FrontPage navigation webbot?Like the other FrontPage webbots, the Navigation Webbot (as seen in Code View) is merely an HTML comment in the code of a web page. It is only FrontPage that interprets the comment as a set of instructions. The text inside the comment specifies the navbar's properties: whether it is for vertical or horizontal use, whether the links will be text or graphical, which types of pages will be included (children, siblings, etc.), whether it will include a link to the site's Home page, and whether an Up link should be calculated based on the Navigation structure defined in the Web Site > Navigation pane. Also like the other FrontPage webbots, the Properties dialog you see in Design View is just a "user-friendly" interface to the webbot text you saw in Code View. There's no hidden magic. The Properties translate directly to text, and vice versa. Also like the other FrontPage webbots, the end result of a navbar webbot is HTML (plus, in this case, some JavaScript) in the code of a web page. FrontPage creates the HTML as it saves the file, similar to what is described at How Webbot Includes Work: The original webbot tag is converted to two webbot tags, with the generated HTML code inserted between them. You can see the HTML when you open the page in Notepad instead of in FrontPage. Advantages of converting navbars to plain HTML
Disadvantages of converting navbars to plain HTML
To close with a technical point, as you might have inferred, webbot navbars actually are already HTML. In "webbot" form, they are HTML comments. In "saved" form, they are HTML+JavaScript. When you "convert" them, what you're really doing is taking control of the code (and the image files) away from FrontPage. How to convert webbot navbars to HTML1) Create new folders in your websiteFor each page that participates in a navigation link bar, FrontPage creates a set of button images that it stores in folders named _derived. Search through your entire site. In every directory where there is a _derived folder, create your own folder named derived, without the underscore, and (in the FrontPage Folder List pane) copy all files from _derived to derived. You might wind up using only a few of these image files, but it's best to save them all in case you want to use others later. If FrontPage ever deletes the _derived folders or the files in them, you'll still have them in your derived folders. 2) Identify all the pages where you use webbot navbarsThe likely locations are in your borders folder (formerly your shared borders, if you have converted them as described in the Part 1 article, above), and any other pages where you created custom link bars. 3) Do these steps for each webbot navigation bar
I consider it desirable to remove the JavaScript bloat that FP puts in navbar code. All it does is change the color of a button when the mouse pointer hovers over it. Here is some FrontPage navbar code from my site, with the parts I removed in red: This was the original webbot code: <!--webbot bot="Navigation" s-orientation="horizontal" s-rendering="graphics" s-type="siblings" b-include-home="FALSE" b-include-up="FALSE" --> Replacing that line with the code copied from Notepad resulted in this (after reformatting it): <script
language="JavaScript"><!-- After removing all the code in red, the end result is navbar code that looks like this: <a href="rectext02.htm"> A lot better, don't you think? The <a> tag defines an "anchor" (hyperlink). Its href property defines the target page that the link goes to. The <img> tag, because it is between <a> and </a>, specifies that the image object is what the user clicks on to follow the hyperlink. And that, in essence, is what a graphical or button navbar is. This is a navbar with two buttons. It can easily be converted to a plain text navbar: <a href="rectext02.htm">Go to LP Records Listing, Page 2</a>
All I did was remove the <img> tags and replace them with text between <a> and </a>. Now the text is the object that the user clicks on to follow the hyperlinks. This is the essence of a text navbar. This is a navbar with two text links. Webbot tipsA) How to "trick" FrontPage into creating navbar images for youOn my site, I wanted new navbar buttons for pages that didn't already have buttons.
B) How to "trick" other FrontPage webbots into writing HTML for youI don't mind FrontPage's automated methods. I just don't like being locked into them. If I ever need a custom link bar... Well, the end result above turned out to be so simple, I can now create it easily. But if I couldn't figure out how, I'd go ahead and create a <webbot> link bar, then do the procedure above to convert it. That's my plan for any webbot method for which I don't know the corresponding HTML: let the webbot do it, then get rid of the webbot and keep the HTML it created. Additional note 1/2/2008: Last week, I changed the top site-wide navbars from button links to plain text links. It saves about 15KB per page, creates fewer server requests per page load, and I like it better. There are still some examples of manually created button navbars on the pages that start at LP collection plain text database / tips for searching for classical music on the internet. Use View Source to see the code used. The next article is Part 3 - Converting a FrontPage theme to CSS Need help? Ask in the forum. |
|
|
|
|
|
|