A Simple PageBuilder Advanced Editor
This demo Page Two shows how multipage documents with different background images on each page are constructed using this PB AE method. Just enter your empty script tags and new body tags in "Add text" boxes at the top of each new page, immediately following each pagebreak.
In my original publication of this tutorial, I suggested you use both bgcolor and background image code in your body tags, in case your background image file is not delivered by remote servers, for two reasons:
(1) The background image may load very slowly during high web traffic periods and a similar solid bgcolor which loads instantly will look OK and allow the webpage to be read while the background image loads.
(2) If the background image is not loaded, you will still have a similar bgcolor for your wepage. Some webpage providers, like Tripod, frequently stop external linking of background image files – at times I find I can't even access Draac's image pages because Tripod regularly makes the pages unavailable.
But, that suggestion was incorrect – for some reason we cannot use the bgcolor attribute in the new added custom body tag? I thought so because it worked OK in my PageBuilder Basic Editor screen. When I opened the webpage for editing, I saw my added body tag bgcolor load in the thin strip of color that appears where the script and new body tags appear on the webpage until my background image was loaded from the remote server – so I thought an added bgcolor attribute works OK. But, when I published the webpage and accessed it without the image file in cache, I discovered that the bgcolor attribute in the new body tag was overridden by the grey color style I originally selected to open the PageBuilder Basic Editor screen?
With a slow-loading background image file, my published webpage defaults to the initially selected grey background style while the background is loading? That's really odd because you can change the text color with the text attribute in the new body tag as this tutorial demonstrates? Oh shucks! Just another funky, quirky problem we encounter when trying to extend the options of the PageBuilder program with advanced editing methods!
So, folks; until we find a simple work-around procedure code, you will have to initially select a PageBuilder background style that most closely matches your background image, which will allow your webpage to display properly while the image loads from a remote server – this effect is most noticeable when linking to published PageBuilder image webpages! PageBuilder webpage linked images are notoriusly slow-loading, especially during the evening internet high-traffic periods!
I suggest you initially select a solid-color background style that closely matches the background image color, so your text and link colors look OK when the backgound image loads. As an example, you cannot use the grey background style with a dark color image that uses white or shades of grey text – you would have invisible text on your page until the background image loads. I also suggest that you avoid using the PageBuilder fancy theme background styles that contain images – see William Andx's and CT Paso's webpages for cautions and a list of PageBuilder backgrounds that work correctly with this AE method.
It's just trial and error! Preview your editing changes before publishing to an existing webpage. If you are creating a new page, I suggest you leave the page off your public list (uncheck the box titled: Add this page to my public list of pages) of pages until you get it like you want it! Then publish each major editing change, and be sure to have friends look at the page on as many different MSN® TV browser upgrades possible, and check the page on computers using MSIE, Netscape, and AOL browsers before you make your finished page public and announce it in the NG's!
But, for all you PageBuilder experts there is a simple way to override this default bgcolor problem using style code, which makes this method more complicated for beginning PageBuilders. As I stated on Page One, you can use the style sheet code I used for changing link colors to add other body style code; in this case, an overriding default bgcolor. This code works for computers. To see it work with computers, open your browser and go to this webpage. If the background image delays loading, you should see the matching purple bgcolor on the webpage until the background image loads. If the background image loads instantly, hit your browsers "Reload" or "Refresh" (MSIE) button and you'll see the purple bgcolor until the background image reloads.
Here's the code I suggest you use with the code on Page One (with extra comments removed) to add the desired default bgcolor code in the style sheet code:
<script> </script> <body text="navy" background="http://www.netscape.com/assist/net_sites/bg/weave/lipurple_weave.gif"> <style type="text/css"> <!-- body {background-color: b552ad;} a:link {color: green; font-style: italic; text-decoration: underline;} a:visited {color: teal;} --> </style>
Note: if you use this code, just C&P it from this page. Don't use the webpage source code unless you remove the red font color tags from the code.
If you want a matching default bgcolor for MSN® TV viewers, you can add a little javascript to the simple code on Page One. I suggest if you do use javascript, that you eliminate the style code and use only javascript with your added body tag which would then contain only your added background image code.
Here's the code for Page One of this webpage using this method with bgcolor, text, and link colors added with javascript:
<script> </script> <body background="http://community-2.webtv.net/jaxred/ImagesPage5/scrapbookFiles/importD0.gif"> <script language="javascript"> document.bgColor = "#b552ad"; document.fgColor = "navy"; linkColor = "green"; vlinkColor = "teal"; </script>
Note: To use this code, just substitute your desired background image, text, and link colors in the code above; and place the code in a single "Add text" box at the top of your document.
With the above codes, I now have a default purple bgcolor which very closely matches the purple weave background image I download from the Netscape webpage. If the Netscape background image delays loading, I still have the matching purple bgcolor, which allows the webpage text and link colors to appear similar to the completely loaded webpage; instead of having the bgcolor to default to the original grey background I selected to open the Basic Editor, while the background image loads.
OK, at this point I imagine I have made this procedure pretty complicated for beginners, so here's a summary of the simple procedure code for beginners to use:
Select a PageBuilder solid color background style that closely matches your background image color so the default values for text and link color will be suitable for your webpage. In an "Add text" box at the top of your webpage put this code with your background URL:
<script> </script> <body background="http://TheURLofYourBackgroundImage">
Then in subsequent "Add item" boxes, complete your webpage. As you gain experience and knowledge from practice on several webpages, you can begin to use the other more advanced procedures I discussed here, and begin to use some of the other more advanced editing methods discussed in the PageBuilder NG's and expert PageBuilder's tutorials.
Beginning PageBuilders almost always have very long webpage titles in their webpage URL's. Here's the procedure for publishing your webpage with a short URL before you add the webpage title and finish publishing your page:
(1) Open PageBuilder and click on "Create" on the sidebar. Select your desired background style.
(2) Click "Publish" on the sidebar. Fill in the "Title" text box with an appropriate short title, like: "mypage", then complete the "Description" text box, and click "Continue".
(3) On the "Ready to publish" page, leave checked or uncheck the public list box as you desire, then click "Publish".
(4) On the "Congratulations" page, you will see that your webpage has been published on the web with a short title in the URL. Click "Done" to return to the Basic Editor screen for the completion of your document.
(5) Click "Edit title" on the sidebar. Delete the short title previously entered and enter your desired webpage title, if you know it at this point, otherwise you can edit the title later before you publish your final draft. Remember: the title you type in the title text box, will be the title that appears in our browser's status bar at the bottom of our screens. Our status bars will only hold 35-characters. You can also check the box to have your title box entry appear at the top of your webpage; but, you'll soon want to learn to code your own custom title on your webpage.
(6) Add the remainder of your webpage content with any of the "Add item" options. Always click "Done" at the bottom of any "Add item" to save your editing additions and changes.
I also suggest that you use a javascript bug alert on each page so your viewers will immediately recognize their browsers have the infamous WebTV JavaScript Bug! Some beginning Webbers may not recognize the missing title in the status bar and missing background images as being due to the bug! Here's an effective WebTV JS bug script using the popular <noframes> HTML tags and the proprietary WebTV <limittext> tag:
<div align="center"> <noframes> <font color="red"> <limittext value="WARNING: JavaScript Bug Alert – Please Reload (Cmd-R)!"> </font> </noframes> </div>
Note: The bug warning script would be visible to computer surfers who have frames disabled were it not for the use of the <limittext> tag – only WebTV browsers can display the content of the limittext tag's value attribute.
You can place the bug script in the text box with the new body at the top of your webpage, or above or below your webpage title in the main text box, or in a separate text box anywhere you prefer to locate it. The script should be visible within the first screen, preferably near the top of the webpage
Well, that's about all I have on this new PB AE method at the present time. When all the beginners and experts alike test this method more thoroughly and post their comments, will we have a good evaluation of this new procedure!
Again, I say congratulations and thanks to Jana and Chuck for bringing this new method to PageBuilders. And a special thanks goes to William Andx who got a webpage thoroughly testing this method up-and-running almost immediately when he read the NG posts announcing this procedure! All our expert PageBuilders should checkout this method whenever time allows and post any additional variations or other relative info they feel useful.
Discovery of this method resulted from experimenting and testing of ideas, as all new PB AE procedures are discovered. Don't be afraid to try anything you can think of with the PageBuilder editing software program – nothing you can do will cause any damage, no matter what mistakes you make trying out some new idea!
PageBuilder experimentation and feedback to others with tutorials and NG posts has vastly expanded our knowledge base of PageBuilder webpage editing, far beyond what the designers of the program visualized in the beginning! I personally believe many of our PageBuilder webpages are among the most attractive on the internet, especially from our very creative lady PageBuilders! My support of this statement is the fact that this simple PB AE method was created by an apparently beginning PageBuilder trying to learn how to build better webpages!
If you think of something you would like to do to your webpage, do your homework! Visit the PageBuilder NG's and don't be afraid to ask any question about any problems you may have, or special guidance for any particular subject! As you learn, you should always try to help others anyway you can!
Thanks for visiting my webpage, folks! Have a happy day! My best wishes to all Pagebuilders!
JaxRed
JaxRed
