table of contents | all slides | link list | examples | csci e...

http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html

1 of 151 3/7/2006 10:47 PM

Table of Contents | All Slides | Link List | Examples | CSCI E-12

Cascading Style Sheets (CSS); Building a SiteMarch 7, 2006

Harvard UniversityDivision of Continuing Education

Extension School

Course Web Site: http://cscie12.dce.harvard.edu/

Copyright 1998-2006 David P. Heitmeyer

My email: [email protected] staff email: [email protected]


2 of 151 3/7/2006 10:47 PM

Continuing with CSS


3 of 151 3/7/2006 10:47 PM

Backgroundsbackground-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground (a shorthand property)

The sample image we will use:

Example 5.1


4 of 151 3/7/2006 10:47 PM

Example 5.1 Source:

In style element (within head element):

<style type="text/css" >body { background-image: url(images/shield-background.gif);}

</style>

In body element:

<div style="margin-left: 40%; margin-right: 40%;" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci necfacilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendreritturpis. </div>

Example 5.1 Rendered:

With StylesWithout Styles

Example 5.2Example 5.2 Source:


<style type="text/css" >body { background-image: url(images/shield-background.gif); background-repeat: repeat-y;}

</style>

In body element:

<div style="margin-left: 40%; margin-right: 40%;" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci necfacilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non,


5 of 151 3/7/2006 10:47 PM

commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendreritturpis. </div>





<style type="text/css" >body { background-image: url(images/shield-background.gif); background-repeat: no-repeat; background-position: center; background-attachment: fixed; }

</style>

In body element:

<div style="margin-left: 40%; margin-right: 40%;" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci necfacilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendreritturpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, utsagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisisvehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>



6 of 151 3/7/2006 10:47 PM



7 of 151 3/7/2006 10:47 PM

Backgrounds aren't just for the "body"Here we use the following images as backgrounds in div elements.

wood.jpgmarble.jpgwater.jpg



<style type="text/css" >body { font-size: 18pt; font-weight: bold; color: white;}div.wood { padding: 1em; background-image: url(images/wood.jpg);}div.marble { background-image: url(images/marble.jpg); padding: 1em;}div.water { background-image: url(images/water.jpg); padding: 1em;}

</style>

In body element:

<div class="wood" > Wood<div class="marble" > Marble

<div class="water" > Water </div></div>

</div>


With Styles


8 of 151 3/7/2006 10:47 PM

Without Styles


9 of 151 3/7/2006 10:47 PM

Backgrounds aren't just for the "body"Instead of having an img element within the XHTML, we can include design images in the CSS. This example displays the flag.png with the h1 of the markup.



<style type="text/css" >div#ustitle { height: 80px; background-color: #ddd; background-image: url(images/flag-small.png); background-position: left; background-repeat: no-repeat; margin-bottom: 0.5em;}#ustitle h1 { padding-top: 0.5em; text-align: center;}

</style>

In body element:

<div id="ustitle" ><h1>United States Constitution</h1>


10 of 151 3/7/2006 10:47 PM

</div><div> We the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide forthe common defense, promote the general welfare, and secure the blessings of liberty to ourselves and our posterity, do ordain and establishthis Constitution for the United States of America. </div>



With a background image that covers the entire area.

Example 5.6

Example 5.6 Source:


<style type="text/css" >div#ustitle { height: 80px; background-color: #E2C7CD; background-image: url(images/flag-background.png); background-repeat: no-repeat; background-position: lef; margin-bottom: 0.5em;}#ustitle h1 { padding-top: 0.5em; text-align: center;}

</style>


11 of 151 3/7/2006 10:47 PM

In body element:

<div id="ustitle" ><h1>United States Constitution</h1>

</div><div> We the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide forthe common defense, promote the general welfare, and secure the blessings of liberty to ourselves and our posterity, do ordain and establishthis Constitution for the United States of America. </div>



Examples of sites that use CSS to include 'design' images:

Harvard College AdmissionsDepartment of African and African American Studies, Harvard UniversityW. E. B. Du Bois Institute, Harvard University


12 of 151 3/7/2006 10:47 PM

MinutemanImage as a fixed background for the "body". Alternate versions of the image for the "header" and "main" content areas of the page.

The three images:

Rendered in a browser:


13 of 151 3/7/2006 10:47 PM



<style type="text/css" >body { background: #638f29 url(images/minuteman.jpg) 0 -1.25in fixed no-repeat;}#main { background: url(images/minuteman-light.jpg) 0 -1.25in fixed no-repeat; width: 470px; margin-left: 25px; padding: 10px; font-weight: bold; font-size: x-large; line-height: 1.75em; font-family: Times, serif;}#header { background: url(images/minuteman-dark.jpg) 0 -1.25in fixed no-repeat; color: white; width: 470px; padding: 10px; margin-left: 25px; font-family: Times, serif;


14 of 151 3/7/2006 10:47 PM

}

</style>

In body element:

<div id="header" ><h1>The Concord Hymn</h1><h2>Ralph Waldo Emerson (1837)</h2>

</div><div id="main" >

<p> By the rude bridge that arched the flood,<br/>

Their flag to April's breeze unfurled;<br/>

Here once the embattled farmers stood;<br/>

And fired the shot heard round the world. </p><p> The foe long since in silence slept;

<br/>Alike the conqueror silent sleeps,

<br/>And Time the ruined bridge has swept

<br/>Down the dark stream that seaward creeps. </p><p> On this green bank, by this soft stream,

<br/>We place with joy a votive stone,

<br/>That memory may their deeds redeem,

<br/>When, like our sires, our sons are gone. </p><p> O Thou who made those heroes dare

<br/>To die, and leave their children free, --

<br/>Bid Time and Nature gently spare

<br/>The shaft we raised to them and Thee. </p>


15 of 151 3/7/2006 10:47 PM

