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

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.. Khái niệm về Themes Mỗi folder themes chỉ chứa các phần tử củ

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

(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

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

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

 Để 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

AutoEventWireup ="true"

CodeFile ="Default2.aspx.cs"

Inherits ="Default2"

Xây dựng Themes

<configuration>

<system.web>

<pages theme="theme1"/>

</system.web>

</configuration>

Xây dựng Themes

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

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

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

AutoEventWireup="true"

CodeFile="Default.aspx.cs" Inherits="_Default"

Theme="SkinFile" %>