Final Web Page Design Journal

For my web page final for CIOS 157, the audience was other photographers and possible customers for my photography works. For my color scheme I did look at Adobe’s Kuler site in order to get an idea of some complementary colors to my web page banner which has a brown scheme. Blue colors were in the mix and I do personally like blue. The color blue is, according to some web sites I visited, supposed to have a calming, peaceful effect. I chose yellow and white for my text colors because they stand out against a blue background. The text is of the sans serif families, so it displays a much cleaner text on the video screen. I like clear, very readable text when I am visiting a web site, after all, folks visit web sites to garner information or view pictures etc. and one’s website visitors don’t need to go away with strained eyes. They probably won’t come back.
Even though I like my website navigation buttons, after completing my web site pages, I am not sure this really was a good idea. The buttons take a long time to load; particularly the hover part of the code which does not seem to respond right away. I am thinking the graphics take up too much band frequency. My photographs also need to be smaller thumbnails, which don’t take so much time to load. My aim was to make them pleasantly visible, but I need to learn the code that makes a particular photograph become larger only if the viewer wants to see the picture.
I validated pages as I went along to make sure I was following the current web page standards. I learned the mantra ‘Web-standard compliant pages last longer and are easier to maintain. My attempt at 508 Accessibility compliance was to make everything on the web pages very readable, even for us ‘older folk’.
I tested my web pages on Internet Explorer version 6.0, Opera version 9.62, and on Mozilla Firefox 3.0.4. On all three web browsers all my navigation buttons worked. My Spry code also worked on all three without any problems. On Internet Explorer 6 my photo borders did not display accurately. They were black instead of a dark gray ridge type of border. The other two browsers displayed the borders accurately.
I have been thinking about my website design for a number of weeks, and taking into account the requirements for the project. So I did most of my storyboarding in my head. But a bigger project, especially if the web page was being designed for someone else, would require some serious ‘on paper’ drawings or ‘computer work’ possibly using Fireworks planning. My pages turned out, for the most part as I envisioned they would, but I need lots more practice in order to turn out a truly professional piece of work.

The Final Fireworks Tutorial

The Final Fireworks tutorial was the water drop. It took a several times through before I finally completed a good water drop, but I am impressed with what Fireworks can do. I tried to do a text wrap. This was a tutorial that filled a shape with text, but it wouldn’t work. I guess what I was trying to do is only possible in Fireworks CS4. Many design actions are possible in Fireworks, even CS3, though. Now, if I can just remember how to do them.

Simple Form Assignment

This was rather a challenge to line up all the boxes in the form. I had to go into HTML and keep adjusting the horizontal size of each box till it looked good on the screen. I was able to modify the text size, height, color, etc. in CSS after I figured out what selectors controlled what text in the HTML code. After getting the boxes lined up as close to perfect as I could, I checked the page in IE 6.0, Opera 9.62 and Mozilla Firefox version 3.4. All the boxes were lined up well in Opera and Internet Explorer, in Firefox the message box was a tiny little bit longer.

Spry Assignment

Completing this assignment gave me a glimpse of the possible capabilities of using Dreamweaver as a tool for web design, but this semester we did not really focus a lot of time on learning how to use Dreamweaver. For this reason, working on the Spry code seemed out of place. I realize the point of this work was to familiarize us with Spry code, but a little more time spent on learning the basics of Dreamweaver before tackling this assignment would have been nice.

I changed the color of the Collapsible Panel Open and Collapsible Panel Tab background color to #032537, a dark blue. I copied the photo tips list from my midterm assignment into the HTML code and copied the code to make the list work into the CSS for this assignment, and I changed the text color to white.