A demonstration of what can be accomplished visually through CSS-based design -- CSS Zen Garden
As a newcomer to the world of website design, this assignment was truly a test of patience, study habits, time, and commitment for me. However, after finally deciding on a theme for my design, I was off and running. The first thing a visitor will see upon entering my Mini Zen Garden is a large image of a clock with the title of the site. The colors and themes of this clock image are then used throughout the site to create unity and visual appeal.
From looking through various other Mini Zen projects online and in class, I found that the title of the page stood out to me as the most important piece of the page, as it was often the one element that I remembered most from a site. I was excited and encouraged to see the variety of options that existed within the "header" div, and really wanted to create a strong first impression on viewers. Due to my love for photography, I was intrigued and excited to come across stock.xchang, and found myself browsing through the site for a long time. After changing my idea for my header many times, I settled on the clock image. I found help through classmates and HTML dog as to how I could use image replacement to remove the current "header" div and place my clock image into its spot. I then used Macromedia Dreamweaver 8 to manipulate the image and add in the "header" text on top of the image. Since the clock reminded me of something antique and dignified, I chose to use the Algerian font as I felt that it matched this sophisticated tone. This font was also carried into my "requirements" section to tie the two together.
My "requirements" div was found to be the next hardest challenge. I wanted this section to compliment my "header" section as it contained the most text of the site and was an important element in creating and maintaining my theme and message. I chose, once again, to go with an image replacement (thanks again to HTML Dog) in order to be able to manipulate the font family and add a few more hints of color and visual interest. The headings within the "requirements" section tie in with the "header" as both have the same font: Algerian. I offset these headings from the other text by indenting them in order to highlight the main parts of the requirements and help the reader's visual flow in reading. The lines around the "requirements" section also help in maintaining the theme as I used the eyedropper tool in Macromedia Fireworks 8 to match the exact green from the clock image to the border lines in the "requirements".
For my Resources "sidebar" div, I wanted to keep things simple while still allowing my theme to tie it together with the other sections. I wanted to block this section off with a border to keep it as a type of side-note from the rest of the site. Again, I consulted HTML Dog for help on the use of borders. I really liked their idea of having two different styles of border with the four different sides and used a combination of the solid and dotted borders to give this effect. I found these two styles very appropriate as lines and dots are often two of the main elements on clocks.
My "footer" div ended up being very similar to my "sidebar". I wanted to keep a unity among the different sections and found that maintaining the same border, font, and effects was my best bet.
One element I have not yet explained but incorporated in the "description", "sidebar", and "footer" is the use of link effects. Thanks to a site that was intrduced in class: Listamatic,I was able to tie in the use of color when scrolling across the various links. I wanted my links to appear in the same color green as the border lines in the "requirements" section, so I used the eyedropper tool from Macromedia Dreamweaver 8 again and used this green as my main color for links. By copying the CSS codes for the "Rollover Lists" page in Listamatic, I was able to create an interesting and fun effect for my links. When a user scrolls over the link, it appears with a gray background and white font.
As far as the overall look of the page, I maintained a pretty standard arrangement of the various sections. The header remained at the top and was centered using padding (with help from HTML Dog). I kept the sidebar off to the right as I figured most people read from left to right; so, this section would be one of the last things someone would notice- since it is not as important as the others. The description was aligned under the header to give a brief explanation of the site and help maintain the flow. The requirements section was indented slightly to maintain a padding around the entire site and was justified left to mark its importance. As one can assume, the footer remained at the bottom of the page to leave it as a sort of "footnote" or ending comment for the page.
In the end, this project was trial-and-error for me. Having no prior experience with such technology, I had to learn everything as brand new in order to produce a site. I spent many long hours in the computer labs with Meghan and had to pay close attention in class to understand the various ideas and themes that could be incorporated within my page. I am very happy to say the page is done, and I can finally finish this chapter in my technology education.