Project for MULT 1133 – Intro to Multimedia at Rose State College:  Digital Foundations Chapter 12

In assignment 5, we are supposed to evaluate a classmate’s website and discuss the elements that correspond with Web Design Best Practices.  I’ve chosen Rian Dillard’s website. 

Looking at the layout, it meets the requirements of having a smaller index collumn to the left, a header box at the top and content area in the middle and at the bottom, the footer information is correctly done and includes his copyright date and name.  Also, he has run the XHTML through the W3C verifier and was able to provide proof that he was successful in making his code compliant with W3C which also means that it will be compliant with multiple browsers.  The text is black on white and easily readable.  After pulling up the source code, I can see that it’s all neatly layed out so that it is easy to read.  The div id sections are separated out and the links are easy to spot and follow.  Looking over the rules set out in pages 97 and 98, everything complies with the standards set forth.  The links have a hover quality, a visited color is set at #333, header is centered, margins and padding are set  and the body defines a font-family, padding and margin of it’s own.  Overall this is a good solid site to start from and develop into a great resource for information.

In assignment 4 in my CSS class we are supposed to go over the three examples on page 132 in the book and then discuss the differences and addvantages as well as the disadvantages in using each of the three.  We are supposed to use the box model 1 and 2 observation.  Also I’ll be discussing what I will be using in the site of the class that I’m creating.
The first example dealt with creating a column with an inner div and nested elements, the second was clearing floated elements, and the third was controlling the positioning and display of elements using the position and display properties.  Using the Box model we define a width, style and color of  the box border.  The contents of the box is what we are really going to talk about.  Normally the easiest type of information is a column of information within the box and using the css file, we can change multiple boxes attributes simultaneously along with text color and font attributes.  So the box acts like a container and makes changing multiple areas on multiple pages quite easy.  I found that it was very helpful to display the border of the boxes that I used in my student website because they helped separate the contents in to distinct areas of interest.  Managing element widths is very important when it comes to using more than one column.  A handy trick is to set the box color the same as the background color so that you end up having your text content defined and easy to manipulate separately from the rest of the page but still look like it is sitting on the page without being in a box.  In box model observation #2 I found that elements that had no width set expanded to fill the width of their containing element.  The result of adding horizontal borders, padding and margins caused the text to change width.  The thing that I have learned out of this is that when you set the width of an element, I am actually setting the width of the content within that element.  When learning about floating and clearing in chapter 4, I found that floating an element was a way to move it out of the normal flow of the document. Elements that move next to the floated elements tend to sit next to them if there is enough room.  Using the clear property allows you to keep those elements from moving next to the floated elements.  Positioning comes in four flavors: static, relative, absolute and fixed.  We use positioning to get away from having to use tables. Since every element has a position property, it also has a display property.  The display property is powerful because it allows you to force an inline element to fill its containing element.  You can also set the value to none which will disallow the contents of the element to be visible.

I’ve started my Styln’ with CSS website and by applying the Font and Text styles, it’s beginning to look pretty cool.  I started out needing to change the default margins of all the elements because you loose a lot of verticle space. Since I didn’t want the info touching the edges of the browser window, I set the body’s font-family, margin to 1em and a nice background color.  I centered the header and adjusted the padding so that everthing looked just right.  I also consulted a color scheme and I have to say that I’m surprised that these colors look so well togther.  I was afraid it would look like a circus but it’s not bad at all, and I got a lot of color to pop out.  With the links, I wanted them to change color to a lighter color when you moused over them so I set that to pink and removed the underlining.