350 likes | 532 Views
Extra CSS. Content. Website development process CSS Javascript. Website development process. Content. I want… I need …. Customer. Website specification. Tester. Analyst. Sitemap. Web developer. Designer. Wireframe. Website. Page design. Template. Box model.
E N D
Content • Website development process • CSS • Javascript
Website development process Content I want… I need … • Customer Website specification • Tester • Analyst Sitemap • Web developer • Designer Wireframe Website Page design Template
Box model • 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.
Fixed layout • 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
Fluid layout • 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 • Examples : • http://www.blossomgraphicdesign.com
Floating element • 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)
Positioning element • Using {position} we can place an element anywhere on webpage • position : static; • position : fixed; • position : relative; • position : absolute;
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 has position:relative;
Demo absolute position • AbsolutePosition.html
Overlap element • If 2 element 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
Image replacement • 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; }
Cross browser issue • IE6 and below has many CSS bugs • Some bugs : • PNG transparency • IE Box model • Double margin bug • No min/max width/height
Double margin bug • Float left (right) element that has left (right) margin will have double margin • Demo : • Fix : • Add display:inline; to the floated element
Min Height • 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 • 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%;}
Float Drops • 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.
Clear float • Container will not wrap floated elements properly • Fix : • Add width & overflow : hidden to its container
3px text jog bug • 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
Introduce Blueprint • 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)
Ví dụ Style object example
Thay đổi border, margin, padding DOM Node properties
Thay đổi background Style background
Thay đổi font Style 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