</div>




16 of 151 3/7/2006 10:47 PM

margin, padding, bordermargin

margin-topmargin-rightmargin-bottommargin-leftmargin (shorthand)

paddingpadding-toppadding-rightpadding-bottompadding-leftpadding (shorthand)

borderborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-widthborder-colorborder-styleborder-topborder-rightborder-bottomborder-leftborder


17 of 151 3/7/2006 10:47 PM

border-style

Example 5.8

Example 5.8 Source:


<style type="text/css" >body {font-family: tahoma,arial,sans-serif; font-size: small; }p { padding: 1em; margin: 1em; }p {width: 30%; }.border1 { border: thin dotted #900; }.border2 { border: medium dashed #090; }.border3 { border: thick outset #009; }.border4 { border: 3px solid #999; }.border5 { border: 5px double #000; }.border6 { border: 10px groove black; }.border7 { border: 15px ridge black; }.border8 { border: 20px inset #900; }

</style>

In body element:

<div><h4>Dotted</h4><p class="border1" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras feugiat mauris facilisis libero. Etiam nisl. Cras est dolor, viverra ac, ultrices volutpat, vestibulum et, odio. Nulla eget libero. Praesent eget tellus vel nibh nonummy egestas. Donec a ligula.Aenean magna odio, nonummy eu, faucibus ac, aliquam non, est. Integer gravida pede id justo. Maecenas elit nisi, blandit id, ornare eu, condimentum a, diam. Donec at felis mattis magna euismod suscipit. Curabitur pulvinar. Duis in dui. Integer mattis risus ac erat. Nullamsit amet dolor. Suspendisse non lacus. </p><h4>Dashed</h4><p class="border2" > Etiam eu arcu quis lectus semper sodales. Donec vitae risus. Integer sollicitudin imperdiet dolor. Donec vehicula.Aliquam ut sapien sed eros imperdiet pharetra. Donec accumsan scelerisque leo. Sed eros nunc, pellentesque et, mollis non, faucibus venenatis, tortor. Curabitur auctor rutrum turpis. Vestibulum id ipsum eu leo venenatis cursus. Nulla at risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitureget odio. Phasellus consectetuer massa. Aenean ornare congue purus. Aliquam orci ligula, tempus eget, blandit et, mattis a, lorem. Sed non enim a magna pharetra sodales. </p><h4>Outset</h4><p class="border3" > Pellentesque a velit. Sed pharetra vestibulum mauris. Ut vel arcu. Cras dolor ligula, eleifend et, ultrices nec,


18 of 151 3/7/2006 10:47 PM

viverra in, ipsum. In convallis pharetra lacus. Etiam tellus. Aliquam quam. Vivamus mattis purus nec quam. Suspendisse hendrerit dui acmassa. Morbi consectetuer malesuada lacus. Nulla eu pede. Quisque mattis. Etiam vel nunc. </p><h4>Solid</h4><p class="border4" > Etiam rhoncus. Praesent id neque et odio dictum varius. Integer imperdiet blandit orci. Donec nec nunc posuereaugue egestas accumsan. Nunc nonummy metus ut nunc. In id turpis vitae nisl eleifend bibendum. Curabitur cursus aliquam dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Integer vitae eros ac pede volutpat varius. Duis pellentesque, lectus vel fringilla tincidunt, tortor erat gravida urna, vel interdum neque risus sit amet arcu. Phasellus sagittis sem vel eros. Nullam est sem, hendrerit vitae, imperdiet id, fermentum nec, justo. Sed nisi risus, malesuada non, scelerisque non, mattis ac, turpis. Mauris tempor commodo massa. Donec porttitor libero sed neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tortor. Sed quis dolor. </p><h4>Double</h4><p class="border5" > Duis id erat a tortor laoreet aliquet. Quisque consectetuer lobortis mauris. Donec pede. Cras non turpis vel tortoriaculis nonummy. Ut facilisis viverra sem. Morbi pretium iaculis ligula. Praesent lectus. Aenean vel ante. Nunc interdum semper nisl. Pellentesque tincidunt. Proin eget orci. Praesent tortor. Aenean lobortis ornare lacus. Etiam congue. Ut egestas feugiat elit. </p><h4>Groove</h4><p class="border6" > Aliquam leo nunc, congue a, imperdiet eget, aliquet ac, tortor. Sed ac est. Vivamus nisi. Mauris in nisl. Sedultricies nunc vel nunc. In dignissim consequat arcu. Sed in risus. Nulla facilisi. Integer purus urna, laoreet vitae, congue a, posuere ut, ipsum. Nunc ac lacus sit amet nisi porttitor aliquam. Pellentesque ante. Etiam luctus nisl. Suspendisse a mauris vitae odio consequat pharetra. Nam egestas leo vel elit. Sed ornare risus at elit. Cras mi est, aliquam sed, dignissim quis, bibendum non, purus. Nullam dictum. Morbi nisl justo, dictum sit amet, lobortis non, auctor id, nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p><h4>Ridge</h4><p class="border7" > Vivamus dictum, sem in vulputate vestibulum, est tellus tempus dolor, ut laoreet arcu metus eu orci. Sed enimaugue, dignissim sed, porta sed, dapibus ac, nibh. Nunc mattis ipsum eu lectus. Nam pharetra mattis massa. Aliquam consectetuer, leo sed pretium mollis, augue purus posuere augue, sed sagittis sapien odio in magna. Aliquam erat volutpat. Fusce odio. Integer euismod. Donec aliquam pede vel ipsum. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed quam. </p><h4>Inset</h4><p class="border8" > Maecenas consectetuer, lectus ac tempus iaculis, leo ipsum tincidunt erat, et aliquam libero nulla ac ipsum. Namturpis leo, feugiat vel, nonummy id, ornare a, arcu. Vestibulum porta, justo et ornare porta, neque eros vestibulum libero, semper iaculis augue turpis eu neque. Quisque eu nisi sit amet mauris rutrum elementum. Pellentesque ut nunc a tortor rutrum vulputate. Suspendisselectus orci, luctus quis, posuere non, pretium vel, diam. Etiam vulputate. Duis tempor posuere ipsum. Praesent eget risus ac turpis venenatis porttitor. Maecenas accumsan lacus sit amet urna faucibus dapibus. </p>

</div>




19 of 151 3/7/2006 10:47 PM


20 of 151 3/7/2006 10:47 PM

Margin, Padding, Border ExampleScreenshot:



<style type="text/css" >.about { width: 33%; text-align: left; font-size: 0.75em; color: #006600; background: #fefecd; padding: 0.5em;


21 of 151 3/7/2006 10:47 PM

margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; }body { font-size: large; line-height: 1.5}

</style>

In body element:

<div><div class="about" > Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence is at once thenation's most cherished symbol of liberty and Jefferson's most enduring monument.</div><div> We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certainunalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments areinstituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomesdestructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation onsuch principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. </div>

</div>




22 of 151 3/7/2006 10:47 PM

Margin, Padding, Border ExampleAnd now we "float" the block:



<style type="text/css" >.about { float: right; width: 33%; text-align: left; font-size: 0.75em; color: #006600; background: #fefecd;


23 of 151 3/7/2006 10:47 PM

padding: 0.5em; margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; }body { font-size: large; line-height: 1.5}

</style>

In body element:

<div><div class="about" >Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence is at once the nation's most cherished symbol of liberty and Jefferson's most enduring monument.</div><div> We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certainunalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments areinstituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomesdestructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation onsuch principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. </div>

</div>




24 of 151 3/7/2006 10:47 PM

display property

p {display: block;}em {display: inline;}img {display: none;}


25 of 151 3/7/2006 10:47 PM

Using Lists for Navigation: TabsAn unorder list:

Styled as "tabs":

The CSS properties that do most of the work here are:

display: inline; list-stylee: none;


In example11.css

ul#tabnavigation { list-style: none; padding-bottom: 0.5em; border-bottom: 2px solid black; font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; color: #990000;}


26 of 151 3/7/2006 10:47 PM

ul#tabnavigation li { display: inline; list-style: none; margin: 0;}ul#tabnavigation a{ padding: 0.5em 1em; margin-right: 0.25em; background-color: #dddd00; border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black; text-decoration: none; }ul#tabnavigation a:link { color: #990000;}ul#tabnavigation a:visited { color: #990000;}ul#tabnavigation a:hover { color: #dddd00; background-color: #990000;}

In head element:

<link rel="stylesheet" type="text/css" href="example11.css"/>

In body element:

<ul id="tabnavigation" ><li>

<a href="http://www.acc.org/" >ACC</a></li><li>

<a href="http://big12sports.collegesports.com/" >Bix XII</a></li><li>

<a href="http://bigten.collegesports.com" >Big 10</a></li><li>

<a href="http://www.ivyleaguesports.com/" >Ivy League</a>


27 of 151 3/7/2006 10:47 PM

</li><li>

<a href="http://www.pac-10.org/" >Pac 10</a></li>

</ul>



Inspired by: CSS Cookbook by Christopher Schmitt


28 of 151 3/7/2006 10:47 PM

Lists as NavigationTurn lists into side-bar navigation using the "list-style: none;". The "display: block" applied to the "a" element makes the whole area (not justthe text) 'clickable'.

Example 5.12

Example 5.12 Source:

In example12.css

#navlhs { font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: bold; font-size: 0.7em; width: 15em; border-right: 1px solid #333; margin-bottom: 1em; background-color: #ddd; color: #900;}#navlhs ul { list-style: none; margin: 0; padding: 0;


29 of 151 3/7/2006 10:47 PM

}#navlhs ul li { margin: 0; border-top: 1px solid #333;}#navlhs ul li a { display: block; background-color: #ccc; border-top: 1px solid #333; border-left: 5px solid #333; text-decoration: none; padding: 2px 2px 2px 0.5em;}#navlhs a:link { color: #900;}#navlhs a:visited { color: #900;}#navlhs a:hover { color: #fff; background-color: #900;}

