The website I chose to dissect is a freelance portfolio website called Emotions. I like the use of whitespace in the site and the format is really interesting to me because most content for websites that I see are centered and this one is off centered by a graphic and by leaving a lot of open space on the left side of the screen.
The homepage of this site is built using nine divisions.
- The wrapper that holds all the information of the site.
- A division nested inside called “all” that holds the main graphic, all the pictures and content.
- A separate division just for the main graphic that is styled in css.
- The division for the content that holds an unordered list for the navigation, the header, and a division for the text content.
- A division called empty which doesn’t have any content inside
- The footer
The green background for the website is made using two different images. There is one small repeating background image to make the two shades of green that you see for the background and the navigation. That image is placed in the body and repeated along the x-axis. To create all the shadowing for the website, there is a large background image placed in the wrapper with a transparency to get that shadow effect.
To create the feet that you also see in the background a seperate image was created and placed as a background image in it’s own division that is floated to the left. The same technique is used for the background in the content. Although it seems like one seamless background it’s broken up into sections to get that depth and shadow.
When first looking at the site I assumed that the navigation was built using sprites. When looking into the css of the document, each list item for the navigation are different classes and the image replacement for the navigation are different images instead of one sprite image.
Basically all the titles and headers and the footer use the image replacement technique except for the written content using the Tahoma,Arial,Helvetica,sans-serif font family.
The rest of the site pages use the same organization and techniques