sharp dressed web form
TRANSCRIPT
EVERYBODY LOVES A SHARP DRESSED WEB FORM
Chris LoveTellago Inc.http://ProfessionalASPNET.comhttp://Twitter.com/ChrisLove
BOOKS
REFERENCES
CSS Cookbookhttp://bit.ly/dbzg0i
A List Aparthttp://www.alistapart.com/
SitePointhttp://SitePoint.com
High Performance Web Siteshttp://bit.ly/aZAVDx
TABLE LAYOUTS Easy To Get What You Want Ultimately Confining Nesting Gets Messy Quickly Ultimately Poor Performance
WEB SITE LAYERS
CSS
JavaScript/jQuery
HTML
C#/VB.NET
SQL
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!!
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/
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">
CSS SELECTORS Element
Body, P, H1… Id
#txtFirstName, #Footer… Class
.btn, .address…
http://www.w3.org/TR/CSS2/selector.html
CSS SELECTORS• Pseudo Classes
• :hover• :focus• :active
• Sibling• Lable + Input
• Attribute• Input [type=text]
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
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>
LAYOUTS#header, #container, #Mainfooter{ margin:auto; width:955px;}
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>
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
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>
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