Powerful web skinning with ASP'NET 2'0, XHTML and CSS Discovered

1
Powerful web skinning with ASP.NET 2.0, XHTML and
CSS Discovered
Peter Himschoot peter_at_u2u.be U2U Microsoft
Regional Director
2
This Session About

• XHTML
• CSS
• Separate contents from presentation
• ASP.NET Themes and Skins

3
XHTML 1.0 DOCTYPEs

• XHTML 1.0 Strict

lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"   "http//www.w3.org/TR/xhtm
l11/DTD/xhtml11-strict.dtd"gt

• XHTML 1.0 Transitional

lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"  "http//www.w3.org/TR
/xhtml11/DTD/xhtml11-transitional.dtd"gt

• XHTML 1.0 Frameset

lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN"   "http//www.w3.org/TR/xh
tml11/DTD/xhtml11-frameset.dtd"gt
4
ASP.NET 2.0 DOCTYPE

• Why XHTML 1.0 Transitional ?

ltscript typetext/javascriptgt / lt!CDATA
/ function ValiderFormulaire() if
(document.formsForm1.elementstbNom.value
) alert(Veuillez précisez votre
Nom.) return false else return
true / gt / lt/scriptgt ltform nameForm1
onSubmitreturn ValiderFormulaire()gt ltinput
typetext nametbNom /gt lt/formgt
5
ASP.NET 2.0 xhtmlConformance

• Three kinds of rendering
• Strict
• Transitional ( par défaut )
• Legacy

• Web.Config

ltconfigurationgt ltsystem.webgt ltxhtmlConformance
modetransitional /gt lt/system.webgt lt/configurat
iongt
6
Preparing the Master-Page
demo
7
lthead runat"server"gt lttitlegtA Simple ASP.NET
Web Pagelt/titlegt ltlink type"text/css"
rel"stylesheet" href"Style.css" /gt lt/headgt
8
Table-less Layout

• Code ASPX

ltform runat"server IDForm1gt ltpgt ltaspLabel
Runatserver IDlblName
AssociatedControlIDtbNamegtName
lt/aspLabelgt ltaspTextBox Runatserver
IDtbNamegtlt/aspTextBoxgt lt/pgt lt/formgt

• Rendered to XHTML

ltform idForm1gt ltpgt ltlabel idlblName
fortbNamegtName lt/labelgt ltinput typetext
nametbName idtbName /gt lt/pgt lt/formgt
9
Forms
demo
10
(No Transcript)
11
div.Content label display block float
left padding-right 10px text-align
right width 200px div.Content
input.Text width 300px div.Content
textarea height 80px width
300px div.Content input.Button margin-left
210px
lthead runat"server"gt lttitlegtlt/titlegt
ltlink type"text/css" rel"stylesheet"
href"Style.css" /gt lt/headgt
12
CSS Properties WindowsAdd-In VS
2005-http//www.asp.net/sandbox/app_sandman.aspx
?tabindex0tabid1
Tool
13
(No Transcript)
14
(No Transcript)
15
Design TemplatesSkins Themes
http//msdn.microsoft.com/asp.net/reference/design
/templates/
demo
16
(No Transcript)
17
(No Transcript)
18
(No Transcript)
19
(No Transcript)
20
References

• W3C http//www.w3c.org
• XHTML 1.0 - http//www.w3.org/TR/xhtml1/
• CSS 2.1 - http//www.w3.org/TR/CSS21/
• MSDN Design Template - http//msdn.microsoft.com/a
  sp.net/reference/design/templates/
• CSS Zen Garden - http//csszengarden.com/
• Alsacreations - http//css.alsacreations.com/
• MaxDesign - http//css.maxdesign.com.au/
• OpenWeb - http//openweb.eu.org/

21
(No Transcript)