집 >백엔드 개발 >XML/RSS 튜토리얼 >XML과 XSLT의 결합으로 웹사이트 디자인이 원활해집니다.
XML과 XSLT의 결합으로 웹사이트 디자인이 원활해집니다.
- 黄舟원래의
- 2017-02-27 16:23:341721검색
웹 디자인은 xml과 XSLT의 변환으로 큰 이점을 얻습니다. XML 및 XSLT 변환을 사용하면 동적 표현과 웹 사이트 콘텐츠를 데이터베이스에 저장할 수 있습니다. 데이터베이스를 XML로 전송한 다음 XSLT 변환을 통해 HTML 스크립트로 변환할 수 있습니다.
네트워크 개발 초기에는 서버 측에서 응집력을 확보했지만 수동적인 파일 관리 작업이 많이 필요했습니다. 다행스럽게도 웹이 발전함에 따라 웹 개발 도구도 발전하고 있습니다. 예를 들어 .NET 프레임워크에서는 다양한 웹 컨트롤을 만들어 디자인을 통합할 수 있습니다.
사용자/데이터 상호 작용 기능을 설계할 때 데이터 무결성, 사용자 인터페이스 기능 및 비즈니스 규칙의 완벽성을 보장하는 방법. 이 기사에서는 웹 사이트의 예를 제공하고 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(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포인트입니다. 변환 속성을 수정하여 텍스트 상자의 텍스트 색상을 변경할 수 있습니다.
웹 페이지에 정적 콘텐츠를 추가하는 방법에는 여러 가지가 있습니다. 이 예에서는 스타일 시트에 머리글과 바닥글을 추가하는 가장 간단한 방법만 사용합니다.
이제 사용자 입력을 위한 새로운 양식을 생성하려면 일반 양식을 생성하기만 하면 됩니다. 일반 양식이 테스트를 통과하면 이러한 양식을 변환에 추가하여 테마의 HTML 출력을 생성할 수 있습니다. 입력 컨트롤 유형을 기억하고 이를 변환 속성으로 추가하기만 하면 됩니다.
위 내용은 XML과 XSLT를 결합하여 웹사이트 디자인을 통합한 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!