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
Grégory Renard gregory_at_wygwam.com Wygwam
Microsoft Régional Director Microsoft MVP ASP.NET
2
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
3
ASP.NET 2.0 DOCTYPE

• Pourquoi 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
4
ASP.NET 2.0 xhtmlConformance

• Trois types de  Rendering 
• Strict
• Transitional ( par défaut )
• Legacy

• Web.Config

ltconfigurationgt ltsystem.webgt ltxhtmlConformance
modetransitional /gt lt/system.webgt lt/configurat
iongt
5
Mise en place dune Master-Page
demo
6
lthead runat"server"gt lttitlegtWebCast - Wygwam
Régional Directorlt/titlegt ltlink
type"text/css" rel"stylesheet" href"Style.css"
/gt lt/headgt
7
lthead runat"server"gt lttitlegtWebCast - Wygwam
Régional Directorlt/titlegt ltlink
type"text/css" rel"stylesheet" href"Style.css"
/gt lt/headgt
8
(No Transcript)
9
Amélioration des Contrôles Serveurs  Des
Formulaires sans TABLE 

• Code ASPX

ltform runat"server IDForm1gt ltpgt ltaspLabel
Runatserver IDlblNom
AssociatedControlIDtbNomgtNom
lt/aspLabelgt ltaspTextBox Runatserver
IDtbNomgtlt/aspTextBoxgt lt/pgt lt/formgt

• Rendu XHTML

ltform idForm1gt ltpgt ltlabel idlblNom
fortbNomgtNom lt/labelgt ltinput typetext
nametbNom idtbNom /gt lt/pgt lt/formgt
10
Formulaires
demo
11
(No Transcript)
12
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 lttitlegtWebCast - Wygwam
Régional Directorlt/titlegt ltlink
type"text/css" rel"stylesheet" href"Style.css"
/gt lt/headgt
13
lthead runat"server"gt lttitlegtWebCast - Wygwam
Régional Directorlt/titlegt ltlink
type"text/css" rel"stylesheet" href"Style.css"
/gt lt/headgt
14
(No Transcript)
15
CSS Properties WindowsAdd-In VS
2005-http//www.asp.net/sandbox/app_sandman.aspx
?tabindex0tabid1
Tool
16
(No Transcript)
17
(No Transcript)
18
Design Templates Gestion des thèmes MSDN,
Microsoft-http//msdn.microsoft.com/asp.net/ref
erence/design/templates/
demo
19
(No Transcript)
20
(No Transcript)
21
(No Transcript)
22
(No Transcript)
23
(No Transcript)
24
Quelques liens utiles

• 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/

25
(No Transcript)