Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
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]
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
2 of 151 3/7/2006 10:47 PM
Continuing with CSS
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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:
In style element (within head element):
<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,
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
Example 5.2 Rendered:
With StylesWithout Styles
Example 5.3Example 5.3 Source:
In style element (within head element):
<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>
Example 5.3 Rendered:
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
6 of 151 3/7/2006 10:47 PM
With StylesWithout Styles
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
Example 5.4Example 5.4 Source:
In style element (within head element):
<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>
Example 5.4 Rendered:
With Styles
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
8 of 151 3/7/2006 10:47 PM
Without Styles
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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.
Example 5.5Example 5.5 Source:
In style element (within head element):
<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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
Example 5.5 Rendered:
With StylesWithout Styles
With a background image that covers the entire area.
Example 5.6
Example 5.6 Source:
In style element (within head element):
<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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
Example 5.6 Rendered:
With StylesWithout Styles
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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:
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
13 of 151 3/7/2006 10:47 PM
Example 5.7Example 5.7 Source:
In style element (within head element):
<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;
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
15 of 151 3/7/2006 10:47 PM
</div>
Example 5.7 Rendered:
With StylesWithout Styles
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
17 of 151 3/7/2006 10:47 PM
border-style
Example 5.8
Example 5.8 Source:
In style element (within head element):
<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,
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
Example 5.8 Rendered:
With StylesWithout Styles
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
19 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
20 of 151 3/7/2006 10:47 PM
Margin, Padding, Border ExampleScreenshot:
Example 5.9Example 5.9 Source:
In style element (within head element):
<style type="text/css" >.about { width: 33%; text-align: left; font-size: 0.75em; color: #006600; background: #fefecd; padding: 0.5em;
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
Example 5.9 Rendered:
With StylesWithout Styles
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
22 of 151 3/7/2006 10:47 PM
Margin, Padding, Border ExampleAnd now we "float" the block:
Example 5.10Example 5.10 Source:
In style element (within head element):
<style type="text/css" >.about { float: right; width: 33%; text-align: left; font-size: 0.75em; color: #006600; background: #fefecd;
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
Example 5.10 Rendered:
With StylesWithout Styles
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
24 of 151 3/7/2006 10:47 PM
display property
p {display: block;}em {display: inline;}img {display: none;}
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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;
Example 5.11Example 5.11 Source:
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;}
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
27 of 151 3/7/2006 10:47 PM
</li><li>
<a href="http://www.pac-10.org/" >Pac 10</a></li>
</ul>
Example 5.11 Rendered:
With StylesWithout Styles
Inspired by: CSS Cookbook by Christopher Schmitt
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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;
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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:
<link rel="stylesheet" type="text/css" href="example12.css"/>
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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
Example 5.12 Rendered:
With StylesWithout Styles
Inspired by: CSS Cookbook by Christopher Schmitt
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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.
Example 5.13Example 5.13 Source:
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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;}
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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:
<link rel="stylesheet" type="text/css" href="example13.css"/>
In body element:
<div id="navlhs" ><ul>
<li><a href="http://big12sports.collegesports.com/" >Bix XII</a><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>
<a href="http://www.ku.edu/" >Kansas</a></li><li>
<a href="http://www.ksu.edu/" >Kansas State</a>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
34 of 151 3/7/2006 10:47 PM
</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></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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
Example 5.13 Rendered:
With StylesWithout Styles
Inspired by: CSS Cookbook by Christopher Schmitt
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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;}
Example 5.14Example 5.14 Source:
In example14.css
#navlhs { font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: bold;
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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;
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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:
<link rel="stylesheet" type="text/css" href="example14.css"/>
In body element:
<div id="navlhs" ><ul>
<li id="youarehere_section" ><a href="http://big12sports.collegesports.com/" >Bix XII</a><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 id="youarehere_page" >
<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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
42 of 151 3/7/2006 10:47 PM
</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></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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
Example 5.14 Rendered:
With StylesWithout Styles
Inspired by: CSS Cookbook by Christopher Schmitt
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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.
Example 5.15Example 5.15 Source:
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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:
<link rel="stylesheet" type="text/css" href="example15.css"/>
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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
Example 5.15 Rendered:
With StylesWithout Styles
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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).
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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):
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
53 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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!
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
56 of 151 3/7/2006 10:47 PM
Building a Web SiteThe SiteInformation gathering and organizationSite and Page DesignImplementationMaintenance
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
59 of 151 3/7/2006 10:47 PM
Building a Web SiteAudience and GoalsContent and OrganizationSite and Page Design
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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.
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
61 of 151 3/7/2006 10:47 PM
Michigan State UniversityWhat audiences can be identified?
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
62 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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.
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
65 of 151 3/7/2006 10:47 PM
Content and OrganizationWhat information is on the site?How will it be organized?
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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?
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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?
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
70 of 151 3/7/2006 10:47 PM
Categories and Labels from News SitesCBS
CNN ABC News Fox News
MSNBC NPR
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
71 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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.
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
73 of 151 3/7/2006 10:47 PM
Site StructuresHierarchicalSequentialWebse.g. Wikipedia.com
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
74 of 151 3/7/2006 10:47 PM
Too deep or too shallow?
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
75 of 151 3/7/2006 10:47 PM
Site Structure
Topics
Audience
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
76 of 151 3/7/2006 10:47 PM
Task-oriented
Internal Organization Structure
Multiple Architectures
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
77 of 151 3/7/2006 10:47 PM
Often a site may need to have multiple architectures.
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
78 of 151 3/7/2006 10:47 PM
IBM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
79 of 151 3/7/2006 10:47 PM
Hewlett Packard
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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?
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
82 of 151 3/7/2006 10:47 PM
Harvard College
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
83 of 151 3/7/2006 10:47 PM
Main Sections
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
84 of 151 3/7/2006 10:47 PM
Current Page and Section
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
85 of 151 3/7/2006 10:47 PM
More within Current Section
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
86 of 151 3/7/2006 10:47 PM
Global NavigationAppears on every inner page.
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
87 of 151 3/7/2006 10:47 PM
Quicklinks
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
89 of 151 3/7/2006 10:47 PM
Clamshell navigation
O'Reilly Safari Harvard College
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
90 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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.
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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.
Example 5.16Example 5.16 Source:
<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>
Example 5.16 Rendered:
Dean Harry Lewis spoke at morning prayers at Harvard College in February 2003.
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
Example 5.17Example 5.17 Source:
<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>
Example 5.17 Rendered:
Regster for Harvard Summer School so you can take CSCI S-L, "Advanced Web Development Using XML".
Example 5.18Example 5.18 Source:
<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>
Example 5.18 Rendered:
Register for Harvard Summer School so you can take CSCI S-L, "Advanced Web Development Using XML".
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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)
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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:
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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>
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
98 of 151 3/7/2006 10:47 PM
Visual Design
LogoTitleNavigationContent
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
100 of 151 3/7/2006 10:47 PM
Technology Constraintsmonitorbrowserinternet connection speedplugins
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
102 of 151 3/7/2006 10:47 PM
Below the FoldAbove the fold:
Below the fold:
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
103 of 151 3/7/2006 10:47 PM
and even more:
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
104 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
105 of 151 3/7/2006 10:47 PM
Below the Fold, Part 2Above the fold:
Below the fold:
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
106 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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.
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
108 of 151 3/7/2006 10:47 PM
CNN - fixed table width
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
109 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
110 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
111 of 151 3/7/2006 10:47 PM
W3C - flexible table width
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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.
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
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
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
114 of 151 3/7/2006 10:47 PM
Homepage is often a different beast.
Harvard College
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
115 of 151 3/7/2006 10:47 PM
Faculty of Arts and Sciences
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
116 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
117 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
118 of 151 3/7/2006 10:47 PM
An Aside: The Wayback Machine
Internet Archive Wayback Machine
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
119 of 151 3/7/2006 10:47 PM
Southwest Airlines
Southwest Airlines, 1998
Southwest Airlines, 2000
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
120 of 151 3/7/2006 10:47 PM
Southwest Airlines, 2003
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
121 of 151 3/7/2006 10:47 PM
Southwest Airlines, 2005
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
122 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
123 of 151 3/7/2006 10:47 PM
Commonwealth of Massachusetts
1998
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
124 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
125 of 151 3/7/2006 10:47 PM
1999
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
126 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
127 of 151 3/7/2006 10:47 PM
2002
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
128 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
129 of 151 3/7/2006 10:47 PM
2003
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
130 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
131 of 151 3/7/2006 10:47 PM
2004
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
132 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
133 of 151 3/7/2006 10:47 PM
2005
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
134 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
135 of 151 3/7/2006 10:47 PM
Internal Revenue Service
2001
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
136 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
137 of 151 3/7/2006 10:47 PM
2003
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
138 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
139 of 151 3/7/2006 10:47 PM
2005
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
140 of 151 3/7/2006 10:47 PM
Boston.com
1997
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
141 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
142 of 151 3/7/2006 10:47 PM
1999
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
143 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
144 of 151 3/7/2006 10:47 PM
2001
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
145 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
146 of 151 3/7/2006 10:47 PM
2002
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
147 of 151 3/7/2006 10:47 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
148 of 151 3/7/2006 10:47 PM
2003
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
149 of 151 3/7/2006 10:47 PM
2004
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
150 of 151 3/7/2006 10:47 PM
2005
http://localhost:8080/cocoon/projects/cscie12/slides/20060307/handout.html
151 of 151 3/7/2006 10:47 PM
Table of Contents | All Slides | Link List | Examples | CSCI E-12