In head element:


In body element:

<div id="navlhs" ><ul>

<li><a href="http://www.baylor.edu/" >Baylor</a>

</li><li>

<a href="http://www.cu.edu/" >Colorado</a></li><li>

<a href="http://www.iastate.edu/" >Iowa State</a></li><li>


30 of 151 3/7/2006 10:47 PM

<a href="http://www.ku.edu/" >Kansas</a></li><li>

<a href="http://www.ksu.edu/" >Kansas State</a></li><li>

<a href="http://www.missouri.edu/" >Missouri</a></li><li>

<a href="http://www.unl.edu/" >Nebraska</a></li><li>

<a href="http://www.ou.edu/" >Oklahoma</a></li><li>

<a href="http://www.okstate.edu/" >Oklahoma State</a></li><li>

<a href="http://www.utexas.edu/" >Texas</a></li><li>

<a href="http://www.tamu.edu/" >Texas A&M</a></li><li>

<a href="http://www.ttu.edu/" >Texas Tech</a></li>

</ul></div>





31 of 151 3/7/2006 10:47 PM

Lists as Navigation: Nested ListsNested lists are indented. We have the beginning of a "clamshell" navigation.



32 of 151 3/7/2006 10:47 PM

In example13.css

#navlhs { font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: bold; font-size: 0.7em; width: 10em; border-right: 1px solid #333; margin-bottom: 1em; background-color: #ddd; color: #900;}#navlhs ul { list-style: none; margin: 0; padding: 0;}#navlhs ul li { margin: 0; border-top: 1px none #333;}#navlhs ul li a { display: block; background-color: #ccc; border-top: 1px none #333; border-right: 1px solid #333; border-bottom: thin dotted #333; border-left: 5px solid #333; text-decoration: none; padding: 2px 2px 2px 0.5em;}#navlhs a:link { color: #900;}#navlhs a:visited { color: #900;}#navlhs a:hover { color: #fff; background-color: #900; border-top: 1px outset #333; border-right: 1px outset #333; border-bottom: 1px outset #333; border-left: 5px outset #333;}


