Power Point Slides
advertisement
Objectives • • • • • • Define the characteristics of good design. Test browsers for HTML5 and CSS3 compatibility. Define CSS and its relationship with HTML. Glance over the HTML Box model. Play with element positioning. Breakdown a design. Welcome To My Website • Search Google for “Welcome to my website” • Source Code: – Code is difficult to read. – Structure and style tangled in one document. • Avoid design mistakes such as: – Table-based design. – Overuse of images. – Overloading a page with information. Browser Issues • Many jobs today ask for HTML 5 experience. – As of publication, HTML 5 is not yet the standard. – Enter http://html5test.com/ into any browser. • What does this mean? – Many new HTML 5 structures are not implemented cross browser. • Is this a problem? NO! – HTML 5 basically builds upon HTML 4.01 and depreciates many older unnecessary elements. – Building blocks of proper design from 4.01 are in HTML 5. Browser Issues • What about CSS 3? – CSS from its inception has never been implemented properly across browsers. – Enter http://css3test.com/ into any browser. • What does this mean? – Learning the basics will go further than implementing the newest features. – CSS 3 builds on CSS 2, making both syntactically similar. HTML and CSS • What is CSS? – Cascading Style Sheets • HTML style semantics. • The use separates structure from “look”. – Easier to maintain. – Easier to read. – Cascading implies falling. • HTML is a tree structure. HTML and CSS Basic Terms • Element – HTML “Tag” (DOM object) – <body> <div> <span> • Selector – How to reference elements within the HTML document. – #ID .class • Attribute – Property of an element that can be manipulated with CSS. – border-color: font-size: background-repeat: The Box Model Element Positions Value Description static Elements renders in order, as they appear in the document flow. This is default. absolute The element is positioned relative to its first positioned (not static) ancestor element fixed The element is positioned relative to the browser window relative The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position inherit The value of the position property is inherited from the parent element Breaking Down A Design
