웹 디자인은 XML과 XSLT의 변환으로 인해 큰 이점을 얻습니다. XML 및 XSLT 변환을 사용하면 동적 표현과 웹 사이트 콘텐츠를 데이터베이스에 저장할 수 있습니다. 데이터베이스를 XML로 전송한 다음 XSLT 변환을 통해 HTML 스크립트로 변환할 수 있습니다.
네트워크 개발 초기에는 서버측에서 응집력을 확보했지만 이를 위해서는 수동으로 파일을 관리해야 하는 경우가 많았습니다. 다행스럽게도 웹이 발전함에 따라 웹 개발 도구도 발전하고 있습니다. 예를 들어 .NET 프레임워크에서는 다양한 웹 컨트롤을 만들어 디자인을 통합할 수 있습니다.
사용자/데이터 상호 작용 기능을 설계할 때 완전한 데이터 무결성, 사용자 인터페이스 기능 및 비즈니스 규칙을 달성하는 방법. 이 기사에서는 웹 사이트의 예를 제공하고 XML과 XSLT가 웹 사이트 디자인을 원활하게 만드는 방법을 설명합니다.
다음은 인용문입니다:
<html>
<머리>
</head>
<본문>
<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="제출">
</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" 변환="blueText"/>
<br/>
<input type="submit" name="btnSubmit" id="btnSubmit" value="제출"
변환="큰버튼"/>
</form> XSLT 변환을 완료하려면 다음 코드를 실행하세요.
<?xml 버전="1.0"?>
<xsl:스타일시트
xmlns:xsl=" http://www.w3.org/1999/XSL/Transform " 버전="1.0"
>
<xsl:출력 방법="html"/>
<xsl:템플릿 일치="/">
<테이블 너비="100%" cellpadding="0" 세포 간격="0">
<tr><td align="center">정의된 헤더입니다</td></tr>
<tr><td><xsl:apply-templates select="//form"/></td></tr>
<tr><td align="center">정의된 바닥글입니다</td></tr>
</table>
</xsl:템플릿>
<xsl:템플릿 일치="양식">
<xsl:요소 이름="양식">
<xsl:속성 이름="방법"><xsl:값-of
select="@method"/></xsl:속성>
<xsl:속성 이름="작업"><xsl:값-의
select="@action"/></xsl:속성>
<xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute>
<xsl:속성 이름="id"><xsl:value-of select="@id"/></xsl:attribute>
<xsl:적용-템플릿 선택="*"/>
</xsl:요소>
</xsl:template><xsl:template match="*">
<xsl:선택>
<xsl:when test="@transform='blueText'"><xsl:요소 이름="input">
<xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute>
<xsl:속성 이름="id"><xsl:value-of select="@id"/></xsl:attribute>
<xsl:속성 이름="유형">텍스트</xsl:속성>
<xsl:속성 이름="스타일">색상:파란색</xsl:속성>
<xsl:if test="@value"><xsl:속성 이름="value"><xsl:value-of
select="@value"/></xsl:attribute></xsl:if>
</xsl:요소>
</xsl:언제>
<xsl:when test="@transform='redText'"><xsl:요소 이름="input">
<xsl:속성 이름="이름"><xsl:값-of
select="@name"/></xsl:속성>
<xsl:속성 이름="id"><xsl:값-of
select="@id"/></xsl:속성>
<xsl:속성 이름="유형">텍스트</xsl:속성>
<xsl:속성 이름="스타일">색상:빨간색</xsl:속성>
<xsl:if test="@value"><xsl:속성 이름="value"><xsl:value-of
select="@value"/></xsl:attribute></xsl:if>
</xsl:요소>
</xsl:언제>
<xsl:when test="@transform='bigButton'"><xsl:요소 이름="input">
<xsl:속성 이름="이름"><xsl:값-of
select="@name"/></xsl:속성>
<xsl:속성 이름="id"><xsl:값-of
select="@id"/></xsl:속성>
<xsl:속성 이름="스타일">높이:30px;너비:100px;글꼴-
크기:18pt;글꼴 무게:700;</xsl:속성>
<xsl:속성 이름="값"><xsl:값-의
select="@value"/></xsl:속성>
</xsl:요소>
</xsl:언제>
</xsl:선택>
</xsl:템플릿>
</xsl:stylesheet>
위의 코드는 네임스페이스 생성, XML 태그 정의, DTD 또는 스키마 확인을 수행할 수 없습니다. 이를 통해 디자인 고려 사항에 대한 걱정 없이 완전한 새 페이지로 변환할 수 있는 작업 HTML 스크립트를 생성할 수 있습니다.
스타일 시트에서 HTML 태그의 변환 속성은 변환 작업을 구동하는 데 사용됩니다. 사용자 입력에 대한 모든 컨트롤은 FORM에 있어야 하므로 변환 작업에 필요한 사용자 컨트롤을 정의하기 위한 단위로 FORM 폼을 사용하는 것을 고려했습니다. 이 예에서 출력은 텍스트 INPUT이고 텍스트 색상은 파란색입니다. 버튼은 높이가 20픽셀이고 너비가 100픽셀이며 굵은 글꼴은 18포인트입니다. 변환 속성을 수정하여 텍스트 상자의 텍스트 색상을 변경할 수 있습니다.
웹 페이지에 정적 콘텐츠를 추가하는 방법에는 여러 가지가 있습니다. 이 예에서는 스타일 시트에 머리글과 바닥글을 추가하는 가장 간단한 방법만 사용합니다.
이제 사용자 입력을 위한 새 양식을 생성하려면 일반 양식을 생성하기만 하면 됩니다. 일반 양식이 테스트를 통과하면 이러한 양식을 변환에 추가하여 테마의 HTML 출력을 생성할 수 있습니다. 입력 컨트롤 유형을 기억하고 이를 변환 속성으로 추가하기만 하면 됩니다.