33 of 151 3/7/2006 10:47 PM

#navlhs a:active { color: #fff; background-color: #900; border-top: 1px inset #333; border-right: 1px inset #333; border-bottom: 1px inset #333; border-left: 5px inset #333;}#navlhs ul ul a { list-style: none; padding-left: 1.5em; font-size: 80%; font-weight: normal;}#navlhs ul.collapse { display: none; }

In head element:


In body element:


<li><a href="http://big12sports.collegesports.com/" >Bix XII</a><ul>


</li><li>


<a href="http://www.iastate.edu/" >Iowa State</a></li><li>


<a href="http://www.ksu.edu/" >Kansas State</a>


34 of 151 3/7/2006 10:47 PM

</li><li>

<a href="http://www.missouri.edu/" >Missouri</a></li><li>







</ul></li><li>

<a href="http://www.ivyleaguesports.com/" >Ivy League</a><ul>

<li><a href="http://www.brown.edu/" >Brown</a>

</li><li>

<a href="http://www.columbia.edu/" >Columbia</a></li><li>

<a href="http://www.cornell.edu/" >Cornell</a></li><li>

<a href="http://www.dartmouth.edu/" >Dartmouth</a>


35 of 151 3/7/2006 10:47 PM

</li><li>

<a href="http://www.harvard.edu/" >Harvard</a></li><li>

<a href="http://www.upenn.edu/" >Penn</a></li><li>

<a href="http://www.princeton.edu/" >Princeton</a></li><li>

<a href="http://www.yale.edu/" >Yale</a></li>

</ul></li><li>

<a href="http://www.pac-10.org/" >Pac 10</a><ul>

<li><a href="http://www.arizona.edu/" >Arizona</a>

</li><li>

<a href="http://www.asu.edu/" >Arizona State</a></li><li>

<a href="http://www.berkeley.edu/" >California</a></li><li>

<a href="http://www.uoregon.edu/" >Oregon</a></li><li>

<a href="http://www.oregonstate.edu/" >Oregon State</a></li><li>

<a href="http://www.stanford.edu/" >Stanford</a></li><li>

<a href="http://www.ucla.edu/" >UCLA</a>


36 of 151 3/7/2006 10:47 PM

</li><li>

<a href="http://www.usc.edu/" >USC</a></li><li>

<a href="http://www.washington.edu/" >Washington</a></li><li>

<a href="http://www.wsu.edu/" >Washington State</a></li>

</ul></li><li>

<a href="http://www.acc.org/" >ACC</a><ul>

<li><a href="http://www.bc.edu/" >Boston College</a>

</li><li>

<a href="http://www.clemson.edu/" >Clemson</a></li><li>

<a href="http://www.duke.edu/" >Duke</a></li><li>

<a href="http://www.fsu.edu/" >Florida State</a></li><li>

<a href="http://www.gatech.edu/" >Georgia Tech</a></li><li>

<a href="http://www.umd.edu/" >Maryland</a></li><li>

<a href="http://www.miami.edu/" >Miami (FL)</a></li><li>

<a href="http://www.unc.edu/" >North Carolina</a>


37 of 151 3/7/2006 10:47 PM

</li><li>

<a href="http://www.ncsu.edu/" >North Carolina State</a></li><li>

<a href="http://www.virginia.edu/" >Virginia</a></li><li>

<a href="http://www.vt.edu/" >Virginia Tech</a></li><li>

<a href="http://www.wfu.edu/" >Wake Forest</a></li>

</ul></li><li>

<a href="http://bigten.collegesports.com" >Big 10</a><ul>

<li><a href="http://www.illinois.edu/" >Illinois</a>

</li><li>

<a href="http://www.indiana.edu/" >Indiana</a></li><li>

<a href="http://www.uiowa.edu/" >Iowa</a></li><li>

<a href="http://www.umich.edu/" >Michigan</a></li><li>

<a href="http://www.msu.edu/" >Michigan State</a></li><li>

<a href="http://www.umn.edu/" >Minnesota</a></li><li>

<a href="http://www.northwestern.edu/" >Northwestern</a>


38 of 151 3/7/2006 10:47 PM

</li><li>

<a href="http://www.osu.edu/" >Ohio State</a></li><li>

<a href="http://www.psu.edu/" >Penn State</a></li><li>

<a href="http://www.purdue.edu/" >Purdue</a></li><li>

<a href="http://www.wisconsin.edu/" >Wisconsin</a></li>

</ul></li>

</ul></div>





39 of 151 3/7/2006 10:47 PM

Lists as Navigation: Nested ListsLabel where we are ("Kansas"), what section we're in ("Big XII") and hide othre sections.

We'll use id names of "youarehere_section" and "youarehere_page", and then in the CSS, we'll use the immediate child selector (<) to style those "a" elements. In addition, we'll use a class of "collapse" to mark those sections that should not be shown.

#navlhs ul.collapse { display: none; }#navlhs ul li#youarehere_section > a {background-color: #999;}#navlhs ul li#youarehere_page > a {background-color: #eee;}


In example14.css

#navlhs { font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: bold;


40 of 151 3/7/2006 10:47 PM

