I knew I wanted to create a page devoted to forms of entertainment I enjoy. I therefore decided that the page would look similar to a page in a magazine such as "Entertainment Weekly." ... more >>>
Being a big Philadelphia sports fan I wanted to devote my page to the teams that will one day win a championship in this city. Hopefully in my lifetime so that I can enjoy it. ... more >>>
First of all as a group we decided to pick another theme for our web site and basically make a new web-site. We decided to make a front page dedicated to Smarty Jones ... more >>>
I knew I wanted to create a page devoted to forms of entertainment I enjoy. I therefore decided that the page would look similar to a page in a magazine such as "Entertainment Weekly." I wanted it to be flashy and eye-appealing at the same time. I wanted to be sure the page had a balanced, symmetrical look as well. I decided to share with the viewer my thoughts on some of my favorite entertainers/entertainment forms and also include related web links. This gave the page more depth. I also decided to include sound clips of selected songs. This made the page come more alive and gave it more dimension.
Here is how I set up my page:
1. I used a style sheet to give the page a balanced and consistent look. Here is how I used my my style sheet:I succeeded in creating most of the effects I wanted. I did want to include a link to a short video clip of the Beatles. However, two problems arose. First, the video clip did not include the option to be saved into my hard drive. Second, there was no direct URL address to the video clip. Even without the video, I was happy with how the page turned out. This was done through careful planning, experimentation, and creative thinking as well.
Being a big Philadelphia sports fan I wanted to devote my page to the teams that will one day win a championship in this city. Hopefully in my lifetime so that I can enjoy it. When I created my homepage I decided to use the exercise that we practiced from class. I split the header up into categories. I know that we are supposed to use 800 x 600 pixels, but I cannot look at a computer screen when the icons take up half of it. I went with the 1024 x 768 background instead. I decided to used the following categories
The background from my page included a rock texture I obtained from playing around on the Internet which is a hobby of mine from time to time. Big surprise huh? I wanted to be a little creative so I got greedy and added as much as I could fit into one page. I was happy with the results. Not with the page itself, but with the way I was able to make the code look good. Sounds strange, but I like things to look neat.
First of all as a group we decided to pick another theme for our web site and basically make a new web-site. We decided to make a front page dedicated to Smarty Jones horse that has been so highly appraised these days. My contribution for this project was to develop a theme for a web site that would hold together all of our pages and at the same time will be consistent and pleasantly looking. I thought that for a small project like this it will be sufficient for one person to come out with a template that the others would use for their pages.
Before laying out the content and designing page elements I needed to work out the navigational model. Since there were not so many web pages in our project it wasn't extremely difficult to interlink them all in order to have a matrix-like navigation. The next step involved laying out the navigational elements on the page. Here, I had to decide how to align the links to the following pages:
Home
Summary
Personal
Initially I thought of a horizontal bar with those 6 links on it. However I needed to make visible the 3 personal pages so I placed them on the left. After what the page was divided into the following sections:
Header
Top Navigation
Left
Middle
Right
Bottom Navigation
Now, that the layout was adopted, next steps concerned publishing the content and testing the entire website. So I coppied the text written by Andy about the Smarty Jones out of his web page . In addition to that I decided to put a picture of Smarty Jones but none of the ones found by Andy would've suited the page. So I edited a bit this picture:
Speaking of graphic design I have a few comments to make here. Since it is very crucial to have the appropriate graphic content on the web pages, a great deal of success depends on how well the images are placed, drawn, compressed, etc. This is why I dedicated a lot of time during this course to practicing the Adobe Photoshop product, and I must admit it helped a lot when making this website. The header above all pages contains a picture of a horse race that was extended horizontally (to add to the effect of the race speed), and whose margins were applied a transparency gradient in order to create that effect of fading into a background image of the same color as the image's borders. The Picture gallery page contain the rest 5 images from Andy's page which I resized and cropped 3 of them to 180 x 200 pixels and the other two to 300 x 225 pixels resolution. Another application from Adobe which I found very useful is Image Ready - it compressed and saved all images for web use such that the average jpeg picture has 5KB.
And finally I wrote our names and e-mail addresses on the contact page. This is the only place I found it strange that the HTML does not have a special character for <tab>. Being accustomed to writing tab delimited lines of programming code it was quite embarrassing to calculate the approximate amount of non breaking spaces in order to arrange the names and e-mail more nicely. I know that it could've been done easier using tables; I just wanted keep it simple. And very often this proved to be a good design principle.