HCI 406 | Web Design
HCI 406 Home Lectures Resources

spacer Location: Lecture 02
spacer
Lecture Plan
Lecture 01
Lecture 02
Lecture 03
Lecture 04
Lecture 05
Midterm Presentation
Lecture 07
Lecture 08
Lecture 09
Lecture 10
Final Presentation
Lecture 02
Lecture: Site Design and Site Map. PDF Lecture
CSS Overview:
- Site CSS, local CSS, inline CSS;
- Styling Text
- CSS selector, Class, ID, Tag, Compound;
- Margins, Padding & the Box Model;
- Floats & Positioning
CSS cheat sheet.
Reads: http://www.w3schools.com/css/
Exercise:
Sample page
 
Basic HTML Skeleton:
<body>
  <div id="mainContainer">
   

<div id="logoBanner"></div>
    <div id="topNav">
 

 

 

 <div class="topMenu"><span class="currentPage">Current Tab</span></div>
<div class="topMenu"><a href="#">topNav02</a></div>
<div class="topMenu"><a href="#">topNav03</a></div>
<div class="topMenu"><a href="#">topNav04</a></div>
<div class="topMenu"><a href="#">topNav05</a></div>
    </div>
    <div id="promoImage"></div>
    <div id="content"> </div>
  </div>
  <div id="footer">copyright info</div>
</body>
site.css used in the sample page.
   
Overview of basic CSS, and CSS for layout.
 
Key CSS to be defined:
body { }
a{ }
a:hover { }
 

#mainContainer {
width: 960px;
margin-right: auto;
margin-left: auto; }
  #logoBanner {
width: 100%;
float: left; }
  #topNav {
width: 100%;
float: left; }
   

.topMenu { }
.topMenu a{ }
.topMenu a:hover{ }
.topMenu .currentPage{ }
  #promoImage {
height: 280px;
width: 100%;
float: left; }
 

#content {
width: 88%;
float: left;
margin-left: 50px; }
#footer { }
  DIV
   
Website design flow
  - Determine goals: what the site needs to accomplish
- Content is KING. Be CLEAR, CONCISE, orgnize the content.
- Architect the site: how the navigation works,
- Generate mockups.
- Build it from the protoypes/mockups.
- Test it
 
Site Type:
Brochure sites
 

http://doublediamondmoving.com/
http://fullmoonbbq.com/
http://alexanderhomesteadweddings.com/
E-Commerce sites
  http://nikeid.nike.com/
http://www.miniusa.com/
http://doopsuikerpoppies.be/
http://us.moo.com/
http://www.getconcentrating.com/
Entertainment sites
 

http://bjork.com/
http://ryanedgarmusic.com/
http://www.getconcentrating.com/
http://www.bloedoranjegallery.nl/
News sites
 

http://www.cnn.com/
http://www.bbc.com/
http://www.npr.org/
Blogs
 

http://www.webdesignerdepot.com/
http://ma.tt/
http://inspiredology.com/
http://freelanceswitch.com/
Educational sites
 
  Due: Site Map in your webspace
Note that you are not married to this proposal, you can keep revise it till
week 3.