DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> XML和XSLT結合使網站設計渾然一體
XML和XSLT結合使網站設計渾然一體
編輯:XML詳解     

  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='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> 

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

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

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

  現在,要創建一個新窗體用於用戶輸入時,要做的只是創建一個一般窗體。一旦一般窗體通過測試,就可以將這些窗體添加到轉換中生成主題的Html輸出。你只要記住輸入控件類型,並注意把它添加為轉換屬性即可。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved