Week 4 Practical

Complete at beginning of class. Code this from scratch. Do not style the page with CSS or add any other elements. Test your work in a browser after every change in code.

  1. Create a root folder for a web page on a topic of your choice. Give it an appropriate name.
  2. Create an images folder inside it.
  3. Place a small, relevant image inside the images folder and name it appropriately.
  4. Create a new HTML file called index.html and save it to your root folder.
  5. Code the basic HTML skeleton in index.html.
  6. Add the two lines of code that are required to make this an HTML5 document.
  7. Create an ordered or unordered list on the page with four list items in it.
    • Make one of the list items a link with an absolute path (HINT: the pair of <a> tags go inside the pair of <li> tags, and the label goes in between the pair of <a> tags.)
    • Make one of the list items a link with a relative path.
    • Make one of the list items an email link.
    • Make one of the list items an image link.
  8. Save everything and test the page in a browser.
  9. ZIP the root folder and turn it in to the appropriate basket in Dropbox.

You may refer to prior lessons, your eBook, or online resources. You may ask for my help on one or two items, but I will not be guiding you through this review.

After you have had sufficient time to complete this on your own, I will demonstrate how I would do it.

Midterm Project Overview

Your Midterm Project is due next week. Have the code for the home page completed by the beginning of our Week 5 class, so that you can receive feedback. The hard deadline for this project is midnight of our Week 5 class date.

CSS Layout

If we use <div>s in our HTML to identify page content areas (such as header, nav, main, and footer,) and don’t adjust their positions in the CSS, they will go straight down the page in the order in which they appear in the code. Today, we will look at how to use CSS to reposition the <div>s exactly where we want them—and they can even overlap each other.

The Box Model

  • All elements on a page, from a div to a paragraph to a list item, is considered by the browser to be a box.
  • This concept is known as the box model.
  • Even inline elements such as anchors and images are seen as boxes.
  • Each box can have certain attributes:
    • a position
    • width
    • height
    • a border
    • padding
    • margins
    • z-index (the position along the z axis–more on this later)
  • Between the box and the border is the padding.
  • Between the border and the next element on the page is the margin.
the box model

The CSS width assigned to the box is added to the border thickness (times 2), the padding (times 2), and the margin (times 2) when calculating the total width of the element.

For example, the following CSS makes a box 332px wide. It has a 1px border (2px total), 20px of padding (40px total), and 20px of margin (40px total). Add that 82 pixels to the box’s width of 250px, and you get 332 pixels.

#panel {
width: 250px;
border: solid 1px;
margin: 20px;
padding: 20px;
}

Site Setup

  1. Create a site folder on your flash drive and name it css-layout.
  2. Create two new plain text documents in Adobe Edge Code, and name them basic.html and styles.css. Save them in your site folder.
  3. Type in the HTML5 skeleton (reference) into your basic.html file. Put <!DOCTYPE HTML> at the very top, and put <meta charset=”utf-8″> inside the element.
  4. Attach the stylesheet to the HTML file by putting <link type=”text/css” rel=”stylesheet” href=”styles.css” /> inside the element of basic.html.

Build Your Boxes

Don’t copy-and-paste the following code. Type it in to get some practice.

  1. Within the element of your basic.html page, create two div elements:

<body>
<div id=””>
</div>
<div id=””>
</div>
</body>

  1. Give the first div an ID of box1 and the second div an ID of box2.

<body>
<div id=”box1″>
</div>
<div id=”box2″>
</div>
</body>

  1. Write something inside of each div.

<body>
<div id=”box1″>I am a beautiful box. Just look at this color.
</div>
<div id=”box2″>I am a sturdy box with nice straight sides.
</div>
</body>

  1. Change the page <title> to Basic Boxes and save the file.
  2. Test the page in a browser. This is what the boxes look like without any styling.

Style Your Boxes

  1. Type the following rules into your styles.css file (copy-and-paste is okay too), and save it:

#box1 {
background-color: #AC77EC; /* you may change this color */
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
}
#box2 {
background-color: #F66; /* you may change this color */
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
}

  1. Test the HTML page in the browser again. Study how each line of CSS affects the presentation of the boxes on the page.

