2.  Website development process  CSS  Javascript

3. Customer Analyst Designer Web developer Tester I want… I need … Page design Website Website specification Sitemap Wireframe Content Template

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

5.  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 : http://www.lebloe.com http://www.floridaflourish.com

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

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

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

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

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

12.  PositionFixed.html

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

14.  PositionRelative.html

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

16.  AbsolutePosition.html

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

18.  PositionOverlap.html

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

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

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

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

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

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

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

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

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

30. Ví d ụ Style object example

31. Ví d ụ

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

33. Thay đ ổ i background Style background

34. Thay đ ổ i font Style font

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