Button, button, who's got the ....

After asking every student worker and the boss, I made a final decision on the new resource center logo. It was the one I liked best with the simple addition of the library address added. Seemed to be the prudent thing to do. The logo, which is 725 pixels wide and 75 pixels high, is comprised of a three-picture library image montage and an information address panel separated by a blurred purple line. Since I have chosen a dark purple background, the logo has a significant amount of white space for visual impact and is centered on the page. While 725 pixels does not seem very wide, especially on my 17 inch laptop at work, it completely fills the screen of my monitor at home. Theoretically the average screen is still 800 X 600, though most everyone has larger viewing areas, so this will be a one-size-fits-all proposition. It is centered on the page, so a bigger screen will simply show more of the background color.

With the logo in place, I moved on to navigational buttons. I want a button and rollover for the main navigational bar (not the image map). The main button displays white and the rollover will be yellow/gold. This means making at least two buttons for everyone single navigation image; the first display's as is and the second identical button changes color on mouse-over, hence two images. If I lose my mind and consider an active button, making three movements, a third color option will have to be made. Right now, I'm pleased enough with the look I have with a simple mouseover. Sometimes less is more. There are seven button options under the main logo with a combined width of 725 pixels centered below. Naturally, seven does not divide evenly into 750, so the buttons, all having different words, vary in length from 97 pixels to 115 pixels. It does sound like a big range, but a less than 10 pixel difference in size on the buttons is hardly visible. Each button is 25 pixels wide, and they are aligned horizontally. All of the sudden, the old web page looks very tired. That spurs me on to complete the cosmetic changes so I'm able to get to the meat of the site.

Next up, the image map for the main page. It will also be 725 pixels wide, but divided vertically with one side having a welcome message (left) and the other an image map of five pictures of the resource center. Pencil, eraser, ruler, and paper are still the best way to go when sketching out dimensions and sizes for the front page of the site. I have exactly what I want size-wise and will weed through new photos to select the best. The five will be combined as one large image that is destined to become my image map, complete with working hot spots!

I am feeling more secure using Fireworks for the graphic elements. Just this afternoon I finally figured out how to optimize the .png to make it a .gif or .jpeg without inserting in the web page first and having to work from there. It was so simple I was a bit chagrined it took such a long time. Now that I have learned the .png image is editable, I simply save a .png image to make duplicates and optimize as many different shots as I want. I'll delete the large folder of unused ideas when the page is finished. I really want to get the image map finished, so I brought home the laptop and may do some work over the weekend.

Then again, maybe not.

Tags: Academic library web site, CMC web site, Web Design, Using Macromedia Fireworks, Using Dreamweaver