Cascading Style Sheets


We have entered a new phase of Web design where, instead of writing all of the attributes in code where ever we want that style to take place, we now have a style sheet at the top of the page which contains all of the attributes that apply to the whole page which makes the HTML look longer but it is easier to find what ever attribute you are looking for if you want to change something.

My web site now has this style sheet which was very confusing for me to set up because you had to type different attributes to get the exact same outcome but I suppose that will become clearer with practice. You also had to know exactly what this attribute applied to and it might have a different name such as when we wanted to change the text color that was under text color now it is under paragraph. If I am confusing you don’t worry because I spent many hours confusing myself.

The main advantage to this use of style is that you can make one style sheet to use on many Web Pages or you can make Many Style sheets for one Web Site. It is hard to explain but if you go to Zen Garden you can click on different styles and the page that you are on changes to that style, quite interesting.
http://www.csszengarden.com/

On my site I kept most of the styles the same on everything except for my Home Page which has a couple of new additions. The first one might not be real noticeable but it is that when you are on my Home Page the cursor changes from the pointer to crosshairs. The next thing is that all of my images on my home page have a border around it including the title of the page, because that is not just script but an image that I made in Photoshop. I also made one change that affected all of my pages and that is that all of my links now have a hover color. So check out the changes to my Web Site.
http://oxygen.fvcc.edu/~p0091474/portfolio/

Web Site Planning


In Class, Josh and I story boarded a website for MADD as a class assignment. We used power point to set it up which went real well. The hardest part was simply to try and decide what categories that we need. From there it was easy we linked from our home page to a new page for each one of our categories and then just filled in the information as was needed.

Now for aspect of Navigation in Web sites. I personally do not like tons of links in a Web Site but if there are a lot of links and if they are organized well it is not bad. I also like the links to be out in the open and not hidden in a maze of other links.

I have a Site here that contains a lot of links it because it is a huge site and it contains thousands of cheats, for games on many platforms but it is easy to navigate.
http://www.games.net/ps2/index.shtml/?KNC-goog

This next site has a very simple main page for each heading but under each heading there are hundreds of pictures to view which are very easy to view with drop down menus.
http://www.blade-runner.it/p-galleria-e.html

I have picked this site, even though the navigation is a bit harder to follow, because it does not have your normal boring links but has a unique feel to it, which it should because it is a science fiction site.
http://www.scifistation.com/core.html

This next site is your basic site with nothing special, but it is easy to understand and navigate. The reaso is that this is a Site for people that need help and may be in a hurry and nervous. It also has a feature that I have not seen elsewhere and that is that you can pick English or Spanish.
http://girights.objector.org/

This final site is really well organized. Across the top it has places to go that tell you about the site itself which includes a tutorial about how to use the site. On your left you have your tools for finding the pictures that you want. This site is very user friendly.
http://www.firepix.net/

---------------------------------------------------------------------

Now it is time to look at a few sites that are not good examples of being uncluttered and easy to navigate. This first site I do not like because there are too many links. They are across the top, down the left side and in the body of the page.
http://www.grants.gov/

It may be that I am Bias against UM. Western but I found their site hard to navigate and the Red color scheme is distracting.
http://www.umwestern.edu/

I think that you can say that most News sites even though they my be easy to navigate have a real cluttered feel to them, with lots of advertisements, and you have to do a lot of scrolling so here is a final example of a cluttered Web site .
http://www.foxnews.com/

COLOR

This is just a little entry to talk about the aspect of color on Web Pages that we have been studying in our HTML class.

For my home page I used a dark green font which is real dark, almost to the point of being black but with a hint of green to give it character. I then made my background color a very light blue, not only because I love the color blue, but also because I appreciate a light color in the back of a web site. It enhances but does not over-power the script, and at the same time it cuts the glare that you get if you spend a lot of time looking at a script on a white background.

Now for a brief over view of the different types of colors and some websites that have these characteristics.

#1 is the Primary Color Scheme which here are our main colors; red, white and blue. The site that I have picked uses these primary colors for the complete page from the script to the pictures incorporated in it and they all interlace into each one another which complements the whole page.
http://www.christiansoldierscross.com/

#2 is the Secondary Color Scheme. The secondary colors are; Purple, Orange and Green. This site mostly has green and orange but it does have a few hints of purple mixed in. It is very attractive.
http://www.pearsonranch.com/

#3 is the Analogous Color Scheme, which are colors that harmonize like, Blue, Green, and Yellow or red, orange, and Yellow, or red, purple and blue. The site that I have is for the red, orange, and yellow and it has a mixture of different shades of red orange and yellow that have been darkened by having brown mixed into them but they are still Analogous colors.
http://www.cheatplanet.com/ps2cheats.html

#4 is the Complementary Color Scheme. These are two colors that complement or enhance each other and here they are. Blue and Orange or, Purple and Yellow, or Red and Green. The background of this page is a variation of red while the script is green. These two colors work together real well. The background brings the script to the foreground.
http://www.redsandgreenheart.org/

The 5th and final color scheme is the Monochromatic Color Scheme. This is basically taking one color and using many different shades of that one color for your color scheme. I have picked a site that is based on the blue monochromatic scheme. It uses different shades of blue and blue/grey in the header, to highlight the script and in the advertisements.
http://www.studiotraffic.com/