Download - Sharp Dressed Web Form
![Page 1: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/1.jpg)
EVERYBODY LOVES A SHARP DRESSED WEB FORM
Chris LoveTellago Inc.http://ProfessionalASPNET.comhttp://Twitter.com/ChrisLove
![Page 2: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/2.jpg)
BOOKS
![Page 3: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/3.jpg)
REFERENCES
CSS Cookbookhttp://bit.ly/dbzg0i
A List Aparthttp://www.alistapart.com/
SitePointhttp://SitePoint.com
High Performance Web Siteshttp://bit.ly/aZAVDx
![Page 4: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/4.jpg)
TABLE LAYOUTS Easy To Get What You Want Ultimately Confining Nesting Gets Messy Quickly Ultimately Poor Performance
![Page 5: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/5.jpg)
WEB SITE LAYERS
CSS
JavaScript/jQuery
HTML
C#/VB.NET
SQL
![Page 6: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/6.jpg)
BROWSER DIFFERENCES Every Engine Plays By Its Own Rules
IE – Trident FireFox – Mozilla Chrome, Safari - WebKit
All Try to Honor Standards ACID
IE 9 is the best IE IE 6 Must DIE!!
![Page 7: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/7.jpg)
CSS RESETS Override Browser Default Settings
Can be Simple or Complex I Like the YUI CSS Rest
http://developer.yahoo.com/yui/reset/
http://www.kennycarlile.net/2008/06/19/yahoo-vs-eric-meyer-css-reset/
![Page 8: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/8.jpg)
DOCTYPE Quirks Mode Strict, transitional, frameset <!doctype html public "-//w3c//dtd
xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
![Page 9: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/9.jpg)
CSS SELECTORS Element
Body, P, H1… Id
#txtFirstName, #Footer… Class
.btn, .address…
http://www.w3.org/TR/CSS2/selector.html
![Page 10: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/10.jpg)
CSS SELECTORS• Pseudo Classes
• :hover• :focus• :active
• Sibling• Lable + Input
• Attribute• Input [type=text]
![Page 11: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/11.jpg)
CSS SELECTORS• Can be ‘Stacked’
.class1,
.class2,
.class3{…}
• Can Have Multiple Definitions• Combine Rules for Selectors• Target Rule Differences between
Selectorshttp://professionalaspnet.com/archive/2009/11/05/Using-CSS-Selectors.aspx
![Page 12: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/12.jpg)
LAYOUTS<div id="header"> <div class="MainHeader"> </div> <div id="MainNav"> </div> </div> <div id='container'> <asp:ContentPlaceHolder ID="MainContent"
runat="server"> </asp:ContentPlaceHolder> </div> <div id="Mainfooter"></div>
![Page 13: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/13.jpg)
LAYOUTS#header, #container, #Mainfooter{ margin:auto; width:955px;}
![Page 14: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/14.jpg)
3 COLUMN The Holy Grail Really 2 Nested DIVs <div id="left-column"> <div id="right-main-content"> <div id="MainColHome"> <div id="center-main-content"> </div> <div id="right-column"> </div> </div> </div> </div>
![Page 15: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/15.jpg)
FORM BEST PRACTICES Fieldsets
Group Items Labels
for Lists
Organizing Buttons
Subtle Queshttp://professionalaspnet.com/archive/2009/06/22/Making-a-Sharp-Dressed-Web-Form-_1320_-Thin-ASP.NET-8.aspx
![Page 16: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/16.jpg)
FORM LAYOUTS <fieldset id="Fieldset1"> <legend>Contact Us!</legend> <ol> <li> <label id="Label1" for="FirstName"> First Name : </label> <input name="FirstName" type="text" maxlength="25" class="required" /><em><img src="images/required.png" alt="required" /></em> </li> ... <li> <ul> <li> <button id=" btnCancel " name="btnCancel" type="button"> Cancel</button></li> <li> <button id=" btnReset " name="btnReset" type="reset"> Reset</button></li> <li> <button id=" btnSubmit " name="btnSubmit" type="submit"> Submit</button></li> </ul> </li> </ol> </fieldset>
![Page 17: Sharp Dressed Web Form](https://reader035.vdocuments.net/reader035/viewer/2022062418/5555c7cfd8b42aaf158b48d0/html5/thumbnails/17.jpg)
TOOLS IE 8 Developer Tools
http://professionalaspnet.com/archive/2009/10/24/Working-with-the-Internet-Explorer-Developer-Tools.aspx
FireBug – getFireBug.com SuperPreview (other similar tools) Install Every Browser You Can
IE FireFox Chrome Safari