font-size: 0.7em; width: 10em; border-right: 1px solid #333; margin-bottom: 1em; background-color: #ddd; color: #900;}#navlhs ul { list-style: none; margin: 0; padding: 0;}#navlhs ul li { margin: 0; border-top: 1px none #333;}#navlhs ul li a { display: block; background-color: #ccc; border-top: 1px none #333; border-right: 1px solid #333; border-bottom: thin dotted #333; border-left: 5px solid #333; text-decoration: none; padding: 2px 2px 2px 0.5em;}#navlhs a:link { color: #900;}#navlhs a:visited { color: #900;}#navlhs a:hover { color: #fff; background-color: #900; border-top: 1px outset #333; border-right: 1px outset #333; border-bottom: 1px outset #333; border-left: 5px outset #333;}#navlhs a:active { color: #fff; background-color: #900; border-top: 1px inset #333; border-right: 1px inset #333; border-bottom: 1px inset #333;


41 of 151 3/7/2006 10:47 PM

border-left: 5px inset #333;}#navlhs ul ul a { list-style: none; padding-left: 1.5em; font-size: 80%; font-weight: normal;}#navlhs ul.collapse { display: none; }#navlhs ul li#youarehere_section > a {background-color: #999;}#navlhs ul li#youarehere_page > a {background-color: #eee;}

In head element:


In body element:


<li id="youarehere_section" ><a href="http://big12sports.collegesports.com/" >Bix XII</a><ul>


</li><li>


<a href="http://www.iastate.edu/" >Iowa State</a></li><li id="youarehere_page" >


<a href="http://www.ksu.edu/" >Kansas State</a></li><li>

<a href="http://www.missouri.edu/" >Missouri</a>


42 of 151 3/7/2006 10:47 PM

</li><li>







</ul></li><li>

<a href="http://www.ivyleaguesports.com/" >Ivy League</a><ul class="collapse" >

<li><a href="http://www.brown.edu/" >Brown</a>

</li><li>

<a href="http://www.columbia.edu/" >Columbia</a></li><li>

<a href="http://www.cornell.edu/" >Cornell</a></li><li>

<a href="http://www.dartmouth.edu/" >Dartmouth</a></li><li>

<a href="http://www.harvard.edu/" >Harvard</a>


43 of 151 3/7/2006 10:47 PM

</li><li>

<a href="http://www.upenn.edu/" >Penn</a></li><li>

<a href="http://www.princeton.edu/" >Princeton</a></li><li>

<a href="http://www.yale.edu/" >Yale</a></li>

</ul></li><li>

<a href="http://www.pac-10.org/" >Pac 10</a><ul class="collapse" >

<li><a href="http://www.arizona.edu/" >Arizona</a>

</li><li>

<a href="http://www.asu.edu/" >Arizona State</a></li><li>

<a href="http://www.berkeley.edu/" >California</a></li><li>

<a href="http://www.uoregon.edu/" >Oregon</a></li><li>

<a href="http://www.oregonstate.edu/" >Oregon State</a></li><li>

<a href="http://www.stanford.edu/" >Stanford</a></li><li>

<a href="http://www.ucla.edu/" >UCLA</a></li><li>

<a href="http://www.usc.edu/" >USC</a>


44 of 151 3/7/2006 10:47 PM

</li><li>

<a href="http://www.washington.edu/" >Washington</a></li><li>

<a href="http://www.wsu.edu/" >Washington State</a></li>

</ul></li><li>

<a href="http://www.acc.org/" >ACC</a><ul class="collapse" >

<li><a href="http://www.bc.edu/" >Boston College</a>

</li><li>

<a href="http://www.clemson.edu/" >Clemson</a></li><li>

<a href="http://www.duke.edu/" >Duke</a></li><li>

<a href="http://www.fsu.edu/" >Florida State</a></li><li>

<a href="http://www.gatech.edu/" >Georgia Tech</a></li><li>

<a href="http://www.umd.edu/" >Maryland</a></li><li>

<a href="http://www.miami.edu/" >Miami (FL)</a></li><li>

<a href="http://www.unc.edu/" >North Carolina</a></li><li>

<a href="http://www.ncsu.edu/" >North Carolina State</a>


45 of 151 3/7/2006 10:47 PM

</li><li>

<a href="http://www.virginia.edu/" >Virginia</a></li><li>

<a href="http://www.vt.edu/" >Virginia Tech</a></li><li>

<a href="http://www.wfu.edu/" >Wake Forest</a></li>

</ul></li><li>

<a href="http://bigten.collegesports.com" >Big 10</a><ul class="collapse" >

<li><a href="http://www.illinois.edu/" >Illinois</a>

</li><li>

<a href="http://www.indiana.edu/" >Indiana</a></li><li>

<a href="http://www.uiowa.edu/" >Iowa</a></li><li>

<a href="http://www.umich.edu/" >Michigan</a></li><li>

<a href="http://www.msu.edu/" >Michigan State</a></li><li>

<a href="http://www.umn.edu/" >Minnesota</a></li><li>

<a href="http://www.northwestern.edu/" >Northwestern</a></li><li>

<a href="http://www.osu.edu/" >Ohio State</a>


46 of 151 3/7/2006 10:47 PM

</li><li>

<a href="http://www.psu.edu/" >Penn State</a></li><li>

<a href="http://www.purdue.edu/" >Purdue</a></li><li>

<a href="http://www.wisconsin.edu/" >Wisconsin</a></li>

</ul></li>

</ul></div>





47 of 151 3/7/2006 10:47 PM

Breadcrumb NavigationMarkup "breadcrumb" navigation using nested lists so that markup reflects the parent/child or hierarchy relationship.

Strategy is similar to that of creating tabs. Use "display: inline" to make list items inline; use background image for "li" to show arrow.


In example15.css

#breadcrumb { background-color: #ddd; } #breadcrumb ul { display: inline; padding-left: 0; margin-left: 0; } #breadcrumb ul li { display: inline; } #breadcrumb a:link , #breadcrumb a:visited , #breadcrumb a:hover , #breadcrumb a:active , #breadcrumb li span


