Week 05

Week 05 – Topics

CSS Layout
Two Column CSS Layout
Positioning
Margins
Padding
Floats
Clears
Quiz 3


ASSIGNMENT 5

Below are your assignments due next week by noon, Wednesday, November 28.

Our second classroom meeting is that same day so have your assignments finished before our class.

Gr Des 65 Classroom meeting
Thursday, November 29
2:00pm – 5:05pm
AET 105

READ

1. All class notes from Week 5
2. Assigned Reading from Textbook:

  • Chapter 14: Thinking Inside the Box
  • Chapter 15: Floating and Positioning
  • Chapter 16: Page Layout with CSS
DISCUSS
Discussion is due by noon, Monday, November 26. Please post by this date.

Discussion – Assignment 5: Competitive Analysis

Please answer the following questions on the Discussion section of the smconline.org site.

For many of you, I mentioned doing a competitive analysis for your final project website.

  • What is a competitive analysis?
  • Why is a competitive analysis important to the design process?
  • What things kind of things do you look at when doing a competitive analysis?
  • What three competitive websites can you look at for your final project?

Please choose 3 competitive websites and give a paragraph summary of each site (pros, cons) and post this on your Tumblr blog.

WATCH

VIDEO: Two Column CSS Layout – Part 1
VIDEO: Two Column CSS Layout – Part 2

EXERCISES (3 parts)

Part 1 – Practice creating a two-column layout for the “Art by Justine” web page demonstrated in the 2 videos above. Please refer to the class notes for this exercise. Please make sure you’re using correct file organization and turn in the entire “final_web” folder which contains all the files for the web page.

Download the Photoshop file for the “Art by Justine” web page and a folder of the images for this exercise.

Upload your files as a zip file to the “Dropbox” on smconline.org site by noon on noon, Wednesday, November 28 and bring your files with you to our classroom meeting on Thursday, November 29 at 2:00pm in AET 105.
. . . . . . . . . . . . . . . .

Part 2 – Continue working on your final project. Our next class meeting is the perfect time to go over any questions you may have. I want to take a look at your design and give you more feedback before you start building the site in HTML and CSS so bring in your final project files to our classroom meeting . Please move forward with the design of your site based on my feedback regarding your home page design comp.
. . . . . . . . . . . . . . . .

Part 3 – Exercises from Chapter 16

Please complete exercises 16-1, 16-2 from Chapter 16. Upload your files as a zip file to the “Dropbox” on smconline.org site by noon on noon, Wednesday, November 28.

When you upload your zip file to the Dropbox, please put both parts of the assignment in one folder and be sure to include your name in your file names. For example: yourlastname_assignment5.zip

QUIZ 3

Click here to take Quiz 3
Complete Quiz 3 by noon on noon, Wednesday, November 28.


Two Column CSS Layout
Basic HTML: Two column layout
<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">

<div id="header">
</div>

<div id="content">
</div>

<div id="sidebar">
</div>

<div id="footer">  
</div>

</div>
</body>
</html>

Note that the only difference between the one-column and two-column HTML is the addition of the <div> for the right-hand “sidebar” column. (In red above)

Basic CSS: Two column layout
*{
    margin: 0px;
    padding: 0px;
}

body {
    margin-left: 0px;
    margin-top: 0px;
}

img {
    border: none;
}

#wrapper {
    width: 990px;
    margin-right: auto;
    margin-left: auto;    
}

#header {
    height: 150px;    
}    

#content {
    background-color: #FFF;
    width: 650px;
    float: left;
}

#sidebar {
    background-color: #CCC;
    width: 340px;
    float: right;
}

#footer {
    height: 50px;
    background-color: #f3f2f2;
    clear: both;
}

Note that the only difference between the one-column and two-column CSS is the addition of the CSS for the right-hand “sidebar” column, the floats and the clear. (In red above)

Two-Column Exercise: Art by Justine

FTP (file transfer protocol)

Please review the FTP page on this website. Be sure you understand how to upload files to the class server. Please let me know if you have any questions about this!

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.

The CSS Box Model – Margins, Padding

Please watch the following:

Page Layout

Learning how to build a CSS-based layout is one of the biggest challenges for a web designer.

The short history

Over the years, web page layout has evolved from the early years of table-based layouts to the current practice of CSS-based layouts. You may still encounter web pages built using a table-based structure. (Craigslist is an example). In the nineties, and even in the early 2000s, many browsers did not support CSS-based layout because they did not offer full support for CSS.

“Although the CSS1 specification was completed in 1996 and Microsoft’s Internet Explorer 3 was released in that year featuring some limited support for CSS, it would be more than three years before any web browser achieved near-full implementation of the specification. Internet Explorer 5.0 for the Macintosh, shipped in March 2000, was the first browser to have full (better than 99 percent) CSS1 support. Other browsers followed soon afterwards, and many of them additionally implemented parts of CSS2.

