Website Menu Heaven

 

 

TABLE OF CONTENTS

 

          Recommended Free Website Creation Tools       4

                    ImageForge                                                    4

                    IrfanView                                                        4

                    Microsoft Paint                                                4

                    Cool Page                                                       5

PagePlus 5 and PagePlus 8.05                         5

Zoner Draw 3                                                 6

 

Pop-up Menus                                                        6

          What’s in Website Menu Heaven                      6

          The Cool Page Files                               6

          The HTML Files                                      8

Changing or Re-sizing Pop-up Boxes                11

          In Cool Page                                         11

In Microsoft Paint                                  12

In IrfanView                                         14

In ImageForge                                      14

          Deleting Pop-ups                                             15

Adding Text                                                    16

          Adding Links                                                   17

 

Header Panel Boxes                                              17

          What’s in Website Menu Heaven                      17

Changing or Re-sizing Header Panel Boxes      17

          In Cool Page                                         17

In Microsoft Paint                                  17

In IrfanView                                         18

In ImageForge                                      18

          Deleting Header Panel Boxes                          18               

Adding Cool Page Titles                                   18

          Adding PagePlus Titles                                     19

          Adding Side Panel Boxes                                 19

                    Matching Colors in Cool Page                 19                         

                    Matching Colors in ImageForge             19

 

Navigation Bars and Buttons                                20

What’s in Website Menu Heaven                      20

Changing or Re-sizing Navigation Bars

and/or Buttons        20

          In Cool Page                                         20

In Microsoft Paint                                  20

In IrfanView                                         21

In ImageForge                                                                    21

          Deleting Navigation Bars and/or Buttons                                       22

Adding Text and Links Directly to Navigation Bars                          22

Adding Text to Pre-named Navigation Buttons                     23

In Microsoft Paint                                                                23

In IrfanView                                                                       23

In ImageForge                                                                    24

          Changing the File Names of Your Chosen Button Style Buttons       24         

          Adding Links to Button Text                                                           24

          Link Text                                                                                      25

                    Using Cool Page’s Insert HTML Object Feature           25

Link Underlines                                                                   26

          How to Make All Links Have/Not Have Underlines      26

          How to Use HTML to Change Specific Text Boxes       26

Changing Colors, Sizes and Backgrounds of Links                 27

          Changing Colors, Sizes and Backgrounds of Visited Links      28

          Changing Colors, Sizes and Backgrounds of Hover Links      28

                              Changing Colors, Sizes and Backgrounds of Active Links      29

         Why/How to Use &nbsp’s around Link Background Button Text       29

 

General Website Buttons                                                                    29

          What’s in Website Menu Heaven                                                    29

                    Light-up Buttons                                                                 29

                    Pushbuttons                                                                        30

Changing or Re-sizing Buttons                                                       30

          In Cool Page                                                                       30

In Microsoft Paint                                                                30

In IrfanView                                                                       30

In ImageForge                                                                    31

          Deleting Buttons                                                                           31

Adding Text to Buttons                                                                  31

Adding Links to Buttons                                                                 31

Making Our Buttons Work in Cool Page                                          32

An Example of HTML Button Utilization                                          32

 

Link Boxes                                                                                            33

What’s in Website Menu Heaven                                                    33

Side Panel Links Using Our Link Boxes                                           34

Side Panel Links without Our Link Boxes                                        34

 

          The HTML-only Routines                                                                     34

                    Why Not Cool Page Files?                                                              34

How to Use These Routines with Cool Page Webmaster                 34

How to Capture Video Frames                                                       35

The Routines                                                                       36

The Image Rotator                                                             36         

                              The Banner Rotator                                                   36

          The Banner Animator                                                          36

          The Movie Frame Flipper                                                     37

                    The Movie Frame Flipper That Ends                                     37

                    The Clickable Movie Frame Flipper That Ends                       37

 

11 Easy Web-Page-Loading Time-Saving Tactics                             37

                    Optimize Graphics Files with IrfanView                                          37

                    Use Link Background Buttons Rather Than GIFs, JPGs or Events     38

                    Delete the Navbar Buttons and Make Text Links Right on Navbar   38

                    Put Less Words and Graphics Per Page                                          38

                    Make a Less Elaborate Logo or Use Cool Page Title, not Graphics   38

          Use the Same Graphic Repeatedly on a Page                                 39

          Use Navbars with No Pop-up Menus or at Least Less of Them         39         

          Delete Navbar Frame                                                                    39

          Use a Long Colored Cool Page Box as a Navbar                             39

          Put Lesser Items on a Page Your Navbar Links Go To           39

          Use the Same Navbar, Header Panel and Menu Setup Globally      40         

 

Browser Compatibility                                                                         40

          Internet Explorer                                                                          40

          Netscape                                                                                      40

          Mozilla or Firefox                                                                          40

          Opera                                                                                           40

 

Fine-tuning the Pop-up Menus' HTML Routines to Perfection         40

   


Website Menu Heaven

 

 

          Recommended Free Website Creation Tools

 

ImageForge

 

This is the most capable of the freebies, but the Pro version is so much better (and it does .gif files, which the freebie does not) and so cheap at $28 that we can’t help but strongly recommend it. Its strengths are its endless capabilities and ease of use, but its weaknesses are the slowness of some file operations and some editing processes, and the few bugs that have not been dealt with.

          You'll often need to draw or edit in ways that the other freebies aren't good at, and this is the application that comes through for you. But the fact that it won't do .gif files will be a pain here. We say spend the $28 for the Pro version which does .gif files and lots of other stuff too. But if you don’t, then you can turn the file from .gif to .jpg in IrfanView, edit the .jpg file and save as a .jpg in ImageForge, and then change it back to a .gif in IrfanView.

Get it at http://www.cursorarts.com/

 

 

IrfanView

 

This is the most stable of the freebies. It deals with all file types and is great for file size optimization or being a crutch that makes up for the fact that some programs don’t do .gifs (see above). The re-sizing feature and the cropping feature are a snap and very useful, and the color depth, color balance, and color enhancement features are nice. The text insertion feature and the cut and paste features are very weak, and the program doesn’t do any serious graphics work like painting and shapes and lines, but the stuff it does do makes it a hot freebie. And if you want to make thumbnail pictures, this is the program.

          To optimize .jpgs with this application, load your file, go to Save As, select Options, and choose an 80% quality rating. With .gifs, use IrfanView’s Decrease Color Depth on the Image pull-down. We've seen amazing file size shrinkage with this program—making it an indispensable website tool.

          Get it at http://www.irfanview.com

 

 

Microsoft Paint

 

This is the easiest—and sometimes quickest—to use of the freebies. Paste From, Lines, Rectangles, Fill, Select, Cut, and Paste are all easy and quick—and well designed. But cropping is weak, the palette has bugs (light grey can change to light grey-blue), it can crash, you can’t open multiple files, it doesn’t always like being on a local network, and Fill won’t work on colors that are nearly the same—in fact sometimes it just won’t work, period.

          This comes free with Microsoft Windows.        

 

 

Cool Page

 

This is the best of the WYSIWYG website creation tools. The features and robustness of version 2.72 are impressive, and version 3.0 promises to be even better. (This was written before v3.0 was out so we’ll speak only about v2.72.) It’s easy to do text, links, lines, color-filled boxes, image import (.gif or .jpg), frames (not in freebie), backgrounds, HTML object import, CSS events (not in freebie), button programming (not in freebie), image links, invisible boxes, special characters, fonts, preview page on browser, undo with history, cut and paste, grids, zoom, and multiple files open at once without crashing. This is a very powerful program, and the learning curve is fast. The weaknesses are: no master pages, no area select (with rectangle), bugs in events and grouping, no HTML page import, no specific HTML import into <HEAD> or <BODY> tag areas for Javascript/CSS needs, weak object page interface, and text boxes whipping you back to default size, font, and color annoyingly rather than letting you select defaults for the page that it sticks to—but it’s easy to work around these minor annoyances.

We VERY highly recommend the $79 Webmaster version—it has events and these things help you make incredible websites with ease. But feel free to get the freebie first and check it out for yourself. Events will work fine in the freebie’s preview mode—they just won't export or publish. This means you can check out all of our pop-up menus and buttons, or even create your own fancy menus—and save your work. But no export until you get Webmaster.

Get it at http://www.aglasshalffull.org/coolpage.html

 

 

PagePlus 5 and PagePlus 8.05

 

This program (version 5) can do web pages, and give you the convenience of master pages, but we've tried it and don’t recommend it for this purpose. It’s too slow and it bogs down, but, worse yet, it’s not WYSIWYG. It makes stuff that’s the wrong dpi and when you're on the Net with it, it looks different than you'd expect.

          Although you're better off using Cool Page text for title logos than using this program, the same can't be said for later PagePluses. Our PagePlus 8.05 (not free) does hot text logos. The main reason to get version 5 and register it is to get on their email list. They occasionally send out great offers.

          Get it at http://www.freeserifsoftware.com

Get version 8 (not cheap) at http://www.serif.com/products.asp

          Or at http://www.softwareboy.com/100772.htm

 

 

Zoner Draw 3

 

This vector graphics program does some nice gradient fills but don’t bother with the font stuff.

Get it at http://www.sharewarejunction.com/info.asp?ProductID=2378

 

 

Pop-up Menus

 

What’s in Website Menu Heaven

 

          The Cool Page Files

 

There are 66 pre-set-up Cool Page (.cpg) web pages with top and side navigation bars with navigation buttons, pop-up menus, header panel boxes, side panels, and the needed inserted events and HTML/CSS object for link text formatting. All the files will work with the freebie Cool Page (you can test them in the preview feature), but you can't export or publish our files unless you have the Webmaster version of Cool Page.

          The 66 pre-set-up Cool Page pages above have navbars, header (top) and side panels, lots of pop-up menus, and nav buttons. However, if you buy Website Menu Heaven but don't have or get a Webmaster, you still get all 66 of these great-looking pre-set-up web pages—as HTML files. You can double-click them and check out how they work, stick them in your HTML editor, add text and links and buttons and logos and banners, delete a few unwanted buttons, pop-ups, or navbars, and save. Great web pages are just that easy to make, complete with browser detectors.

So if you're very attached to a certain HTML editor, then ignore the Cool Page info we've been giving you and will give more of later on. You don't need it. We just very highly recommend Cool Page, and have built hundreds of Cool Page web pages with it.

 

Explanation of Folder Names:

navigation-bars-and-special-buttons—all (21) our various navbars in one place, with a few special buttons thrown in

marketing-page—a page with a nice sampling of Website Menu Heaven’s features

web-pages-with-top-popups—20 pre-set-up web pages with top and side navbars and pop-up menus attached to the top (header) navbar

web-pages-with-side-popups—25 pre-set-up web pages with top and side navbars and pop-up menus attached to the side (margin) navbar

web-pages-without-popups—21 pre-set-up web pages with top and side navbars but no pop-up menus

banner-rotator-etc—movie frame flippers, banner/image  rotator/animator

popup-boxes—100 pop-up boxes (88 x 115) to choose from (for pop-up menus)

light-up-buttons—60 website buttons; pairs that are lit/unlit

test-video-frames—42 movie frames to test our movie frame flippers with

pushbuttons—40 website buttons; pairs that are pushed/unpushed