48 of 151 3/7/2006 10:47 PM

{ padding: 0.5em; text-decoration: none; font-family: Tahoma, Arial, Helvetica, sans-serif; color: navy; font-size: small; font-weight: normal; } #breadcrumb a:hover { text-decoration: underline; } #breadcrumb li span { color: black; } #breadcrumb ul ul li { background-image: url(images/arrow.gif); background-repeat: no-repeat; background-position: left; padding-left: 25px; }

In head element:


In body element:

<div id="breadcrumb" ><ul>

<li><a href="http://dmoz.org/" >Top</a><ul>

<li><a href="http://dmoz.org/Science/" >Science</a><ul>

<li><a href="http://dmoz.org/Science/Biology/" >Biology</a><ul>

<li><a href="http://dmoz.org/Science/Biology/Genetics/" >Genetics</a><ul>

<li><a href="http://dmoz.org/Science/Biology/Genetics/Genomics/" >Genomics</a>


49 of 151 3/7/2006 10:47 PM

<ul><li>

<span>Pharmacogenetics</span></li>

</ul></li>

</ul></li>

</ul></li>

</ul></li>

</ul></li>

</ul></div>




50 of 151 3/7/2006 10:47 PM

media selectorCSS2 defines a media selector for different media types.

Incorporate as part of the "link" element:

<link rel="stylesheet" type="text/css" media="all" href="screen.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" />

Or, use "@media" selector in style rule:

@media print { body {font-size: 10pt;}}@media screen { body {font-size: 12pt;}}@media print { div.navigation {display: none;} hr {page-break-after: always;}}

allSuitable for all devices.

brailleIntended for braille tactile feedback devices.

embossedIntended for paged braille printers.

handheldIntended for handheld devices (typically small screen, limited bandwidth).

printIntended for paged material and for documents viewed on screen in print preview mode.

projectionIntended for projected presentations, for example projectors.

screenIntended primarily for color computer screens.

speechIntended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose.

tty


51 of 151 3/7/2006 10:47 PM

Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).tv

Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).


52 of 151 3/7/2006 10:47 PM

Harvard College Funding Database

<link rel="stylesheet" type="text/css" media="all" href="screen.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" />

Screen display (screen.css):

Print display (print.css):


53 of 151 3/7/2006 10:47 PM


54 of 151 3/7/2006 10:47 PM

CSS and Print"CSS Print" is a W3C Candidate Recommendation.

The book Cascading Style Sheets : Designing for the Web (3rd Edition) by Hakon Wium Lie and Bert Bos was printed using CSS.

See A List Apart: Articles: Printing a Book with CSS: Boom!


55 of 151 3/7/2006 10:47 PM

CSS Resources

Dan Cederholm

Westciv: CSS and web standards tutorialsPublications from Dan Cederholm from SimpleBits

Eric Meyer

meyerweb.comEric Meyer CSS Workcss / edge

Books

CSS Cookbook by Christopher SchmittCascading Style Sheets : Designing for the Web (3rd Edition) by Hakon Wium Lie and Bert BosCascading Style Sheets: The Definitive Guide, 2nd Edition by Eric MeyerEric Meyer on CSS and More Eric Meyer on CSSWeb Standards Solutions: The Markup and Style Handbook by Dan Cederholm

Specifications / Resources

W3C Cascading Style SheetsCascading Style Sheets, Level 1Cascading Style Sheets, Leveel 2Cascading Style Sheets 2.1W3C CSS Validation ServiceW3C Core Styles


56 of 151 3/7/2006 10:47 PM

Building a Web SiteThe SiteInformation gathering and organizationSite and Page DesignImplementationMaintenance


57 of 151 3/7/2006 10:47 PM

Design and Usability Resources

Online

Web Style Guide, 2nd EditionJakob Nielsen's Useit.com

Jakob Nielsen's Alertbox ColumnUser Interface Engineering (UIE)

Books

See Assignment 2


58 of 151 3/7/2006 10:47 PM

Jakob Nielsen's Useit.com and AlertboxUseit.com: Alertbox

Usability 101: Introduction to UsabilityTop Ten Mistakes of Web DesignTop Ten Web Design Mistakes of 2005The Need for Web Design StandardsTop Ten Web Design Mistakes of 2003Ten Most Violated Homepage Design Guidelines, November 2003Top Ten Web Design Mistakes of 2002Top Ten Guidelines for Homepage Usability, May 2002Ten Good Deeds in Web Design, October 1999The Top Ten New Mistakes of Web Design, May 1999


59 of 151 3/7/2006 10:47 PM

Building a Web SiteAudience and GoalsContent and OrganizationSite and Page Design


60 of 151 3/7/2006 10:47 PM

Audience and GoalsWhy are you building the site? Who are you buliding the site for?

Most sites get a variety of usersSome audiences will be "primary", others "secondary"What are the target audience(s) and what are their information needs?

Most sites will have multiple audiences.


61 of 151 3/7/2006 10:47 PM

Michigan State UniversityWhat audiences can be identified?


62 of 151 3/7/2006 10:47 PM


63 of 151 3/7/2006 10:47 PM

AudienceWho are they?

language, vocabularytechnology profileWeb experience

What are their goals?What are their information needs?What are they trying to do?

Know Your Audience

User testing, market research, focus groups.Jakob Nielsen's Alertbox: Why You Only Need to Test with 5 UsersBe clear on who you are building for. Anticipate their needs.Feedback from users - chew before you swallow!Alertbox: First Rule of Usability? Don't Listen to UsersAs target audiences increase, difficulty of Web design increases.


64 of 151 3/7/2006 10:47 PM

Typical Audiences for an Academic DepartmentUndergraduate Students

ConcentratorsPotential concentratorsNon-concentrators

Graduate StudentsPotential Graduate StudentsFaculty

