ASP.NET 2.0에는 웹 사이트 스킨을 더 쉽게 만들 수 있는 새로운 테마 기능이 있습니다.
테마 구현에는 CSS, Skin, MasterPage가 포함됩니다.
CSS는 모든 HTML 태그의 모양을 제어하는 데 사용됩니다.
스킨은 모든 ASP.NET 서버 조정의 모양을 제어하는 데 사용되며 스킨의 CSS 스타일은 cssClass 속성을 통해 정의할 수 있습니다.
MasterPage는 *.aspx 페이지 템플릿이지만 테마에 정의되어 있지 않습니다.
------------------------------------- ----------------------------------
·테마 생성 예:
1. 웹 프로젝트에 App_Themes 디렉터리를 생성합니다. 이는 미리 정의된 디렉터리이며 ASP.NET 2.0은 해당 디렉터리에 있는 테마를 자동으로 인식합니다.
2. App_Themes 디렉터리에 orangeTheme 및 BlueTheme라는 두 개의 하위 디렉터리를 만듭니다.
3. App_Themes 아래의 각 하위 디렉터리에 Control.Skin과 같은 스킨 파일을 추가합니다. ASP.NET 2.0은 각 스킨 파일을 자동으로 분석하며 여기서 이름 지정은 개발 중 분류를 위해 편리하기만 하면 됩니다.
4. App_Themes 아래의 각 하위 디렉터리에 CSS 파일을 추가할 수도 있습니다. ASP.NET 2.0은 또한 이 스타일을 사용하는 모든 페이지에 모든 CSS 파일을 자동으로 추가합니다.
·페이지 내용 및 테마 스타일 정의
1. default.aspx 페이지 정의는 다음과 같습니다.
<%@ Page Theme="OrangeTheme" %>
<html>
<head runat="서버">
<title>오렌지 페이지</title>
</head>
<본문>
<form id="form1" runat="서버">
이름을 입력하세요:<br />
<asp:TextBox ID="txtName" Runat="서버" />
<br /><br />
<asp:Button ID="btnSubmit" Text="이름 제출" Runat="서버"/>
</form>
</body>
</html>
2. OrangeTheme 홈페이지의 Control.Skin 파일에 다음과 같이 정의합니다.
참고: 모양 속성만 지정할 수 있으며 AutoPastback 등의 속성은 지정할 수 없습니다.
이름이 지정되지 않은 기본 스킨은 모든 TextBox 유형의 스킨을 정의합니다.
<asp:TextBox BackColor="주황색" ForeColor="DarkGreen" Runat="서버" />
<asp:Button BackColor="Orange" ForeColor="DarkGreen" Font-Bold="True" Runat="Server" />
명명된 SkinID가 있으면 지정된 TextBox 유형의 모양이 정의됩니다.
<asp:TextBox SkinID="Title" BackColor="Orange" ForeColor="DarkGreen" Runat="Server" />
·페이지 내 테마 사용
1. Aspx 파일 상단에 Theme="Default 추가 <%@ 페이지 %> " 속성입니다. 이렇게 하면 기본 테마를 사용할 수 있습니다.
2. 특정 테마를 웹사이트 전체에 적용하려면 Web.Config에서 정의해야 합니다.
<구성>
<시스템.웹>
<페이지 테마="오렌지테마" />
</system.web>
</configuration>
이러한 정의는 모든 웹사이트 파일의 기본 테마와 동일합니다. 테마는 사용 시 각 페이지에 대해 정의될 수 있습니다.
스킨 부분은 페이지에 정의된 테마를 사용하고 CSS는 기본 홈 페이지의 CSS 스타일 시트를 재정의합니다.
3. 테마를 지정한 후 모든 모양은 스킨에 정의된 모양을 사용합니다. 컨트롤의 SkinID를 지정하여 개별 스킨을 정의할 수도 있습니다.
4. 테마를 프로그래밍 방식으로 정의하려면 다음과 같이 Page_PreInit 이벤트에서 처리되어야 합니다.
void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = Request["ThemeName"];
페이지에 대한 MasterPage 파일을 프로그래밍 방식으로 로드해야 하는 경우 여기서도 정의해야 합니다.
this.MasterPageFile = 요청["MasterPageFile"];
}
이러한 기술을 이해하면 웹사이트가 더욱 다양해집니다.