header-boxes—20 header boxes (800 x 150) for the top of your website pages

side-link-boxes—4 graphical boxes in which to put links

prenamed-navigation-buttons—48 buttons which have the needed file names to enable them to work perfectly in your navbars once you add text

navigation-bar-buttons—116 buttons sized to fit in our navbars

 

Explanation of Pre-set-up Web Page File Names:

(all these pre-set-up web pages below have navbars top and side; all navbars are of large height unless it says “small” or “medium”; all pop-ups need clicking to pop unless the file name says “auto”; link buttons are not real buttons—they just respond like buttons; all side navbars have 8 button frames whether or not there are buttons in them; all top navbars have 8 button frames as well unless asterisked*)

(below are just 23 of the 66 pre-set-up web page files available—it’s assumed that if any have more pop-ups or buttons than you want, you'll edit them using this document’s instructions—it’s easy)

Nav4*—a  4-button navbar on top, buttons top and side, no pop-ups

Nav5*—a  5-button navbar on top, buttons top and side, no pop-ups

Nav6*—a  6-button navbar on top, buttons top and side, no pop-ups

Nav7*—a  7-button navbar on top, buttons top and side, no pop-ups

Nav10*—a  10-button navbar on top, buttons top and side, no pop-ups

Nav12*—a  12-button navbar on top, buttons top and side, no pop-ups

Nav14*—a  14-button navbar on top, buttons top and side, no pop-ups

Nav16*—a  16-button navbar on top, buttons top and side, no pop-ups

Nav16-nobuttonside*—a  16-button navbar on top, buttons on top, no pop-ups

Navmedium16-mediumlinkbuttontop*—a  16-button medium height navbar on top with link buttons, buttons on side, no pop-ups

Navsmall16-smalllinkbuttontop*—a  16-button small height navbar on top with link buttons, buttons on side, no pop-ups

Navsmall16-smalllinkbuttontopandside*—a  16-button small height navbar on top with link buttons and an 8-button small navbar on side with link buttons, no buttons, no pop-ups

Nav8—an 8-button navbar on top, buttons top and side, no pop-ups

Nav8pop—an 8-button navbar on top, buttons top and side, side pop-ups

Nav8pop-biglinktop-gobold—an 8-button navbar on top, buttons on side, side pop-ups, big link text on top navbar button frames that gets big and colorful (in IE) when cursor is over it

Nav8pop-auto—an 8-button navbar on top, buttons top and side, side pop-ups that pop when the cursor is over the button

Topnav8pop—an 8-button navbar on top, buttons top and side, top pop-ups

Topnav8pop-auto—an 8-button navbar on top, buttons top and side, top pop-ups that pop when the cursor is over the button

Topnav8pop-nobuttons—an 8-button navbar on top, no buttons, top pop-ups

Topnav8pop-nobuttontop—an 8-button navbar on top, buttons on side, top pop-ups

Topnav8pop-nobuttonside—an 8-button navbar on top, buttons on top, top pop-ups

Topnav8pop-auto-smalllinkbuttonside—an 8-button navbar on top, buttons on top, small link buttons on small side navbar, top pop-ups that pop when the cursor is over the button

Topnav8pop-biglinkbuttonside—an 8-button navbar on top, buttons on top, big link buttons on big side navbar, top pop-ups

 

 

          The HTML Files

 

There are .html but no _nn4.html (Netscape 4.x) files in our Cool Page generated web pages with all the navbars and pop-ups. When the browser detector in these files sees that users are in Netscape 4.x, users will see a message that explains that the menus work in Netscape 6.0 and above but will NOT work in anything earlier. This is due to 4.x’s incomplete support of css, Javascript, and events. This means that when you export your Cool Page generated web pages’ .cpg files and make them into HTML files, you can delete all _nn4.html files. We’re just referring to the 66 pre-set-up web pages with menus here, not all _nn4.html files from Cool Page!

          When you deal with the 6 banner rotator and frame flipper types of files, they’ll work in all recent browsers without the need for a special Netscape file. There are no Cool Page files for these types of functions, but you can stick our HTML rotator routines into the HTML export files of Cool Page files—the ones with names like nav8pop.html.

          Here’s a sample of what you’d do to dump the last header navbar buttons and pop-up in the Topnav8pop.html file and substitute a 7-button navbar frame for the 8-button one, or just dump the top and side navbar frames (but not the buttons or events):

 

1.   Open the file in NotePad or better yet Editor2 and search for “left:” and you'll see the farthest right elements are (a) this button (the buttons are all 72 wide and big ones are 28 tall) that hides on loading,

 

<DIV ID="idElement3211" style="position:absolute; top:117px; left:660px; width:72px; height:28px;"><IMG SRC="bottom8lit.gif" NAME="idElement3211Img" ID="idElement3211Img" WIDTH=72 HEIGHT=28 BORDER=0 onLoad="javascript:jsHide('idElement3211');return true"></DIV>

 

and (b) this cluster of javascript and events that’s at the same left position (660) and obviously is the code for “lighting up” the button (bottom8lit.gif is lighted and bottom8.gif isn't) that “hid” above by revealing it as well as the code for hiding it again, and the code for executing pop-up-related events such as moving the text box (element 88) and pop-up box (element 18) and the two invisible cursor-position-detector boxes (elements 26 and 27) from their hidden positions under the blue side margin panel and into their “working” positions near the two “bottom8” buttons where events occur:

 

<DIV ID="idElement3311" style="position:absolute; top:117px; left:660px; width:72px; height:28px;"><A onMouseOver="javascript:jsReplaceSrc('idElement3311',jsidbottom8litxgifImg);return true" onClick="javascript:jsNewRect('idElement26',451,0);jsNewRect('idElement27',743,0);jsNewRect('idElement18',653,151);jsNewRect('idElement88',653,146);return true" onMouseOut="javascript:jsReplaceSrc('idElement3311',jsidbottom8xgifImg);return true"><IMG SRC="bottom8.gif" NAME="idElement3311Img" ID="idElement3311Img" WIDTH=72 HEIGHT=28 BORDER=0></A></DIV>

 

2.   Delete the above two code blocks, and then dump the elements they use, which are all the code blocks below:

 

<DIV ID="idElement26" style="position:absolute; top:758px; left:9px; width:200px; height:500px;"><A onMouseOver="javascript:jsNewRect('idElement26',5,755);jsNewRect('idElement18',5,755);jsNewRect('idElement88',4,444);return true"><IMG SRC="t.gif" NAME="idElement26Img" ID="idElement26Img" WIDTH=200 HEIGHT=500 BORDER=0></A></DIV>

 

<DIV ID="idElement27" style="position:absolute; top:754px; left:45px; width:56px; height:478px;"><A onMouseOver="javascript:jsNewRect('idElement27',5,755);jsNewRect('idElement18',5,755);jsNewRect('idElement88',4,444);return true"><IMG SRC="t.gif" NAME="idElement27Img" ID="idElement27Img" WIDTH=56 HEIGHT=478 BORDER=0></A></DIV>

 

<DIV ID="idElement18" style="position:absolute; top:595px; left:36px; width:88px; height:115px;"><A onMouseOut="javascript:jsNewRect('idElement18',5,755);jsNewRect('idElement88',4,444);return true"><IMG SRC="r14.gif" NAME="idElement18Img" ID="idElement18Img" WIDTH=88 HEIGHT=115 BORDER=0></A></DIV>

 

<DIV ID="idElement88" style="position:absolute; top:455px; left:36px; width:87px; height:112px;"><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=87><TR VALIGN=top><TD><DIV align=left><A HREF="nav8pop.html"><FONT CLASS=Arial-13pxn><BR>

</FONT></A><FONT CLASS=Arial-13pxn>&nbsp;</FONT><A HREF="topnav8pop.html"><FONT CLASS=Arial-13pxn>&nbsp;&nbsp;choice 1b8&nbsp;&nbsp;</FONT></A><FONT CLASS=Arial-13pxn><BR>

&nbsp;</FONT><A HREF="topnav8pop.html"><FONT CLASS=Arial-13pxn>&nbsp;&nbsp;choice 222&nbsp;&nbsp;</FONT></A><FONT CLASS=Arial-13pxn><BR>

&nbsp;</FONT><A HREF="topnav8pop.html"><FONT CLASS=Arial-13pxn>&nbsp;&nbsp;choice 333&nbsp;&nbsp;</FONT></A><FONT CLASS=Arial-13pxn><BR>

&nbsp;</FONT><A HREF="topnav8pop.html"><FONT CLASS=Arial-13pxn>&nbsp;&nbsp;choice 444&nbsp;&nbsp;</FONT></A><FONT CLASS=Arial-13pxn><BR>

&nbsp;</FONT><A HREF="topnav8pop.html"><FONT CLASS=Arial-13pxn>&nbsp;&nbsp;choice 555&nbsp;&nbsp;</FONT></A><FONT CLASS=Arial-13pxn><BR>

&nbsp;</FONT><A HREF="topnav8pop.html"><FONT CLASS=Arial-13pxn>&nbsp;&nbsp;choice 666&nbsp;&nbsp;</FONT></A></DIV></TD></TR></TABLE></DIV>

 

3.   Now search for “navbar” and you’ll find:

 

<DIV ID="idElement25" style="position:absolute; top:113px; left:146px; width:590px; height:35px;"><IMG SRC="navbar8.gif" NAME="idElement25Img" ID="idElement25Img" WIDTH=590 HEIGHT=35 BORDER=0></DIV>

 

<DIV ID="idElement24" style="position:absolute; top:202px; left:36px; width:77px; height:236px;"><IMG SRC="sidenavbar8.gif" NAME="idElement24Img" ID="idElement24Img" WIDTH=77 HEIGHT=236 BORDER=0></DIV>

 

4.   If you're sure you don’t like our navbar frames, delete them, since they have only aesthetic purpose, but if you like them, leave the side navbar alone and merely change the “navbar8.gif” to “navbar7.gif” since otherwise the last button position will be obscenely empty.

 

5.   Search for “bottom8” and delete code that uses it, like:

 

var jsidbottom8litxgifImg=new Image();

var jsidbottom8xgifImg=new Image();

jsidbottom8litxgifImg.src='bottom8lit.gif';

jsidbottom8xgifImg.src='bottom8.gif';

 

6.   Save the file and test it. You can deal with side navbar edits now, and if you don’t even want one, then search for all the elements that it relates to, as we just demonstrated for the top navbar, and dump them.

 

7.   Don’t delete the r14.gif file that gets used by all pop-up events, as all the pop-ups use it. Later we’ll get into shortening and lengthening these pop-up boxes according to your needs.

 

8.   In order to use the pop-up menus, you need them to have your links, your text-based menu selections, and your text box and pop-up box lengths (the widths need to be left as is, but selection text may be several lines long, if desired). Add/subtract 16 pixels for each line more/less that you require. Be careful about bold text—some browsers take more room to display it than others. If you want a 4-choice rather than a 6-choice pop-up, resize the pop-up box (see below) and delete the extra choices in the text box. In order to make the link text look right when your cursor is on it, you need &nbsp characters on either side of the text, not regular spaces. All text that’s on our buttons (in files with the words “linkbutton” in them) need &nbsp and text characters only, and these text boxes’ widths also need to be left as is. HTML files ending in “gobold” aren't as fussy about the widths of text on buttons or the &nbsp characters, but the more you approximate what we've done—which has been tested and works—the better.

 

9.   Now go test topnav8pop-auto-nobuttons.html. Notice that if you whip the cursor back and forth on the navbar, 2 menus can-rarely-show up at once. People don't use menus this way, but if you want this to stop, that's no problem! See the last chapter in this document: Fine-tuning the Pop-up Menus' HTML Routines to Perfection. The answer is there.

 

 

Changing or Re-sizing Pop-up Boxes

 

          In Cool Page

 

When you click on images or text boxes in Cool Page, you can then press ctrl j and change position and size and layer.

Pop-up text should be on a higher numbered layer than pop-up boxes, which in turn should be on a higher layer than the web page’s general text boxes.

Don’t exceed 17 lines tall in the first pop-up on the left of your top navbar’s pop-ups—it will work fine but the side panel will take a slight bite out of the box’s side. And for any of the 8 pop-ups, more than about 25 lines tall starts looking a bit silly, but it will work okay.

To resize pop-up text boxes, add &nbsp characters (click the arrow against the line on the advanced toolbar just above the special character quotes sign) only—no regular spaces—as needed to get to the box edge. Then press return, use the correct number of &nbsp characters, and type. See Adding Text, below. Regular spaces are okay in between words only.

          To resize the pop-up box, first determine which box you're dealing with. Double-click the button which will make the pop-up activate. Look under Events for the pop-up box element name and the text box element name. The element names don’t tell you much, do they?

So let’s get some background info and then maybe we’ll be able to see some clues about which box we’re dealing with: Set invisible object borders and text borders to visible under the View pull-down menu. Go down to the bottom half of the screen and drag the blue side margin panel way to the right and look at all the hidden objects. Click on various ones. If the image file name under Image (after you double-click) is t.gif, that’s an “invisible object.” If the Action under Events is SetImage, the image file it refers to is a button. If the image file name under Image starts with top, bottom, or side, that’s a button, not a pop-up or text box. If the image file name under Image is r14.gif, that’s a pop-up box. If there is no Image or Events tabs when you select with ctrl j, that’s a text box.

Now: the riddle of how to tell a pop-up box and text box when you double-click a button in Cool Page. With side pop-ups, to find the text and pop-up boxes, look for a horizontal position of around 149 under the Target Object in Events. There are only 2 objects that have such a number. The one with the highest numbered vertical position is the text box. The other one is the pop-up box. With top pop-ups, the object with a vertical Target Object position in Events that’s around 146 is the text box and the one around 151 is the pop-up box.

Now we’re ready to resize the pop-up and text boxes, since we can figure out which element number they are. You’ve already moved the blue side panel. Grab all the text boxes and pop-up boxes and spread them out. Find the ones that correspond to the element numbers you just discovered. Are you needing 6 choices—our default size? If you need 4, the re-sizing must begin. Delete the last 2 lines of text and reduce the pop-up box by 16 for each line dumped, which is (6 – 4) x 16 = 32 pixels. Keep the font Helvetica and the size 10.

If you reduce the pop-up box size by entering new width and height sizes for the pop-up box’s size, you'll want to inspect the change to see if you like it, and, if not, change it in one of the programs below, such as Microsoft Paint. Our default pop-up box, r14.gif, MUST be changed outside of Cool Page, since it has little button boxes for each line of text, and text lines wouldn’t fit right if you made the change in Cool Page. But many of our pop-ups have no such button boxes (or divider lines) that set off where text lines go. These are okay for Cool Page to change.

Make certain you read Adding Text, below.

 

 

In Microsoft Paint

 

Here’s how to shorten a pop-up box:

 

1.   Open the image in Microsoft Paint; let’s use r14.gif. Click on Attributes on the Image pull-down. Check the height. Let’s say we want to go 2 text lines shorter so there are only 4 choices. That’s 115 (current height with 6 choices) minus (2 x 16) or 83. But don’t change the measurements yet.

2.   Click the selection box at the top of the toolbar and select the entire bottom half (approximately) of the box, making sure you surround all the way to the bottom and side edges. Press ctrl c. Now go change the box Attributes you saw above to 83 tall. Now press ctrl v.

3.   Drag the captured graphic down until it makes a box with 4 equal rectangles and equal spaces between them. Left-click. Select a different tool. If you're unsure of your work, use the magnification feature (click on the magnifying glass) and check it.

4.   Save this new box with a new name. You don’t need to import this image using ctrl i in Cool Page. Just make sure it gets put into the right folder—the one your Cool Page file is in.

5.   Now open the .cpg file you're working on in Cool Page. Double-click on the old pop-up box, and change its image file name under Image to your new name. And then go to the tab where the image size is and change your box height from 115 to 83. Save the .cpg file and test it in Preview.

6.   To shorten a pop-up with no rectangles or lines such as r29.jpg, just change the height in Attribute under Image to the new value and save.

 

Here’s how to lengthen a pop-up box:

 

1.   Open the image in Microsoft Paint; let’s use r14.gif. Click on Attributes on the Image pull-down. Check the height. Let’s say we want to go 19 text lines longer so there are 25 choices—or at least 25 lines (some links can be more than one line long). That’s 115 (current height with 6 choices) plus (19 x 16) or 419. But don’t change the measurements yet. But click on the magnifying glass and select 2x.

2.   Click the selection box at the top of the toolbar and select the entire box from the top of the top text rectangle down. Make sure your crosshairs marker is even with—and not above—the top line of the top text rectangle, and that you surround all the way to the bottom and side edges. Press ctrl c. Now go change the box Attributes you saw above to 419 tall. Now press ctrl v.

3.   Drag the captured graphic down until it makes a box with 12 equal rectangles and equal spaces between them. Left-click. Do the same ctrl v, drag, and click operation 3 more times. But the last time you have only 1 more rectangle to go, and your moving graphic should just cover—but not go lower than—the white space of the blank part of the shape. Select a different tool. If you've done it all right, there will be an equal amount of space between all boxes and when you use the shape all text will be centered nicely in boxes. If not, try again.

4.   Save this new box with a new name. You don’t need to import this image using ctrl i in Cool Page. Just make sure it gets put into the right folder—the one your Cool Page file is in.

5.   Now open the .cpg file you're working on in Cool Page. Double-click on the old pop-up box, and change its image file name under Image to your new name. And then go to the tab where the image size is and change your box height from 115 to 419. Save the .cpg file and test it in Preview.

6.   To lengthen a pop-up with no rectangles or lines such as r29.jpg, just change the height in Attribute under Image to the new value, select all with ctrl a, press ctrl c, press ctrl v, drag it until the top of the moving graphic lines up with the bottom of the image, left click, repeat as needed, and have the last time you do it be done the same way. This will mean you'll be hanging the moving graphic way below the bottom of the new shape’s height before you left click. Now save.

 

 

In IrfanView

 

As great as this program is with optimizing, re-sizing, color depth, color balance, color enhancement, and thumbnails, we must confess to feeling very negative about its cut and paste features. In fact, they stink! Use anything but this for cut and paste.

 

 

In ImageForge

 

Here’s how to shorten a pop-up box:

 

1.   Open the image in ImageForge; let’s use r14.gif (the freebie doesn’t do .gifs—get Pro). Let’s say we want to go 2 text lines shorter so there are only 4 choices. That’s 115 (current height with 6 choices) minus (2 x 16) or 83. Use the left magnification slide-bar to increase magnification to 3.

2.   Click the scissors tool on the toolbar and select the entire bottom half (approximately) of the box, making sure you surround all the way to the bottom and side edges. Press ctrl c. Now go click the scissors tool again and select the entire top three-quarters of the box, but before you click, notice the cursor coordinates at the bottom left corner of the screen. Get the height (H) up to 83 tall and left click. Then click Crop on the Picture pull-down. Now press ctrl v.

3.   Drag the captured graphic down until it makes a box with 4 equal rectangles and equal spaces between them. Select a different tool. Now select Info on the Picture pull-down to see if the picture is 83 tall. If you're unsure of your work, increase the magnification feature and check it out and make sure the text rectangles are all the same.

4.   Save this new box with a new name. You don’t need to import this image using ctrl i in Cool Page. Just make sure it gets put into the right folder—the one your Cool Page file is in.

5.   Now open the .cpg file you're working on in Cool Page. Double-click on the old pop-up box, and change its image file name under Image to your new name. And then go to the tab where the image size is and change your box height from 115 to 83. Save the .cpg file and test it in Preview.

6.   To shorten a pop-up with no rectangles or lines such as r29.jpg, just change the height in Resize on the Picture pull-down but make sure the Maintain Proportional Size box is not checked. Save it.

 

 

Here’s how to lengthen a pop-up box:

 

1.   Open the image in ImageForge; let’s use r14.gif (the freebie doesn’t do .gifs—get Pro). Let’s say we want to go 19 text lines longer so there are 25 choices—or at least 25 lines (some links can be more than one line long). That’s 115 (current height with 6 choices) plus (19 x 16) or 419. Use the left magnification slide-bar to increase magnification to 3.

2.   Click the scissors tool on the toolbar and select the entire box from the top of the top text rectangle down. Make sure your crosshairs marker is even with—and not above—the top line of the top text rectangle, and that you surround all the way to the bottom and side edges. Press ctrl c. Now go change the box height to 419 tall with Enlarge Canvas on the Picture pull-down. Now press ctrl v.

3.   Drag the captured graphic down until it makes a box with 12 equal rectangles and equal spaces between them. Left-click. Do the same ctrl v, drag, and click operation 3 more times. But the last time you have only 1 more rectangle to go, and your moving graphic should just cover—but not go lower than—the white space of the blank part of the shape. Select a different tool. If you've done it all right, there will be an equal amount of space between all boxes and when you use the shape all text will be centered nicely in boxes. If not, try again.

4.   Save this new box with a new name. You don’t need to import this image using ctrl i in Cool Page. Just make sure it gets put into the right folder—the one your Cool Page file is in.

5.   Now open the .cpg file you're working on in Cool Page. Double-click on the old pop-up box, and change its image file name under Image to your new name. And then go to the tab where the image size is and change your box height from 115 to 419. Save the .cpg file and test it in Preview.

6.   To lengthen a pop-up with no rectangles or lines such as r29.jpg, just change the height (in Enlarge Canvas on the Picture pull-down) to the new value after selecting all with ctrl L and pressing ctrl c. Now press ctrl v, drag it until the top of the moving graphic lines up with the bottom of the image, left click, repeat as needed, and have the last time you do it be done the same way. This will mean you'll be hanging the moving graphic way below the bottom of the new shape’s height before you left click. Now save. This will keep the pattern in the box the same size. If you're okay with stretching the image, then instead of what we've just explained, change the height in Resize on the Picture pull-down but make sure the Maintain Proportional Size box is not checked. Save it.

 

 

          Deleting Pop-ups

 

We've explained this pop-up deleting process for HTML programmers in the section above called The HTML Files. But for Cool Page users, you merely turn on invisible object borders and text borders in the View pull-down, and then delete unwanted elements.

If you don’t want buttons or even the navbar frame, click on them and press your delete key. Since the Events which are the pop-up activation are in buttons (or invisible objects shaped like buttons), dumping them gets rid of the pop-ups that arise from them. But to save memory, get rid of all the elements associated with the pop-ups as well. To do that, you must get all element names from the Events feature of the button before you delete them. Double-click the button and select the Events tab and press the down arrow to see the other events beside the first one. Make notes on the elements, recalling what we've already explained above about how to tell whether elements are pop-ups boxes, text boxes, or invisible object boxes—these latter are for cursor position detection.

          Armed with the element numbers to delete, move aside the blue side panel and spread out the objects and select them and ctrl j them and check their element names against your “hit” list. Select and delete the doomed elements.

Do not try to group anything—you'll crash your whole .cpg file, since Cool Page 2.72 has lots of grouping bugs.

(It has Events bugs too, but all you need to do when Events start acting up during data entry is close the Image Object Properties box [that pops up when you double-click] by clicking OK (when you can't get Move coordinates in or can't find an element in the Target Object element list), and then double-clicking the nav button again and when you check out Events again, you'll now be able to get Move coordinates in and find an element in the Target Object element list that was missing before. This is known as a work-around.)

If you delete a navbar but want a smaller one, look in the navbar object folder.

 

 

Adding Text

 

First read Changing or Re-sizing Pop-up Boxes/In Cool Page, above. Then figure out the selection text and replace our text with yours, but keep the &nbsp (nonbreaking spaces) characters on each side of your text so that the link width stays the same. It’s okay to make the text box taller or shorter, but not wider. Use as many lines as you need for a selection, but keep the &nbsp’s balanced. Count the total number of lines of text and make the pop-up box correspond. Count up or down from 6 lines. E.g., if the text box is 4 lines tall, then the pop-up box needs to be 2 x 16 pixels shorter. If the text box is 25 lines tall, then the pop-up box needs to be 19 x 16 pixels taller. Keep the font Helvetica and the size 10.

          To add pop-up text, you need to use OUR text boxes and OUR pop-up boxes (it’s possible to use your own pop-up box, but it won't work unless you start from OUR boxes first—see step 5 about lengthening boxes which is 2 sections ago). Scroll down the page and move aside the blue side panel and spread out the text box objects and select them and ctrl j them and check their element names against your list of pop-up box names with the names of the text boxes after them. Reread Changing or Re-sizing Pop-up Boxes/In Cool Page as needed if you don’t understand how such a list is made.

          Now enter the appropriate text in each box, keeping the &nbsp balance equalized like we had it when you found it and avoid regular spaces except between words. The &nbsp icon in Cool Page is the arrow against the line on the advanced toolbar just above the special character quotes sign. Test them in Preview before putting them back to bed behind the blue side panel and re-saving.

 

 

          Adding Links

 

Select the text with Shift and arrows or with regular mouse cursor selection methods. Never mind our link name in the Links toolbar—press Browse and select your own. Remember to choose Top in the Window area of the Links Toolbar if the link goes to another of your web pages (or New if your link leaves your site or Self if it goes to an anchor).

 

 

Header Panel Boxes

 

          What’s in Website Menu Heaven

 

There are 20 light-to-dark header panels in the header-boxes folder.

 

 

Changing or Re-sizing Header Panel Boxes

 

          In Cool Page

 

If you want to save web page loading time, use a simple Cool Page box instead of our stuff, but it won't be as elegant, and most sites are using gradient filled colors like this to be in style. To make the substitution to Cool Page, first check the size and position of the box and make sure you duplicate it with your replacement. Go to the Objects Toolbar and use the Box feature. Don’t waste time dragging. Type in the size and position you want and select a color on the palette you get when you click the color button on the Text Toolbar. If you like the color we used on the side bar panel, click on it and check its color by going to the Define Custom Color area of the palette and checking the red, green, and blue numbers. Use these in your header box. Or change the side panel to match your header panel.

          To change to a different one of our panels, just delete the blue one and bring in the new one with Image Import on the Object Toolbar and type in its position after you press ctrl j to get the Image Object Properties box.

          To resize a header, type in its size after you press ctrl j to get the Image Object Properties box.

 

         

In Microsoft Paint

 

We suggest not using Microsoft Paint with header bars, since it can't do gradient fills but it can mess up gradient fills when you save them. If you want a regular .gif header box, the only reason to use Microsoft Paint is if you're decorating the box with a logo or title made elsewhere and you want to merge them, because if you just want a solid color box, use Cool Page to make the box. A better merge program is ImageForge, for most purposes.

           

 

In IrfanView

 

IrfanView can't do header boxes or fills but it’s great for optimizing stuff made by PagePlus 8.05 or ImageForge. Also, IrfanView is good at color balance and color enhancement. On the Image pull-down is Enhance Colors, and this leads you to the Color Balance or Brightness adjusters. ImageForge has these too.

 

 

In ImageForge

 

The best gradient (light to dark) fills are in PagePlus 8.05, but the ones in ImageForge are nearly as good. ImageForge is a great program for many types of graphical tasks, and headers are one of them. The Replace Color feature in the Fill tool can be a great help for nongradient filled headers needing color adjustment, but not for gradient filled ones. Use ImageForge’s color balance or brightness adjusters on the Effects pull-down menu instead, which come in several flavors: Brightness, Hue and Saturation, Gamma Correction and Tint.

          The Enlarge Canvas, Crop, and Resize features on the Picture pull-down are all you need for re-sizing—and on the same pull-down is Info for checking your size. The upper left corner of the screen has image size as well.

 

 

          Deleting Header Panel Boxes

 

In Cool Page, select the header and press ctrl x or your Delete key, in order to dump the header. If you want just a title/logo and no top or side panels, you'll save page size but it won't be easy to give the page a lot of class.

 

 

Adding Cool Page Titles

 

Cool Page can make good titles that save web page loading time, by using text fonts rather than images. Our marketing-page folder has a PagePlus title in the upper corner but a Cool Page title in the big box. It was done with two text boxes with titles that were alike except that one was a different color, at slightly different coordinates, and behind the other. The effect is the text has a bit of depth. You could even simulate shadows this way in Cool Page, but not as good as you can with PagePlus, as the title in the corner shows.

 

 

          Adding PagePlus Titles

 

The best fancy title making program is PagePlus 8.05, and the best nonword logo maker is ImageForge, but you could use both and merge them in ImageForge.

To make a title in front of a header but merged, like the one in our marketing-page folder, import one of our headers into PagePlus 8.05 or above and use it as a background for the text title you make in PagePlus 8.05. Then save the two as a PagePlus 8.05 file with Save As on the File pull-down and then Export as Picture—also on the File pull-down.

          To load in the header, use the Insert pull-down’s Picture feature and choose From File. To get the text title started, change the magnification number on the upper right bar to 100%, click the big A—which is the Artistic Text Tool—on the side bar and click a bit lower than you'd think you should on the header, then select 36 points on the upper bar and Smashed SF as a font on the drop-down next to it. Select a color such as orange from the color palette on the right, and then choose Filter Effects on the Format pull-down. Click on Drop Shadow, Bevel, etc., and fool with the settings. As you can see, it can take hours to learn all the potentials of such a tool—and it is addicting! Once you like your work, save as already detailed. Optimize this in IrfanView. You may need to go to 85%, 90%, or even 95% quality in Save As and Options since some gradient fills get too messy once you lower quality.

 

 

          Adding Side Panel Boxes

 

Clicking the Box Tool on the Objects Toolbar gives you a way to make a box, but then you have to figure out the color. On our web pages, we make the color match the color on the part of the header panel that touches the side panel.

 

 

                    Matching Colors in Cool Page

 

To match the header and side panel colors in Cool Page, you have to eyeball them. Double-click the side panel and click the color button on the Box or Line Object Properties Box and the Define Custom Colors button and look at the red, green and blue numbers. Adjusting these numbers changes the color of your box. If you just inserted a new header and need to match it, start with the closest color on the palette and then juggle the numbers. Once you get it, save your box.

 

 

                    Matching Colors in ImageForge

 

There's an easier way than the above number juggling to match colors. Again ImageForge triumphs over the rest. Take the header into ImageForge with Open and select the Color Extractor Tool in the upper right part of the toolbar. It looks like a hypodermic needle. Move the needle to a spot ½ inch from the left end of the header near its bottom edge. The R, G, B numbers on the status bar at the bottom of the screen need to be jotted down. That’s all the ImageForge action for now, so return to Cool Page and make a side panel with a Custom color with those numbers for red, green, and blue. You may need to fine-tune it; e.g., if it’s a tad too red, decrease red by 3.

 

 

Navigation Bars and Buttons

 

What’s in Website Menu Heaven

 

• 7 side (margin) navigation bar frames of 3 heights and for 4 to 8 buttons

• 14 top of page navigation bar frames of 3 heights and for 4 to 16 buttons

• 40 pushbuttons with up and down button pairs

• 60 light-up buttons with on and off button pairs

• 116 navigation bar buttons

• 48 pre-named navigation buttons

 

 

Changing or Re-sizing Navigation Bars and/or Buttons

 

All that’s really changeable about our navbar frames is that you can delete them from the web pages in Website Menu Heaven and it won't affect functioning, or you can change the color of the frame. Once you change the size, the buttons won't fit. But since there are already frames of 3 heights and for 4 to 16 buttons, you don’t have a need to change them anyway. But let’s say (A) you want a button to be more blue and (B) you want to take the 3-D aspect away from the navbar frames in any of these programs below.

 

 

          In Cool Page

 

You cannot mess with either the buttons or navbar frames in Cool Page, except their sizes, and if you want buttons and frames to be compatible with each other, size is a bad thing to alter.

 

 

In Microsoft Paint

 

Load in a button and fill it with a different color and save it—or draw something in it if you wish, or paste in a piece of clip art from another image, or rotate it 180 degrees; save.

Or load in a top navbar frame and select (the Selection Tool is the dotted rectangle at the top of the toolbar) everything from the top line of the button area on down to the bottom line of the button area, and from the left-most line of the left button on over to the right-most line of the right button. The program won't scroll during selection rectangle expansion, so you can't have part of the image offscreen when you start, so you can't magnify for eyestrain avoidance. Click. Press ctrl c and ctrl v and then on the Image pull-down choose Attributes and dump 3 pixels from the width and 5 from the height. Save with a new name, and note that if you use this it will load at a slightly different screen position because of the edits.

          If you chose a double row navbar like Navbar16.gif, you'll need to grab the top row and move it 3 pixels left first before you follow the directions above.

 

 

In IrfanView

 

Load in a button and change it to a different color by going to the Image pull-down, choosing Enhance colors and then Color Balance and then fooling with the settings. Now save it—or you can rotate it 180 degrees before you save it.

Or load in a top navbar frame and select (the Selection Tool is the default tool normally in effect at all times) everything from the top line of the button area on down to the bottom line of the button area, and from the left-most line of the left button on over to the right-most line of the right button. The program will scroll during selection rectangle expansion, so you can have part of the image offscreen when you start, so you can magnify (the magnifier with the plus on the top bar) for eyestrain avoidance. Click. Select Crop Selection on the Edit pull-down. Save with a new name, and note that if you use this it will load at a slightly different screen position because of the edits.

          If you chose a double row navbar like Navbar16.gif, you'll need to grab the top row and move it 3 pixels left first before you follow the directions above. But since the cut and paste features are brain-dead in this program, you should go to one of the other programs for this particular edit of 2-row navbars.

 

 

In ImageForge

 

Load in a button and fill it with a different color and save it—or draw something in it if you wish, or paste in a piece of clip art from another image, or rotate it 180 degrees; save.

Or load in a top navbar frame and select (the Selection Tool is the Scissors Tool on the toolbar) everything from the top line of the button area on down to the bottom line of the button area, and from the left-most line of the left button on over to the right-most line of the right button. The program will scroll during selection rectangle expansion, so you can have part of the image offscreen when you start, so you can magnify (the slide-bar on the side bar) for eyestrain avoidance. Click. Select Crop on the Picture pull-down. Save with a new name, and note that if you use this it will load at a slightly different screen position because of the edits.

          If you chose a double row navbar like Navbar16.gif, you'll need to grab the top row and move it 3 pixels left first before you follow the directions above.

 

 

          Deleting Navigation Bars and/or Buttons

 

Cool Page allows you to select navbars on the pre-set-up pages and delete them without affecting functioning. Approach the bar slowly from the top and when the cursor changes, left click. Do not try to get to things using the layer tool—you’ll mess everything up.

          If you'd wanted to delete all the buttons as well, you can do that by deleting things one by one. Do not use the grouping tool—it will mess up your whole page. If the navbar has pop-ups associated with it, you'll want to think before you dump everything, since there are lots of pop-up boxes, text boxes, and invisible objects to delete as well. You need to select a different one of our 66 pre-set-up pages without pop-ups—look in the folder web-pages-without-popups. But if you insist on the dumping, move aside the blue side panel, select to see invisible object borders on the View menu, and dump all the objects, then replace the panel at x=4 and y=441.

          If you want to dump buttons but leave the navbar, remember to delete the lighter buttons under the darker ones. We assume you’re going to either put text links right on top of the navbar or decorate the button rectangle areas with new colors in a graphics program or whatever and then re-save the navbar and bring it back to your page and then do the links. Try out our files with the words “linkbutton” in them before doing any of this. You can have the performance of buttons without ANY of the page memory use!

 

 

Adding Text and Links Directly to Navigation Bars

 

If you happen to be using one of our web pages with no buttons on one or both navbars, first check out that neither has pop-ups. Even though the buttonless bar is buttonless, that doesn’t mean there are no pop-ups. Double-click on a button area. No response means no pop-ups. If there had been pop-ups, you’d be looking at an Object Properties Box now. The reason there can be such events as pop-ups associated with the nonbuttons on a navbar is that we used button-shaped invisible objects here in place of buttons. You cannot have both links and pop-ups on each button-space. Choose. The best way to get text on your navbar with pop-ups but no buttons is to add the text right on the navbar in a graphics program. The best way to get text on the actual button objects that are sitting on a navbar is also a graphics program. And the best way to get text on a navbar with no buttons or pop-ups is adding text boxes with links in Cool Page.

          Don’t add text on navbars as one long text box either in side or top navbars. When you add links and test it, it may be okay in one browser but it will stink in some browsers. Under Window on the Links toolbar, once you’ve browsed for the link with Browse, go ahead and choose New for off-site links, Self for anchors (check in Cool Page for what this is), and Top for other links.

 

 

Adding Text to Pre-named Navigation Buttons

 

The pre-named buttons are the ones you'll find in our pre-set-up web pages. Use Microsoft Paint or ImageForge or maybe even IrfanView to add text to your buttons, but don’t forget to optimize! For example, a 180-byte button may rise to 1100 bytes once you're done adding text in Microsoft Paint. But after optimizing in IrfanView, it will be only 260 bytes. So how do you optimize?

To optimize .jpgs with IrfanView, load your file, go to Save As, select Options, and choose an 80% quality rating. There's only a few things where you'll need 90%. With .gifs, use IrfanView’s Decrease Color Depth on the Image pull-down—16 colors is fine for this latter. We've seen amazing file size shrinkage with this program—making it an indispensable website tool.

          The reason you add text to buttons is so people know what each button link or pop-up choice is about.

The reason you add text specifically to pre-named (e.g., top8lit.gif) buttons is that these are the names that the 66 pre-set-up web pages all use for their buttons. But you don’t add the names to the buttons in the prenamed-navigation-buttons folder! Instead, copy the buttons into your own folder and name them from there.

If you'd prefer to use any of our other buttons (in the navigation-bar-buttons folder), keep in mind that they range from 461 to 1899 bytes each in size. In other words, you're not starting from 180 bytes so make sure there's no big web page loading time problem. Also keep in mind that the buttons in the navigation-bar-buttons folder have names like n26.jpg so you’ll have to change them to our top, bottom, and side names. Buttons with top in their names are used only for the upper (top) buttons in top navbars. The lower buttons in top navbars have bottom in their names. And side navbars have side in their names.

 

 

In Microsoft Paint

 

It will do no good to up the magnification past 1 so you can see what you're doing, because then the Text Tool won't work. So after Opening the button file, choose the Text Tool and drag a box into the button and click the mouse button to end dragging. Make sure you click the transparency icon below the toolbar. Now select font, size, and style on the bar that pops up. We suggest size 8 for most things, or 10 if all your words will fit okay with 10. Click inside the dragged box to begin, and end by choosing a different tool. Save. Now go Optimize!

 

 

In IrfanView

 

Open the button file, press the plus-decorated magnifier zillions of times so you can see what you're doing, drag a box (no selection tool needed—the cursor IS a selector) and click to end dragging, and select Insert Text into Selection on the Edit pull-down. Press the Choose Font button before typing text. Select color, style, size and font and type the text then press OK. If you like the way it looks, click the button outside the text box and Save As; if not, press ctrl z. Get it right. Now go Optimize!

 

 

In ImageForge

 

Open the button file, use the slide-bar on the left bar to magnify 7x so you can see what you're doing, enlarge the window by clicking the square of the window controls, and select the Text Tool on the toolbar. Click in the button and get ready to start typing text. Click Object is Hollow on the top bar, and select color in the Style drop-down to the left on the bar and style, size and font in the Font drop-down and then type. If you like the way it looks, click a new toolbar tool and go to Save As; if not, press ctrl z. Get it right. Now go Optimize!

 

 

          Changing the File Names of Your Chosen Button Style Buttons

 

Check out the buttons in the file navigation-bar-buttons. With names like n21.gif, if you merely added text to them it wouldn’t change your pre-set-up web page buttons one bit. You need to save them in your website’s folder as properly named .gifs and .jpgs as you edit them, and once all your buttons are done, take them to IrfanView and Optimize! It’s easy to figure out which button names go with which buttons.

But you don’t add the names to the buttons in the navigation-bar-buttons folder (or the prenamed-navigation-buttons folder—as we've covered above). Instead, copy the buttons into your own folder and name them from there. If you use any of our navigation-bar-buttons folder buttons, keep in mind that they range from 461 to 1899 bytes each in size. In other words, you're not starting from 180 bytes so make sure there's no big web page loading time problem. Also keep in mind that the buttons in the navigation-bar-buttons folder have names like n26.jpg so you’ll have to change them to our top, bottom, and side names. Buttons with top in their names are used only for the upper (top) buttons in top navbars. The lower buttons in top navbars have bottom in their names. And side navbars have side in their names.

 

 

          Adding Links to Button Text

 

There are a couple of situations links on button text can refer to. The first is when there is a text box superimposed on top of any type of button. If the text link does nothing but cause the cursor to change (and in IE change text color), then it has no link background button put into its page code (via Cool Page’s HTML object insert feature).

However, if the link is truly a text link and not a graphical button link, but the cursor lights up the whole button, it’s through a CSS setting relating to link background, which we’ll get into more below. If you see the phrase “linkbutton” in one of our pre-set-up web pages, it has this feature. The main point of doing it this way is to save web page loading time and memory (it takes virtually none) and to get the newer versions of the main browsers IE, AOL (uses IE), Netscape, Opera, and Mozilla to respond like a button change (rather than their normal unresponsiveness) around text links on buttons, but without having to use memory or hassle with any button routines or events to achieve it.

Whether the text link is of the first or second type, you link it the same way. Select the text with Shift and arrows or with regular mouse cursor selection methods. Never mind our link name in the Links toolbar—press Browse and select your own. Remember to choose Top in the Window area of the Links Toolbar if the link goes to another of your web pages (or New if your link leaves your site or Self if it goes to an anchor).

If the button we’re dealing with is graphical, you merely select it and Browse for your link. And again, never mind our link name in the Links toolbar—press Browse and select your own. Remember to choose Top in the Window area of the Links Toolbar if the link goes to another of your web pages (or New if your link leaves your site or Self if it goes to an anchor).

 

 

          Link Text

 

Make sure you’ve read Adding Links to Button Text, above. We’re going to get into controlling link text so it floats your boat and lights your fire, and hopefully has the same effect on your site’s visitors.

 

 

                    Using Cool Page’s Insert HTML Object Feature

 

There's good news and bad news, but get a smile on you're face because most of the news is great. The capabilities of Cool Page’s Insert HTML Object Feature are extensive and you can do much of what you want, including link control. That’s the first good news. The second is there’s a Cool Page 3.0 coming out someday.

The bad news is that the HTML object routine doesn’t put code in the <HEAD> section or inside the <BODY> tag, but only in the <BODY> section itself. Later in this document there's a whole section devoted to some of the HTML routines that Cool Page just could not do much with—frame flippers and image rotators and banner rotators. It’s called The HTML-only Routines. More good news; these HTML flipper and rotator routines are easy to get into Cool Page’s exported HTML pages, and you don’t need to know HTML to do it! More bad news: the HTML Object feature is useless for dealing with such flipper and rotator routines so your .cpg files (version 2.72) won't be getting the routines into them. But the CSS link routines will end up in both .cpg files and the HTML files Cool Page exports. Read on:

 

 

Link Underlines

 

Some people love the underlines; others hate them. You can't have them and not have them at the same time, so you'll have to choose your website style and the site visitors will just have to get over themselves, right? Nope. Those who are adamant about the subject can mess with system and/or browser settings about link appearance—and never get over themselves! One wonders why only IE has links that change color as a default and the other browsers act like that’s childish. We don’t think it’s silly—we like it. About 94% of browsers are IE or use IE, so perhaps the public agrees with us. If not, who cares? We know what we like; you know what you like. What the heck—NO ONE’S taste is necessarily better than anyone else’s.

 

 

          How to Make All Links Have/Not Have Underlines

 

<STYLE>A {text-decoration: none;}</STYLE>

 

That is all the code you need to stick into your .cpg file to dump underlines. Use Cool Page’s Insert HTML Object Feature, and next to the HTML tab is a General one where you need to make position coordinates and layer all 0 and size 2 x 2. On the Insert pull-down is HTML Object. Use it for this job, typing in the code above.

           You may need to access this tiny HTML object at times—use the right mouse button once you're over it with your cursor. To get to it, you may need to move a header box and a left (x=0) line. It’s the teeny grey square.

          To make underlines be omnipresent, use this code, although it’s already the default so you won't need it much:

 

<STYLE>A {text-decoration: underline;}</STYLE>

 

 

          How to Use HTML to Change Specific Text Boxes

 

There's no simple, one-step way to have pop-ups and button links have no underlines while other links have them. But that doesn’t mean it’s any big deal to accomplish this. You don’t need to know HTML. Once you use either of the above codes in your .cpg file to state that you want links to/not to have underlines, you're committed. But only in the .cpg files. In the file Cool Page exports, you can add a couple of touches and get any mixture of underlines and no underlines that you desire. Here's a piece of an HTML export file generated by Cool Page—just the blue part—with a simple addition we made to stick an underline under the link:

 

<DIV ID="idElement35" style="position: absolute; top:335px; left:53px; width:189px; height:18px;"><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=189><TR VALIGN=top><TD><DIV align=left><A HREF="popups1.html" style="text-decoration: underline"><FONT CLASS=Arial-16pxn>TESTING, 1, 2, 3 (link test)</FONT></A></DIV></TD></TR></TABLE></DIV>

 

NOTE HOW THE NEW HTML ADDITION (red) COMES BETWEEN THE FINAL QUOTE OF THE LINK PAGE REFERENCED IN THE LINK HTML AND THE "GREATER THAN" (>) SIGN.

          To be excruciatingly clear: The blue code is what Cool Page created. It’s a text box link that looks like this: TESTING, 1, 2, 3 (link test) on the page, even though an “HTML Object”-inserted code earlier in the HTML file (shown earlier) said page links would be without underlines. The red code is what we snuck in using NotePad or Editor2, which comes with Windows. This technique on particular text links allows us to have certain links be underlined, even though the rest aren't. And you don’t need blues and reds—we merely used these colors for illustrative purposes, so you'd see what was what.

          Now, let’s look closer at link appearance and how to make .cpg files do what you require. The easiest way to make all unvisited links have one color and all visited links have another is in Cool Page’s Page Properties feature (click on the background away from objects) which has a Links tab where you can choose such things. But if you're inserting HTML objects, you may as well get the whole story on how to deal with link appearance:

          You can use CSS code to make various characteristics of your links be as you like. Here are the relevant states a link can be in:

 

Normal unvisited links

Visited links

Links the cursor is on

Links just clicked

 

Here are the characteristics that can be changed (although only IE seems friendly to font-weight changes that happen from hover):

 

Color

Background color

Font weight

Font style

Font stretch

Font variant

Font family

Font size

 

 

Changing Colors, Sizes and Backgrounds of Links

 

<STYLE TYPE="text/css">a {text-decoration: none;}

a: link {color: black}

a: visited {color: violet}

a: hover {color: orange; font-weight: 900}

a: active {color: red; background-color: yellow} </STYLE>

 

The above code is for IE. It’s found in all our .cpg files (the few that end with “gobold”) that tell text links to get big and colorful when the cursor is on them. The normal blue link color was not going to work here because the navbar underneath the link was blue. The red part of the code deals with that.

 

 

          Changing Colors, Sizes and Backgrounds of Visited Links     

 

<STYLE TYPE="text/css">a {text-decoration: none;}

a: link {color: black}

a: visited {color: violet}

a: hover {color: orange; font-weight: 900}

a: active {color: red; background-color: yellow} </STYLE>

 

This is the same code as above, only with the red color highlighting the visited function. But since visited is usually defaulted to violet anyway, it may be unneeded. Note that colors can be specified with words.

 

 

          Changing Colors, Sizes and Backgrounds of Hover Links               

<STYLE TYPE="text/css">BODY {margin-left:0; margin-right:0; margin-top:0;}

a {text-decoration: none;}

a:hover {color:#000000; background-color:#c0c0c0}

a:active {color:#ff0000; background-color:#808080} </STYLE>

 

The above code is for all the recent browsers. It’s found in most of our .cpg files (except the few that end with “gobold”), and it tells text links to get big grey rectangular backgrounds behind them (we call these LINK BUTTONS) and their text to turn black when the cursor is on them. The red part of the code deals with that. Many of the files with this code use buttons so they don’t use these codes for any button use. However, the story doesn’t end there. The pop-ups have link text in their text choices, and as this text gets hovered over, it uses the red code above to look like that choice gets its button pushed. The reason it can appear to be a pushed button is that the pop-up boxes on our pre-set-up web pages have button-like “raised” rectangles for each text choice, and the grey link background appears to flatten these when the cursor is on them.

 

 

 

Changing Colors, Sizes and Backgrounds of Active Links

 

<STYLE TYPE="text/css">BODY {margin-left:0; margin-right:0; margin-top:0;}

a {text-decoration: none;}

a:hover {color:#000000; background-color:#c0c0c0}

a:active {color:#ff0000; background-color:#808080} </STYLE>

 

This is the same code as the section above about hover, only with the red color highlighting the active function. Note that colors can be specified with hex numbers in which the first 2 numbers are about red, the second 2 are about green, and the last 2 are about blue. The highest number is ff, the lowest 00, and letter numbers are higher than number numbers—but you likely already know hexadecimal notation since you're doing a website. The active code is telling the link click to cause the black hover text to turn red and the grey hover background to get darker grey.

 

 

Why/How to Use &nbsp’s around Link Background Button Text

 

The &nbsp’s used in our text links are for a reason. These nonbreaking spaces are needed so the text links’ link backgrounds will look right when the cursor hovers over them. If spaces and not &nbsp’s had been used, the link backgrounds would go only to the edge of the words, and wouldn’t cover the buttons. And they'd have no symmetry with each other—longer words would get longer link background boxes than shorter words, which would look crude. So if you keep enough &nbsp characters on each side of your text choice phrases to keep up the symmetry we've maintained, all will look fine.

And it’s vital to select the link text carefully when creating the link. Keep the width the same as it was when you replaced words like “choice 3333” with your own genuine selections.

 

 

General Website Buttons

 

          What’s in Website Menu Heaven

 

There are 60 light-up buttons and 40 pushbuttons in this product.

 

 

                    Light-up Buttons

 

There are 4 special buttons with names like b-rimlit1.jpg, which you can use as the lit up version of any of the buttons with the same shape. Or use the buttons with the dark centers as unlit versions of similar buttons (same color) with bright centers.

Consult the buttons1.cpg file in Cool Page and note the four rimlit buttons at the top of the page, and the pairs of similar buttons with light and dark centers.

Also consult the section Making Our Buttons Work in Cool Page, below.

 

                    Pushbuttons

 

The 40 pushbuttons in this folder (which is called pushbuttons) are in pairs. Consult the buttons2.cpg file in Cool Page and note the variety and colorfulness of the buttons.

Consult the section Making Our Buttons Work in Cool Page, below.

 

 

Changing or Re-sizing Buttons

 

          In Cool Page

 

In Cool Page, the re-sizing of a button is as easy as clicking it and changing its pixel size. (The size changes are going to be in pixels.) If it already has text in it, the button is likely to become harder to read, so you're better off re-sizing and adding text in a graphics utility and then importing it into Cool Page. If it has no text, it may look okay after re-sizing, or it may not. We recommend getting buttons correct in a graphics utility and then importing them into Cool Page.

 

 

In Microsoft Paint

 

Go to Stretch/Skew on the Image pull-down, and change the numbers in Stretch but don’t mess with Skew. (The size changes are going to be in percents.) The change percents of both vertical and horizontal should be the same if you want the button to keeps its proportionality (preserve aspect ratio).

          The other types of changes you can make are endless, but for buttons, adding text or colored rectangles are the—or maybe even rotating the image 180 degrees—are the most likely changes beside stretching, in this application.

 

 

In IrfanView

 

On the Image pull-down you'll find Resize/Resample. The size changes are going to be in pixels, and if you don’t see 72 DPI, change that, since that’s best for the Web, in our experience. If you want to preserve the aspect ratio, check that.

          To do a 180-degree rotation, press L twice for left rotation—or do it from the Image pull-down. Also on the Image pull-down is Enhance Colors, which takes you to the Color Balance where you can fiddle with amount of Red, Green, or Blue, or you can adjust Contrast, Brightness, and Gamma Correction. Decrease Color Depth is good for memory size reduction, especially for .gifs. Also on the Image pull-down is Effects, which leads to 3D Button, and this can create jewel-like buttons that look impressive (but may be challenging to add text to).

 

 

In ImageForge

 

This application can do a lot for a button. The Color Extractor tool on the side toolbar is great for cleaning up stray pixels because when you want these dots to look like the dots around them, you just extract the good dots’ color and use the Paintbrush tool to change the bad dots.

The Replace Color tool on the side toolbar is found by clicking the Fill tool twice. It’s great for changing every instance of a color in an entire image to a different color. This can save a lot of painting and fills.

The Re-size feature on the Picture pull-down makes changes in pixels.

The Rotate feature on the Picture pull-down can be used twice to get a 180-degree rotate which can be essential for some pushbutton creation tasks.

Color and Tile on the Effects pull-down lead to an array of features that is both fascinating and useful.

 

 

          Deleting Buttons

 

Dumping a button in Cool Page is as easy as selecting it and pressing your Delete key. The events connected with it will be dumped too. If there's a button underneath it or one hidden under a top or side panel that’s associated with this button, it should get the axe as well. (Consult the section Making Our Buttons Work in Cool Page, below, to understand what the hidden button ploy is all about.)

 

 

Adding Text to Buttons

 

In the Adding Text to Pre-named Navigation Buttons section under the main section called Navigation Bars and Buttons, you'll learn everything you'll need to know about getting text onto buttons—it doesn’t matter what kind of buttons. The main difference between navbar buttons and general usage buttons is that the former need to be special sizes, and need special file names to work on our navbars in our pre-set-up web pages, but the latter don’t.

 

 

Adding Links to Buttons

 

If the button we’re dealing with is graphical, you merely select it and Browse for your link. And never mind our link name in the Links toolbar—press Browse and select your own. Remember to choose Top in the Window area of the Links Toolbar if the link goes to another of your web pages (or New if your link leaves your site or Self if it goes to an anchor).

If the button we’re dealing with is not graphical, it’s not a general usage website button—it’s a link button and you're in the wrong section.

         

 

Making Our Buttons Work in Cool Page

 

Try out button-test.cpg in the light-up-buttons folder. We just loaded in 8 buttons and added a background and a few Events and that was that. Move the top button to the side and look at the bottom button. Go to Events by clicking the button twice. Note that Type is onLoad and Action is Hide. Put the top button, b26.jpg, back to coordinates 111,111 and click it twice.

There are 2 events. Check them both out. Type is onMouseOver and Action is Set Image and b36.jpg was browsed for. Check the second event. Type is onMouseOut and Action is Set Image and b26.jpg was browsed for. That’s it.

You can figure out how to inspect the other buttons’ events now—the next lower button uses onMouseDown and onMouseUp for the pushbutton. Note that lit versions get placed under unlit versions on the page, which means they get a smaller layer number.

Also note that there are onClick actions available for normal mouse click scenarios. This was used in the HTML code below as well as the bottom and right-most buttons of button-test.cpg. The Hide action was used in the bottom one, and the unlit button gets hidden under the blue header panel.

Note how we used one of our buttons as a background to get the stained-glass effect. You’ll find Background on the Edit pull-down—you'll have to Browse for the file you want as a background.

 

 

An Example of HTML Button Utilization

                   

Look at the HTML file Clickable Movie Frame Flipper That Ends (clickable-movie-frame-flipper-that-ends.html). Look at the button-related code after double-clicking it to see it work. It uses a rimlit light-up button that you click to activate. The first code block sets up the movie frame position. The second block loads in and then hides the lit up version (rimlit) of the button. The third block loads the “run a train” button on top of the rimlit button, and establishes that if you click on it, the rimlit button appears and the frame flipper cycles through its frames. It also tells the button to go back to unlit when the cursor leaves the button. You’ll find the functions jsHide and jsReplaceSrc (great little Cool Page goodies) earlier in the HTML code.

 

<div id ="idElement4"><img name="pics" src="" border="5" ID="idElement4Img" style="position:absolute; top:175px; left:175px;" width:170px; height:130px;></div>

 

<DIV ID="idElement1" style="position:absolute; top:315px; left:215px; width:100px; height:33px;"><IMG SRC="buttonpushed.jpg" NAME="idElement1Img" ID="idElement1Img" WIDTH=100 HEIGHT=33 BORDER=0 onLoad="javascript:jsHide('idElement1');return true"></DIV>

 

<DIV ID="idElement5" style="position:absolute; top:315px; left:215px; width:100px; height:33px;"><A onClick="javascript:jsReplaceSrc('idElement5',jsidbuttonpushedxjpgImg);cyclem();return true" onMouseOut="javascript:jsReplaceSrc('idElement5',jsidbuttonxrunatrainxjpgImg);return true">

<IMG SRC="button-runatrain.jpg" NAME="idElement5Img" ID="idElement5Img" WIDTH=100 HEIGHT=33 BORDER=0></A></DIV>

 

 

Link Boxes

 

What’s in Website Menu Heaven

 

There are 4 link boxes in the side-link-boxes folder. The bigger boxes are for more links, the smaller boxes are for less links. Create the text box full of links outside the box and put it where it goes in the box afterwards.

If you for sure want underlined links, put that in the HTML export code Cool Page makes. (See How to Make All Links Have/Not Have Underlines, and also How to Use HTML to Change Specific Text Boxes, both of which are under Link Underlines, which is under Link Text, which can be found in the section we call Navigation Bars and Buttons.)

Or is you're dead set on all links being underlined, change the HTML object hidden in your pages’ upper left corner—but this will make pop-up items, link buttons, and everything else (except words on graphical buttons) be underlined.

But you might want to try something else: link button links. Each line of link text can be a link button, and the link background that lights up when your cursor is on it will make it look like a long button in your link box. If you like the file navsmall8pop-smalllinkbuttontop.html, then you'll  like the way link button links look. You can choose a different color, of course, but we wouldn’t change the font if we were you—most fonts don’t work very well for making link buttons, but this one does. (Most fonts end up looking screwy in any browser but IE when they're used as link buttons.) So let the Arial size 8 font in the file you just examined be the one you select for small link button links. And size 12 or even 16 Arial Narrow is the way to go for bigger link button links.

And do keep &nbsp’s out to the box edges as we've previously discussed.

 

 

Side Panel Links Using Our Link Boxes

 

Whether or not you use our boxes as an organizational tool that keeps the motif consistent, you need to type the text against the background—in the empty places on your web page. Then put it in the margin. Keep the text box 130 pixels wide or less to fit into our boxes.

 

 

Side Panel Links without Our Link Boxes

 

Whether or not you use our boxes as an organizational tool that keeps the motif consistent, you need to type the text against the background—in the empty places on your web page. Then put it in the margin. Keep the text box 135 pixels wide or less to fit into our side panels.

 

 

          The HTML-only Routines

                   

Why Not Cool Page Files?

 

Great as Cool Page is, it cannot do everything. Perhaps versions beyond v2.72 will do more. Trying to insert our routines into .cpg files as HTML objects will fail, because most of the code needs to be in the <HEAD> section and some inside the <BODY> tag itself, neither of which is supported in Cool Page. So make your .cpg Cool Page file, export it with ctrl e, and then use NotePad or Editor2 to get the codes in.

          There are ways to get multimedia into Cool Page without messing with HTML programming and they're discussed here: http://CoolPageHelp.com. Don’t use <EMBED> tags as some browsers won't support them. Do use a link on your page that downloads your media player and video file. But be warned that your pages will load slower when they must load multimedia files.

          The reason that we created movie frame flipping files is that they're great if you have just a few seconds of a movie to show—sort of like an animated .gif—but you don’t want the user to have to hassle with waiting for media players to load or having to download a player.

You could even sell videos by having users click on a variety of first-frame images to see a quick 2- or 3-second clip of any of them in order to decide—sort of like a moving thumbnail. Or you could take a bunch of stop-action photos of something, moving the subject slightly between shots, and create your own little claymation or special effects video to delight your site’s visitors.

 

 

How to Use These Routines with Cool Page Webmaster

 

The instructions are in the form of comments in each of the HTML files. Follow these. Test your images or frames or links as well as you can before putting the routines into the export file (HTML) Cool Page makes. Each time you change the page’s Cool Page file (.cpg) and do ctrl e to export, the insertion of our HTML routine will have to be redone, so get your Cool Page stuff finalized before the ctrl e to export happens and the HTML routine insertion happens.

If you won't be doing movie frames, skip this. If you will be doing movie frames, see the next section about video frame capturing. Once you have video frames in the form of optimized .jpg files (or .gif if that’s how they were saved), put them in the subfolder with your HTML frame flipper routine and open the HTML file in NotePad or Editor2 or whatever and replace our file names with yours and save it. Double-click on the file name in Windows Explorer and test it—you'll need to change the timing, probably. Once it’s right, follow the HTML comments instructions about getting the routine into your Cool Page export file (the HTML one). Then delete all comments (make sure you’ve saved a copy of our HTML routine with comments intact) you may have accidentally gotten into your export file during code snippet cut-and-paste, and resave to save memory.

 

 

How to Capture Video Frames

 

To capture individual frames from your video, you'll want to use software that does this automatically. (You could do it manually by pausing your video at every frame, doing a screen capture, and then saving each file individually. But why spend hours doing this when several free software programs will do the same thing in a matter of seconds.)

We use FX Frame Capture which is simple and straightforward to use.

Download it (5929KB) here:

 

http://www.jhepple.com/frame_capture.htm

Install it and run it. You'll see a single window.

 

1. Direct the program to where your source avi file is stored.

2. Input or browse to where you want your frames saved. Be sure to save each avi in a different folder to avoid any confusion.

3. View your avi file frame-by-frame in the viewer and see the frame numbers. This helps you determine what part of the sequence you will export.

4. Select the output format (BMP, JPG, GIF, et al.)

5. Input the first and last frame saved in the sequence, and

6. Select to export every single frame, every 2, every 5, every 10, 50, or every 100 frames.

7. Click the Extract Button and you'll see the status bar indicator.

8. When it's done, you'll get a message that files were extracted successfully.

9. If you want to use the frame files with our frame flippers, optimize them at 80% quality in IrfanView first—if needed—to get down the file size.

10. Open the files in your preferred graphics program and proceed to use them as desired.

There are other free frame capture programs available. Notably: Avi2bmp, which operates differently. We haven't tried it yet. It converts an uncompressed AVI to one large BMP file with all the frames in rows and columns. You then can control the number of rows and columns that are generated.

Get it at http://www.daansystems.com/freestuff/

 

 

The Routines

 

There are six different HTML-only routines for you to put into your website. Each one fulfills a basic website function. The first three perform the most common of functions.

 

 

The Image Rotator

 

The purpose of The Image Rotator is to cycle through a set of .jpg or .gif pictures of any size and at any speed. You get to choose speed, size, placement on page, border or not, number of pictures, and starting picture. The uses for such a routine are endless and obvious. Look around the Net and see all the ways people employ such routines.

 

 

                              The Banner Rotator

 

The purpose of The Banner Rotator is to cycle through a set of .jpg or .gif pictures of any size and at any speed, with each picture being a clickable link to some other URL. You get to choose speed, size, placement on page, border or not, number of pictures, and starting picture. The uses for such a routine are endless and obvious—the main use is to sell things. Look around the Net and see all the ways people employ such routines.

The thing you'll want to keep in mind here is that if people are so enthralled with the banner that they click their way off your site, you’ve just lost a visitor. On the other hand, if you're getting paid (via click-through or however) by the site owner of the site your visitor went to, then it’s worth it.

          The links can all go to different URLs or to the same one. You (or the ad sponsor) can be selling a variety of products and each link can go to a sell page related to its image. Or each image can be just one more irresistible come-on to get you to a site full of products or services.

 

 

          The Banner Animator

 

This is basically the same routine as above, except this one doesn’t pause for 5 seconds between image cycles so the visitor can read the banner—instead it pauses a mere half second because it is an animation. You may decrease the pause time and increase the number of banner images if you like. The application we used to create the artwork with is ImageForge. The visitor needs to be able to read the message, so words shouldn’t go by too fast to grasp.

All of the images are links that go to the same URL, usually, with animated banners.

 

 

          The Movie Frame Flipper

 

As we previously mentioned, the reason that we created movie frame flipping files is that they're great if you have just a few seconds of a movie to show—sort of like an animated .gif—but you don’t want the user to have to hassle with waiting for media players to load or having to download a player. You could even sell videos by having users click on a variety of first-frame images to see a quick 2- or 3-second clip of any of them in order to decide—sort of like a moving thumbnail. Or you could take a bunch of stop-action photos of something, moving the subject slightly between shots, and create your own little claymation or special effects video to delight your site’s visitors.

          This particular routine allows you to choose frame speed and border size, as well as page position, and it starts when the page loads and never quits.

 

 

                    The Movie Frame Flipper That Ends

 

This particular routine allows you to choose frame speed and border size, as well as page position, and it starts when the page loads and it quits once the frames have all been shown.

 

 

                    The Clickable Movie Frame Flipper That Ends

 

This particular routine allows you to choose frame speed and border size, as well as page position, and it starts when the visitor sees the enticement to click a button and it quits once the frames have all been shown. The button changes back to the enticement once the movie is done and the visitor’s cursor leaves the button. Then the click of a button can once more activate the movie.

 

 

11 Easy Web-Page-Loading Time-Saving Tactics

                   

Optimize Graphics Files with IrfanView

 

IrfanView can optimize your various graphics images, as well converting them between file types. This is the most important of all tactics if your site is full of images. E.g., a 180-byte button that goes up to 1150 bytes because of adding text in a graphics program can be brought back to 260 bytes with IrfanView. If this is a navbar button and you're using 16 on the side navbar and 16 on the top navbar (8 buttons each place but with both lit and unlit versions), that’s 32 x (1150 - 260) = 28480 bytes saved. They say don’t exceed 50 – 60k per web page; 28k is half your allotment!

 

 

                    Use Link Background Buttons Rather Than GIFs, JPGs or Events

 

By selecting pre-set-up web pages that employ link buttons, you save all the bytes that .gifs, .jpgs and events would use. A link background button is made using link background coloring, a CSS feature we get into our files in Cool Page by the HTML Object Insertion feature. Such buttons work in the recent versions of all the major browsers.

 

 

                    Delete the Navbar Buttons and Make Text Links Right on Navbar

 

You need not give up the navbars just because your page has no room for the extra bytes buttons might take. If you choose pre-set-up web pages that employ link buttons, you save all the bytes that .gifs, .jpgs and events would use. To find such files, whether .cpg or .html, look for the phrase “linkbutton” in the name.

 

 

                    Put Less Words and Graphics Per Page

 

There's no reason you shouldn’t link to a second page at the bottom of your web page, rather than having one page of interminable length that takes forever to load. If you lose the visitor during the load-in, it matters

not what gems you would have had in store for him/her.

 

 

                    Make a Less Elaborate Logo or Use Cool Page Title, not Graphics

 

Using a text title instead of a fancy graphical one if you have page loading time problems. Cool Page can make good titles that save web page loading time, by using text fonts rather than images. Our marketing-page folder has a PagePlus title in the upper corner but a Cool Page title in the big box. It was done with two text boxes with titles that were alike except that one was a different color, at slightly different coordinates, and behind the other. The effect is the text has a bit of depth. You could even simulate shadows this way in Cool Page, but not as good as you can with PagePlus.

 

 

          Use the Same Graphic Repeatedly on a Page

 

The section above entitled Making Our Buttons Work in Cool Page has you check out the file button-test.cpg in the light-up-buttons folder. This file has—just for demonstration purposes—a stained-glass look via repeating a button a zillion times by use of the Background feature. The reason it loads fast in spite of all the buttons is that it loaded it once and then just repeated that all over the page. Similarly, when an image gets used a lot, it gets cached, so the main time taken is during that first load.

The good news about buttons is that if you use the efficiency tactics covered above in Delete the Navbar Buttons and Make Text Links Right on Navbar and Optimize Graphics Files with IrfanView, you won't have many load time problems. The bad news is that since the buttons each need different text on them, they're saved with different names, so the caching won't happen.

 

 

          Use Navbars with No Pop-up Menus or at Least Less of Them

 

In the folder web-pages-without-popups there are navbars with not just 8 but 10, 12, 14, and even 16 link buttons on them and no pop-ups. When you notice that there's also a side navbar with 8 more choices, can you really say that you need pop-ups in addition to these 24 potential selections?

Remember that you can add a link box to all of the above and have a tremendous array of selections for your visitors.

 

 

          Delete Navbar Frame

 

Our navbars are from approximately 1k to nearly 2k in size. Dump them and save some bytes. They have no effect on functioning.

 

 

          Use a Long Colored Cool Page Box as a Navbar

 

Cool Page boxes take very little memory. If you use a long, short Cool Page box as your navbar, and put text boxes on it, you’ll save some bytes. Do NOT use one long text box with different links, as some browsers will see it coming and wet themselves. At best. Okay, they’ll also make your navbar look bad.

 

 

          Put Lesser Items on a Page Your Navbar Links Go To

 

By this we mean that you don’t need to spend memory on pop-ups if your navbar buttons send the visitor to URLs that contain menus that would have been what was on the pop-up menus.

 

 

          Use the Same Navbar, Header Panel and Menu Setup Globally     

 

The computer will cache images used a lot, which means they will load like lightning after that. If you use the same buttons, navbars, and pop-up boxes all over a site, page loading time won't be much of an issue.

 

 

Browser Compatibility

 

NOTE: Our stuff works in the newer browsers, because they support Javascript and CSS.

 

 

Internet Explorer

 

Our stuff works in all recent Internet Explorers.

 

 

Netscape

 

Our stuff works in Netscape 6 and above. Netscape 4.x is obsolete since it supports only some css and some Javascript; however some of our stuff MAY work in it.

 

 

Mozilla or Firefox

         

Our stuff works in Mozilla 1.2b and 1.21 and above, and Firefox.

 

 

Opera

 

Our stuff works in Opera 6.04 and above (although the bugs in Opera can sometimes make our routines do such things as display strange lines and offset text a couple of pixels too low at times—but the routines still work).

 

 

          Fine-tuning the Pop-up Menus' HTML Routines to Perfection

 

Under normal use, the click-to-pop-up menus and auto-pop-up menus show no imperfections. (Auto-pop-up menus are any of the 66 pre-set-up web pages with pop-ups that pop automatically when the cursor is on the navbar, and whose names contain the word "auto.") But under weird use--such as whipping the cursor back and forth on the navbar, one will--rarely--see 2 menus at once for a part of a second. You can even get this to happen with the web pages with pop-ups that don’t pop up automatically but pop when the nav button is clicked. This has no effect on functionality, of course. But if you're a real perfectionist and want this to go away, then you need to make the change in the HTML files Cool Page exports, not in the Cool Page .cpg files. Cool Page isn't equipped to deal with the issue. Here's the solution with the auto-pop-up web pages:

 

1.   The pop-ups merely need what's called a flag, which is a warning signal, to tell them that if a pop-up is already popped, it is forbidden to pop up another pop-up until the one that is popped gets unpopped. This is trivially simple to accomplish in any programming language--even Javascript. However, Cool Page isn't a programming language or HTML editor, but it sure is great at generating reams of perfect HTML/Javascript/CSS code with its export feature. To edit such code, any old text editor will do but the best is Editor2 (free) because it can do search and replace which NotePad can't. note: And BK Replacem (free) can even do the search and replacing on a whole folder full of files at once.

 

2.   In Editor2 or NotePad, open topnav8pop-auto-nobuttons.html, one of the files referred to above. Use the Search feature to find all the 500px;”><A onMouseOver=” phrases. There are 15. Also find the code block with 478 where the 500 was (478px;”><A onMouseOver=”). Edit these 16 code blocks that come up in the two searches. After onMouseOver="  type in f=0;  so that it comes before the word javascript. You can do this with two search and replaces (remember: 500 or 478 may be found). (Note: If you found less than we've said, there's always the chance there's an extra space after the <A.) See below. The actual change is emphasized.

 

<DIV ID="idElement5" style="position:absolute; top:752px; left:7px; width:200px; height:500px;"><A onMouseOver="f=0;javascript:jsNewRect('idElement5',5,755);jsNewRect('idElement12',5,755);jsNewRect('idElement82',4,444);return true"><IMG SRC="t.gif" NAME="idElement5Img" ID="idElement5Img" WIDTH=200 HEIGHT=500 BORDER=0></A></DIV>

 

3.   Now edit the 8 code blocks that have 28px;”><A onMouseOver=” in them. The edits will be different. After onMouseOver="  type in  if(f==0){f=1;  so that it comes before the word javascript. And then add this brackety thing } to the code block just after the words return true but before the quotes. See below. Whatever you do, don't get to thinking that the f==0 should be f=0 and we must be sloppy typists. The whole file will simply not work unless the == signs are done right. Javascript uses == for comparisons and = for assignments. An if statement needs to compare, not assign.

 

<DIV ID="idElement4311" style="position:absolute; top:117px; left:149px; width:72px; height:28px;"><A onMouseOver="if(f==0){f=1;javascript:jsNewRect('idElement11',142,151);jsNewRect('idElement91',142,146);jsNewRect('idElement1',0,0);jsNewRect('idElement3',232,0);return true}"><IMG SRC="t.gif" NAME="idElement4311Img" ID="idElement4311Img" WIDTH=72 HEIGHT=28 BORDER=0></A></DIV>

 

4.   Now search for the 8 code blocks with onMouseOut=” in them and do the same f=0; thing you did in step 2 above. See below:

 

<DIV ID="idElement12" style="position:absolute; top:600px; left:23px; width:88px; height:115px;"><A onMouseOut="f=0;javascript:jsNewRect('idElement12',7,755);jsNewRect('idElement82',4,444);return true"><IMG SRC="r14.gif" NAME="idElement12Img" ID="idElement12Img" WIDTH=88 HEIGHT=115 BORDER=0></A></DIV>

 

5.   Finally, declare the flag variable: After the file's <HEAD> section and the first <BODY . . .> tag, there's this javascript tag: <SCRIPT LANGUAGE="JavaScript">. After that comes a comment indicator <!--. Type in var f=0; just before the other variables.

 

6.   Save. If you didn't goof, the 2-menu quirk is now impossible. Of course, if you change the .cpg file and export, your edits above go bye-bye. So get the page totally perfect before you export the file and make the above fine-tuning edits. (But if you're not using Cool Page, then you can make these edits whenever.) If you do decide to export your Cool Page generated web pages’ .cpg files and make them into HTML files, you can delete all _nn4.html files. We’re just referring to the 66 pre-set-up web pages with menus here, not all _nn4.html files from Cool Page!

 

7.   Here are some editing tips. Always start searching with the cursor at the very top, or you’ll end up skipping things. Use Editor2 and do smart search and replaces. If you insist on using NotePad, once you know you need to do a repetitive operation, copy (ctrl c) the insert text and insert it with paste (ctrl v).

 

And here's the solution with the click-button-to-pop-up web pages:

 

1.   Search for all the instances of: A onMouseOut=” and replace with A onMouseOut=”f=0;

 

<DIV ID="idElement187" style="position:absolute; top:595px; left:36px; width:88px; height:115px;"><A onMouseOut="f=0;javascript:jsNewRect('idElement187',5,755);jsNewRect('idElement887',4,444);return true"><IMG SRC="r14.gif" NAME="idElement187Img" ID="idElement187Img" WIDTH=88 HEIGHT=115 BORDER=0></A></DIV>

 

2.   Search for all the instances of onClick=” and replace with onClick=”if(f==0){f=1; and on each of these code blocks, add } after the second time the two words return true are used.

 

<DIV ID="idElement39116" style="position:absolute; top:117px; left:222px; width:72px; height:28px;"><A onMouseOver="javascript:jsReplaceSrc('idElement39116',jsidbottom2litxgifImg);return true" onClick="if(f==0){f=1;javascript:jsNewRect('idElement57',305,0);jsNewRect('idElement47',13,0);jsNewRect('idElement128',215,151);jsNewRect('idElement827',215,146);return true}" onMouseOut="javascript:jsReplaceSrc('idElement39116',jsidbottom2xgifImg);return true"><IMG SRC="bottom2.gif" NAME="idElement39116Img" ID="idElement39116Img" WIDTH=72 HEIGHT=28 BORDER=0></A></DIV>

 

3.   Search for all the instances of: 500px;”><A onMouseOver=” and replace with 500px;”><A onMouseOver=”f=0;

 

<DIV ID="idElement57" style="position:absolute; top:752px; left:7px; width:200px; height:500px;"><A onMouseOver="f=0;javascript:jsNewRect('idElement57',5,755);jsNewRect('idElement128',5,755);jsNewRect('idElement827',4,444);return true"><IMG SRC="t.gif" NAME="idElement57Img" ID="idElement57Img" WIDTH=200 HEIGHT=500 BORDER=0></A></DIV>

 

4.   Search for all the instances of: 478px;”><A onMouseOver=” and replace with 478px;”><A onMouseOver=”f=0;

 

<DIV ID="idElement276" style="position:absolute; top:754px; left:45px; width:56px; height:478px;"><A onMouseOver="f=0;javascript:jsNewRect('idElement276',5,755);jsNewRect('idElement187',5,755);jsNewRect('idElement887',4,444);return true"><IMG SRC="t.gif" NAME="idElement276Img" ID="idElement276Img" WIDTH=56 HEIGHT=478 BORDER=0></A></DIV>

 

5.   Finally, declare the flag variable: After the file's <HEAD> section and the first <BODY . . .> tag, there's this javascript tag: <SCRIPT LANGUAGE="JavaScript">. After that comes a comment indicator <!--. Type in var f=0; just before the other variables. Save.