Bài 4: MASTER PAGE
4.1 Master page 4.2 Nested master-pages 4.3 Themes và skin
4.1 Master page
Ví dụ Khái niệm Thiết kế Demo
Ví dụ
http://hn.24h.com.vn/
http://hui.edu.vn/QuangNgai/
Khái niệm
Master Page cho phép bạn bố trí layout của
ứng dụng một cách phù hợp
xây dựng Master Page xây dựng các trang nội dung
Tổ chức thực hiện:
Thiết kế
Header section (Tiêu đề trang) Navigation (Menu - ) Footer section
Cấu trúc:
Add trang *.master (Viết code hoặc dùng
Cách tạo:
Design + Code) Add trang.aspx
Demo 1
Sử dụng demo mặc định
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
Welcome to ASP.NET!
Demo 2
4.2 Nested master-pages
Khái niệm Thiết kế Demo
Khái niệm
Sử dụng trang chủ là một trong những tính năng nổi tiếng trong ASP.NET 2.0 trở lên
Sử dụng trang chủ lồng nhau, chúng ta có thể
làm cho trang web trông linh hoạt hơn
Content Page
Nested Master Page
Master Page
Thiết kế
MasterPageFile="~/MasterPage_Cha.master"
Bước 1: Hãy làm cho một trang Master Page Bước 2: Tạo một trang Nested Master – Page
MasterPageFile="~/MasterPage_Con.master"
Bước 3: Tạo một trang Content
Demo
4.2 Theme và skin
Theme Skin
Theme
Là một bộ sưu tập các thiết lập cho phép bạn xác định giao diện và điều khiển của trang 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
Các bước thực hiện
Bước 1: Tạo các folder Bước 2: Tạo file css Bước 3: Add ảnh
Bước 1
Theme
Add ASP.NET folder
R_Click
Bước 2: Tạo File css
R_Click vào folder cần thêm file Chọn Add Existing Item ... Chọn Style Sheet Đặt tên Soạn nội dung
Hiệu chỉnh file css
Bước 3: Add file ảnh
Áp dụng Theme vào ASP.NET
Chỉ áp dụng cho 1 trang:
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" Theme="Theme1" %>
Áp dụng cho toàn website: (web.config)
Áp dụng Theme vào ASP.NET
Loại bỏ Theme cho 1 server control:
Bên trong tag server control, ta dùng thuộc tính EnableTheming=“false”
Loại bỏ Theme cho 1 trang: <%@ Page Language="C#" EnableTheming="false" %>
Skin
Skin cho phép bạn thay đổi một số thuộc tính
của các Controls trong asp.net.
Trong Skin có thể sử dụng các css cùng
Themes
Một Theme có thể chứa 1 hoặc nhiều Skin
Tạo Skin
R_Click vào folder Add_Themes Chọn Add
Existing Item ... Chọn Skin file Đặt tên
Font-Size="0.9em" Font-Names="Verdana" SkinID="LabelHeader" />
Soạn nội dung:
Đưa Skin vào 1 trang:
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" Theme="SkinFile" %> Đưa Skin vào tag:
Áp dụng Skin
