ASP.NET 2.0 มีฟังก์ชันธีมใหม่ ซึ่งทำให้ง่ายต่อการสกินเว็บไซต์
การใช้งานธีมประกอบด้วย: CSS, Skin, MasterPage
CSS ใช้เพื่อควบคุมลักษณะที่ปรากฏของแท็ก HTML ทั้งหมด
Skin ใช้เพื่อควบคุมลักษณะที่ปรากฏของการปรับเซิร์ฟเวอร์ ASP.NET ทั้งหมด และสามารถกำหนดสไตล์ CSS ของแอตทริบิวต์ได้ผ่านแอตทริบิวต์ cssClass
MasterPage เป็นเทมเพลตเพจ *.aspx แต่ไม่ได้กำหนดไว้ในธีม
-------------------------------------------------- -------------------------------------------------- ----------------------------------
·ตัวอย่างการสร้างธีม:
1. สร้างไดเร็กทอรี App_Themes ในโครงการเว็บ เป็นไดเร็กทอรีที่กำหนดไว้ล่วงหน้า และ ASP.NET 2.0 จะจดจำธีมในไดเร็กทอรีของมันโดยอัตโนมัติ
2. สร้างไดเร็กทอรีย่อยสองไดเร็กทอรี orangeTheme และ BlueTheme ในไดเร็กทอรี App_Themes
3. เพิ่มไฟล์ Skin เช่น Control.Skin ลงในแต่ละไดเร็กทอรีย่อยภายใต้ App_Themes ASP.NET 2.0 จะวิเคราะห์ไฟล์ Skin แต่ละไฟล์โดยอัตโนมัติ และการตั้งชื่อที่นี่เพียงเพื่อความสะดวกในการจำแนกประเภทระหว่างการพัฒนาเท่านั้น
4. คุณยังสามารถเพิ่มไฟล์ CSS ลงในแต่ละไดเร็กทอรีย่อยภายใต้ App_Themes ASP.NET 2.0 จะเพิ่มไฟล์ CSS ทุกไฟล์ลงในทุกเพจที่ใช้สไตล์นี้โดยอัตโนมัติ
·กำหนดเนื้อหาของเพจและสไตล์ของธีม
1. คำจำกัดความของเพจ default.aspx เป็นดังนี้:
<%@ Page Theme="OrangeTheme" %>
<html>
<หัว runat="เซิร์ฟเวอร์">
<title>หน้าสีส้ม</title>
</หัว>
<ร่างกาย>
<form id="form1" runat="server">
ใส่ชื่อของคุณ:<br />
<asp:TextBox ID = "txtName" Runat = "เซิร์ฟเวอร์" / >
<br /><br />
<asp:Button ID="btnSubmit" Text="ส่งชื่อ" Runat="เซิร์ฟเวอร์"/>
</แบบฟอร์ม>
</ร่างกาย>
</html>
2. กำหนดดังต่อไปนี้ในไฟล์ Control.Skin บนหน้าแรกของ OrangeTheme:
หมายเหตุ: สามารถระบุได้เฉพาะคุณลักษณะลักษณะที่ปรากฏเท่านั้น และไม่สามารถระบุคุณลักษณะ เช่น AutoPastback ได้
สกินที่ไม่มีชื่อเริ่มต้นจะกำหนดสกินสำหรับกล่องข้อความทุกประเภท
<asp:TextBox BackColor="สีส้ม" ForeColor="DarkGreen" Runat="เซิร์ฟเวอร์" />
<asp:Button BackColor="Orange" ForeColor="DarkGreen" Font-Bold="True" Runat="Server" />
การมี SkinID ที่มีชื่อจะกำหนดลักษณะที่ปรากฏสำหรับประเภทกล่องข้อความที่ระบุ
<asp:TextBox SkinID="Title" BackColor="Orange" ForeColor="DarkGreen" Runat="Server" />
·ใช้ธีมในหน้า
1. เพิ่ม Theme="Default ที่ด้านบนของไฟล์ Aspx <%@ หน้า %> แอตทริบิวต์ " วิธีนี้จะทำให้สามารถใช้ธีมเริ่มต้นได้
2. หากคุณต้องการใช้ธีมบางอย่างกับทั้งเว็บไซต์ คุณต้องกำหนดธีมนั้นใน Web.Config
<การกำหนดค่า>
<system.เว็บ>
<pages theme="ธีมสีส้ม" />
</system.เว็บ>
</configuration>
คำจำกัดความดังกล่าวเทียบเท่ากับธีมเริ่มต้นในไฟล์เว็บไซต์ทั้งหมด ยังสามารถกำหนดธีมสำหรับแต่ละหน้าได้เมื่อใช้
ส่วน Skin จะใช้ธีมที่กำหนดไว้ในเพจ และ CSS จะแทนที่สไตล์ชีต CSS ในโฮมเพจเริ่มต้น
3. หลังจากระบุธีมแล้ว ลักษณะที่ปรากฏทั้งหมดจะใช้ธีมที่กำหนดไว้ในสกิน คุณยังสามารถระบุ SkinID ของตัวควบคุมเพื่อกำหนดสกินแต่ละรายการได้
4. หากคุณต้องการกำหนด Theme โดยทางโปรแกรม จะต้องประมวลผลในเหตุการณ์ Page_PreInit ดังนี้:
void Page_PreInit(ผู้ส่งวัตถุ EventArgs e)
-
Page.Theme = Request["ThemeName"];
หากคุณต้องการโหลดไฟล์ MasterPage สำหรับเพจโดยทางโปรแกรม คุณจะต้องกำหนดมันที่นี่ด้วย
this.MasterPageFile = คำขอ["MasterPageFile"];
}
การทำความเข้าใจเทคโนโลยีเหล่านี้จะทำให้เว็บไซต์มีความหลากหลายมากขึ้น