Bài giảng Phát triển web nâng cao - 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ươ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 
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 
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: 
Đị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 : 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