• October 24

Class 08

Class 08 – Topics

CLASS IS CANCELED: OCTOBER 24, 2011.
Please read through the assignments and notes and come prepared for next week’s class.

Navigation
List Types
Midterm Project
Technical Production
Strategize your plan for the layout
Quiz 3 is postponed until next week
Design comps due

Assignment: CSS-based layout, 3-column

Assigned Reading:
Chapter 18:  Tables
Chapter 19:  Forms

Class 08 – Assignments: Due Monday, October 31

1) Please post your five design comps to your WordPress blog as jpg images. I will post feedback on your design over the next couple of days on your WordPress blog. If you haven’t received my comments by end of the day on Wednesday, October 26, please email me before moving forward.

For next week, continue working on your Midterm Project:

  1. Make any revisions to your design comps based on my feedback of your midterm project.
  2. Start Technical Production when your design is finalized for all of your pages. See the class notes regarding more information about the Technical Production process.
  3. By next week, October 31, start building your home page in HTML/CSS using a Column CSS Layout. Strategize the plan for your layout and determine whether your website is a one, two, or a three column structure. (See notes below). I have provided the “starter” HTML and CSS for each of the three layouts. Please make use of the links to videos and other resources I provided.

Most websites start as one of these three layouts and from there become more complex. Think of the “Eight Hour Day” webpage we build a few weeks ago. This started out as a one column layout and then become more complex with the addition of the featured section with the four columns.

2) Read all the Class 08 notes below.
Read the following chapter from our textbook before our next class Monday, October 31.
Chapter 18:  Tables
Chapter 19:  Forms

Quiz 3

We will take Quiz 3 next week.

Quiz 3 Review

Class 04
Give two reasons why a lack of HTML semantics is bad.
Name the HTML Best Practices outlined in the class notes.
In HTML 5, what tag replaced <div id=”header’>, <div id=”nav”>, <div id=”footer”>
Write out the anatomy of a CSS rule
Why are external style sheets best?
What is an em? (as it relates to a CSS measurement unit) And why are ems used as a unit of measurement for text in a website?
What are the three major CSS selector types we discussed in class?

Class 05
What are the four types of positioning?

Class 06
What is a favicon?
What is the general guideline for line length?
Name four web-safe fonts.
Name the six text properties outlined in the class notes.
To calculate the overall width of a box, including all padding, borders and margins, what formula would you use?

CSS Navigation Menu: Basic

Be sure to review the CSS navigation basic menu tutorial and the drop down menu tutorial and come to class next week with any questions you have.

See Tutorial: CSS Navigation Menu: Basic

CSS Navigation Menu: Drop Down

See Tutorial: CSS Navigation Menu: Drop Down

The difference between HTML lists and text

You may be wondering what the difference is between an HTML list and some text with bullets or numbers typed in by hand. Well, there are several advantages to using an HTML list:

  1. If you have to change the order of the list items in an ordered list, you simply move them around in the HTML. If you typed the numbers in manually, you would have to go through and change every single item’s number to correct the order—which would be tedious to say the least!
  2. Using an HTML list allows you to style the list properly—you can use CSS to style just the list elements. If you just use paragraphs, you will fi nd it more difficult to style the individual items in any useful manner, as the elements used will be the same as those used for every other paragraph.
  3. Using an HTML list gives the content the proper semantic structure, as well as a “list-ish” visual effect. This has important benefits such as allowing screen readers to tell users with visual impairments they are reading a list and giving additional information such as the number of items in the list and which item they’re currently on, rather than just reading out a confusing jumble of text and numbers. To put it another way: text and lists are not the same. Using text instead of a list makes more work for you and can create problems for your document’s readers. So if your document needs a list, you should use the correct HTML list elements.
Nesting Lists

The key to nesting lists is to remember that the nested list should relate to one specific list item. To refl ect that in the code, the nested list is contained inside that list item. The code for the previous list looks as follows:

<ol>
  <li>Chapter One
      <ul>
        <li>Introduction</li>
        <li>The way to succeed</li>
        <li>Gathering your tools</li>
      </ul>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three</li>
</ol>
Midterm Project: Due Monday, November 7

As you continue working on your midterm project, please keep in mind the following requirements for the project.

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?
Starting Technical Production
.

When design is finished you are ready to start Technical Production. Please read the information below and let me know if you have any questions.

http://www.everythingaboutweb.com/beginner/technical-production/

Strategize your plan for the layout
Is it one-column?

“Starter” HTML
<html>
<head>
<title>Title of Website</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>
“Starter” CSS
*{
    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: 130px;
}    
#content {
    width: 990px;
}
#footer {
    height: 50px;
    clear: both;
}

Resource:  VIDEO: One Column CSS Layout (Parts 1- 3)

Is it two-column?

“Starter” HTML
<html>
<head>
<title>Title of Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">

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

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

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

</div>

</body>
</html>
“Starter” CSS
*{
    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: 130px;
}
#sidebar {
    width: 390px;
    float: left;
}
#content {
    width: 600px;
    float: left;
}
#footer {
    height: 50px;
    clear: both;
}

Resource: VIDEO: Two Column CSS Layout (Parts 1- 2)

Is it three-column?

“Starter” HTML
<html>
<head>
<title>Title of Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">

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

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

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

</div>

</body>
</html>
“Starter CSS
*{
    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: 130px;
}
#leftsidebar {
    width: 245px;
    float: left;
}
#content {
    width: 500px;
    float: left;
}
#rightsidebar {
    width: 245px;
    float: left;
}
#footer {
    height: 50px;
    clear: both;
}
Other Resources (Sample Code)

Two Column CSS Layout: http://www.everythingaboutweb.com/classes/examples/2-column/
Two Column Faux CSS Layout: http://www.everythingaboutweb.com/classes/examples/2-column_faux/
Three Column CSS Layout: http://www.everythingaboutweb.com/classes/examples/3-column/

2 Column CSS Layout: Fixed Width And Centered
3 Column CSS Layout: Fixed Width And Centered




Comments

  1. Peri October 24th

    Comment Arrow

    I hope you are ok Jamie!! See you October 31st!

    peri


  2. Roya Nouri October 26th

    Comment Arrow

    Hope you feel better Jamie


  3. Jennifer Vero October 26th

    Comment Arrow

    Hi, Jamie. Quick question… Are the two CSS nav menus homework for next week? I wasn’t sure if this was an assignment or a practice exercise. What should we be using the Eight Hour Day header and BG images for if we are doing our designs?

    Thanks!


  4. jamie October 26th

    Comment Arrow

    Hi Jennifer,

    Yes, the two CSS nav menus are homework that were due this week:

    1) Design and build both a Basic CSS Navigation Menu and a Drop Down CSS Navigation Menu based on what you learned in the class demonstration. Create your own design for both navigation menus and use this opportunity to experiment a bit.

    I had the links to the Eight Hour Day images because we used them in the class demo last week but you won’t need them when you’re doing your own design.

    Thanks!

    Best,
    Jamie


  5. jamie October 26th

    Comment Arrow

    Thanks Peri and Roya!


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 66