首頁 > 後端開發 > XML/RSS教程 > XML和XSLT結合讓網站設計渾然一體

XML和XSLT結合讓網站設計渾然一體

黄舟
發布: 2017-02-27 16:23:34
原創
1727 人瀏覽過

 xml和XSLT的轉換使Web設計受益無窮。借助XML和 XSLT轉換,你可以實現將動態用語(dynamic verbiage)和網站內容儲存在資料庫中。你可以在XML中傳輸資料庫,然後再透過XSLT轉換將其轉換為HTML腳本。

  在網路發展初期,凝聚性(cohesiveness)是由伺服器端實現的,但要牽涉到大量的人工文件管理工作。幸運的是,隨著網路的日益成熟,網頁開發工具也日臻完善。例如,在.NET框架下,你可以建立各種Web控制項來統一設計。

  在設計使用者/資料互動功能時,如何讓資料的完整性、使用者介面的功能性和商務規則的完善實現。本文將提供一個網站實例,並說明XML 和XSLT如何讓你的網站設計渾然一體。


以下是引用片段:

<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>  
登入後複製

 

      以上程式碼段完成了主要功能,但還需用XML和XSLT來對其加以美化。

  在XML中,程式碼有開頭和結尾標籤,而在HTML中沒有。 INPUT 和BR標籤是個特例,它們不需要結尾標籤。然而,在結尾標籤標記「>」前面加上一個正斜杠,可確保HTML符合XML規範。如果在寫HTML腳本時注意遵守這些規範,你就能夠將XML/HTML(aka XHTML)轉換成不錯的HTML頁面。  

以下是引用片段:

<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=&#39;blueText&#39;"><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=&#39;redText&#39;"><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=&#39;bigButton&#39;"><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>
登入後複製

  以上程式碼無法為你實作建立命名空間、定義XML標籤、確認DTD或schema。它使你能夠創建可行的HTML腳本,並可轉換為完整的新頁面,無需擔心設計因素。

  在樣式表中,以HTML標籤的轉換屬性驅動轉換操作。我曾考慮用一個FORM窗體作為定義轉換操作所需的使用者控制項的單元,因為所有用於使用者輸入的控制項都應在一個FORM中。本範例中,輸出為一個文字INPUT,文字顏色為藍色;一個高20像素、寬100像素的按鈕,字體為18點加粗。我們可以透過修改轉換屬性來改變文字方塊中的文字顏色。

  有多種方法可將靜態內容加入網頁中本例中只採用最簡單的方式,即在樣式表中增加header和footer。

  現在,要建立一個新窗體用於使用者輸入時,要做的只是建立一個一般窗體。一旦一般窗體通過測試,就可以將這些窗體加入轉換中產生主題的HTML輸出。你只要記住輸入控制項類型,並注意把它加為轉換屬性即可。

 以上是XML和XSLT結合讓網站設計渾然一體的內容,更多相關內容請關注PHP中文網(www.php.cn)!


#
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板