Class 08

The Week’s Topics

Navigation
List Types
Midterm Project
Technical Production
Strategize your plan for the layout
Quiz 3
Design comps due


Midterm Project: Due Monday, April 23

Be sure to upload your midterm project to the class server before the beginning of class on Monday, April 23.

If you haven’t already done so, please email me your five design comps.

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, April 23 finish 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” web page 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.


Quiz 3

We will take Quiz 3 today. Click here to take quiz.


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, April 23

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. jamie April 15th

    Comment Arrow

    For Sebastian

    Here is the link to your Quiz 2
    http://www.surveymonkey.com/s/PMWD8WH


  2. jeanette simatauw April 16th

    Comment Arrow

    Hi Professor,
    Im not sure if my web page is 2 or 3 column. Because on the “LOCATION” page I have 3 column on the content. And the rest of the pages I have 2 column. Can you help me please …

    Thank you so much
    Jeanette


  3. jamie April 16th

    Comment Arrow

    Hi Jeanette,

    Let me take a look at your design comps in class tonight and I will help you with this.


  4. jamie cavanaugh April 16th


  5. ernie sanchez April 19th

    Comment Arrow

    Jamie,

    I nested the html5 html into the head tag….is that correct?


  6. Jamie Cavanaugh April 19th

    Comment Arrow

    Hi Ernie,

    No, the html tag is not nested into the head tag, it’s actually the other way around. Take a look at the code and illustration here:
    http://www.everythingaboutweb.com/build/code-for-html5-css-layout/


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 66