Week 09

Week 09: Topics
Midterm Project Critiques: present website prototype
Project: If you haven’t already done so, finish documenting your design process for the midterm project (see notes below) and be sure to have this completed by our next class Wednesday, March 24. Please work on the next revision of your project based on feedback from today’s critique.

Reading for For Next Week
Styling with CSS: Chapter 4: “Positioning Elements” (pg 100-133)
lynda.com video
Dreamweaver CS4 Essential Training with James Williamson (Be sure to login before linking to video)
10. Controlling Layout with CSS

CSS structuring basics
Structuring with DIV tags
The Box Model
Understanding floats
Clearing and containing floats
Using relative positioning
Using absolute positioning
Using fixed postioning

Midterm Project – Due March 17

Specifications: Design a prototype website home page and first-level of another section (landing page), second level (sub-nav), and third level (sub sub-nav) page for a client** of your choice. Create a site map for the complete website and be prepared to present the sitemap for your presentation. Focus on implementing the thought process we studied in class and creating an interesting navigational interface that allows the user to navigate the site in multiple ways . Use HTML and an external CSS file to build the prototype for your home page and first-level page of your site. Post your thoughts and decision-making process for this project on your WP blog.

Deliverables:

Site map for entire site
Home page
Home page and first-level of another section (landing page), second level (sub-nav), and third level (sub sub-nav) page. (Four page total).

You need to upload your midterm project to the class server in order to present your project to the class. Please do this BEFORE class on Wednesday, March 17.

Design Process

The Design Process I’d like you to follow can be found in the section above, “Process Blogs.” On the Process Blog page, I will provide more details about each of the ten steps. For the Midterm Project, I expect you to cover processes #1 — #6 on your WP blog.

1. Defining Project & Audience
2. Sketching
3. Information Design
4. Interface Design
5. Visual Design
6. Prototyping: Wireframes –> HTML
7. Usability Testing
8. Iteration
9. Repeat
10. Final Version

Resources

Possible sources for images other than Corbis:

Veer: Wonderful selection of stock photography
iStock Photo
Morgue File: Free!
Stock Xchange
Stock Vault
iStock Pro
Open Photo
Getty Images
Index Stock Imagery
Absolute Vision

How do I position my content on the page?

Now that you understand how to create the basic 2-column, 3-column and faux column structures, how do you position the content inside of these columns?

For example, here is a page with content positioned inside of a 3-column structure.

There are several ways to control positioning on your page:

With an understanding of the CSS box model, you can add padding and margins to help control the positioning of content on your page.
With an understanding of absolute and relative positioning, you can use these two properties to help control positioning.
Sometimes using a table can help provide a “container” for your content and can help control positioning.

CSS box model

Figure: Detail of the Box Model

The term “box model” is often used by people when talking about CSS-based layouts and design. Not everyone understands what is meant by this though, and not everyone understands why it is so important.

Any HTML element can be considered a box, and so the box model applies to all HTML (and XHTML) elements.

The box model is the specification that defines how a box and its attributes relate to each other. In its simplest form, the box model tells browsers that a box defined as having width 100 pixels and height 50 pixels should be drawn 100 pixels wide and 50 pixels tall.

There is more you can add to a box, though, like padding, margins, borders, etc.

As you can see, a box is made up of four distinct parts. The outside one, the margin, is completely invisible. It has no background color, and will not obstruct elements behind it. The margin is outside the second part, which is the border. The border outlines the visible portion of the element. Inside the border is the third part of the box, the padding, and then inside that the content area of the box. The padding defines the space between the content area of the box and the border.

(Note that in the image above, the only border of the three drawn that would actually be visible is the solid line – the dashed lines are added to help demonstrate the box model).

When you define a width and a height for your box using CSS, you are defining not the entire area taken up by the content, padding, border and margin. You are actually just defining the content area itself – the bit right in the middle. The padding, border and margin must be added to that in order to calculate the total space occupied by the box. (From this point on, we will use width for demonstrations, but the same principles apply to both width and height).

box {
 width: 200px;
 border: 10px solid #99c;
 padding: 20px;
 margin: 20px;
}

The above CSS, applied to a box, would mean that that box occupied 300 pixels of space horizontally on the page. The content of the box would occupy 200 pixels of that (dashed line added to demonstrate the edge of the area occupied by the box). Note: just to be clear, the name of the div can be anything, not only “box.”

In the above image, you can see that the pale blue area is 240 pixels wide (200 pixels of content plus 20 pixels padding either side). The border is 10 pixels wide either side, making the total width including the border 260 pixels. The margin is 20 pixels either side, making the total width of the box 300 pixels.

In practice, this can cause some confusion. For example, if I have a 100 pixel wide space available, and want to fill it with a pale red box with a dark red border and a small amount of padding, it would be very easy to write the CSS like so:

box {
 width: 100px;
 border: 1px solid #900;
 padding: 10px;
 margin: 0;
 background: #fee;
}

(A declaration of 0, as used for the margin above, does not require a unit to be added. Any value other than 0 does require a unit, e.g. px for pixels. Also, although “background” is defined as a shorthand property, it is more widely supported than the more correct “background-color”.)

However, that will not give us a 100 pixel wide box, as the width declaration defines the content area of the box. The content area of the box will be 100 pixels – the total width of the box as defined above will be 122 pixels:

In order to set the above box to only occupy 100 pixels horizontally, you would need to set the width of the content area to be 100 pixels minus the padding and minus the border, in this case 78 pixels, like so:

box {
 width: 78px;
 border: 1px solid #900;
 padding: 10px;
 margin: 0;
 background: #fee;
}

To calculate the overall width of a box, including all padding, borders and margins, you would use the following formula:

total box width = content area width + left padding + right padding + left border + right border + left margin + right margin

^{Above material about The Box Model from Added Bytes website. Content on the site is licensed under a Creative Commons License.}

Example using inner divs

Here is a link to the page with content positioned inside of a 3-column structure.
And a link to the CSS file.

Note in the CSS file below, the inner divs are positioned using floats and padding, and sometimes you will need to use margins. Knowing how to use the elements correctly, and understanding the CSS Box Model, is how you’ll become more skilled building websites. Take the time now to start practicing.

Important code:

#content  {
width:670px;
top:0px;
margin-left:150px;
margin-right:170px;
height:1%;
background-color: #CCC;
}

#inner {
width:250px;
background-color: #fff;
padding: 20px;
float: left;
}

#inner2 {
width:380px;
background-color: #333;
float: right;

}

#inner2 img{
float:left;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 135px;
}