z-index

The z-index CSS property identifies how “close” or “far away” a CSS layer is from the viewer. In other words, width goes in one dimension horizontally, height adds a second dimension vertically, and z-index adds a third dimension on an axis perpendicular to the screen. This is useful to create divs which overlap. The lower the z-index (e.g. z-index: 1;), the “further back” a div is. The higher it is (e.g. z-index: 99;), the more “forward” it is. This technique requires that you set the position to relative (we’ll look at position in greater detail later.)

  1. Save basic.html as z-index.html in your site folder, and give the new page a <title> of Z-Index.
  2. Change the box IDs to numbers 3 and 4 and save the file:

<body>
<div id=”box3″>I am a beautiful box. Just look at this color.
</div>
<div id=”box4″>I am a sturdy box with nice straight sides.
</div>
</body>

  1. In styles.css, add the following code at the bottom and save the file:

#box3 {
background-color: #AC77EC; /* you may change this color */
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
z-index: 1;
position: relative;
}
#box4 {
background-color: #F66; /* you may change this color */
padding: 10px;
height: 200px;
width: 200px;
position: relative;
z-index: 2;
margin-top: -175px;
margin-left: 180px;
}

  1. Take note: what has been changed? Test the HTML page in a browser.
  2. Now try switching the z-index value of the two boxes. Save the file and test the HTML page again.

#box3 {
background-color: #AC77EC; /* you may change this color */
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
z-index: 2;
position: relative;
}
#box4 {
background-color: #F66; /* you may change this color */
padding: 10px;
height: 200px;
width: 200px;
position: relative;
z-index: 1;
margin-top: -175px;
margin-left: 180px;
}

position

The position CSS property can be either set to static, relative, absolute, fixed. The default position is static.

  • Static divs get plunked down right where they are in the flow of the HTML.
  • Relative divs are like static divs but can be moved relative to the previous content.
  • Absolute divs get pulled out of the HTML flow and act independently of all other divs.
  • Fixed divs work like absolute divs with a twist: they stay in the same place in the browser window even when you scroll down.

We’ve looked at an application of the relative position above. Let’s go back to our simple divs and add absolute positions instead. Both divs are now positioned relative to top-left of the browser window instead of relative to each other.

  1. Save z-index.html as absolute.html in your site folder, and give the new page a <title> of Absolute Position.
  2. Change the box IDs to numbers 5 and 6 and save the file:

<body>
<div id=”box5″>I am a beautiful box. Just look at this color.
</div>
<div id=”box6″>I am a sturdy box with nice straight sides.
</div>
</body>

  1. In styles.css, add the following code at the bottom and save the file:

#box5 {
background-color: #AC77EC;
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
position: absolute;
}
#box6 {
background-color: #F66;
margin-top: -25px;
margin-left: 180px;
padding: 10px;
height: 200px;
width: 200px;
position: absolute;
}

  1. Take note: what has been changed? Test the HTML page in a browser.
  2. Try changing the margins for #box6 again, save styles.css and test the HTML page again.

float

The float CSS property defines where a div will be positioned within or next to other elements. We have looked at this once or twice before. “Float: left” can be very useful to align divs horizontally rather than vertically. The default value for float is none.

Going back to our simple divs, let’s add a float of left to both. It aligns them horizontally if there’s room in the browser window:

  1. Save absolute.html as float.html in your site folder, and give the new page a <title> of Float.
  2. Change the box IDs to numbers 7 and 8 and save the file:

<body>
<div id=”box7″>I am a beautiful box. Just look at this color.
</div>
<div id=”box8″>I am a sturdy box with nice straight sides.
</div>
</body>

  1. In styles.css, add the following code at the bottom and save the file:

#box7 {
background-color: #AC77EC;
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
float: left;
}
#box8 {
background-color: #F66;
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
float: left;
}

  1. Take note: what has been changed? Test the HTML page in a browser.
  2. Try floating both boxes right instead, save styles.css and test the HTML page again.

clear

The clear CSS property prevents floating elements from hanging around to the left or right (or both) of a div. We can do some pretty cool things with clear. The default value is none.

Let’s go back to our left-floated divs above in number 3. If we add a green div below it, we can pop it below the first two div using the clear property set to left. Without this clear property, the green div does a really funky overlap with the other two divs.

  1. Save float.html as clear.html in your site folder, and give the new page a <title> of Clear.
  2. Change the box IDs to numbers 9 and 10.
  3. Add a new div below these and give it an ID of 11. Save the file:

<body>
<div id=”box9″>I am a beautiful box. Just look at this color.
</div>
<div id=”box10″>I am a sturdy box with nice straight sides.
</div>
<div id=”box11″>I am a box big enough for two.
</div>
</body>

  1. In styles.css, add the following code at the bottom and save the file:

#box9 {
background-color: #AC77EC;
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
float: left;
}
#box10 {
background-color: #F66;
margin: 10px;
padding: 10px;
height: 200px;
width: 200px;
float: left;
}
#box11 {
background-color: #6C6;
margin: 10px;
padding: 10px;
height: 200px;
width: 440px;
}

  1. Take note: what has been changed? Test the HTML page in a browser.
  2. Now add the clear property to box11, save the file and test the HTML page again:

#box11 {
background-color: #6C6;
margin: 10px;
padding: 10px;
height: 200px;
width: 440px;
clear: left;
}

  1. Zip up your site folder (css-layout.zip) and turn it in.

Validating your Documents

You should always run your HTML and CSS files through a validator to determine if you have properly coded them. Below I’ve decoded some of the most common errors (listed alphabetically) that result from a validation test, and how to fix them in most cases.

Remember to only worry about the FIRST error in a list of errors. Fix it and upload your HTML or CSS file again for validation.

You will also need to rely on your own understanding of proper HTML and CSS syntax.

Be sure to validate today’s code prior to submitting your site. You can find some sample error messages in Week 3.

Example CSS Layout

Using the final layout you did above for the clear property, it’s not a big jump to get to a 2-column site layout with a header and footer.

  • Put a <header> above your boxes.
  • Wrap everything inside a wrapper <section>.
  • Swap the three <div>s for <aside>, <article> and <footer>.
  • Create appropriate styles.

Take a look at the code examples below.

Note the use of a “universal selector” (*) to remove the browser defaults for padding and margins around elements. This give us greater spacing control over our page.

The HTML

CSS layout - the HTML

The CSS

CSS layout - the CSS styles

The Result in a Browser

CSS layout - the result in a browser

Design Principles

Design principles in depth.

Alignment

  • Everything should align with something else along at least one edge
  • Avoid center alignment
  • Don’t mix alignments (use a grid)
  • Margins and padding add white space
  • White space is your friend

GOOD example: http://www.100candles.com/
POOR example: http://www.maximumscented.com

Proximity

  • Things that go with each other should be closer to each other than things that don’t go together
  • Spacing has meaning; it implies relationships
  • Reinforce those connections with ALIGNMENT for a double-whammy
  • Provide WHITE SPACE to give the eye some rest

GOOD example: http://www.zappos.com/
POOR example: http://www.eviltattoo.com/

Repetition

  • Repeat some aspect(s) of the design
  • Creates UNITY (the sense that all the parts create a unified whole)
  • Helps identify navigation, heading levels, and overall organization
  • Aids usability (visitors don’t need to learn new structure from page to page)
  • Requires design guidelines and discipline

GOOD example: http://werkpress.com/
POOR example: http://www.cars-on-line.com/

Contrast

  • If two things are different, make them VERY different
  • Contrast can be created with color, size, scale, texture, value, motion, dimension
  • Creates a focal point – helps define what is most important
  • If you emphasize everything, you emphasize nothing

GOOD example: http://www.nurun.com/
POOR example: http://www.lightningbar.com/

Juicy Studio’s “Luminosity Colour Contrast Ratio Analyzer”

Spelling and Grammar

Bad spelling and grammar can destroy all you’ve achieved with good design.

Cool Infographic

Principles-of-Design-Grey-2560px