Tài liệu CHƯƠNG VI:THEMES VÀ SKIN pptx

CHƯƠNG V:
THEMES VÀ SKIN
Lý thuyết 3 tiết
Thực hành 3 tiết
Khái niệm về Themes

Themes tương tự như Cascading style sheet
(CSS), nó cho phép định nghĩa những style cho
các trang web. Themes có chức năng sâu hơn
CSS, cho phép ứng dụng các style, graphic và
cả các tập tin CSS vào những trang của ứng
dụng.

Themes là tập hợp các định nghĩa style sheet
cho các điều khiển, cho từng trang hoặc cho cả
một ứng dụng. Có thể sử dụng nhiều themes
trong một ứng dụng
Khái niệm về Themes

Mỗi folder themes chỉ chứa các phần tử
của themes gồm:

Một file skin đơn

Tập tin CSS

Images: hinh ảnh
Xây dựng Themes

Cách tạo Themes


Trong Solution Explorer Click phải trên tên
Web site và chọn Add ASP.NET Folder,
chọn Theme, khi đó xuất hiện một thư mục
App_Themes.
Xây dựng Themes

Trong folder App_Theme, chọn Add
Folder, chọn Theme để tạo themes

Tạo tập tin style sheet trong folder
Themes: Click phải trên folder Themes
chọn Add New Item. Trong cửa sổ
template chọn Style Sheet.
Xây dựng Themes

Thiết kế một style sheet: trong cửa sổ
style sheet của Visual Studio, click phải
trên Folder Elements chọn Add Style
Rule…
Xây dựng Themes
Xây dựng Themes

Để tạo style cho một tag, ta chọn tên tag
trong khung element và add vào khung
Style rule hierarchy
.
Xây dựng Themes
Xây dựng Themes

Để hiệu chỉnh style, ta click phải trên tên tag

trong folder element, chọn Build Style, xuất
hiện hộp thoại Style Builder
Xây dựng Themes
Xây dựng Themes

Áp dụng theme vào một trang ASP.NET
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default2.aspx.cs"
Inherits="Default2"
Theme="Theme1" %>
Xây dựng Themes

Áp dụng theme cho toàn bộ ứng dụng:

Mở tập tin Web.cofig
<configuration>
<system.web>
<pages theme="theme1"/>
</system.web>
</configuration>
Xây dựng Themes

Loại bỏ themes cho một server control
Mặc dù themes được thiết lập ở mức ứng dụng
hay trên một trang, tại một thời điểm nếu muốn
thay thế một theme được định nghĩa, ta dùng
thuộc tính EnableTheming bên trong tag
servercontrol
EnableTheming="false"

Xây dựng Themes

Loại bỏ themes cho một trang web:

Khi áp dụng themes cho cả web site thì
tất cả các trang đều ảnh hưởng của
themes, nếu một trang nào đó không
muốn sử dụng themes t dùng cú pháp:

<%@ Page Language="C#" EnableTheming="false" %>
Định nghĩa nhiều tùy chọn cho Skin

Skin là một định nghĩa của các style được áp
dụng cho các server control trong trang
ASP.NET, skin có thể làm việc trong mối liên kết
tập tin CSS hoặc tập tin hình ảnh.

Để tạo ra một themes sử dụng trong ứng dụng
ASP.NET ta chỉ sử dụng một file skin đơn trong
folder themes. File skin có thể có nhiều tên
nhưng nó phải có phần mở rộng .skin
Tạo skin

Click phải trên folder chứa skin chọn Add
new Item, chọn skin
Tạo skin
<asp:Image runat="server" ImageUrl="~/hinh/tpdl51.jpg" />
<asp:Label Runat="server" ForeColor="#004000"
Font-Names="Verdana" Font-Size="X-Small"/>
<asp:Textbox Runat="server" ForeColor="#004000"

Font-Names="Verdana" Font-Size="X-Small"
BorderStyle="Solid" BorderWidth="1px"/>
<asp:Button Runat="server" ForeColor="#004000"
Font-Names="Verdana" Font-Size="X-Small"
BorderStyle="Solid" BorderWidth="1px" BorderColor="#00400"/>
Áp dụng skin vào trang

Trong trang .ASPX
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default"
Theme="SkinFile" %>