Mungkin sebagian teman-teman masih kurang paham mengenai tema dan skin. Pertama-tama mari kita perkenalkan tema dan skin.
1. Pendahuluan:
Lihat saja nama Tema dan Skin dan Anda akan tahu kegunaannya. Sekarang mari kita bicara tentang kegunaannya (bagaimana Anda masih bisa mengatakan,~_~) ketika Anda mengetahui semuanya? Tema. Kontrol dan gaya halaman tanpa mengubah kode dan file halaman kami.
File Tema ditempatkan secara terpisah di bawah folder App_Themes dan sepenuhnya terpisah dari program Anda.
2. Cara menggunakan Tema dan Skin:
Mari kita lihat contoh yang sangat sederhana terlebih dahulu:
App_Themesdefault1.skin kode file:
<asp:Label Font-Bold="true" ForeColor="Red" runat="server" />
default.aspx: Kode file:
<%@ Halaman Language="C#" Theme="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head id="Kepala1" runat="server">
<title>Halaman dengan Contoh Tema yang Diterapkan</title>
</kepala>
<tubuh>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Halo 1" /><br />
<asp:Label ID="Label2" runat="server" Text="Halo 2" /><br />
</bentuk>
</tubuh>
</html>
Anda dapat melihat bahwa kami belum menulis kode apa pun untuk mengontrol gaya di default.aspx, tetapi ketika kami menjalankannya, kami menemukan bahwa kata-kata pada label menjadi merah tebal. Ini adalah contoh tema paling dasar.
Folder Aplikasi_Tema:
Folder App_Themes terletak di direktori root program. App_Themes harus berupa subfolder dari nama Tema. Subfolder tersebut dapat berisi beberapa file .skin dan .css. Pada gambar di bawah, dua Tema dibuat, diberi nama default dan default2:
Gunakan tema
1. Terapkan Tema ke halaman:
Jika Anda ingin menerapkan Tema ke halaman tertentu, modifikasi <%@ Page Theme="..." %> langsung di file aspx. Misalnya, jika Anda ingin menerapkan tema default2 ke halaman ini, atur <% @ Page Theme="default2" %> OK
2. Terapkan Tema yang sama ke semua halaman:
Jika ingin menggunakan Tema yang sama di semua halaman, tambahkan kalimat <pages theme="..."/> di bawah node <system.web> di web.config
3. Biarkan kontrol tidak menerapkan Tema:
Pada contoh pertama, kita melihat bahwa gaya dari dua Label telah berubah, yang berarti bahwa gaya dalam file .skin telah berlaku pada semua Label di halaman. Namun terkadang kita ingin Label tertentu tidak menerapkan style di .skin. Dalam hal ini, Anda hanya perlu menyetel properti EnableTheming Label ke false.
Mungkin Anda juga ingin label yang berbeda menampilkan gaya yang berbeda. Anda hanya perlu mengatur atribut SkinID pada label tersebut.
App_Themesdefault1.skin
<asp:label runat="server" font-bold="true" forecolor="Merah" />
<asp:label runat="server" SkinID="Biru" font-bold="true" forecolor="biru" />
tuli.aspx
<%@ Halaman Bahasa="C#" Tema="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head id="Kepala1" runat="server">
<title>Halaman dengan Contoh Tema yang Diterapkan</title>
</kepala>
<tubuh>
<form id="form1" runat="server">
<asp:Label ID="Label2" runat="server" Text="Halo 2" SkinID="Biru" /><br />
<asp:Label ID="Label3" runat="server" Text="Halo 3" /><br />
</bentuk>
</tubuh>
</html>
Setelah dijalankan, Anda akan menemukan bahwa gaya tampilan kedua label berbeda.
4. Metode lain:
Seperti disebutkan sebelumnya, menggunakan <%@ Page Theme="..." %> di header file aspx untuk menggunakan tema, dan menggunakan metode ini untuk menerapkan gaya dalam tema akan menimpa gaya atribut kontrol yang Anda tulis di aspx. Misalnya:
App_Themesdefault1.skin
<asp:Label Font-Bold="true" ForeColor="Merah" runat="server" />
default.aspx
<%@ Halaman Bahasa="C#" Tema="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http ://www.w3.org/1999/xhtml ">
<head id="Kepala1" runat="server">
</kepala>
<tubuh>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Halo 1" /><br />
<asp:Label ID="Label2" runat="server" Text="Halo 2" ForeColor="biru" />
</bentuk>
</tubuh>
</html>
Sebagai hasil dari operasi tersebut, warna depan semua label menjadi merah.
Menggunakan <%@ Page StyleSheetTheme="..." %> untuk menerapkan tema tidak akan menimpa atribut style yang Anda tulis di file aspx:
urutan kontrol menerapkan atribut style adalah sebagai berikut:
a.Gaya yang direferensikan oleh StyleSheetTheme
b. Kontrol properti yang disetel berdasarkan kode (ganti StyleSheetTheme)
c. Gaya yang direferensikan oleh Tema (mencakup 2
tema pertama) berisi CSS:
File .css juga dapat digunakan dalam tema. Saat Anda meletakkan file .css di direktori tema, .css Anda secara otomatis akan diterapkan ke halaman yang menggunakan tema ini.
3. Kode latar belakang dapat dengan mudah mengubah tampilan situs web .
Yang saya sebutkan di atas adalah menerapkan tema pada file aspx atau web.config. Namun, jelas merepotkan jika menggunakan cara di atas untuk mengganti skin pada website seperti blog yang setiap penggunanya memiliki skin yang berbeda-beda.
Berikut ini akan diperkenalkan cara mereferensikan tema secara dinamis dalam kode latar belakang untuk mengatasi situasi di atas. Tema harus diterapkan paling awal saat halaman diminta, jadi kita harus menulis kode di event Page_PreInit , hanya satu kalimat:
Halaman.Tema = "...";
Di sini kita hanya perlu membaca nama tema berbeda yang ditetapkan oleh setiap pengguna dari database untuk dengan mudah menyadari bahwa setiap pengguna memiliki skin yang berbeda.
------------------------------------------
Di atas semua adalah pendapat dan pengalaman pribadi. Jika ada yang salah, mohon sarannya. Terima kasih!