 Website development process  CSS  Javascript

Customer Analyst Designer Web developer Tester I want… I need … Page design Website Website specification Sitemap Wireframe Content 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.

 A fixed layout is a layout with a fixed width Pros : Easy to create Width are the same in all browser No need min-width, max-width Cons : Additional spaces in high resolution Scrollbars when in low resolution Examples :

 Fluid (liquid) layout is a layout that adjust to the user’s screen resolution Pros : More use friendly No unused spaces Eliminate horizontal scrollbar Cons : 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)

 Using {position} we can place an element anywhere on webpage ◦ position : static; ◦ position : fixed; ◦ position : relative; ◦ position : absolute;

 static — The default positioning of all elements. Static elements remain in the normal page flow and do not move.

 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

 PositionFixed.html

 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

 PositionRelative.html

 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, will have position:relative;

 AbsolutePosition.html

 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

 PositionOverlap.html

 A technique to replace text with image using CSS Toosols online.header{ overflow:hidden; text-indent:-9999px; background:url(logo.gif) no-repeat; }

 IE6 and below has many CSS bugs  Some bugs : ◦ PNG transparency ◦ IE Box model ◦ Double margin bug ◦ No min/max width/height

 Float left (right) element that has left (right) margin will have double margin  Demo :  Fix : ◦ Add display:inline; to the floated element

 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;}

 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%;}

 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.

 Container will not wrap floated elements properly  Fix : ◦ Add width & overflow : hidden to its container

 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

  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 * )  No fluid layout possible (yet)

Ví d ụ Style object example

Ví d ụ

Thay đ ổ i border, margin, padding DOM Node properties

Thay đ ổ i background Style background

Thay đ ổ i font Style font

 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