Quiz #3 - CSS Lecture Code: 544698 Get Neighbors’ URLs for MP1

Quiz #3 - CSSLecture Code: 544698

Get Neighbors’ URLs for MP1http://fa10.decal.aw-industries.com

Announcements Mini-Project 1 due Tonight before 11:59pm

Linking to a neighbors’ sites Any questions? Submission (.txt file and upload to FTP)

Enrollment should be Finalized

Previous lecture slides had some small typos in closing tags Missing / in </tag> Corrected

Spring 2010 material as reference http://sp10.decal.aw-industries.com

Need help? Office hours by request Email, after class

http://sp10.decal.aw-industries.com/

http://sp10.decal.aw-industries.com/

Today’s Agenda CSS Properties: Margin, Padding, Border, and CSS Selector: a:hover

Where are we in the material?

Building a Web 2.0 Website

Layouts

HTML Element: <div></div>

From Mockup to HTML and CSS

CSS Properties: Width, Height, Position

Worksheet

Lab

CSS Property: borderExample:

div { border: 1px solid #000000; }div { border-top: 1px solid #000000; border-right: 1px solid

#000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; }

Common Values:Border width: 1pxBorder style: solid

Border color: #000000

1. p { border: 3px solid #000000; }2. p { border: 3px dashed #000000; }3. p { border: 3px dotted #000000; }

• solid• dotted• dashed• double• groove• ridge

• inset• outset

1.

2.

3.

Margins and Padding?<!DOCTYPE html><head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /></head><body>

<p>Paragraph One</p><p id=“two”>Paragraph Two</p>

</body></html>

p{ background-color: red; }p#two{ background-color: blue; }

p{ background-color: red; margin: 0; }p#two{ background-color: blue; }

CSS Properties: margin, paddingMargin: space between this object and others

Padding: space between the object’s border and contents

Example: div { margin: 5px 10px; } div { margin: 5px 10px 5px 10px; }

Order: top, right, bottom, left

div { margin-top: 5px; margin-bottom: 5px; margin-left: 10px; margin-right: 10px; } Padding has same syntax

Common Values: Pixels: 10px

Div_1

Div_2

margin

padding

CSS Selector: a:hover

a { }Selects all links on the page.

CSS Selectors

a:hover {background-color: …color: …

}

Style affected by a:hover in CSS

Tooltip affected by <a title=“…” > in HTML

a:hover {}Also selects all links on the page but specifies a set of styles only for the hover state.

Material So Far…HTML and CSS

Purpose and CapabilitiesSyntaxTags / PropertiesHow to Use

Built a HTML5 standards compliant website (by tonight)

Q: Are we done?

What’s to Come… Dissect existing sites and

mockups into HTML and CSS components

Use background images to spice up our websites

Use CSS positioning to create modular and non-linear layouts

A: Not yet…

…of course Javascript, PHP, and MySQLStill to come

http://www.jwhanif.net/

That’s More Like It…

http://cssremix.com

Building a Web 2.0 Website

1. Inspiration2. Choose a Layout Style3. Photoshop Mockup4. Slicing and Dicing Mockup (HTML & CSS)

Choose a Layout

Q: What do we mean by “layout”?

Q: How many different types of layouts are there?

Q: What makes a good layout?

Q: How do we go about building our layout?

Layouts?... o_0

A: The placement and interaction of your site’s components.

A: Infinitely many… but some are more common and better than others.

A: Think about: consistency, ease of use, form following function. Then iterate.

A: Stay tuned…

Componentsmenu

slideshow / images

heading

images

header

maincontent

footer

navigation

sub-content

Differing Layouts

http://www.vreplay.com/

http://inspiredology.com/

http://www.richbrown.info/

http://crushlovely.com/

Skip Photoshop for Now

Insert “How to create a website mockup in Photoshop” here.

Step-by-StepFrom Mockup to HTML and CSS

1. Identify your site’s different components.

2. Create a <div> that corresponds to each component. (Outside -> Inside, Top -> Bottom, Left -> Right)

3. Working from the outside in, translate each component into HTML. (Outside -> Inside, Top -> Bottom, Left -> Right)

4. Apply CSS.

<div id=“page”></div>

<div id=“page”><div id=“menu”></div><div id=“content”></div>

</div>

<div id=“page”><div id=“menu”>

<ul><li><a></a></li>

</ul></div><div id=“content”></div>

</div>

<div> Element<div>’s are our general layout building blocks/containers

Used to logically group HTML elementsSeparate regions of code into functional regions“these HTML elements make up the menu system”

Like span’s they typically have no visual effect on our HTML documents by themselvesspan’s are inline elementsdiv’s are block elements

What happens when we wrap a set of elements in div tags?

div Element …continued

<h3>Menu</h3><a></a><a></a><a></a><a></a><a></a><a>print story</a><h1>News Story</h1><p>

<a></a></p>

<div id=“menu”><h3>Menu</h3><a></a><a></a><a></a><a></a><a></a>

</div>

<div id=“newsStory”><a>print story</a><h1>News

Story</h1><p>

<a></a></p>

</div>

Mockup -> HTML & CSS Example

1. Identify Components

http://cargocollective.com/


2. Corresponding <div>’s(Outside -> Inside, Top -> Bottom, Left -> Right)


…<body> <div> <div id=“sidebar”> <div id=“menu”></div> <div id=“search”></div> </div> <div id=“content”> <div id=“header”></div> <div id=“entries”></div> </div> </div></body>…

<div> <div id=“sidebar”> <div id=“menu”></div> <div id=“search”></div> </div> <div id=“content”> <div id=“header”></div> <div id=“entries”></div> </div> </div>


3. Translate Each Component(Outside -> Inside, Top -> Bottom, Left -> Right)


…<div id=“sidebar”>

<div id=“menu”><ul>

<li><a href=“…”>In your network</a></li><li><a href=“…”>Featured websites</a></li><li><a href=“…”>Featured projects</a></li>

</ul></div><div id=“search”>

<form action=“…”><p><input type=“text” /><input type=“submit”

value=“search”/></p><p><input id=“prj” type=“radio” /><label

for=“prj”>Projects</label><input id=“ppl” type=“radio” /><label for=“ppl”>People</label</p>

</form></div>

</div>…

<ul><li><a href=“…”>In your network</a></li><li><a href=“…”>Featured websites</a></li><li><a href=“…”>Featured projects</a></li>

</ul>


HTML Completed

embargo.zip > index.html


Oops… Layout Totally Wrong?

Nothing more CSS can’t fix

Q: What happened?

A: <div>’s are block leveland naturally appearon their own line

CSS Properties: height, widthCan only be set on block level elements and a few inline

elements such as <img />

Example:div { width: 100px; height: 100px; }div { width: 100%; height: 100%; }

Common Values:Pixels: 20pxPercentage of parent: 100%Not set/auto: width of contents

heig

ht: 1

00px

;

width: 100px;

heig

ht: 1

00px

;

width: 100px;

CSS Properties: height, width …continued

heig

ht: 1

00px

;

width: 100px;

heig

ht: 1

00%

;

width: 100%;

width: 100%;

heig

ht: 1

00%

;

heig

ht: a

uto;

width: auto;

width: 100px;

heig

ht: 1

00px

;

CSS Properties: position Example:

div { position: absolute; }

Common Values: absolute

Relative to closest parent who has its position set. If no parent qualifies, relative to document boundaries.

Removes object from flow of document. Object takes up no space.

relative Relative to the objects natural location.

fixed Relative to browser window’s boundaries. Removes object from flow of document. Object takes up no space.

static Don’t typically use this because it is already the default behavior.

CSS Properties:top/bottom, left/right

Used in conjunction with position

Example:div { position: absolute; top: 0px; left: 0px; }

Common Values:Pixels: 10px

position Document Flow<span>A</span><div>B</div><span>C</span>

code:

div { position: static; } div { position: relative; } div { position: absolute; }

span: “A”

div: “B”

span: “C”

span: “A”

div: “B”

span: “C”

span: “A”

div: “B”

span: “C”

ordiv { position: fixed; }

top & left Effectsdiv {

position: static;top: 10px;left: 10px;

}

span: “A”

div: “B”

span: “C”

span: “A”

div: “B”

span: “C”

span: “A”

div: “B”

span: “C”

div {position: relative;top: 10px;left: 10px;

}

div {position: absolute;top: 10px;left: 10px;

}

div: “B”

div: “B”

top: 0px; left: 0px; top: 0px; left: 0px;

top: 0px; left: 0px;

10px

10px

10px

10px

absolute References

top: 0px; left: 0px;

ABtop: 0px; left: 0px;

AB

<div id=“A”><div id=“B”></div></div>code:

div {position: absolute; top: 10px; left: 10px;

}

div { position: absolute; }#A { top: 10px; left: 10px; }#B { bottom: 10px; right: 10px; }

absolute vs. fixed

Please see included absolute_vs_fixed.html file for demo

Positioning Worksheet

positioning worksheet.pdf

How Do We Fix This?

#sidebar {position: fixed;top: 0;left: 0;height: 100%;width: 200px;

}#content {

position: absolute;top: 0;left: 200px;height: 100%;width: 800px;

}

Quiz #3 - CSSLecture Code: 544698

Then… Labhttp://fa10.decal.aw-industries.com

Quiz #3 - CSS Lecture Code: 544698 Get Neighbors’ URLs for MP1

Documents

Transcript of Quiz #3 - CSS Lecture Code: 544698 Get Neighbors’ URLs for MP1