Les 2 Xml Css & Xslt

1. XML CSS & XSLT

2. CSS & XSLT XML bestanden vormgeven met CSS Je kan de data binnen XML bestanden doormiddel van CSSvormgeven. Dit kan door een extern CSS bestand te koppelen! <?xmlversion="1.0" encoding="utf-8"?> <?xml-stylesheethref="cat.css" type="text/css"?> <catalogus> <product>dvd <artiest>Pearl Jam</artiest> <titel>Live in Paris</titel> <prijs> 29,95 </prijs> </product> <product>cd <artiest>Kings of Leon</artiest> <titel>The best of.</titel> <prijs>14,95</prijs> </product> <product>dvd <artiest>Jan Smit</artiest> <titel>Live in Volendam</titel> <prijs> 29,95 </prijs> </catalogus> Koppeling met stylesheet css catalogus { font:"Courier New", Courier font-size:28px; position: fixed; left: 25%;} product, artiest, titel, prijs { display: table-row; color:#666; display:list-item; list-style:none; border-spacing: 0.5em;} artiest { color:#006;} titel { color:#990;} prijs { color:#600;}

3. CSS & XSLT Stylesheet Resultaat @charset "utf-8"; /* CSS Document */ catalogus { font:"Courier New", Courier, monospace; font-size:28px; position: fixed; left: 25%;} product, artiest, titel, prijs { display: table-row; color:#666; display:list-item; list-style:none; border-spacing: 0.5em;} artiest { color:#006;} titel { color:#990;} prijs { color:#600;}

5. W3C spec – http://www.w3.org/TR/xslt

9. XSLT stylesheets maken gebruiken van <xsl:stylesheet> root tag.

12. CSS & XSLT Hoe werkt XSLT!

13. CSS & XSLT XML bestanden vormgeven met XSLT <?xmlversion="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/xsl" href="style.xsl"?> <catalogus> <product>dvd <artiest>Pearl Jam</artiest> <titel>Live in Paris</titel> <prijs> 29,95 </prijs> </product> <product>cd <artiest>Kings of Leon</artiest> <titel>The best of.</titel> <prijs>14,95</prijs> </product> <product>dvd <artiest>Jan Smit</artiest> <titel>Live in Volendam</titel> <prijs> 29,95 </prijs> </product> </catalogus> Koppeling met stylesheet

14. CSS & XSLT XML bestanden vormgeven met XSLT <head> <metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Catalogus</title> <style> body {position: absolute; left: 10%;} ul {background-color:#CCC; list-style-position:outside;} #lijst1 { width: 225px; height: 235px; float:left; padding-top: 30px; /*padding-left: 10px;*/ background-color:#03F; background:url(lp.png); background-repeat: no-repeat; font: Georgia, "Times New Roman", Times, serif; color: #00F;; font-size:24px;}

15. CSS & XSLT </style> </head> <body> <h1 style="font-size:24px; color:#999;>">Maestro Multimedia !</h1> <xsl:for-each select="catalogus/product"> <divid="lijst1"> <center><xsl:value-of select="artiest" /></center><br /> <center><xsl:value-of select="titel" /></center><br /> <center>Prijs: €<xsl:value-of select="prijs" /></center> </div> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>

16. CSS & XSLT <?xmlversion="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/xsl" href="style.xsl"?> <catalogus> <product>dvd <artiest>Pearl Jam</artiest> <titel>Live in Paris</titel> <prijs> 29,95 </prijs> </product> <product>cd <artiest>Kings of Leon</artiest> <titel>The best of.</titel> <prijs>14,95</prijs> </product> <product>dvd <artiest>Jan Smit</artiest> <titel>Live in Volendam</titel> <prijs> 29,95 </prijs> </product> </catalogus>

17. Opdracht Opdracht 1. Maakvoor het xml tree bestandeen CSS stylesheet en koppeldezeaan het xml bestand Opdracht 2. Maakvoor het xml tree bestandeen XSLT stylesheet en koppeldezeaan het xml bestand. Upload de bestandennaar je eigenwebomgeving en stuur de link via Mail naarm.v.ginkel@rocleiden.nl

Les 2 Xml Css & Xslt

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie Les 2 Xml Css & Xslt

Ähnlich wie Les 2 Xml Css & Xslt (9)

Les 2 Xml Css & Xslt