XHTML, CSS, Javascript<br />TrầnKhảiHoàng<br />
Website development process<br />HTML vs XHTML<br />CSS<br />Javascript<br />Content<br />
Content<br />I want…<br />I need …<br />Customer<br />Website specification<br />Tester<br />Analyst<br />Sitemap<br />Web...
XHTML=EXtensibleHyperText Markup Language<br />XHTML is almost identical to HTML 4.01<br />XHTML is a stricter and XHTML i...
XHTML elements must be properly nested<br /><b><i>This text is bold and italic</b></i><br /><b><i>This text is bold and it...
Empty elements must also be Closed<br />A break: <br> <br />A break: <br/><br />	All attribute value must be quoted<br /><...
XHTML is easier to maintain<br />XHTML is XSL ready<br />XHTML is ready for query using DOM, Xpath<br />XHTML is easier to...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
XHTML 1.0 Strict<br />	This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecat...
Validation helps to find errors in XHTML code<br />Validated XHTML prevents website bugs<br />How to validate ?<br />http:...
CSS = Cascading Style Sheet<br />CSS consists of rules to display, style and decorate HTML elements<br />Why CSS ?<br />Se...
Total element width  = width + left padding + right padding + left border + right border + left margin + right margin<br /...
A fixed layout is a layout with a fixed width<br />Fixed layout<br />Pros : <br /><ul><li>Easy to create
Width are the same in all browser
No need min-width,</li></ul>max-width<br />Cons : <br /><ul><li>Additional spaces in high resolution
Scrollbars when in low resolution</li></ul>Examples : <br />http://www.lebloe.com<br />http://www.floridaflourish.com<br />
Fluid (liquid) layout is a layout that adjust to the user’s screen resolution<br />Fluid layout<br />Pros : <br /><ul><li>...
No unused spaces
Eliminate horizontal scrollbar</li></ul>Cons : <br /><ul><li>May look awful in some resolution
Image, video may have multiple width
Additional space while less content in large resolution</li></ul>Examples : <br />http://www.blossomgraphicdesign.com<br />
CSS float allows element to be pushed to left or right so that other elements will wrap on it<br />Ex : img{ float:left;}<...
Layout using float<br />
Using {position} we can place an element anywhere on webpage<br />position : static;<br />position : fixed;<br />position ...
Static position<br />static — The default positioning of all elements. Static elements remain in the normal page flow and ...
Fixed position<br />fixed — Element will be taken out of the normal flow of the page, and attach to viewable page edges<br...
Demo fixed element<br />PositionFixed.html<br />
Relative position<br />relative — A relative element will be positioned according to its static place holder<br />relative...
Demo relative element<br />PositionRelative.html<br />
Absolute position<br />absolute — An absolute-positioned element will be taken out of the normal flow of the page & placed...
Demo absolute position<br />AbsolutePosition.html<br />
Overlap element<br />If 2 element are overlapped when displaying, z-index will be used to specify their orders<br />z-inde...
Demo overlap<br />PositionOverlap.html<br />
A technique to replace text with image using CSS <br /><h1 class=“header"> Toosols online </h1><br />.header{<br />overflo...
Sliding door<br />
Rounded box<br />
IE6 and below has many CSS bugs<br />Some bugs : <br />PNG transparency <br /> IE Box model<br />Double margin bug<br />No...
Float left (right) element that has left (right) margin will have double margin<br />Demo : <br />Fix : <br />Add display:...
E6 ignores the min-height property and instead treats height as the minimum height<br />Demo : <br />Fix : <br />	/*For IE...
100% height doesn’t effect in IE6<br />Fix : <br />Specify a fixed height of its parent element. <br />Need element fill t...
Floated elements drop below their expected position when their total width exceeds the content’s width of its container. <...
Container will not wrap floated elements properly<br />Fix : <br />Add width & overflow : hidden to its container<br />Cle...
When text is next to a floated element. IE6 will add a 3px margin between the element and the text, even if none is specif...
Identify IE6 to apply CSS or Js fix : <br />Using Conditional Comments For Internet Explorer<br />Use Javascript to identi...
Strategy to avoid IE issue :<br />Start working with an standard compliant browser (like Firefox)<br />Use the right DOCTY...
A collection of common CSS for reuse<br />Framework can divide into : <br />reset <br />baseline<br />forms<br />typograph...
Pros :<br />DRY (Don't repeat yourself)<br />Basic concept that makes it easy for other people to<br />	understand the sty...
http://blueprintcss.googlecode.com<br />License: MIT<br />Based on the idea of splitting the width of apage into 24 column...
Invented in 1995, became ISO standard in 1998<br />Runs within a host environment (Web browser, adobe acrobat, …)<br />Jav...
Mô hình quan hệ giữa các node<br />HTML DOM tree<br />
Quan hệ giữa các node<br />HTMLDOM example<br />
Lấy 1 node<br />Get an HTML DOM node<br /><ul><li>X.getElementById( id) :get element with provided id in X
X.getElementByTagName( name) : get list of elements with provided tag name in X</li></ul>45<br />
Thuộc tính 1 node<br />HTML DOM Node access<br /><ul><li>X.innerHTML : html text in X
X.nodeName : node name of X
X.parentNode: parent node
X.childNodes: array of X children nodes
X.attributes : array of X attributes
X.firstChild : X’ first child node
X.lastChild : X’ last chid node
X.nextSibling : X next sibling node
X.previousSibling : X previous sibling node</li></ul>			X is an HTML DOM node<br />
innerHTML vs outerHTML<br />innerHTMLvsouterHTML<br />outerHTML<br />a<br /><div> Hello <b>World</b> </div><br />innerHTML...
Ví dụ innerHTML<br />HTML DOM traverse Example<br />
Thêm, xóa 1 node<br />Add-remove nodes<br /><ul><li>X.appendChild ( Y) : add node Y  into node X
X.removeChild ( Y ) : remove node Y out of node X
document.createTextNode(“Text”) : create a text node
document.createElement(TagName) : create an element node</li></li></ul><li>Ví dụ <br />
Làm việc với thuộc tính<br />Modify attributes<br /><ul><li>X.getAttribute(“Attribute name”) : Get an attribute value
X.setAttribute(“Attribute name”,”Attribute value”) : Set attribute value
X.removeAttribute(“Attribute name”) : Remove attribute</li></li></ul><li>Định dạng node<br />HTML Style object<br /><ul><l...
To change CSS style : </li></li></ul><li>Ví dụ <br />Style object example<br />
Ví dụ<br />
Upcoming SlideShare
Loading in...5
×

Css, xhtml, javascript

4,294

Published on

A summary on xhtml, css and javascript.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,294
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
162
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths. The important thing is that the container (wrapper) element is set to not move. No matter what screen resolution the visitor has, he or she will see the same width as other visitors.The image above shows the general outline of a fixed-width website layout. The components inside are fixed to 520, 200 and 200 pixels, respectively. A 960-pixel width has become the standard in modern Web design because most website users are assumed to browse in 1024×768 resolution or higher.
  • Css, xhtml, javascript

    1. 1. XHTML, CSS, Javascript<br />TrầnKhảiHoàng<br />
    2. 2. Website development process<br />HTML vs XHTML<br />CSS<br />Javascript<br />Content<br />
    3. 3. Content<br />I want…<br />I need …<br />Customer<br />Website specification<br />Tester<br />Analyst<br />Sitemap<br />Web developer<br />Designer<br />Wireframe<br />Website<br />Page design<br />Website development process<br />Template<br />
    4. 4. XHTML=EXtensibleHyperText Markup Language<br />XHTML is almost identical to HTML 4.01<br />XHTML is a stricter and XHTML is a W3C Recommendation cleaner version of HTML<br />XHTML is HTML defined as an XML application<br />What is XHTML ?<br />
    5. 5. XHTML elements must be properly nested<br /><b><i>This text is bold and italic</b></i><br /><b><i>This text is bold and italic</i></b><br />XHTML elements must always be closed<br /><p>This is a paragraph<br /><p>This is a paragraph</p><br />XHTML elements must be in lowercase<br /><BODY> a website</BODY><br /> <body> a website </body><br />HTML vs XHTML (1)<br />
    6. 6. Empty elements must also be Closed<br />A break: <br> <br />A break: <br/><br /> All attribute value must be quoted<br /><imgsrc=moutain.jpg/><br /><imgsrc=“moutain.jpg”/><br />XHTML documents must have one root element<br /><html><head>…</head</html>><body>…</body><br /> <html><head>…</head><body>…</body></html><br /><!DOCTYPE> Is Mandatory<br />HTML vs XHTML (2)<br />
    7. 7. XHTML is easier to maintain<br />XHTML is XSL ready<br />XHTML is ready for query using DOM, Xpath<br />XHTML is easier to teach and to learn<br />XHTML is ready for the future<br />Why XHTML ?<br />
    8. 8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br /><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><br /><head> <br /><title>Title here</title> <br /><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><br /><!-- other head information here --> <br /></head> <br /><body> <br /><!-- other body information here --> <br /></body> <br /></html><br />XHTML basic structure<br />
    9. 9. XHTML 1.0 Strict<br /> This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br />XHTML 1.0 Transitional<br /> This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br />XHTML 1.0 Frameset<br /> This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><br />!DOCTYPE<br />
    10. 10. Validation helps to find errors in XHTML code<br />Validated XHTML prevents website bugs<br />How to validate ?<br />http://validator.w3.org/<br />Web developer add-on (Firefox, IE)<br />Validate XHTML<br />
    11. 11. CSS = Cascading Style Sheet<br />CSS consists of rules to display, style and decorate HTML elements<br />Why CSS ?<br />Separate decoration from HTML markup (Ex : <b>,<font>,…)<br />Help web development faster<br />Easy to maintain and fix bugs<br />Easy to change website layout & interface<br />What is CSS ?<br />
    12. 12. Total element width = width + left padding + right padding + left border + right border + left margin + right margin<br />Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin<br />IE includes padding and border in the width, when the width property is set, unless a DOCTYPE is declared.<br />Box model<br />
    13. 13. A fixed layout is a layout with a fixed width<br />Fixed layout<br />Pros : <br /><ul><li>Easy to create
    14. 14. Width are the same in all browser
    15. 15. No need min-width,</li></ul>max-width<br />Cons : <br /><ul><li>Additional spaces in high resolution
    16. 16. Scrollbars when in low resolution</li></ul>Examples : <br />http://www.lebloe.com<br />http://www.floridaflourish.com<br />
    17. 17. Fluid (liquid) layout is a layout that adjust to the user’s screen resolution<br />Fluid layout<br />Pros : <br /><ul><li>More use friendly
    18. 18. No unused spaces
    19. 19. Eliminate horizontal scrollbar</li></ul>Cons : <br /><ul><li>May look awful in some resolution
    20. 20. Image, video may have multiple width
    21. 21. Additional space while less content in large resolution</li></ul>Examples : <br />http://www.blossomgraphicdesign.com<br />
    22. 22. CSS float allows element to be pushed to left or right so that other elements will wrap on it<br />Ex : img{ float:left;}<br />Float usually used for images and layout<br />To turn off other elements to wrap around float, use {clear:both} or clearfix (google it)<br />Floating element<br />
    23. 23. Layout using float<br />
    24. 24. Using {position} we can place an element anywhere on webpage<br />position : static;<br />position : fixed;<br />position : relative;<br />position : absolute;<br />Positioning element<br />
    25. 25. Static position<br />static — The default positioning of all elements. Static elements remain in the normal page flow and do not move.<br />
    26. 26. Fixed position<br />fixed — Element will be taken out of the normal flow of the page, and attach to viewable page edges<br />fixed element will stay visible even when the page is scrolled. <br />Internet Explorer 6 does not support fixed positioning without !DOCTYPE<br />
    27. 27. Demo fixed element<br />PositionFixed.html<br />
    28. 28. Relative position<br />relative — A relative element will be positioned according to its static place holder<br />relative element will have a place holder to mark its original place<br />
    29. 29. Demo relative element<br />PositionRelative.html<br />
    30. 30. Absolute position<br />absolute — An absolute-positioned element will be taken out of the normal flow of the page & placed according to its nearest relative-positioned parent.<br />By default, <body> will has position:relative;<br />
    31. 31. Demo absolute position<br />AbsolutePosition.html<br />
    32. 32. Overlap element<br />If 2 element are overlapped when displaying, z-index will be used to specify their orders<br />z-index can be positive or negative<br />Higer z-index will be in front of others<br />
    33. 33. Demo overlap<br />PositionOverlap.html<br />
    34. 34. A technique to replace text with image using CSS <br /><h1 class=“header"> Toosols online </h1><br />.header{<br />overflow:hidden;<br /> text-indent:-9999px;<br />background:url(logo.gif) no-repeat;<br />}<br />Image replacement<br />
    35. 35. Sliding door<br />
    36. 36. Rounded box<br />
    37. 37. IE6 and below has many CSS bugs<br />Some bugs : <br />PNG transparency <br /> IE Box model<br />Double margin bug<br />No min/max width/height<br />Cross browser issue<br />
    38. 38. Float left (right) element that has left (right) margin will have double margin<br />Demo : <br />Fix : <br />Add display:inline; to the floated element<br />Double margin bug<br />
    39. 39. E6 ignores the min-height property and instead treats height as the minimum height<br />Demo : <br />Fix : <br /> /*For IE6*/ <br /> #container <br /> {min-height:200px; height:200px;} <br /> /*For all other browsers*/ <br /> html>body #container { height:auto;} <br />Min Height<br />
    40. 40. 100% height doesn’t effect in IE6<br />Fix : <br />Specify a fixed height of its parent element. <br />Need element fill the full-length of your page, apply height:100%; to both the html and body elements<br />/*100% height of the parent element for IE6*/ <br /> #parent {height:500px;} <br /> #child {height:100%;} <br /> /*100% of the page length for IE6*/ <br /> html, body {height:100%;} <br /> #fullLength {height:100%;} <br />100% Height<br />
    41. 41. Floated elements drop below their expected position when their total width exceeds the content’s width of its container. <br />Demo <br />Fix : <br />Wrap content in a fixed-width container large enough to accommodate the content, or remove the width from the static block.<br />Float Drops<br />
    42. 42. Container will not wrap floated elements properly<br />Fix : <br />Add width & overflow : hidden to its container<br />Clear float<br />
    43. 43. 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<br />Fix : <br />When in IE6, apply margin-left : -3px for text<br />3px text jog bug<br />
    44. 44. Identify IE6 to apply CSS or Js fix : <br />Using Conditional Comments For Internet Explorer<br />Use Javascript to identify IE6<br />Use IE 6 unsupported CSS Selectors<br />IE filter<br />
    45. 45. Strategy to avoid IE issue :<br />Start working with an standard compliant browser (like Firefox)<br />Use the right DOCTYPE<br />Validate your code<br />Use CSS reset first<br />Use progressive enhancement<br />Way to fix : <br />Use IE filter<br />Use javascript framework<br />Use IE6 javascript fix<br />Use IE6 hack (not recommend)<br />How to overcome IE6 issue<br />
    46. 46. A collection of common CSS for reuse<br />Framework can divide into : <br />reset <br />baseline<br />forms<br />typography<br />grid<br />Some framework : <br />Blue Print<br />YUI Grids<br />YAML ( Yet Another Multicolumn Layout)<br />CSS framework<br />
    47. 47. Pros :<br />DRY (Don't repeat yourself)<br />Basic concept that makes it easy for other people to<br /> understand the style<br />Implicitly use coding/naming guidelines<br />Cons : <br />... that are not yours<br />You have to learn the framework<br />Possible semantical implications<br />Might offer too much<br />Pros and Cons<br />
    48. 48. http://blueprintcss.googlecode.com<br />License: MIT<br />Based on the idea of splitting the width of apage into 24 columns (with 40px = 30px +10px margin each)<br />By default max-width 950px (24 * 40 -10)<br />No fluid layout possible (yet)<br />Introduce Blueprint<br />
    49. 49. Invented in 1995, became ISO standard in 1998<br />Runs within a host environment (Web browser, adobe acrobat, …)<br />Javascript capable of : <br />Programming<br />React to events<br />DOM manipulation : read,write,modify HTML elements<br />Change CSS at runtime<br />Read, write cookies<br />Animation (with the help of some library)<br />Javascript<br />
    50. 50. Mô hình quan hệ giữa các node<br />HTML DOM tree<br />
    51. 51. Quan hệ giữa các node<br />HTMLDOM example<br />
    52. 52. Lấy 1 node<br />Get an HTML DOM node<br /><ul><li>X.getElementById( id) :get element with provided id in X
    53. 53. X.getElementByTagName( name) : get list of elements with provided tag name in X</li></ul>45<br />
    54. 54. Thuộc tính 1 node<br />HTML DOM Node access<br /><ul><li>X.innerHTML : html text in X
    55. 55. X.nodeName : node name of X
    56. 56. X.parentNode: parent node
    57. 57. X.childNodes: array of X children nodes
    58. 58. X.attributes : array of X attributes
    59. 59. X.firstChild : X’ first child node
    60. 60. X.lastChild : X’ last chid node
    61. 61. X.nextSibling : X next sibling node
    62. 62. X.previousSibling : X previous sibling node</li></ul> X is an HTML DOM node<br />
    63. 63. innerHTML vs outerHTML<br />innerHTMLvsouterHTML<br />outerHTML<br />a<br /><div> Hello <b>World</b> </div><br />innerHTML<br />
    64. 64. Ví dụ innerHTML<br />HTML DOM traverse Example<br />
    65. 65. Thêm, xóa 1 node<br />Add-remove nodes<br /><ul><li>X.appendChild ( Y) : add node Y into node X
    66. 66. X.removeChild ( Y ) : remove node Y out of node X
    67. 67. document.createTextNode(“Text”) : create a text node
    68. 68. document.createElement(TagName) : create an element node</li></li></ul><li>Ví dụ <br />
    69. 69. Làm việc với thuộc tính<br />Modify attributes<br /><ul><li>X.getAttribute(“Attribute name”) : Get an attribute value
    70. 70. X.setAttribute(“Attribute name”,”Attribute value”) : Set attribute value
    71. 71. X.removeAttribute(“Attribute name”) : Remove attribute</li></li></ul><li>Định dạng node<br />HTML Style object<br /><ul><li>Every element node has an style object that represent its CSS
    72. 72. To change CSS style : </li></li></ul><li>Ví dụ <br />Style object example<br />
    73. 73. Ví dụ<br />
    74. 74. Thay đổi border, margin, padding<br />DOM Node properties<br />
    75. 75. Thay đổi background<br />Style background<br />
    76. 76. Thay đổi font<br />Style font<br />
    77. 77. Objects<br />Everything in Javascript is object includes function<br />Object is simple name-value pairs, as seen in:<br />Dictionaries in Python<br />Hashes in Perl and Ruby<br />Hash tables in C and C++<br />HashMaps in Java<br />Associative arrays in PHP<br />Very common, versatile data structure<br />Name part is a string; value can be anything<br />
    78. 78. varobj = {<br /> name: "Carrot",<br /> "for": "Max",<br /> details: {<br /> color: "orange",<br /> size: 12<br /> }<br />}<br />> obj.details.color<br /> orange<br />> obj["details"]["size"]<br /> 12<br />Object example<br />
    79. 79. You can iterate over the keys of an object:<br />varobj = { 'name': 'Simon', 'age': 25};<br />for (varattr in obj) {<br /> print (attr + ' = ' + obj[attr]);<br />}<br />for (varattr in obj)<br />
    80. 80. function makePerson(first, last) {<br /> return {<br /> first: first,<br /> last: last<br /> }<br />}<br />function personFullName(person) {<br /> return person.first + ' ' + person.last;<br />}<br />function personFullNameReversed(person) {<br /> return person.last + ', ' + person.first<br />}<br />Function return object(1)<br />
    81. 81. > s = makePerson("Simon", "Willison");<br />> personFullName(s)<br />Simon Willison<br />> personFullNameReversed(s)<br />Willison, Simon<br /> Surely we can attach functions to the objects themselves?<br />Function returns object (2)<br />
    82. 82. function makePerson(first, last) {<br /> return {<br /> first: first,<br /> last: last,<br />fullName: function() {<br /> return this.first + ' ' + this.last;<br /> },<br />fullNameReversed: function() {<br /> return this.last + ', ' + this.first;<br /> }<br /> }<br />}<br />Object methods<br />
    83. 83. > s = makePerson("Simon", "Willison")<br />> s.fullName()<br />Simon Willison<br />> s.fullNameReversed()<br />Willison, Simon<br />Using object methods<br />
    84. 84. function Person(first, last) {<br />this.first = first;<br />this.last = last;<br />this.fullName = function() {<br /> return this.first + ' ' + this.last;<br /> }<br />this.fullNameReversed = function() {<br /> return this.last + ', ' + this.first;<br /> }<br />}<br />var s = new Person("Simon", "Willison");<br />Function constructor<br />
    85. 85. function Person(first, last) {<br />this.first = first;<br />this.last = last;<br />}<br />Person.prototype.fullName = <br /> function() {<br /> return this.first + ' ' + this.last;<br />}<br />Person.prototype.fullNameReversed = <br /> function() {<br /> return this.last + ', ' + this.first;<br />}<br />Prototype<br />
    86. 86. > var s = "Simon";<br />> s.reversed()<br />TypeError: s.reversed is not a function<br />> String.prototype.reversed = function() {<br />var r = '';<br /> for (vari = this.length - 1; i >= 0; i--){<br /> r += this[i];<br /> }<br /> return r;<br />}<br />> s.reversed()<br />nomiS<br />> "This can now be reversed".reversed()<br />desrevereb won nacsihT<br />Extending core objects<br />
    87. 87. Job done faster<br />Overcome cross-browser issue in Javascript + CSS<br />Programming easier<br />Most important : don’t invent the wheel<br />Some javascriptframwork : <br />jQuery<br />Prototype<br />YUI<br />Dojo<br />Extjs<br />Mootools<br />Why javascript framework ?<br />
    88. 88.
    89. 89. jQuery is a fast JavaScript Library to simplify: <br />HTML document traversing,<br />Event handling<br />Animating<br />Ajax interactions for rapid web development. <br />
    90. 90. Demo – Table strips,filter…<br />
    91. 91. Kham khảo<br />Reference<br /><ul><li>XHTML Tutorial http://www.w3schools.com/xhtml/default.asp
    92. 92. CSS Tutorial http://www.w3schools.com/css/
    93. 93. Quirk mode http://www.quirksmode.org/
    94. 94. Ultimate IE6 bug http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
    95. 95. HTML vs XHTML http://www.webstandards.org/learn/articles/askw3c/oct2003/
    96. 96. Fixed vs Fluid layout http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
    97. 97. Blue print framworkhttp://www.blueprintcss.org/
    98. 98. CSS Frameworks: An introduction Horst Gutmann</li></li></ul><li>Reference<br /><ul><li>Javascript Tutorial : http://www.w3schools.com/JS/default.asp
    99. 99. Object Oriented JavaScript Mike Girouard — AJAXWorld 2009
    100. 100. HTML DOM Tutorial : http://www.w3schools.com/HTMLDOM/default.asp
    101. 101. Javascript & DOM example : http://www.w3schools.com/JS/js_ex_dom.asp
    102. 102. HTML DOM Style Object : http://www.w3schools.com/jsref/dom_obj_style.asp
    103. 103. JQuerySCOTT@THERYANSPLACE.COM MAY 2008
    104. 104. JavaScript Libraries, Ajax Experience - October 2007,John Resig (ejohn.org)
    105. 105. A (Re)-Introduction to JavaScriptSimonWillisonETech,
    106. 106. jqueryhttp://jquery.org
    107. 107. LearningJQuery_v1.3 – Jonathan Chaffer, Pack publishing</li>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×