Class 05

The Week’s Topics

Creating Multiple Column Layouts with Floats
Static, Relative, Absolute, Fixed positioning
Column CSS layout
Midterm project assignment
Chapter 25: Bringing it Together
Quiz  2 Review


Assignment 5: Due Monday, March 26

1. Read & watch all the “important stuff” for this week.
2. Practice Column CSS Layout: Eight Hour Day.

Continue where we left off in the class demonstration and continue to build the Eight Hour Day website. Please be sure to watch the two videos posted in the class notes. The first video covers the HTML and inserting the content into the page. The second video covers the CSS and how to add presentation to the page. Get as far as you can and come with all your questions to our next class. Upload the final files to a Class 5 folder in your lastname_firstname folder on the class server. Remember Listamatic is your friend.

Download the assets you’ll need:
Photoshop file, Text file and Images

Answer the question” What are the advantages of using HTML 5?” . . . “What’s so great about it?”

3.  Start work on Midterm Project.

Start thinking about your midterm project and let me know what company/organization/service you’ve selected for the project. You can either email me about your midterm project or post it to the comments section of our class notes.

4. Read all the Class 05 notes below.

Read the following chapters from our textbook before our next class Monday, March 26
Chapter 12: <head>
Chapter 13:  Headings and paragraphs
Chapter 14:  Whitespace

5. Study for Quiz 2

Hand-in your Assignments 2, 3, 4

Assignment 2: Site map (posted to WP blog)
Assignment 3: Design Comp (jpg) and Communication Brief (pdf)  (posted to WP blog)
Assignment 4: Slicing exercise. (images folder inside of an “Assignment 4″ folder in your lastname_firstname folder)

Quiz  2 Review

Below are questions that may show up on our next Quiz. Please study the following questions and be prepared to take the Quiz next Monday, March 26.

Class 01
What are the two things you’d need to purchase in order to post a website live?
Name the web file naming rules that follow basic web file naming conventions.

Class 02
What is the correct way to organize your files for the Web?
What does the term “Balanced design” mean?
When designing for the Web, why is it important to know your target audience?
Name the seven project roles common to the website process?
What is an information architect?
Name the information architecture deliverables.
What is a communication brief?
What is a sitemap?

Class 03
What is a persona?
What is a competitive analysis?
What is a wireframe?


Midterm Project – Due Monday, April 23
Website Redesign

Choose a website (with at least 10 pages) that is a good example of the most common design mistakes outlined here: The 10 Most Common Mistakes Web Designers Make.

Focusing on ways to solve these design mistakes, redesign and build 5 pages of the site and “placeholder” pages for the rest of the pages. (A placeholder page is the structure of the page with all the navigation but it doesn’t need to have complete text and photos. This is an example of a placerholder page). Use this Smashing Magazine article as a reference for this project: Clear And Effective Communication In Web Design

Specifications for the site:

  • The website cannot be a personal website, or a website for a friend or family. (You can do this outside of class with all the knowledge you acquire this semester!)
  • Do not choose a restaurant website. (More about this later).
  • Consider the business and communication objectives of the organization, and present the content in a manner that is consistent with these goals
  • Employ a design aesthetic appropriate for the organization
  • Introduce the organization on the home page
  • Direct traffic to key locations in the website from the home page
  • Contain a contact page that provides a contact form that users can email the organization through (this can be a graphic only… you do not need to build a functioning form for this project).
  • Follow basic usability principles to help the user identify their location and find their way around the site (page headings titled to match global navigation, current page identifier in navigation, redundant navigation at the bottom of pages, etc.)
  • Use Column CSS Layouts for the pages (no tables for layout)
  • Use ONE, external CSS stylesheet to style the entire site.
  • Optimize your design for an 1024×768 display (remember this means the finished width should be 990 px and that “the fold” is 560 px but the height of the pages should be longer.)
  • Read Chapter 25: Bringing it Together from our textbook to prepare for the midterm project.
  • Discuss your selection with me by posting your ideas to your blog.
Use of logo and images

For this project, please replace the actual name of the company/organization with a fictitious name and replace their logo and images with copyright free images. We need to do this because we don’t have permission to use another company/organization’s assets and content.

I suggest taking advantage of the Creative Commons license on the Flickr site.
http://www.flickr.com/creativecommons/

What is Creative Commons?
Creative Commons (CC) is a non-profit organization headquartered in San Francisco, California, United States devoted to expanding the range of creative works available for others to build upon legally and to share. The organization has released several copyright-licenses known as Creative Commons licenses free of charge to the public. These licenses allow creators to communicate which rights they reserve, and which rights they waive for the benefit of recipients or other creators. An easy to understand one-page explanation of rights, with associated visual symbols, explains the specifics of each Creative Commons license. This simplicity distinguishes Creative Commons from an all-rights reserved copyright. Creative Commons was invented to create a more flexible copyright model, replacing “all rights reserved” with “some rights reserved. – Wikipedia

Basically you have permission to use images on this site that allow attribution, share alike and/or non-commercial usage. You should still give credit to the photographer. Check the “Share This” pull down located next to Favorites & Actions to check the availability of an image to be shared.

