يستفيد تصميم الويب بشكل كبير من تحويل XML وXSLT. باستخدام تحويلات XML وXSLT، يمكنك تخزين الإسهاب الديناميكي ومحتوى موقع الويب في قاعدة بيانات. يمكنك نقل قاعدة البيانات بتنسيق XML ثم تحويلها إلى برنامج HTML النصي من خلال تحويل XSLT.
في الأيام الأولى لتطوير الشبكة، تم تحقيق التماسك من جانب الخادم، ولكن هذا يتطلب الكثير من إدارة الملفات يدويًا. لحسن الحظ، مع نضوج الويب، تنضج أيضًا أدوات تطوير الويب. على سبيل المثال، ضمن إطار عمل .NET، يمكنك إنشاء عناصر تحكم ويب متنوعة لتوحيد التصميم.
عند تصميم وظائف تفاعل المستخدم/البيانات، كيفية تحقيق التكامل الكامل للبيانات، ووظائف واجهة المستخدم، وقواعد العمل. ستوفر هذه المقالة مثالاً لموقع ويب وتشرح كيف يمكن لـ XML وXSLT أن يجعل تصميم موقع الويب الخاص بك سلسًا.
هنا اقتباس:
<أتش تي أم أل>
<الرأس>
</الرأس>
<الجسم>
<طريقة النموذج = "POST" name = "thisForm" id = "thisForm" action = "somepage.php">
<نوع الإدخال = "نص" اسم = "txtText" معرف = "txtText" حجم = "25"> <br>
<نوع الإدخال = "إرسال" الاسم = "btnSubmit" معرف = "btnSubmit" القيمة = "إرسال">
</النموذج>
</الجسم>
</html>
يكمل مقتطف الكود أعلاه الوظيفة الرئيسية، لكنه يحتاج إلى تجميله باستخدام XML وXSLT.
في XML، يحتوي الكود على علامات فتح وإغلاق، بينما في HTML لا يوجد ذلك. تعد علامات INPUT وBR حالات خاصة، ولا تتطلب علامة زائدة. ومع ذلك، فإن إضافة شرطة مائلة للأمام قبل علامة علامة الإغلاق ">" يضمن توافق HTML مع مواصفات XML. إذا انتبهت إلى اتباع هذه المواصفات عند كتابة نصوص HTML البرمجية، فيمكنك تحويل XML/HTML (المعروف أيضًا باسم XHTML) إلى صفحات HTML جيدة.
هنا اقتباس:
<طريقة النموذج = "POST" name = "thisForm" id = "thisForm" action = "somepage.php">
<نوع الإدخال = "نص" اسم = "txtText" معرف = "txtText" حجم = "25" تحويل = "blueText"/>
<br/>
<نوع الإدخال = "إرسال" الاسم = "btnSubmit" معرف = "btnSubmit" القيمة = "إرسال"
تحويل = "bigButton"/>
</form> قم بتشغيل الكود التالي لإكمال تحويل XSLT:
<?xml version="1.0"?>
<xsl:ورقة الأنماط
xmlns:xsl=" http://www.w3.org/1999/XSL/Transform " الإصدار = "1.0"
>
<xsl:طريقة الإخراج = "html"/>
<xsl:تطابق القالب="/">
<عرض الجدول = "100%" خلية الحشو = "0" تباعد الخلايا = "0">
<tr><td align="center">هذا هو الرأس المحدد</td></tr>
<tr><td><xsl:apply-templates حدد="//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
حدد="@action"/></xsl:attribute>
<xsl:attribute name="name"><xsl:value-of Select="@name"/></xsl:attribute>
<xsl:اسم السمة = "id"><xsl:قيمة التحديد = "@id"/></xsl:attribute>
<xsl:apply-templates حدد = "*"/>
</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:اسم السمة = "id"><xsl:قيمة التحديد = "@id"/></xsl:attribute>
<xsl:attribute name="type">النص</xsl:attribute>
<xsl:attribute name="style">اللون:أزرق</xsl:attribute>
<xsl:if test="@value"><xsl:اسم السمة = "قيمة"><xsl:قيمة-of
حدد = "@value"/></xsl:attribute></xsl:if>
</xsl:العنصر>
</xsl:متى>
<xsl:when test="@transform='redText'"><xsl:element name="input">
<xsl:attribute name="name"><xsl:value-of
حدد="@name"/></xsl:attribute>
<xsl:اسم السمة = "id"><xsl:قيمة-of
حدد="@id"/></xsl:attribute>
<xsl:attribute name="type">النص</xsl:attribute>
<xsl:attribute name="style">اللون:أحمر</xsl:attribute>
<xsl:if test="@value"><xsl:اسم السمة = "قيمة"><xsl:قيمة-of
حدد = "@value"/></xsl:attribute></xsl:if>
</xsl:العنصر>
</xsl:متى>
<xsl:when test="@transform='bigButton'"><xsl:element name="input">
<xsl:attribute name="name"><xsl:value-of
حدد="@name"/></xsl:attribute>
<xsl:اسم السمة = "id"><xsl:قيمة-of
حدد="@id"/></xsl:attribute>
<xsl:اسم السمة = "نمط">الارتفاع: 30px;العرض:100px;الخط-
الحجم: 18pt;وزن الخط:700;</xsl:attribute>
<xsl:attribute name="value"><xsl:value-of
حدد = "@القيمة"/></xsl:attribute>
</xsl:العنصر>
</xsl:متى>
</xsl:اختر>
</xsl:قالب>
</xsl:stylesheet>
لا يمكن للكود أعلاه إنشاء مساحة اسم أو تحديد علامات XML أو تأكيد DTD أو المخطط لك. فهو يمكّنك من إنشاء نصوص HTML عاملة يمكن تحويلها إلى صفحات جديدة كاملة دون القلق بشأن اعتبارات التصميم.
في ورقة الأنماط، يتم استخدام سمة التحويل لعلامة HTML لقيادة عملية التحويل. لقد فكرت في استخدام نموذج FORM كوحدة لتحديد عناصر تحكم المستخدم المطلوبة لعمليات التحويل، نظرًا لأن جميع عناصر التحكم لإدخال المستخدم يجب أن تكون في نموذج. في هذا المثال، يكون الإخراج عبارة عن نص INPUT، ولون النص هو زر يبلغ ارتفاعه 20 بكسل وعرضه 100 بكسل، بخط عريض يبلغ 18 نقطة. يمكننا تغيير لون النص في مربع النص عن طريق تعديل خاصية التحويل.
هناك طرق عديدة لإضافة محتوى ثابت إلى صفحة ويب. في هذا المثال، نستخدم فقط الطريقة الأبسط، وهي إضافة رأس وتذييل إلى ورقة الأنماط.
الآن، عندما تريد إنشاء نموذج جديد لإدخال المستخدم، كل ما عليك فعله هو إنشاء نموذج عادي. بمجرد اجتياز النماذج العامة للاختبار، يمكن إضافة هذه النماذج إلى التحويل لإنشاء مخرجات HTML للموضوع. كل ما عليك فعله هو تذكر نوع التحكم في الإدخال والتأكد من إضافته كخاصية تحويل.