lecture 11 - university of massachusetts amherst · 2010. 10. 14. · university of massachusetts...

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Lecture 11

web designintro. to XHTMLintro. to CSS


Announcements

Exam 312/14 8:00am Goessmann Lab. 64

Project #2 due November 9th


Principles of Design

Balancedistribution of elements across thedesign.symmetrical balanceasymmetrical balancediscordant or off-balance

Contrastaccentuation of the differencesbetween elements in a design


Balance

http://www.principlesofbeautifulwebdesign.com/

Symmetry


Balance


Asymmetry


Contrast


Principles of Design

Emphasisprovides the focal point for the piece. It isa way of making the element that is mostimportant stand out in the design

Rhythmallows your designs to develop aninternal consistency that makes it easierfor your customers to understand

Unityalso called proximity, providescohesiveness to your designs


Emphasis

Placementthe direct center of a composition is the point at whichusers look first, and is always the strongest locationfor producing emphasis.

Continuancewhen our eyes start moving in one direction, theytend to continue along that path until a moredominant feature comes along.one of the most common methods that web designersuse to unify a layout.


Rhythm and repetition


Unity


Visual Analysis Diagram

The menu block overlaps theimage on a transparent field thatliterally overlaps and attachesitself to the image and providesunity.


Typical layouts


Left-column NavigationRight-column NavigationThree-column Navigation


Left-column Navigation


Right-column Navigation


Three-column Navigation


What Is XHTML?XHTML stands for EXtensible HyperTextMarkup LanguageXHTML is almost identical to HTML 4.01XHTML is a stricter and cleaner version of HTMLXHTML is HTML defined as an XML applicationXHTML is a W3C Recommendation

All New Browsers Support XHTML

http://validator.w3.org/


XHTML - Why?

XHTML consists of all the elements inHTML 4.01 combined with the syntax ofXML (EXtensible Markup Language).We have reached a point where manypages on the WWW contain "bad" HTML<html><head> <title>This is bad HTML</title><body> <h1>Bad HTML</body>


XMLXML is a markup language whereeverything has to be marked up correctly,which results in "well-formed" documents.XML was designed to describe, transport andstore dataHTML was designed to display data

XML is everywhere, but XML Does not DOAnything!It is the most common tool for datatransmissions between all sorts ofapplications, and is becoming more and morepopular in the area of storing and describinginformation.


XMLXML is Used to Create New InternetLanguagesXHTML the latest version of HTMLWSDL for describing available web servicesWAP and WML as markup languages forhandheld devicesRSS languages for news feedsRDF and OWL for describing resources andontologySMIL for describing multimedia for the web


XHTML - Why?

Today's market consists ofdifferent technologies, somebrowsers access Internet serverson computers, and some browsersaccess Internet servers on mobilephones or other small devices.Therefore - by combining HTMLand XML, and their strengths, wegot a markup language that isuseful now and in the future


How To Get Ready For XHTML

The Most Important Differences:XHTML elements must be properlynested

XHTML elements must always beclosed

<b><i>This text is bold anditalic</b></i>

<b><i>This text is bold anditalic

</i></b>

</i></b>


How To Get Ready For XHTMLThe Most Important Differences:XHTML elements must be in lowercase

XHTML documents must have one rootelement

<UL> <LI>Coffee</LI> <LI>Tea <UL> <LI>Black Tea</LI> <LI>Green Tea</LI> </UL> <LI>Milk</LI></UL>

<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul>


XHTML Elements Must Always Be Closed

Non-empty elements must have an end tag.

<p>This is a paragraph <p>This is another paragraph

<p>This is a paragraph</p> <p>This is another paragraph</p>

Empty Elements Must Also Be Closed

A break: <br>A horizontal rule: <hr>An image: <img src="happy.gif" alt="Happy face">

A break: <br />A horizontal rule: <hr />An image: <img src="happy.gif" alt="Happy face" />


Some More XHTML Syntax Rules

Attribute names must be in lower case<table WIDTH="100%">

<table width="100%">

Attribute values must be quoted<table width=100%>

<table width="100%">

