การออกแบบเว็บไซต์ได้รับประโยชน์อย่างมากจากการเปลี่ยนแปลงของ XML และ XSLT ด้วยการแปลง XML และ XSLT คุณสามารถจัดเก็บคำฟุ่มเฟือยแบบไดนามิกและเนื้อหาเว็บไซต์ในฐานข้อมูลได้ คุณสามารถถ่ายโอนฐานข้อมูลในรูปแบบ XML จากนั้นแปลงเป็นสคริปต์ HTML ผ่านการแปลง XSLT
ในช่วงเริ่มต้นของการพัฒนาเครือข่าย ความสอดคล้องกันเกิดขึ้นที่ฝั่งเซิร์ฟเวอร์ แต่สิ่งนี้เกี่ยวข้องกับการจัดการไฟล์ด้วยตนเองจำนวนมาก โชคดีที่เมื่อเว็บเติบโตขึ้น เครื่องมือในการพัฒนาเว็บก็เช่นกัน ตัวอย่างเช่น ภายใต้กรอบงาน .NET คุณสามารถสร้างการควบคุมเว็บต่างๆ เพื่อรวมการออกแบบได้
เมื่อออกแบบฟังก์ชันการโต้ตอบระหว่างผู้ใช้/ข้อมูล วิธีบรรลุความสมบูรณ์ของข้อมูลที่สมบูรณ์ ฟังก์ชันการทำงานของอินเทอร์เฟซผู้ใช้ และกฎเกณฑ์ทางธุรกิจ บทความนี้จะให้ตัวอย่างเว็บไซต์และอธิบายว่า XML และ XSLT จะทำให้การออกแบบเว็บไซต์ของคุณราบรื่นได้อย่างไร
นี่คือคำพูด:
<html>
<หัว>
</หัว>
<ร่างกาย>
<รูปแบบวิธีการ = "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="ส่ง">
</แบบฟอร์ม>
</ร่างกาย>
</html>
ข้อมูลโค้ดด้านบนทำหน้าที่หลักให้สมบูรณ์ แต่จำเป็นต้องตกแต่งให้สวยงามด้วย XML และ XSLT
ใน XML โค้ดจะมีแท็กเปิดและปิด ในขณะที่ HTML ไม่มี แท็ก INPUT และ BR เป็นกรณีพิเศษ โดยไม่จำเป็นต้องมีแท็กต่อท้าย อย่างไรก็ตาม การเพิ่มเครื่องหมายทับหน้าแท็กปิด ">" ช่วยให้มั่นใจว่า HTML สอดคล้องกับข้อกำหนด XML หากคุณใส่ใจกับการปฏิบัติตามข้อกำหนดเหล่านี้เมื่อเขียนสคริปต์ HTML คุณสามารถแปลง XML/HTML (หรือ XHTML) ให้เป็นหน้า HTML ที่ดีได้
นี่คือคำพูด:
<รูปแบบวิธีการ = "POST" name = "thisForm" id = "thisForm" action = "somepage.php">
<ประเภทอินพุต = "text" name = "txtText" id = "txtText" size = "25" แปลง = "blueText"/>
<br/>
<input type = "ส่ง" name = "btnSubmit" id = "btnSubmit" value = "ส่ง"
เปลี่ยนรูป = "bigButton"/>
</form> เรียกใช้โค้ดต่อไปนี้เพื่อทำการแปลง XSLT ให้เสร็จสมบูรณ์:
<?xml เวอร์ชัน = "1.0"?>
<xsl:สไตล์ชีท
xmlns:xsl=" http://www.w3.org/1999/XSL/Transform " version="1.0"
-
<xsl:วิธีการส่งออก="html"/>
<xsl:แม่แบบที่ตรงกัน="/">
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td align="center">นี่คือส่วนหัวที่กำหนด</td></tr>
<tr><td><xsl:apply-templates select="//form"/></td></tr>
<tr><td align="center">นี่คือส่วนท้ายที่กำหนด</td></tr>
</ตาราง>
</xsl:แม่แบบ>
<xsl:แม่แบบที่ตรงกัน="แบบฟอร์ม">
<xsl:ชื่อองค์ประกอบ="แบบฟอร์ม">
<xsl:attribute name="method"><xsl:value-of
เลือก="@method"/></xsl:attribute>
<xsl:attribute name="action"><xsl:value-of
เลือก="@การกระทำ"/></xsl:แอตทริบิวต์>
<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:องค์ประกอบ>
</xsl:template><xsl:template match="*">
<xsl:เลือก>
<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">ข้อความ</xsl:attribute>
<xsl:attribute name="style">color:blue</xsl:attribute>
<xsl:if test="@value"><xsl:attribute name="value"><xsl:value-of
เลือก="@value"/></xsl:attribute></xsl:if>
</xsl:องค์ประกอบ>
</xsl:เมื่อ>
<xsl:when test="@transform='redText'"><xsl:element name="input">
<xsl:attribute name="name"><xsl:value-of
เลือก="@ชื่อ"/></xsl:แอตทริบิวต์>
<xsl:attribute name="id"><xsl:value-of
เลือก="@id"/></xsl:attribute>
<xsl:attribute name="type">ข้อความ</xsl:attribute>
<xsl:attribute name="style">สี:สีแดง</xsl:attribute>
<xsl:if test="@value"><xsl:attribute name="value"><xsl:value-of
เลือก="@value"/></xsl:attribute></xsl:if>
</xsl:องค์ประกอบ>
</xsl:เมื่อ>
<xsl:when test="@transform='bigButton'"><xsl:element name="input">
<xsl:attribute name="name"><xsl:value-of
เลือก="@ชื่อ"/></xsl:แอตทริบิวต์>
<xsl:attribute name="id"><xsl:value-of
เลือก="@id"/></xsl:attribute>
<xsl:attribute name="style">ความสูง:30px;ความกว้าง:100px;font-
ขนาด:18pt;font-weight:700;</xsl:attribute>
<xsl:attribute name="value"><xsl:value-of
เลือก="@value"/></xsl:attribute>
</xsl:องค์ประกอบ>
</xsl:เมื่อ>
</xsl:เลือก>
</xsl:แม่แบบ>
</xsl:stylesheet>
โค้ดด้านบนไม่สามารถสร้างเนมสเปซ กำหนดแท็ก XML ยืนยัน DTD หรือสคีมาให้คุณได้ ช่วยให้คุณสร้างสคริปต์ HTML ที่ใช้งานได้ซึ่งสามารถแปลงเป็นหน้าใหม่ได้โดยไม่ต้องกังวลกับการพิจารณาในการออกแบบ
ในสไตล์ชีต แอ็ตทริบิวต์การแปลงของแท็ก HTML ใช้เพื่อขับเคลื่อนการดำเนินการแปลง ฉันได้พิจารณาใช้แบบฟอร์ม FORM เป็นหน่วยในการกำหนดการควบคุมผู้ใช้ที่จำเป็นสำหรับการดำเนินการแปลง เนื่องจากการควบคุมทั้งหมดสำหรับการป้อนข้อมูลของผู้ใช้ควรอยู่ในรูปแบบ ในตัวอย่างนี้ ผลลัพธ์เป็นอินพุตข้อความ สีข้อความเป็นสีน้ำเงิน ปุ่มสูง 20 พิกเซลและกว้าง 100 พิกเซล พร้อมแบบอักษรตัวหนา 18 พอยต์ เราสามารถเปลี่ยนสีข้อความในกล่องข้อความได้โดยการแก้ไขคุณสมบัติการแปลง
มีหลายวิธีในการเพิ่มเนื้อหาคงที่ให้กับเว็บเพจ ในตัวอย่างนี้ เราใช้วิธีที่ง่ายที่สุดเท่านั้น ซึ่งก็คือการเพิ่มส่วนหัวและส่วนท้ายให้กับสไตล์ชีต
ตอนนี้ เมื่อคุณต้องการสร้างแบบฟอร์มใหม่สำหรับการป้อนข้อมูลของผู้ใช้ สิ่งที่คุณต้องทำคือสร้างแบบฟอร์มปกติ เมื่อแบบฟอร์มทั่วไปผ่านการทดสอบ คุณจะสามารถเพิ่มแบบฟอร์มเหล่านี้ในการแปลงเพื่อสร้างเอาต์พุต HTML ของธีมได้ สิ่งที่คุณต้องทำคือจำประเภทการควบคุมอินพุต และเพิ่มเป็นพร็อพเพอร์ตี้ Conversion