View
32
Download
0
Category
Tags:
Preview:
DESCRIPTION
Quiz #3 - CSS Lecture Code: 544698 Get Neighbors’ URLs for MP1. http://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 - PowerPoint PPT Presentation
Citation preview
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
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/
Mockup -> HTML & CSS Example
2. Corresponding <div>’s(Outside -> Inside, Top -> Bottom, Left -> Right)
http://cargocollective.com/
…<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>
Mockup -> HTML & CSS Example
3. Translate Each Component(Outside -> Inside, Top -> Bottom, Left -> Right)
http://cargocollective.com/
…<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>
Mockup -> HTML & CSS Example
HTML Completed
embargo.zip > index.html
Mockup -> HTML & CSS Example
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
Recommended