Attribute minimization is forbiddenThe id attribute replaces the nameattributeThe XHTML DTD defines mandatoryelements


Mandatory XHTML ElementsAll XHTML documents must have aDOCTYPE declaration.The html, head and body elements must bepresent, and the title must be presentinside the head element.This is a minimum XHTML documenttemplate:

<!DOCTYPE Doctype goes here><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Title goes here</title></head><body></body></htm>


An XHTML Example<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>simple document</title></head><body><p>a simple paragraph</p></body></html>

There are three XHTML DTDs:STRICTTRANSITIONALFRAMESET

use together with CSS.

want to still use HTML's presentational features.

want to use HTML Frames


html, CSS, Javascript


DOM


Using the DOM in Javascript


html, CSS, Javascript


CSS

Cascading Style SheetsStyles define how to display HTMLelementsStyles are normally stored in StyleSheetsStyles were added to HTML 4.0 tosolve a problem


Three kinds of styles/stylesheets:

Linked (external)style declarations are contained in an external text file(e.g. blah.css, should be used when you are assigningthe same styles across multiple pages)

Embeddedstyle declarations are placed in the HEAD element ofyour HTML document (useful when you're creating asingle page, or want to override linked styles on asingle page)

Inlinestyle declarations are included in the element's opentag within an HTML file (useful for adding a singleinstance of a style, or overriding linked or embeddedstyles in a single instance)


Cascading Order Generally speaking we can say that all the

styles will "cascade" into a new "virtual"style sheet by the following rules, wherenumber four has the highest priority:

1. Browser default2. External style sheet3. Embedded style sheet (inside the <head> tag)4. Inline style (inside an HTML element)

Note: If the external style sheet link is placedbelow the internal style sheet in HTML<head>, the external style sheet willoverride the internal style sheet.


Syntax of the rule structureThe CSS syntax is made up of three parts: aselector, a property and a value (a propertyand a value together are the declaration) :

The selector is normally the HTML element/tagyou wish to define, the property is theattribute you wish to change, and eachproperty can take a value. The property andvalue are separated by a colon, andsurrounded by curly braces:

selector {property: value}

body {color: black}


Syntax of the rule structureMultiple properties and values can be specifiedwithin a declaration block:

orselector {property: value; property: value}

selector{ property: value; property: value; . . .}


Syntax of the rule structure

If the value is multiple words, putquotes around the value:

If you wish to specify more than oneproperty, you must separate eachproperty with a semicolon. The examplebelow shows how to define a centeraligned paragraph, with a red text color:

p {font-family: "sans serif"}

p {text-align:center;color:red}


Syntax of the rule structure

To make the style definitions morereadable, you can describe oneproperty on each line, like this:p{text-align: center;color: black;font-family: arial}


Examples<html><head>

<style type="text/css">h1 {color: #0f0}h2 {color: #dda0dd}p {color: rgb(0,0,255)}</style>

</head><body>

<h1>This is a green header 1</h1><h2>This is a purple header 2</h2><p>This is a blue paragraph</p>

</body></html>

Example

Green

Red/Green/Blue

Blue


Class selectors

You can associate a style with a“class” as follows

Then you need to associate anobject with the class:

.class_selector {property: value}

<selector class=“class_selector”> … </h1>

.highlite {background-color:yellow}h1.highlite {background-color:yellow}

<h1 class=“highlite”>text</h1>

Example


What are font families?Sans-serif

VerdanaArialGeneva

SerifTimesTimes New RomanGeorgia

MonospaceCourierCourier NewAndale Mono

CursiveComic Sans MSApple ChanceryHerculanum Impact


Specifying font familiesProviding alternativesbody {Font-family: Verdana, Geneva, Arial,sans-serif;}

Adjusting font sizesbody { font-family: Verdana,

Geneva,Arial,sans-serif; font-size: 14px;}


Relative font sizesbody { font-family: Verdana, Geneva, Arial, sans-serif; font-size: 14px;}h1 { font-size: 150%;}h2 { font-size: 120%;}h3 { font-size: 100%;}p { font-size: 75%;}

h1 { font-size: 150%;}h2 { font-size: 1.2em;}h3 { font-size: 100%;}p { font-family: “Times New Roman”, serif; font-size: 14px;}


Alternative with tablebody { font-family: Verdana, Geneva, Arial, sans-serif; font-size: 14px;}h1 {font-size: 150%;}h2 {font-size: 1.2em;}h3 font-size: 100%;}p {font-family: “Times New Roman”, serif; font-size: 14px;}table { margin-left: +4%; font-family: sans-serif; background: white; border-width: 2; border-color: white;}th { font-family: sans-serif; background: #006689 }td { font-family: sans-serif; background: rgb(255, 255, 153) }table.centered { margin-left: auto; margin-right: auto;}

Example<table><tr><th>Row\Column</th><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr><tr><td>Row 1</td><td>1,1</td><td>1,2</td><td>1,3</td></tr><tr><td>Row 2</td><td>2,1</td><td>2,2</td><td>2,3</td></tr><tr><td>Row 3</td><td>3,1</td><td>3,2</td><td>3,3</td></tr></table>


Using keywordsUsing keywords for font sizes

font-size xx-small, x-small, small, medium, large, x-large, xx-large

Adjusting weight and style font-weight = bold, normal, bolder, lighter 100, 200, 300, … , 900 font-style = normal,italic, oblique font-variant = normal, small caps

All in one font: font-style font-variant font-weight font-

size/line-height font-family


Examplebody { font-family: Verdana, Geneva, Arial, sans-serif; font-size: small;}h2, h3 { font-weight: normal;}h1 { font-size: 1.7em;}h2 { font-size: 1.5em; font-weight: bold;}h3 { font-size: 1.3em; font-style: italic;}blockquote{ font-size: 1em; font-style: italic;}

Example

<h1>This is a header 1</h1><h2>This is a header 2</h2><h3>This is a header 3</h3><p>This is a paragraph</p><blockquote>Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummynibh euismod tincidunt ut.</blockquote>


style limited to classh1.red { color: red;}p.normal { font-variant: normal}p.small { font-variant: small-caps}p.special{font: italic small-caps 900 18px “times new roman”}

Example


Styling Text

“Decorating” texttext-decoration:

overlineline-throughunderlineblinknone

Aligning texttext-align:

centerleftright

Setting text casetext-transform:

uppercaselowercasecapitalize

Indenting texttext-indent: 1cm

Some Examples


Styling Lists

The CSS list properties allow youto:Set different list item markers forordered listsSet different list item markers forunordered listsSet an image as the list itemmarker

http://www.w3schools.com/css/css_list.asp


Styling LinksLinks can be styled with any CSSproperty (e.g. color, font-family,background-color).Special for links are that they can bestyled differently depending on whatstate they are in. The four links statesare:a:link - a normal, unvisited linka:visited - a link the user has visiteda:hover - a link when the user mousesover ita:active - a link the moment it is clicked


The CSS Box Model

All HTML elements can beconsidered as boxes.In CSS, the term "box model" isused when talking about designand layout.The CSS box model is essentially abox that wraps around HTMLelements, and it consists of:margins, borders, padding, and theactual content.


The CSS Box ModelMarginClears an area around the border. The margindoes not have a background color, it iscompletely transparent

BorderA border that goes around the padding andcontent. The border is affected by thebackground color of the box

PaddingClears an area around the content. The paddingis affected by the background color of the box

ContentThe content of the box, where text and imagesappearnd images ap


CSS Box Model

width:220px;padding:10px;border:5px solid gray;margin:0px;

do the math:220px (width)+ 20px (left and right padding)+ 10px (left and right border)+ 0px (left and right margin)= 250px Example


Calculating

The total width of an element shouldalways be calculated like this:Total element width = width + leftpadding + right padding + left border +right border + left margin + right margin

The total height of an element shouldalways be calculated like this:Total element height = height + toppadding + bottom padding + top border+ bottom border + top margin + bottommargin


Styling

CSS Border PropertiesCSS OutlinesCSS MarginCSS Padding

lecture 11 - university of massachusetts amherst · 2010. 10. 14. · university of massachusetts...

Documents