website development process css javascript
TRANSCRIPT
Extra CSS
Website development process CSS Javascript
Content
Customer
Analyst
Designer
Web
developer
Tester
I want…I need …
Page design
Website
Website specification
Sitemap
Wireframe
Content
Website development process
Template
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
IE includes padding and border in the width, when the width property is set, unless a DOCTYPE is declared.
Box model
A fixed layout is a layout with a fixed width
Fixed layout
Pros : • Easy to create• Width are the same
in all browser• No need min-width,
max-widthCons : • Additional spaces in
high resolution• Scrollbars when in
low resolutionExamples : http://www.lebloe.comhttp://www.floridaflourish.com
Fluid (liquid) layout is a layout that adjust to the user’s screen resolution
Fluid layout
Pros : • More use friendly• No unused spaces• Eliminate horizontal
scrollbarCons : • May look awful in
some resolution• Image, video may
have multiple width• Additional space
while less content in large resolution
CSS float allows element to be pushed to left or right so that other elements will wrap on it
Ex : img{ float:left;} Float usually used for images and layout To turn off other elements to wrap around
float, use {clear:both} or clearfix (google it)
Floating element
Layout using float
Using {position} we can place an element anywhere on webpage◦ position : static;◦ position : fixed;◦ position : relative;◦ position : absolute;
Positioning element
Static position static — The default positioning of all
elements. Static elements remain in the normal page flow and do not move.
Fixed position fixed — Element will be taken out of the
normal flow of the page, and attach to viewable page edges
fixed element will stay visible even when the page is scrolled.
Internet Explorer 6 does not support fixed positioning without !DOCTYPE
Demo fixed element PositionFixed.html
Relative position relative — A relative element will be
positioned according to its static place holder
relative element will have a place holder to mark its original place
Demo relative element PositionRelative.html
Absolute position absolute — An absolute-positioned
element will be taken out of the normal flow of the page & placed according to its nearest relative-positioned parent.
By default, <body> will have position:relative;
Demo absolute position AbsolutePosition.html
Overlap element If 2 elements are overlapped when
displaying, z-index will be used to specify their orders
z-index can be positive or negative Higer z-index will be in front of others
Demo overlap PositionOverlap.html
A technique to replace text with image using CSS
<h1 class=“header"> Toosols online </h1>.header{
overflow:hidden;text-indent:-9999px;background:url(logo.gif) no-repeat;
}
Image replacement
Sliding door
Rounded box
IE6 and below has many CSS bugs
Some bugs : ◦ PNG transparency ◦ IE Box model◦ Double margin bug◦ No min/max width/height
Cross browser issue
Float left (right) element that has left (right) margin will have double margin
Demo : Fix :
◦ Add display:inline; to the floated element
Double margin bug
E6 ignores the min-height property and instead treats height as the minimum height
Demo : Fix : /*For IE6*/ #container {min-height:200px; height:200px;} /*For all other browsers*/ html>body #container { height:auto;}
Min Height
100% height doesn’t effect in IE6 Fix :
◦ Specify a fixed height of its parent element. ◦ Need element fill the full-length of your page, apply
height:100%; to both the html and body elements/*100% height of the parent element for IE6*/ #parent {height:500px;} #child {height:100%;} /*100% of the page length for IE6*/ html, body {height:100%;} #fullLength {height:100%;}
100% Height
Floated elements drop below their expected position when their total width exceeds the content’s width of its container.
Demo Fix :
◦ Wrap content in a fixed-width container large enough to accommodate the content, or remove the width from the static block.
Float Drops
Container will not wrap floated elements properly
Fix : ◦ Add width & overflow : hidden to its
container
Clear float
When text is next to a floated element. IE6 will add a 3px margin between the element and the text, even if none is specified
Fix : ◦ When in IE6, apply margin-left : -3px for text
3px text jog bug
http://blueprintcss.googlecode.com License: MIT Based on the idea of splitting the
width of apage into 24 columns (with 40px = 30px +10px margin each)
By default max-width 950px (24 * 40 -10)
No fluid layout possible (yet)
Introduce Blueprint
Ví dụ Style object example
Ví dụ
Thay đổi border, margin, paddingDOM Node properties
Thay đổi backgroundStyle background
Thay đổi fontStyle font
Objects Everything in Javascript is object includes
function Object is simple name-value pairs, as seen
in:◦ Dictionaries in Python◦ Hashes in Perl and Ruby◦ Hash tables in C and C++◦ HashMaps in Java◦ Associative arrays in PHP
Very common, versatile data structure Name part is a string; value can be anything