CHƯƠNG V: THEMES VÀ SKIN

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ươngtựnhư Cascading style sheet (CSS), nóchophépđịnhnghĩanhững style chocáctrang web. Themes cóchứcnăngsâuhơnCSS, chophépứngdụngcác style, graphic vàcảcáctập tin CSSvàonhữngtrangcủaứngdụng. • Themes làtậphợpcácđịnhnghĩa style sheet chocácđiềukhiển, chotừngtranghoặcchocảmộtứngdụng. Cóthểsửdụngnhiều themes trongmộtứngdụ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áchtạo Themes • Trong Solution Explorer Click phảitrêntên Web site vàchọn Add ASP.NET Folder, chọn Theme, khiđóxuấthiệnmộtthưmụcApp_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 • Để 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 • Áp dụng theme vào một trang ASP.NET <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2"Theme="Theme1" %>

Xây dựng Themes • Ápdụng theme chotoànbộứngdụng: • Mởtập tin Web.cofig <configuration> <system.web> <pagestheme="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: <%@PageLanguage="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:Imagerunat="server"ImageUrl="~/hinh/tpdl51.jpg"/> <asp:LabelRunat="server"ForeColor="#004000" Font-Names="Verdana"Font-Size="X-Small"/> <asp:TextboxRunat="server"ForeColor="#004000" Font-Names="Verdana"Font-Size="X-Small" BorderStyle="Solid"BorderWidth="1px"/> <asp:ButtonRunat="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 <%@ PageLanguage="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Theme="SkinFile" %>

CHƯƠNG V: THEMES VÀ SKIN