Even though early browsers such as Internet Explorer 3 and 4, and Netscape 4.x had support for CSS, it was typically incomplete and afflicted with serious bugs. This was a serious obstacle for the adoption of CSS.” Wikipedia

Since the late 1990s when Cascading Style Sheets were beginning to work in most browsers, web authors have been encouraged to avoid what’s called the use of “presentational HTML markup” with a move towards the separation of presentation and content.

What is “presentational HTML markup” and what does the “separation of presentation and content” mean?

Presentational HTML markup basically means defining all your positioning and styling within the HTML page itself. A web page built with a table-based structure is an example of presentational HTML markup. Also, defining your styles “inline” — meaning, defining the styles within the HTML. For example, below is an inline HTML definition:

<font face="Arial" size="7">Welcome To My Homepage</font>

The big problem with presentational HTML markup is that making changes to the presentation (positioning and/or styling) of the content requires changing each and every web page within the site. In the example above, if I want to change the font face from “Arial” to “Times,” I need to change the code on each and every page of the site.

Can you imagine the time required to make this one change if the site is 100+ pages?

The separation of presentation and content solves the problems of presentational HTML markup. When I create my page layout, I can create an HTML pages containing all the CONTENT for my pages and I can create a separate CSS file containing all the PRESENTATION for my pages.  Instead of defining my styles inline, I  can use CSS to create my styles. Below is an example of a snippet of code for the content in the HTML:

<div id="header">Welcome To My Homepage</div>

And, if I defined the <div> tag in a separate CSS file as follows:

#header {
font-family:"Arial";
}

I will appreciate the advantage of separating my presentation from my content when I need to make a change. Using the example from above, I can change “Arial” to “Times” in the external CSS file and it will change the font-face defined in the div named “header” throughout the entire site. If I have an 100 page site, I don’t need to change each and every page! — I can change the definition of the font-face property in the CSS file for the site and because the CSS file is linked to each and every page (we’ll talk in more detail about this later), the font-face is changed throughout the site.

This is the power of separating presentation from content.

Further exploration: If you want to see examples of designers who have created completely different designs using the same content, see the CSS Zen Garden website. Every page on this site uses the same content — the same HTML code. These completely different designs are created entirely by the designer’s creation of an unique CSS file.

Moving from table-based layouts to CSS-based layouts

So if you want to try to limit the use of tables for the layout of your pages, how does a designer create a CSS-based layout?

In this class we’re going to create CSS-Based Column Layouts.

What does Absolute Positioning mean?

Here’s the technical definition of absolute position:
“Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties.”

An AP element (absolutely positioned element) is an HTML page element—specifically, a div tag, or any other tag—that has an absolute position assigned to it. AP elements can contain text, images, or any other content that you can place in the body of an HTML document.

With Dreamweaver, you can use AP elements to lay out your page. You can place AP elements in front of and behind each other, hide some AP elements while showing others, and move AP elements across the screen. You can place a background image in one AP element, then place a second AP element, containing text with a transparent background, in front of that.

AP elements will usually be absolutely positioned div tags. (These are the kinds of AP elements Dreamweaver inserts by default. But remember, you can classify any HTML element (for example, an image) as an AP element by assigning an absolute position to it. All AP elements (not just absolutely positioned div tags) appear in the AP elements panel.

Note: I use the term AP elements, and AP divs interchangeably… some people also refer to them as Absolute Placement Objects.

The advantage of using AP elements

The advantage of using AP elements is it allows a designer to create a CSS-based layout easily. Working with a layout created with AP elements is easier than working with a more commonly used 2-column or 3-column CSS-based layout. A designer can easily move and position AP elements on the page, making the layout of the page less cumbersome than it can sometimes be building a 2-column or 3-column structure. Also, building a site using AP elements can be very useful when you are prototyping a website.

The disadvantage of using AP elements

Most current websites are built using CSS-based 2-column or 3-column structures. These layouts accommodate content without the page structure breaking down. The big disadvantage of a layout created with AP elements is that to accommodate more content, you wlll often need to go back into the CSS to resize elements. For some projects, particularly websites managed by the client, or managed with a Content Management System (CMS), using AP elements will be prohibitive.

That said, this is why starting with a 2-column and 3-column page layout is the preferred structure for professional web page layouts. (This doesn’t mean all websites have a traditional looking 2-column or 3-column structure but often this structure is the starting point for the building of the site.)

Floats, Clears

Please read the following: http://css-tricks.com/795-all-about-floats/



Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 65