Heim >Backend-Entwicklung >XML/RSS-Tutorial >Die Kombination von XML und XSLT ermöglicht ein nahtloses Website-Design
Webdesign profitiert stark von der Transformation von XML und XSLT. Mit XML- und XSLT-Transformationen können Sie dynamische Ausdrücke und Website-Inhalte in einer Datenbank speichern. Sie können die Datenbank in XML übertragen und anschließend per XSLT-Transformation in ein HTML-Skript konvertieren.
In den frühen Tagen der Netzwerkentwicklung wurde Kohärenz auf der Serverseite erreicht, aber es war viel manuelle Dateiverwaltungsarbeit erforderlich. Glücklicherweise entwickeln sich mit zunehmender Reife des Webs auch die Webentwicklungstools weiter. Unter dem .NET-Framework können Sie beispielsweise verschiedene Websteuerelemente erstellen, um das Design zu vereinheitlichen.
Wie kann beim Entwerfen von Benutzer-/Dateninteraktionsfunktionen die Integrität der Daten, die Funktionalität der Benutzeroberfläche und die Perfektion der Geschäftsregeln sichergestellt werden? Dieser Artikel stellt ein Beispiel einer Website bereit und erklärt, wie XML und XSLT Ihr Website-Design nahtlos gestalten können.
Das Folgende ist ein Zitatfragment:
<html> <head> </head> <body> <form method="POST" name="thisForm" id="thisForm" action="somepage.php"> <input type="text" name="txtText" id="txtText" size="25"><br> <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"> </form> </body> </html>
Das obige Codefragment vervollständigt die Hauptfunktion, jedoch XML und XSLT sind auch erforderlich, um es zu verschönern.
In XML hat Code öffnende und schließende Tags, in HTML gibt es jedoch keine. INPUT- und BR-Tags sind Sonderfälle, sie erfordern kein nachgestelltes Tag. Durch das Hinzufügen eines Schrägstrichs vor dem schließenden Tag-Tag „>“ wird jedoch sichergestellt, dass der HTML-Code der XML-Spezifikation entspricht. Wenn Sie beim Schreiben von HTML-Skripten darauf achten, diese Spezifikationen zu befolgen, können Sie XML/HTML (auch bekannt als XHTML) in gute HTML-Seiten konvertieren.
Das Folgende ist ein Zitatfragment:
<form method="POST" name="thisForm" id="thisForm" action="somepage.php"> <input type="text" name="txtText" id="txtText" size="25" transform="blueText"/> <br/> <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" transform="bigButton"/> </form> 运行下列代码,完成XSLT转换: <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" > <xsl:output method="html"/> <xsl:template match="/"> <table width="100%" cellpadding="0" cellspacing="0"> <tr><td align="center">This is the defined header</td></tr> <tr><td><xsl:apply-templates select="//form"/></td></tr> <tr><td align="center">This is the defined footer</td></tr> </table> </xsl:template> <xsl:template match="form"> <xsl:element name="form"> <xsl:attribute name="method"><xsl:value-of select="@method"/></xsl:attribute> <xsl:attribute name="action"><xsl:value-of select="@action"/></xsl:attribute> <xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute> <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute> <xsl:apply-templates select="*"/> </xsl:element> </xsl:template><xsl:template match="*"> <xsl:choose> <xsl:when test="@transform='blueText'"><xsl:element name="input"> <xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute> <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute> <xsl:attribute name="type">text</xsl:attribute> <xsl:attribute name="style">color:blue</xsl:attribute> <xsl:if test="@value"><xsl:attribute name="value"><xsl:value-of select="@value"/></xsl:attribute></xsl:if> </xsl:element> </xsl:when> <xsl:when test="@transform='redText'"><xsl:element name="input"> <xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute> <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute> <xsl:attribute name="type">text</xsl:attribute> <xsl:attribute name="style">color:red</xsl:attribute> <xsl:if test="@value"><xsl:attribute name="value"><xsl:value-of select="@value"/></xsl:attribute></xsl:if> </xsl:element> </xsl:when> <xsl:when test="@transform='bigButton'"><xsl:element name="input"> <xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute> <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute> <xsl:attribute name="style">height:30px;width:100px;font- size:18pt;font-weight:700;</xsl:attribute> <xsl:attribute name="value"><xsl:value-of select="@value"/></xsl:attribute> </xsl:element> </xsl:when> </xsl:choose> </xsl:template> </xsl:stylesheet>
Der obige Code kann keinen Namespace erstellen, XML-Tags definieren, DTD oder Schema für Sie bestätigen. Damit können Sie funktionierende HTML-Skripte erstellen, die in völlig neue Seiten umgewandelt werden können, ohne sich Gedanken über Designaspekte machen zu müssen.
Verwenden Sie im Stylesheet das Konvertierungsattribut des HTML-Tags, um den Konvertierungsvorgang zu steuern. Ich habe darüber nachgedacht, ein FORM-Formular als Einheit zum Definieren der für Konvertierungsvorgänge erforderlichen Benutzersteuerelemente zu verwenden, da alle Steuerelemente für Benutzereingaben in einem FORM liegen sollten. In diesem Beispiel ist die Ausgabe ein Text INPUT, die Textfarbe ist blau; eine Schaltfläche mit einer Höhe von 20 Pixeln und einer Breite von 100 Pixeln und einer 18-Punkt-Fettschrift. Wir können die Textfarbe im Textfeld ändern, indem wir die Transformationseigenschaft ändern.
Es gibt viele Möglichkeiten, statischen Inhalt zu einer Webseite hinzuzufügen. In diesem Beispiel verwenden wir nur die einfachste Methode, nämlich das Hinzufügen von Kopf- und Fußzeilen zum Stylesheet.
Wenn Sie nun ein neues Formular für Benutzereingaben erstellen möchten, müssen Sie nur noch ein reguläres Formular erstellen. Sobald die allgemeinen Formulare den Test bestehen, können diese Formulare der Transformation hinzugefügt werden, um die HTML-Ausgabe des Themas zu generieren. Sie müssen sich lediglich den Typ des Eingabesteuerelements merken und ihn unbedingt als Konvertierungseigenschaft hinzufügen.
Das Obige ist der Inhalt der Kombination von XML und XSLT, um das Website-Design zu integrieren. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!