For each of the websites listed in the OFP Websites page, I created the banners and graphics. This page will tell you how I did most of them, from the first to the current iteration, for Bud Sanders Appraisals.

All were done in Microsoft Image Composer, which came free with FrontPage.

Bud Sanders Appraisals

In late 1997, my father, Bud Sanders, decided he wanted to have a web presence, and believed that I could do it. I asked for his input, and a copy of his letterhead, from which I would make the graphics.

I started with a scan of the letterhead. As you can see this was NOT a good-quality scan, but it was all we had. (Remember, this was 1997.)

I "broke it up" into four pieces - the "BS House" logo box, "bud sanders", "appraisals" and the "A DIVISION OF HIGHLAND PARK ASSOC., INC." line - and cleaned each up as best I could. Then I put them back together (minus the logo box). (To be honest, I don't recall if I "cleaned up" the Division line or recreated it in the image editor.)

I DID straighten and clean up the house, as best I could, at the time. Looking at it now, I can't believe we both (Dad and I) thought it was good, however, it was MUCH better than the simple cut-out version.

I put a black border around the top image, placed them side-by-side, made them the general size of banners at the time (about 110px), and used them at the top of the page. (OMG! TWO separate images as a single-banner!)

However, I wanted color for the background. SOMEhow or other, I made the box-logo size based on 600px (normal screen width at that time) divided by 5. I believe I tried other numbers, but nothing "looked as good". I then "dyed" it a hideous yellowish-brown color (why, I don't remember), and used it, tiled, as the background of the page.

I found a "fancy" horizontal line, did a little playing with it, used purple for the headers, black for the text, and VIOLA (Wah-Lah!). I created a page for:

• thumbnails of the associates, linking to individual pages with larger pictures and short bios, (licenses were soon added);
• a list of current Clients
• a FrontPage-generated Order Form
• a link to send Bud Email

Now I needed some type of buttons for each of these and the Home Page. After a short bit of thought, I decided to use the House in the "BS House" logo box. I carefully cut it out, resized it a little, cleaned THAT image up, used a copy for each new page, and created link buttons. I created a crude arrow, made a copy of it reversed (pointed the other way for pages after the home page), and had my "link bar".

They did not move, but the cursor changed to a hand, over them, and I thought it was obvious by the names and being side-by-side, they were the site navigation buttons.

My Dad didn't give me very much direction, and was happy to have a web-presence to which he could point the banks and other clients. I wrote the original copy for his bio page (he corrected errors) and the "staff page" for my mother (using her Medicare Card for her "License" - she WAS the secretary/bookkeeper at the time - thought the site was a little "dry" without her page!).

See an example of the final result at OFP Websites - Bud Sanders Appraisals - Iteration #1.

Except for the background image color, and using a lot of FrontPage things (counter, variables, order form, etc.), I don't think I did TOO bad for my first-ever website.

Second Iteration & Beyond

Over the next couple of years, I kept surfing, reading web development pages, and playing around with Image Composer. We added a page for the associates' appraisal licenses, and I had, during that time, "fixed" the banner, placing the box-logo on either side, and surrounding the whole thing with a border.

I made it about the same height (110px) as before, and, after the borders were included, it turned out to be 610px wide. It still fit on the display screens, so it was left that way, and installed in place of the two-image "banner".

Test Buttons

Dad wanted a button that others could cut-and-paste into their site, and that he could put into email, sent to clients. So, I began experimenting around. Here are some of the better versions I came up with:

Mini-Banners

Green was used, because I like green! . I tried a BUNCH of colors, but the Orange and the Blue Neon looked best in the top button versions. In the Mini-Banners, I, again, tried various colors, trying to stick with green (LOL) and the colors on the site. (Note: Even now, the print is purple.) Some attempts  weren't readable at all, and others just didn't "look good". 

We decided we liked some of the others (like the orange and blue neon ones, above), but the simple mini-banner button would be best. It was added to the home page, with a link to the site. All it takes is a cut-and-paste, and you have both.

Christmas Card

Christmas-time, 1999, I wanted to create a page for an online Christmas Card, or one I could simply zip (WinZip) and send to online family and friends. I also wanted to play around a little with the GIF animator in Image Composer.

I searched around for free images and found a nice starry background and a few "twinkling" stars. I found a nice "Merry Christmas" animation.

I used a short poem and a song I had written a few years earlier, both tied in with the starry background, and, using "Christmas colors" (Green and Red, adding Orange and Yellow) I created a Christmas Card. I sent it, and Dad asked if I could put it on the website. I did, creating a link on the Home page for people to use to get to it, and PUBLISHED MY POEMS ON THE WEB! WOW!

See the original page at Bud Sanders Appraisals 1999 online Christmas Card.

(Remember, back then, monitor resolution wasn't as good as today's, and, I believe, it was MUCH easier to read!)

Developing Iterations #2-6

About that time, I thought the site should be changed. I tried a few things and settled on using Frames. (WHAT was I thinking?)

I cleaned the banner parts even better than before, and literally put them together (I don't believe I

I still wanted to use the logo house somehow, so I played around. I thought about using different colors for something, and came up with these:

I think I thought (remember, this was in 2000, it's 2006 as I write this) about using them as the link buttons (shrinking them a little, obviously), or as the left-frame background.

About that time, I found a rollover JavaScript by Roy Whittle (I don't believe I found it at his site, but it's still around - 10/27/2006), and examples of how to use them. That lead me to create more "regular" buttons, still using the house. Originally, I tried clearing the middle of the double-logo-box banner, and shrinking it to the size of a button:

But I thought the black ends were too strong. Then, I died the whole thing the new background color, and put a border around it:

The idea would be that another image would be made with the purple and black borders reversed. One would be "normal", the other would be "pushed". Again, I thought it was a bit much. So, I went back to the original "buttons", and "squished" it down to button-size, vertically, stretched it out horizontally, bordered the whole thing in the same purple and black, giving me my "inner button"

So, I have the middle part of the button. Now to make an "In" and "Out" version. Putting a 1- or 2-pixel border on the top and left for one and the bottom and right for the other, and VIOLA. Now I have the base buttons.

Just add a word, centered horizontally and vertically, to a copy of each, name them appropriately, build a table (remember, this was 2000) around whichever I decide is OUT, put them in the Rollover JavaScript, and I have buttons that look like they're pushed when the cursor rolls over them. (See BSA Rollover Button (JS) Example to see some of them in action.)

I used the ugly yellow "BS House Logo" and the less-important buttons in the left frame, a "tannish" background color for the right frame, and the banner and the "main" buttons (not as they appear on the examples page) in the top frame. (Originally, I tried using MS Borders, but didn't like something about it. Can't remember what... ) Within a very short time, I converted to frames. (See Iteration #2 Image.)

Because of the resolution of the screens (still), not that much of the actual page context was appearing, and we decided to get rid of the ugly yellow logo, replacing it. I made the buttons smaller (from 150px by 30px to 110px by 22px), made the left frame 110px wide, and tried a couple of different background colors for it:

We liked the dark brown one best, and used it for the left frame background. I created a "Bud Sanders Appraisals" "placard" from the center part of the banner, and found a waving US Flag online, both for the left frame. I changed the top frame so the buttons were there and the banner would roll off the page (making more room for the content), made the background a touch more brown, and used a darker purple for all the print. (See Iteration #3)

Around six (6) months after this iteration went live, 9/11/2001 happened. To show support, the least we could do, I created a "patriotic banner" from images I'd retrieved from the internet, and added our first "splash" page. It redirected to the main side within five (5) seconds (or the user could click the link. The page was simply the color of the main frame, with the banner and a few words in the center of the screen. See OFP Website Graphics - BSA - Post 9/11/2001 Splash to see what it looked like.

Over the next couple of years, I decided that while frames were kinda nice for formatting, I didn't like that clients wouldn't be able to save or link to individual pages they found important. (In frames, the "main page" is the Frameset. While new links can be made to appear within this framework, the frameset page name is all that's available to the user, for bookmarking or linking... At least that's been MY experience.)

So, I looked for a way to drop Frames. A friend found a JavaScript that created rollover buttons without images, then I found a few JavaScripts, examples of how to use them, and began using all of them. I also created a CSS to make the site more ... "modifiable".

My job was eliminated, and I created OFP, without frames, but using everything I wanted to use to re-created Bud Sanders Appraisals. Once I got all of it working, I made new versions of the Javascripts for BSA (mostly basic "document.write" statements) to:

• Replace the top and bottom of the pages
• Convert the Page Last Modified date to "Month dd, yyyy" format
• Save email from Spammers (a function that takes the username, domain name and top-level domain, and builds the "mailto:" link "on-the-fly")
• Create the sidebar button table.

Thus, Iteration #4 was born.

Stationary

Around this time, also, I learned how to create HTML Stationary for Outlook Express and Outlook. Basically, I created:

• a mid-size banner (full-size looked too large for email)
• a "mini-version" of the sidebar background logo
• a "fade" of the brown from the sidebar background logo to the main background color, shrunk it, horizontally, to about half the width of the "mini-logo"
• a jpg block (extra-wide for those with wide monitors)

and put the latter three together, side-by-side, creating one image. I moved the banner and background into the stationary folder, added (small text) the contact information, and had the stationary. I added the line about being "left out" after Dad tried to add it to the version I sent him. He used it for some time, as far as I know. I kept a copy. Here's a sample version (NOTE: Everything is full-size, except the actual page-size, shrunk to fit here.):

A new owner and changes to reflect that created Iteration #5. Then, the new owner's request to remove the sidebar background logo and move the Company Profile to its own page, resulted in Iteration #5.1.

Oh, yeah... Almost forgot... I used the house logo, a somewhat brighter purple, and made a "bullet" for the associates' (especially Dad's) resume: . It's a little large for most displays (20px square), but it can be sized using HTML (ie: ). I realize this isn't perfect the perfect solution, which would be to actually resize the image to fit the document, the image is small enough, and the change in size small enough, that I don't see a problem. Also, as you can see, making it smaller makes it even more difficult to tell that this is a "house". This is why it's a "bullet", and not normally used for "inline" purposes.

Bud Sanders Appraisals was my "learning" site, until I created OFP and one for my sister. Though the additions and changes, I believe I learned a lot. (And I hope no one I do a website for will EVER want that ugly yellow color, again! LOL)

---

Send comments/questions about this page to Bill Sanders at:

Go to Graphics Capabilities/Build Graphics For Websites
Go to OFP Websites Home page
Visit Bud Sanders Appraisals
 

Send email to Bill Sanders ()
with questions or comments about this page or site.

This site, all text and graphics (unless otherwise noted) on it
were designed, developed and published by Bill Sanders of Orange Frog Productions.
It and it's CSS was validated and complies with both the: CSS and HTML 4.01 validators from W3C.
NOTE: All CSS validates except the "New Window Buttons" which include some invalid code (ie: hacks),
added PicoSearch Tables, and warnings for using transparent backgrounds when color foregrounds defined.
Copyright © 2003, 2004, 2005, 2006, 2007 by Bill Sanders / Full site last modified: October 21, 2006
Any reproduction, printing, or selling of this content is prohibited without express written consent from William D. Sanders.