CurrentPotential

ResearchersPublic


65 of 151 3/7/2006 10:47 PM

Content and OrganizationWhat information is on the site?How will it be organized?


66 of 151 3/7/2006 10:47 PM

ContentWhat content already exists in other media types (brochures, pamphlets, statements, etc.).What content would be good to develop for the site?

Does it fit purpose of site?Does it suit the audience?Why would people come to see this item?

Define incremental goalsWhat should be published first?What can come later stages?


67 of 151 3/7/2006 10:47 PM

Organization of ContentFrom Information Architecture for the World Wide Web, 2nd Edition:

information architecture defined:

The combination of organization, labeling, and navigation schemes within an information system.1.The structural design of an information space to facilitate task completion and intuitive access to content.2.The art and science of structuring and classifying web sites and intranets to help people find and manage information. 3.An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.4.

Organize/CategorizeLabelNavigate


68 of 151 3/7/2006 10:47 PM

Organize and Label

Organize

Hi-tech tools are a mustSticky-notes or Index cardsWhiteboard

Categories, sub-categories, etc.Don't be too deep or too shallowAim for 3 to 7 (could go higher) categories per level

Plan for future growth

Label

Know your audienceTest your labels (ask your audience)

Where can I get a driver for my HP8500N?What would expect to find in the category of Synergetic Integrated Scalable Enterprise Solutions?What IT degree programs are available?


69 of 151 3/7/2006 10:47 PM

The "Miscellaneous" categoryCategories have Failed. Try again.Content can be in multiple categories or linked to from multiple categories


70 of 151 3/7/2006 10:47 PM

Categories and Labels from News SitesCBS

CNN ABC News Fox News

MSNBC NPR


71 of 151 3/7/2006 10:47 PM


72 of 151 3/7/2006 10:47 PM

The Web SiteWeb site is more like a piece of software than a brochure or book.Visitors must learn the interface of your site.See Jakob Nielsen's End of Web Design.Keep in mind Jakob's Law of the Internet User Experience:Users spend most of their time on other sites.


73 of 151 3/7/2006 10:47 PM

Site StructuresHierarchicalSequentialWebse.g. Wikipedia.com


74 of 151 3/7/2006 10:47 PM

Too deep or too shallow?


75 of 151 3/7/2006 10:47 PM

Site Structure

Topics

Audience


76 of 151 3/7/2006 10:47 PM

Task-oriented

Internal Organization Structure

Multiple Architectures


77 of 151 3/7/2006 10:47 PM

Often a site may need to have multiple architectures.


78 of 151 3/7/2006 10:47 PM

IBM


79 of 151 3/7/2006 10:47 PM

Hewlett Packard


80 of 151 3/7/2006 10:47 PM

Site ArchitectureCritical to site's successPrecede any design/visual elementsWork from paper or text-based Web sites


81 of 151 3/7/2006 10:47 PM

Navigation SystemsWhere am I?Where can I go?

What is close by?What is further away?

Where have I been?


82 of 151 3/7/2006 10:47 PM

Harvard College


83 of 151 3/7/2006 10:47 PM

Main Sections


84 of 151 3/7/2006 10:47 PM

Current Page and Section


85 of 151 3/7/2006 10:47 PM

More within Current Section


86 of 151 3/7/2006 10:47 PM

Global NavigationAppears on every inner page.


87 of 151 3/7/2006 10:47 PM

Quicklinks


88 of 151 3/7/2006 10:47 PM

Bread Crumb navigation"Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about, they will show us our way home again.", Hansel in Hansel and Gretel

DMOZ

Construction Projects at FAS, Harvard University


89 of 151 3/7/2006 10:47 PM

Clamshell navigation

O'Reilly Safari Harvard College


90 of 151 3/7/2006 10:47 PM


91 of 151 3/7/2006 10:47 PM

LinksPay attention to the scent of the site's links.

Links within navigation and content must be:

PredictableAm I getting 'closer' to my goal?DifferentiableWhat is the difference between clicking here or clicking there?

When creating links:

Be descriptiveDon't lie

Your links should have scent, and on a related note, your site should suck.


92 of 151 3/7/2006 10:47 PM

Please don't "Click Here"Click here to go to the course home page.Click here to go to the course syllabus page.Click here to go to the course schedule page.Click here to go to the course assignment page.

To go to the course home page click here.To go to the course syllabus page click here.To go to the course schedule page click here.To go to the course assignment page click here.

Better...

The CSCI E-12 web site contains the syllabus, schedule, and assignments.

The CSCI E-12 web site contains:

syllabusscheduleassignments


93 of 151 3/7/2006 10:47 PM

Use "title" attributeTitle attribute can add information so that the link is more predictable and able to be differentiated from others.


<a href="http://www.college.harvard.edu/deans_office/dean_lewis/morningprayer_2_2003.html" title="Text of talk given by Dean Lewis at Morning Prayers" >Dean Harry Lewis spoke</a><a href="http://www.memorialchurch.harvard.edu/services/morningprayers.shtml" title="Morning Prayers at The Memorial Church of Harvard University" >morning prayers</a><a href="http://www.college.harvard.edu" title="Harvard College Home Page" >Harvard College</a>


Dean Harry Lewis spoke at morning prayers at Harvard College in February 2003.


94 of 151 3/7/2006 10:47 PM

Deep LinkingLink directly to content. Deep link into a site. Support deep linking to your site!

Alertbox: Deep Linking is Good Linking


<a href="http://www.summer.harvard.edu/2006/register/default.jsp" >Regster for Harvard Summer School</a><a href="http://www.summer.harvard.edu/2006/courses/csci.jsp#s-l" > CSCI S-L, "Advanced Web Development Using XML"</a>


Regster for Harvard Summer School so you can take CSCI S-L, "Advanced Web Development Using XML".


