Smiley Fool -- A How2 Analysis

Page Navigation Buttons


Smiley Fool was a little joke tutorial project that, halfway done, waked me in the middle of the night, shaking me from an unremembered dream -- then it changed.

Dreams ain't gonna push me around, though; I'm still gonna analyze Smiley Fool Trip (the web pages) to help novices learn page construction!

We need the Smiley Fool Menu here, so you can see those pages if you need to. Here it is, the only change being I substituted the better looking Smiley Fool button for the flat-faced fool-on-blue. Use BACK and GO (session history) to return to this page, otherwise you'll trip around in Fat Smiley and Time Ticks Tips.



Our Smiley Fool Research Project




Centered text sometimes looks good for poems or announcements. Since it centers each line, in general text will be ragged at both left and right. That doesn't make such a nice-looking menu, but I didn't want to get into using Tables for formatting yet. Look at the menu with VIEW SOURCE. You'll see my tricks:

    I used 4 <ul> markers, which sets up an un-numbered list with 4 levels of indentation.

    Then I didn't use an <li> list marker for any of the list elements. I used the paragraph marker <p>. Button image file call is inside the <p> markers.

    The file call, <A HREF="filename.html"> and its closure, </a> are both inside the <p> and </p> paragraph markers.

    This trick -- using <ul> to force indentations and center a clean left margin works just as well if you don't use icon menu buttons, just the dots that un-numbered list usually produces for each phrase that has <li> mark as its leftmost item.

    Any dot-list whose items are just one screen line usually looks better if there is no spacing between the lines. Leave out the <p> markers and that's what you'll get. When the list is made up of indented multi-line paragraphs that wrap, like this purple-pin point list, it looks better with spaces between each item. The <p> markers right after <li> and at the end of the paragraph cause a space-separator, though if you use an icon-button as I did, you may also need to insert a <br> at the end of each text paragraph.

Here's Smiley Fool Project as a simplest-form list-menu:



Why are the list item dots boxes? HTML un-numbered listing uses different characters for levels of list-indentation. The first level's a round, solid dot; second's an empty box, third and the fourth levels are solid squares. I used 4 indentation levels to make the list approximately centered on the page, so its dots are squares. (VIEW SOURCE for both Smiley Menus on this page to see HTML codes and their placements.).



We're off, now, on a repeat Smiley Fool trip, this time for a closer look at very simple pagetricks. VIEW SOURCE on each page, so you understand what's going on, sort of. You'll have to return here with the BACK key, because otherwise the linktext will take you back to Big Fat Smiley Fool page. First, a zillion Smileys.

    The only real trick here is the use of the background tile and the BODY BACKGROUND header statement. Here's the tile, whose repetition by Netscape makes that busy fool background.

      Not quite the plain flat fool button, because that would have jammed Smiley along in rows and columns of marching morons. I doubled the size of the 40-pixel button square and plunked flat fool in two corners, diagonally. That gives a bit more space on the page between smileys. I had to lighten it, too, and even then no text (even bright white) shows well against the page-full of smiley fools.

      I used something similar to adjust the snowflakes on the background tile for my First Nations main menupage (use BACK to return here if you want to see it). But for that one, to avoid having too big a filesized-tile, I cut all the snowflakes in half, so they match up, top, bottom, and sides, when Netscape tiles them out as a background. If you check First Nations pages, you'll see Netscape handles the tile joins seamlessly.


    Ready for another simple-trick smileypage? Don't click twice here, or you'll see a brief white flash and be back on Fat Fool Smiley page, not here. VIEW SOURCE, then use BACK to return.

    The trick's nothing much on that jokepage. The joke's one common in science fiction circles: That any story which starts out that way has used such an awful cliche it's bound to be trash. A further in-joke is the use of "It was a dark and stormy night" to start several fantasy CD-ROM role-playing games where your player-character must find shelter in the haunted house, monster-inhabited castle or whatever.

    The effect of the bright white flash when you click on that text (to return to Smiley Fat Fool page) is caused by setting ALINK in the header to brightest white -- ffffff -- (f is 15 in hexadecimal, base 16, numbers used to control screen background and text colors). The value f in the rr, gg, and bb positions of color definition number strings, sets all vid guns to fire to their max -- brightest white. I thought it looked a tiny bit like a lightning flash.

    Hexadecimal numbers (often seen in computer stuff) are: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f, and 10 (10 = 16 in familiar base-10 notation).

    In the BODY control header, you set 4 text colors: TEXT is all non-linktext. LINK is the color linktext will appear the first time the user sees it -- before she has clicked there to visit whatever's linked. ALINK is the color linktext will flash briefly, after a click on it, and while the system is getting whatever's been linked. This is to let the user know something is happening, so they won't go on clicking and clicking. VLINK is the color that linktext will appear after that link has been visited -- and cached -- and you return to the page. This is to let you know (especially if you return much later in another session) that you've already visited that particular link at least once before.

    It would be nice if NetScape allowed you to set body text in more colors than one, but for now, those are the only 3 non-graphical text color changes, all apply to linktext only.If you don't set all these linktext colors, defaults are bright blue, for linktext and magenta for VLINK cache, and grey for the ALINK flash -- legible on default grey backgrounds, but also rather ugly.

    Despite the fact that there are (for each video gun, r, g, and b light) 15 x 15 number pairs (i.e 0 - f pairs for each colorgun) which should mean a huge quantity of different colors (15 to-the-power-6), most number groups produce no change in textcolor, and at 3 or below for the first-position number, the gun doesn't fire at all. i.e 3f0000 in the red position, rr, the first pair of the 6 hex digits -- is not a very dark red, it is black. Screen backgrounds are somewhat more responsive, but you don't get pure colors for most combos, you get pixel dots and plaids.

    Screen color is no-color, black, set by 000000 in the BODY BGCOLOR= header statement. This -- and pure white background screens -- is one of the few pure colors you can use transparent GIF's on, and not have problems. Now I just changed to 2.0 Netscape and find the 1.12 bug about transparencies has been fixed. But the cursed background colors have changed, now. So I just put a background tile in for this page, and I guess I'll do so for all the tutorial pages, because different viewers are going to see different BGCOLORS. Intolerable!!!

