Week 7 – CSS and Thinking Inside the Box

This week there is only one reading because this week in lecture we are required to look at how CSS work with HTML. In addition students are required to actually create style sheets and start redefining tags and ID’s with style sheets, as well as getting used to Dreamweaver software.

As mentioned before CSS is focused on the presentation of the content and not actually the content its self (which is HTML). When elements are added, each one produces a box, which is what is meant by the box model. This rectangular box consists on margin area, outer edge, border, inner edge, padding area and a content area. The size of this box is determined when the user enters the width and height of this box. However some properties behave differently depending on whether the element is block or inline.

These boxes can be styled by changing the borders to how the user wishes, for example the borders can be dashed or different colours. The thickness of the borders can also be changed and margins can also be changed. For examples margins can be collapsed (when the space around and between elements may behave unpredictably.) or set to specific measurements, in regards to height and width. In addition there can also be negative margins, which causes the box element to move in the opposite direction of the positive border value.

Furthermore these boxes containing the elements can be floated and cleared. Floating for example may allow an image to be applied near some text. Floating enables the user to move, in this case, the image to as far left within the box as possible. It may also be necessary to add a margin to separate the two elements. Clearing however, is applied to elements after the floating. This tell the browsers that items with ‘clear’ on, after to come after the floated elements and not get mixed up with the floated elements. As well as this elements can be positioned absolutely, static, relatively or fixed. This will affect how elements appear, where they will be positions and if they are in the normal flow or not.

Page layout strategies also effect the box model. There is no way of knowing what the resolution monitor the webpage will be viewed on or even the size of the web page. As a result to ensure the webpage does not look uncomfortable, there are layouts such as liquid page design, elastic and fixed. There is no right or wrong layout, it is completely up to the designer. Although it is important to note that each have their own draw backs. For example elastic layouts are consistent with layout experiences, while able to allow text size to be flexible. On the other hand images do not automatically rescale, to be in proportion with the text and layout.

Upon reflection this week I feel I am able to offer a lot more depth to computing as a subject and have started to use key terminology more often. However I feel I need to support articles or challenge articles with my own research, this will give me a much deeper understanding, as well as breath of knowledge. I also need to develop further the skill of skim reading, so that reading time is shorter but I am still able to gather the key points correctly.  In addition I need to add more multimedia elements to the blogs.

Cites for this week’s blog:

Niederst Robbins, J. 2007. Learning web design. 4th ed. Beijing: O’Reilly.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s