<a href="http://www.summer.harvard.edu/" >Register for Harvard Summer School</a><a href="http://www.summer.harvard.edu/2006/courses/" > CSCI S-L, "Advanced Web Development Using XML"</a>


Register for Harvard Summer School so you can take CSCI S-L, "Advanced Web Development Using XML".


95 of 151 3/7/2006 10:47 PM

Every Page NeedsTitleCreator (person or institution)Creation or Revision dateLink to home pageURL of page (or at least home page)


96 of 151 3/7/2006 10:47 PM

Importance of a Good TitleBrowser

BookmarksHistoryWindow Title

Search Engine results

Search for "Untitled" in "title" element:


97 of 151 3/7/2006 10:47 PM

Search Enginestitlemeta descriptionmeta keywords

<head> <title>Harvard College Admissions Office</title> <meta name="keywords" content="harvard admissions, harvard college admissions, harvard admissions office, harvard college admissions office, harvard undergraduate admissions, harvard undergrad admissions, harvard undergraduate admissions office, visiting harvard, visiting harvard university, harvard university admissions, harvard university undergraduate admissions, harvard college, travel to harvard" /> <meta name="description" content="The main website for the Harvard College Admissions Office which oversees undergraduate admissions for Harvard University." /></head>


98 of 151 3/7/2006 10:47 PM

Visual Design

LogoTitleNavigationContent


99 of 151 3/7/2006 10:47 PM

Creating ContentPeople scan Web content. Content designed for print publications will need to be made Web-friendly:

Information needs to be "chunked"For existing print content, reduce word count by 50%Use bullet lists, subheadingsAdd appropriate hyperlinksProvide print-friendly (either PDF or HTML) versions for certain documents


100 of 151 3/7/2006 10:47 PM

Technology Constraintsmonitorbrowserinternet connection speedplugins


101 of 151 3/7/2006 10:47 PM

Design "Above the Fold"Check your pages for several window sizes:

640 x 480800 x 6001024 x 768


102 of 151 3/7/2006 10:47 PM

Below the FoldAbove the fold:

Below the fold:


103 of 151 3/7/2006 10:47 PM

and even more:


104 of 151 3/7/2006 10:47 PM


105 of 151 3/7/2006 10:47 PM

Below the Fold, Part 2Above the fold:

Below the fold:


106 of 151 3/7/2006 10:47 PM


107 of 151 3/7/2006 10:47 PM

Page Design: Fixed or Variable Width?Printing: 560 pixels maximumReading: about the sameAvoid horizontal scrollingVariable width does not waste space, but may make text lines too long.


108 of 151 3/7/2006 10:47 PM

CNN - fixed table width


109 of 151 3/7/2006 10:47 PM


110 of 151 3/7/2006 10:47 PM


111 of 151 3/7/2006 10:47 PM

W3C - flexible table width


112 of 151 3/7/2006 10:47 PM

Page WeightTake advantage of caching: re-use logos, images, and CSS URLs throughout the site.

Decide on per page kilobyte budget (30kb, 40kb, 50kb, etc.) which reflects your audience.


113 of 151 3/7/2006 10:47 PM

URLs as UIFile structure should resemble site organization.Your URL is a also a user-interface! (Alertbox: URL as UI)

http://www.macromedia.com/software/dreamweaver/http://www.macromedia.com/software/fireworks/http://www.macromedia.com/software/flash/

Keep to less than 72 characters for email/printing purposes. Or use something like TinyURL.com


114 of 151 3/7/2006 10:47 PM

Homepage is often a different beast.

Harvard College


115 of 151 3/7/2006 10:47 PM

Faculty of Arts and Sciences


116 of 151 3/7/2006 10:47 PM


117 of 151 3/7/2006 10:47 PM


118 of 151 3/7/2006 10:47 PM

An Aside: The Wayback Machine

Internet Archive Wayback Machine


119 of 151 3/7/2006 10:47 PM

Southwest Airlines

Southwest Airlines, 1998



120 of 151 3/7/2006 10:47 PM



121 of 151 3/7/2006 10:47 PM



122 of 151 3/7/2006 10:47 PM


123 of 151 3/7/2006 10:47 PM

Commonwealth of Massachusetts

1998


124 of 151 3/7/2006 10:47 PM


125 of 151 3/7/2006 10:47 PM

1999


126 of 151 3/7/2006 10:47 PM


127 of 151 3/7/2006 10:47 PM

2002


128 of 151 3/7/2006 10:47 PM


129 of 151 3/7/2006 10:47 PM

2003


130 of 151 3/7/2006 10:47 PM


131 of 151 3/7/2006 10:47 PM

2004


132 of 151 3/7/2006 10:47 PM


133 of 151 3/7/2006 10:47 PM

2005


134 of 151 3/7/2006 10:47 PM


135 of 151 3/7/2006 10:47 PM

Internal Revenue Service

2001


136 of 151 3/7/2006 10:47 PM


137 of 151 3/7/2006 10:47 PM

2003


138 of 151 3/7/2006 10:47 PM


139 of 151 3/7/2006 10:47 PM

2005


140 of 151 3/7/2006 10:47 PM

Boston.com

1997


141 of 151 3/7/2006 10:47 PM


142 of 151 3/7/2006 10:47 PM

1999


143 of 151 3/7/2006 10:47 PM


144 of 151 3/7/2006 10:47 PM

2001


145 of 151 3/7/2006 10:47 PM


146 of 151 3/7/2006 10:47 PM

2002


147 of 151 3/7/2006 10:47 PM


148 of 151 3/7/2006 10:47 PM

2003


149 of 151 3/7/2006 10:47 PM

2004


150 of 151 3/7/2006 10:47 PM

2005


151 of 151 3/7/2006 10:47 PM

Table of Contents | All Slides | Link List | Examples | CSCI E-12

table of contents | all slides | link list | examples | csci e...

Documents