Download - Bài 4: MASTER PAGE
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 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
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title>
<asp:ContentPlaceHolder id="HeadContent" runat="server"> </asp:ContentPlaceHolder></head><body> <form id="form1" runat="server"> <h1> Chào mừng bạn đến với chúng tôi! Head</h1>
<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>vị trí một số thông tin footer
</form> <asp:ContentPlaceHolder ID="FooterContent" runat="server" > </asp:ContentPlaceHolder></body></html>
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"></asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <h2> Welcome to ASP.NET! </h2></asp:Content>
<asp:Content ID="FootContent" runat="server" ContentPlaceHolderID="FooterContent" ></asp:Content>
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
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 –
PageMasterPageFile="~/MasterPage_Cha.master"
Bước 3: Tạo một trang ContentMasterPageFile="~/MasterPage_Con.master"
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
Bước 2: Tạo File cssR_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
Á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)<configuration><system.web><compilation debug="true" targetFramework="4.0"/> <pages theme="them1"></pages></system.web></configuration>
Á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
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"/>