Wednesday, September 29, 2010

Four Elements Website













http://hills.ccsf.edu/~agomez41/four_elements/elemental_living.html 

This is my first effort at writing HTML to make a full website. I had a lot of fun with this assignment and tried to briefly incorporate most of the different aspects of web design that HTML offers. My concept for the website was to include a page for each element and how I interact with that element in my life.

For the basic design of the website, I used a combination of horizontal and vertical frames. I made two horizontal frames to have a fixed heading for the site. I then divided the lower horizontal frame into two vertical frames and set the left frame as a navigation frame. On the navigation frame, I put links to the four elements pages plus the home page. When a visitor clicks on the links, the corresponding pages appear on the right vertical frame. Thus, I have a fixed heading and navigation frame, so the visitor can go to any page in the site at any time.

For each element, I used an image of myself interacting with that element and a brief explanation of how I feel about each element. For the Air and the Water element pages, I used tables to align the text and the picture, because I wanted the entire page to be viewable from a regular sized browser window. For the elemental symbols which I used as links in the navigation frame, I used Adobe Illustrator to create small, uniform vector symbols. The home page symbol I found online.

I also included two sounds, one of waves and one of fire crackling, on the respective elemental pages. I found these sounds at freesound.org. I embedded the sounds, and using the autostart, loop, height and width attributes, I made it so the sounds would start immediately upon loading, loop continuously, and the controls would not be visible (because I didn't like how it looked).

I also used a little bit of CSS on the navigation frame to make the links appear black and un-underlined.

No comments:

Post a Comment