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 Site March 7, 2006 Harvard University Division of Continuing Education Extension School Course Web Site: http://cscie12.dce.harvard.edu/ Copyright 1998-2006 David P. Heitmeyer My email: [email protected]Course 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 Backgrounds background-color background-image background-repeat background-attachment background-position background (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 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 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 hendrerit turpis. </div> Example 5.1 Rendered: With Styles Without Styles Example 5.2 Example 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 nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non,
38
Embed
Table of Contents | All Slides | Link List | Examples | CSCI E ...cscie12.dce.harvard.edu/lecture_notes/2005-06/cscie12...2006/03/07 · Table of Contents | All Slides | Link List
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
<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>
<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>
<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>
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.
</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.
<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
<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,
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><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><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>
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'.
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;}
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;}
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
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
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?
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.
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.
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?
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.
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
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.
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.
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".
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
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.