Phát triển Web nâng cao - Bài 4: Master Page

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ụ   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  Tổ chức thực hiện:  xây dựng Master Page  xây dựng các trang nội dung Thiết kế  Cấu trúc:  Header section (Tiêu đề trang)  Navigation (Menu - )  Footer section  Cách tạo:  Add trang *.master (Viết code hoặc dùng 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" %> Chào mừng bạn đến với chúng tôi! Head vị trí một số thông tin footer <%@ 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 Nested Master Page Master PageContent Page Thiết kế  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_Cha.master"  Bước 3: Tạo một trang Content MasterPageFile="~/MasterPage_Con.master" 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 R_Click Add ASP.NET folder Theme 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: 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   Soạn nội dung: <asp:Label Runat="server" ForeColor="#004000" Font-Names="Verdana" Font-Size="X-Small"/> <asp:Label runat="server" ForeColor="#585880" Font-Size="0.9em" Font-Names="Verdana" SkinID="LabelHeader" /> <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  Đư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: