Les 2 Xml Css & Xslt

1. XMLCSS & XSLT

2. CSS & XSLTXML bestanden vormgeven met CSSJe 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 stylesheetcsscatalogus { font:"Courier New", Courierfont-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 & XSLTStylesheetResultaat@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;}

4. CSS & XSLTXSLT ! XSLT staat voor eXtensibleStylesheetLanguageTransormations.

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

6. Anders dan CSS – CSS gebruikt regels die gekoppeld worden aan elementen. XSLT gebruikt templates die een bron tree omzet naar een resultaat tree.XSLT maakt gebruik van de XML syntax/ CSS maakt gebruikt van zijn syntax.

7. XSLT kan XML bestanden omzetten naar meedere bestandformaten zoals HTML, PDF,Asciitext, RTF of naar een andere XML bestand.Er is veel mogelijk met XSLT je kan data sorteren, output herschikken, auto- nummering items invoegen etc……

8. CSS & XSLTXSLT stylesheet! Het gebruikt de http://www.w3.org/1999/XSL/Transformnamespace.En is gekoppeld aan de xsl prefix.

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

10. Stylesheets bevatten een of meer <xsl:template> tags die ieder een templatedefinieren.Templates hebben een name of een match attribute.

11. De match attribute bepaald de Xpath expressie die gebruikt wordt om de juiste template te bedienen.Templates bevatten andere XSLT tags die bepalen hoe de data getransformeerd wordt.

12. CSS & XSLTHoe werkt XSLT!

13. CSS & XSLTXML 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 & XSLTXML 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. OpdrachtOpdracht 1.Maakvoor het xml tree bestandeen CSS stylesheet en koppeldezeaan het xml bestandOpdracht 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

More Related Content

Viewers also liked (7)

Les 2 Xml Css & Xslt