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
Language="C#"
<%@ Page 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
ụ ở ậ
ự
ạ ỏ ộ
Xây d ng Themes Lo i b themes cho m t server control
ặ ụ
ố
ị
ế tính EnableTheming bên ế ậ ở ứ ứ t l p m c ng d ng ế ể ờ ộ i m t th i đi m n u mu n ượ c đ nh nghĩa, ta dùng tag trong
ượ c thi M c dù themes đ ạ ộ hay trên m t trang, t ộ thay th m t theme đ ộ thu c servercontrol
EnableTheming="false"
ự
Xây d ng Themes
ộ
ạ ỏ
ụ
ả
ả
ề ả
ưở
ủ
t c các trang đ u nh h ộ
ế ử ụ
ố
Lo i b themes cho m t trang web: Khi áp d ng themes cho c web site thì ấ ng c a t 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 đ trong
ụ
ệ ố
ể ặ ậ ả
c áp trang d ng cho các server control 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
ở ộ ư ả
ạ
ứ
ọ
Click ph i trên folder ch a skin ch n Add
ọ
T o skin ả new Item, ch n skin
ạ
T o skin
Font-Names="Verdana" Font-Size="X-Small"/> Font-Names="Verdana" Font-Size="X-Small" BorderStyle="Solid" BorderWidth="1px"/> Font-Names="Verdana" Font-Size="X-Small" BorderStyle="Solid" BorderWidth="1px" BorderColor="#00400"/> Trong trang .ASPX <%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default"
Theme="SkinFile" %>ụ
Áp d ng skin vào trang
