xml と XSLT の変換は、Web デザインに無限のメリットをもたらします。 XML および XSLT 変換を使用すると、動的な文章や Web サイトのコンテンツをデータベースに保存できます。データベースを XML で転送し、XSLT 変換を通じて HTML スクリプトに変換できます。
ネットワーク開発の初期の段階では、サーバー側で一貫性が実現されていましたが、それには多くの手動ファイル管理作業が含まれていました。幸いなことに、Web が成熟するにつれて、Web 開発ツールも成熟します。たとえば、.NET Framework では、さまざまな Web コントロールを作成してデザインを統一できます。
ユーザーとデータのインタラクション機能を設計する際、データの整合性、ユーザーインターフェースの機能性、ビジネスルールの完全性をどのように確保するか。この記事では、Web サイトの例を示し、XML と XSLT が Web サイトのデザインをどのようにシームレスにするかについて説明します。
以下は引用部分です:
<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>
ログイン後にコピー
上記のコード スニペットは main 関数を完成させていますが、XML と XSLT で美化する必要があります。
XMLではコードに開始タグと終了タグがありますが、HTMLにはそれがありません。 INPUT タグと BR タグは特殊なケースであり、末尾のタグは必要ありません。ただし、終了タグタグ「>」の前にスラッシュを追加すると、HTML が XML 仕様に準拠することが保証されます。 HTML スクリプトを作成するときにこれらの仕様に従うことに注意すると、XML/HTML (別名 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 またはスキーマの確認を行うことはできません。これにより、デザインを考慮することなく、完全な新しいページに変換できる実用的な HTML スクリプトを作成できます。
スタイルシートでは、HTMLタグの変換属性を使用して変換操作を実行します。ユーザー入力のためのすべてのコントロールは FORM 内にある必要があるため、変換操作に必要なユーザー コントロールを定義する単位として FORM フォームを使用することを検討しました。この例では、出力はテキスト INPUT で、テキストの色は青、高さ 20 ピクセル、幅 100 ピクセル、18 ポイントの太字フォントです。変換プロパティを変更することで、テキスト ボックス内のテキストの色を変更できます。
Web ページに静的コンテンツを追加するにはさまざまな方法がありますが、この例では、スタイル シートにヘッダーとフッターを追加するという最も単純な方法のみを使用します。
さて、ユーザー入力用に新しいフォームを作成したいときは、通常のフォームを作成するだけです。一般的なフォームがテストに合格すると、これらのフォームを変換に追加して、テーマの HTML 出力を生成できます。必要なのは、入力コントロールのタイプを覚えて、それを変換プロパティとして必ず追加することだけです。
上記は、Web サイトのデザインを統合するための XML と XSLT の組み合わせの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