In “Advanced Search” you can click to view Creative Commons images only, and your searches should show just those images.

You could also take a look at the Commons library on Flickr. There are images that are part of the public domain and can be used without attribution.
http://www.flickr.com/commons/

If you don’t find what you need on Flickr remember you must make use of royalty free images for your project. You CANNOT use images of found on other Web sites. You may use your own original artwork and/or photography if you prefer.

Possible sources for images:

Lastly, in preparation for midterm, upload a folder to our class server named: lastname_first_midterm. You will upload your midterm project to your folder on or before Monday, April 23.

Midterm Project checklist

Before completing your project make sure you have reviewed the checklist below:

  1. Did you research the project and define a target audience for the site?
  2. Did you successfully create a strong, visually effective site?
  3. Did you follow the specified dimensions based on a 1024 x 728 monitor resolution?
    (Finished width is 990 pixels and “the fold” is 560 pixels. Do not make your site a fixed height)
  4. Did you create your site using CSS Column Layout (did you use divs not tables)?
  5. Did you design effective main navigation and sub-navigation for your site?
  6. Did you title your pages and highlight navigation?
  7. Did you use mostly HTML text in your site?
  8. Did you create and use only one CSS file for your site?
  9. Did you create placeholder pages for the remaining pages of your site? (A placeholder page is the structure of the page with all the navigation but it doesn’t need to have complete text and photos. This is an example of a placerholder page).
  10. Did you upload the website to the server and view it on the server to make sure everything is displaying and working correctly?

Creating Multiple Column Layouts with Floats

Floats for layout is among the most complicated of CSS topics. If you don’t get it at first, go through the examples again a few times and things should become clearer. When you start to experiment with your own layouts, you will inevitably find that some slightly odd behaviour rears its ugly head. Keep experimenting, and look at the following resources for further examples and guidance:

Floatutorial by Russ Weakley
All About Floats
CSS float theory
HTML Dog page layout

Static, Relative, Absolute, Fixed positioning
Positioning basics

There are four types of positioning:

  1. static: The default if no positioning is applied—this simply lays out the element as normal, in the document flow. We therefore don’t need to discuss this one much further. You’d use this value to override positioning that has been set earlier in your style sheet.
  2. relative: This places the element where it would normally sit in the document flow, but then positions it somewhere else—relative to its normal position— depending on the movement values you give it.
  3.  absolute: This takes the element completely out of the document flow (so elements above and below it will appear next to one another as if the positioned element didn’t exist), and then positions it relative to the sides of the closest positioned ancestor element (parent, parent’s parent, etc.). This is normally the <body> element, although as you’ll see later you can set it to anything you want.
  4. fixed: This takes the element completely out of the document flow, just like absolute positioning, but instead of being positioned relative to the nearest positioned ancestor element, it is positioned relative to the browser window itself, meaning that the element will always stay in the same position on screen, no matter how much you scroll the contents.

Column CSS Layout: EHD

See how the web page is divided in to separate divs: http://markup.io/v/4y8ytkhzp32h

WATCH: Column CSS Layout: EHD (Part 1)

http://www.youtube.com/embed/GvJefgxgF3E

WATCH: Column CSS Layout: EHD (Part 2)

http://www.youtube.com/embed/mTJPtHuMjrU

Getting Started: HTML & CSS

Below is the HTML and CSS to use as the “starter code.” This is the code you start out with and that you can modify to create the Eight Hour Day home page.

Basic HTML: One 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="footer">  
</div>

</div>
</body>
</html>
Basic CSS: One 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;
}

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


Comments

  1. Minori Hosoyamada March 19th

    Comment Arrow

    section#2248

    Minori Hosoyamada woed press

    http://minorihosoyamada.wordpress.com/


  2. Kristina Hanson March 25th

    Comment Arrow

    hi Jamie,

    I’m considering:

    amysol.com

    sara-moon.com

    for midterm project. They are both small websites of artists. My concern is finding free pictures of illustrations!

    Thanks,


  3. Erik Stamps March 26th

    Comment Arrow

    I’d like to do

    bakerskateboards.com

    so to get free skating pics I’m going to take them myself of friends


  4. Layla Church March 26th

    Comment Arrow

    Jamie, I was thinking about doing a redesign of a (plant) nursery..

    Either http://sperlingnursery.com/ or http://www.boethingtreeland.com/

    I also want to take my own photos to use.


  5. Richard Erdursun March 26th


  6. Hector Rodriguez March 26th


  7. Hector Rodriguez March 26th


  8. Jeanette Simatauw March 28th

    Comment Arrow

    Hi Professor,
    What do you think of this website for my midterm? http://www.yogacircledowntown.com/index.asp

    Thank you :-)


  9. Jamie Cavanaugh March 29th

    Comment Arrow

    Hi Jeanette,

    Yes that is fine. I think you can do a much better design for this site.


  10. Hector Rodriguez April 2nd

    Comment Arrow

    Hello! I was thinking of this site for the website redesign: http://mamascheesies.com/index.html


  11. jamie April 2nd

    Comment Arrow

    Hi Hector,

    That’s fine.


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 66