Now, sad to say, Smiley Fool signs a treaty. Many years ago, they weren't fools to do it, but now to make treaties actually have their legal effects is a big court fight -- because the law they represent, about Native lands, was never followed. Those treaties were basically tricks, to give the appearance of legality (in international law) to the thefts of Indian lands.

    Just 2 tricks here. There's the gold background tile which is a 256-color JPEG compressed 50%, that forms a suitably garish background, vaguely suggestive of mining exploitation and sleazy money values.

    Smiley's big old X is a 2-bit black-and-white GIF (as small as you can make any file), with the white background set to transparent. No need to fool around with the 2 colors here, as I did on the Smiley images, to make those 2 colors blue and yellow, keeping the same 2-bit color smallest-possible filesize.

This 2-screen sequnce is why Smiley's such an empty fool. Smiley gets drunk, it's his idea of how to party-hearty, and he drinks a lot even when not really partying, too. There's no real tricks to either of these screens. If you advance to the second one for coffee, return here with your GO session history button, instead of BACK key. These two pages are just single screens. They function as a sort of story-slideshow, very easy to do.

    On the first screen, I found a rather ugly background tile and fiddled with its colors to give the effect of Smiley's confused drinking to the point where party-hearty gives way to feeling sick before passing out. No ned to waste 256 color filesize on that! I reduced it to 4-bit 16-color.

    Then there's linktext that's an "on to the next screen" button. For good design, if you were making a slide show, you should have several button-icons at the bottom of your screen: ON TO NEXT SLIDE, BACK TO PREVIOUS SLIDE, and QUIT SHOW FOR SOMEWHERE ELSE. Many WebPeople use the little triangle "VCR control buttons" for this.

    I was thinking about HotJava, the hot new web programming language, so I used these coffee beans and the little jingle that's from an old World War II junkebox record my Dad gave my bro and me for Xmas one year, along with a windup phonograph that used no electricity, to play them on. [While I wouldn't call myself an elder, I'm not very young -- 60 -- either!] The coffee bean tile is a JPG, compressed 50%, I didn't color-reduce it and make a GIF. This tile would be a decent background for a screen that used largish bright white type and bright yellow; anything else wouldn't be legible.

 At that point I got so tired I went to bed. I woke suddenly with a PUSH to my computer. If there was a dream, I don't remember it. If spirits spoke, I heard only my own inner voice muttering "spirit warrior, eagle dream, eagle dream". Smiley Fool cannot quit drinking just because a friend sobers him up with a lotta cofeee, I know this, you know this. So, perhaps with something guiding my hands, I made quickly and with none of the usual trial-and-error screwups, one of the best pages I've done -- spirit warrior page.

    The background tile is just a lightening (reduced saturation, brightened) of the warrior image., a little larger (so none in a smaller-image 4-tile row is cut across his face by the window edge), and with that green background set transparent to float.

    The floating warrior (whose lightened version is the background tile) sits right on top of his shadow-self in Netscape 2, but is a little to the left of the shadow in Netscape 1+. I went nuts over this for a while, cutting off edges, putting in blank spacer characters -- then gave up, He looks fine either way! What really drives me nuts is all the BGCOLORs look different in Netscape 2, and the fat-border tables either don't show up at all or (on a background tile) come out too solid and darkened. Using a background tile does help control what th user will see. If they're using different versions of Netscape, BGCOLOR seems safe only for pure white and pure black screens.

    Another layout trick for this page was to adjust the positioning of the title and subtitle text so it does not fall across the faces of the first two shadow-mist warriors of the background tile. I hadn't intended to use any layout tables in the Smiley Fool EZ tricks sequence, but really had to, to control text placement on that nice background. The titles, however, with a few <br> marks adjusted themselves nicely without being stuffed into table cells.

    The most important point to remember if you do a big-images background tile is to lighten and brighten it enough so whatever color text you use is legible over it. It's important also to have enough blank space so the full design is visible -- what's the point of a real-image tile, otherwise? If most of a tile-background page will be covered with text, use an abstraction or very small design tile.

    Sometimes a tile's image would make little sense, unless picked up by a full-color graphic that's the basis for the tile. Check my early GAMES and Edutainments page. I had to bleach that background tile down so far, it would be just a bunch of pastel blobs if there wasn't the page logo, the rainbow glass marble, to show what those blobs are. (The tile and small icons were shrunk from it.)

 Spirit Warrior Page really finishes the Smiley sequence -- but left it making no sense. We see Smiley Fool, as a little green sick moon-face frowning guy going YUUUCH about chewing coffee beans, then suddenly there's Spirit Warrior and Grandma G's anti-booze thoughts. Wha'-wha'-wha'? So I made a transition page about how he got on the path, which I knew couldn't happen just by a friend sobering him up with some coffee.

    That page goes back almost to the simplest basics. It puts the one big graphic (which has been color-reduced to minimize filesize to about 35K) in default left-edge position, as the first item on the page.

    Since there's some space at the right, if the graphic isn't centered, a little message about what's going on is simply plopped there. And it is centered. This means its longer lines butt up against the graphic and the screen edge, but on the whole it looks OK.

    There has to be enough space fill to take you below the graphic, before you start a new text block under it. If the right-marginal messages didn't do it, space filler for this type of layout is repeated <br> HTML marks. I did a slightly more elaborate version of this tactic to make the mapkey appear on the same screen as the map for one of my MayaPages>.

    For the little "return to this page you're now on" button, I used the image alignment command "right" in the image call --

    <img align=right src="subdirectory/filename/gif">

    -- to put the icon image over against the right screen edge, for balance. It's still a button because the image call is inside the <A HREF="pagename.html"> and its closure </a> as is the linktext there.

    Note that the image call is not itself positioned to where it will call the image into the displayed page. If you want to call small images to left and right, and have text centered between them, handle the image calls as I did for this page, and for all the pages that have two icons at their start, one for the topic-related group of pages, one for each page, with page title in between. Check VIEW SOURCE. Both image calls precede the text that will be centered between them, and all is inside the <center> and its closure. If you don't do that, the tops of the pix won't line up, unless you use more elaborate formatting instructions.

    One trick: the background. Here's the tile for it. As you can see, it'a a skinny screen-window-sized vertical wiper. The only trick to making a skinny gradient fill for simple but effective backgrounds is to exactly match the colors at top and bottom of your gradient-filled rectangle, so the rows of the tile will seamlessly join.




That ends my discussion of how to make some simple but effective web pages that can display student work, organizational or your own messages, provide list-menus attractively, and still transport and load with reasonable speed if you're on a limited-bandwidth InterNet access on-ramp (as most schools and Indian organizations will probably be).

There's just ONE big trick: Use VIEW SOURCE a lot, as you surf attractive pages (and take notes!), and when there's too much to take in on such a page, SAVE it as a file (just the text part, don't swipe anyone's graphics), to study the HTML-coding offline to find out how the WebPerson did it.



Navigation Buttons

--TOP of
Page		 --Tutorials
Menu		 Main
Menu



This page prepared by Paula Giese; c. 1995, 1996 EMAIL to:

Last updated: Saturday, February 10, 1996 - 6:01:46 AM