Sharp Dressed Web Form

1,323 views
1,259 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,323
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sharp Dressed Web Form

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

×