Thông tin tài liệu
CHƯƠNG IV:
MASTER PAGE
Lý thuyết 3 tiết
Thực hành 6 tiết
Giới thiệu về Master Page
ASP.Net 2.0 cung cấp một cách đơn giản để
tạo trang template làm nền tảng cho bất kỳ
trang web nào trong website. Các template
này gọi là Master Page.
Sử dụng master page giúp cho việc xây dựng
các ứng dụng trở nên dễ dàng hơn và dễ quản
lý hơn
Giới thiệu về Master Page
Khi làm việc với master Pages ta tạo ra một tập
tin master – template được tham chiếu bởi
subpage hoặc content page
Tập tin Master page có phần mở rộng .master,
và tập tin content page có phần mở rộng là
.aspx
Giới thiệu về Master Page
M C
MC
Master page
.master
Content page
.aspx
Combined Page
Thiết kế trang Master Page
Đặt tất cả nội dung muốn chia sẻ (dùng chung)
trong trang master (MasterPage), thông thường
gồm các phần:
Header section (Tiêu đề trang)
Navigation (Menu - )
Footer section
Trang nội dung (Content page) chứa tất cả các
nội dung của trang ngoại trừ các phần tử của
trang master
Thiết kế trang Master Page
Ví dụ một kiểu trang master
N
a
v
i
g
a
t
i
o
n
Header
Content
Footer
<%@ page masterpagefile=“~/my.master” %><%@ master %>
my.master
Header
Footer
Navigation
<asp:contentplaceholder
Id=“MainContent”>
Here is the content
that replaces …
</asp:contentplaceholder>
default.aspx (content-page)
<%@ master %>
my.master
Header
Footer
Navigation
<asp:contentplaceholder
Id=“MainContent”>
Here is my basic
default content
</asp:contentplaceholder>
<%@ master %>
my.master
Footer
Navigation
<asp:contentplaceholder
Id=“MainContent”>
Here is my basic
default content
</asp:contentplaceholder>
Header
<%@ page masterpagefile=“~/my.master” %><%@ master %>
my.master
Header
Footer
Navigation
<asp:contentplaceholder
Id=“MainContent”>
Here is my basic
default content
</asp:contentplaceholder>
default.aspx (content-page)
<asp:content
contentplaceholderid=“MainContent”>
Here is the content
that replaces …
/asp:content>
<%@ page masterpagefile=“~/my.master” %><%@ master %>
my.master
Header
Footer
Navigation
<asp:contentplaceholder
Id=“MainContent”>
Here is my basic
default content
</asp:contentplaceholder>
default.aspx (content-page)
<asp:content
contentplaceholderid=“MainContent”>
Here is the content
that replaces …
/asp:content>
<%@ page masterpagefile=“~/my.master” %><%@ master %>
my.master
Header
Footer
Navigation
<asp:contentplaceholder
Id=“MainContent”>
Here is my basic
default content
</asp:contentplaceholder>
default.aspx (content-page)
<asp:content
contentplaceholderid=“MainContent”>
Here is the content
that replaces …
/asp:content>
Ví dụ:
<%@ page masterpagefile=“~/my.master” %>
default.aspx (content-page)
<asp:content
contentplaceholderid=“MainContent”>
Here is the content
that replaces …
/asp:content>
Thiết kế 1 trang Master Page
Master-page: design-time
1. Tạo a master page với phần mở rộng .master
2. Định nghĩa a master trong <tag>
o
<%@
master %>
3. Thêm Content:
o
Có thể là trang .html control page content
o
Thay thế phần place-holder:
Sử dụng <asp:contentplaceholder>
Thêm nội dung mặc định của trang
<%@ master language=“C#"%>
<%@ master language=“C#"%>
<html>
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<table>
<tr ><td><h1><! Header goes here ></h1></td></tr>
<tr> <td><h2><! Navigation goes here ></h2></td></tr>
<tr><td>
<! Content Place holder without default content >
<! Content Place holder without default content >
<asp:contentplaceholder id=“LeftSideContent" runat="server“/>
<asp:contentplaceholder id=“LeftSideContent" runat="server“/>
</td>
<td>
<! Content Place holder with default content >
<! Content Place holder with default content >
<asp:contentplaceholder id=“LeftSideContent" runat="server">
<asp:contentplaceholder id=“LeftSideContent" runat="server">
<asp:label runat=Server id=foo>Default content!!!</asp:label>
<asp:label runat=Server id=foo>Default content!!!</asp:label>
</asp:contentplaceholder>
</asp:contentplaceholder>
</td></tr></table>
</form>
</body>
</html>
<%@ master language=“C#"%>
<%@ master language=“C#"%>
<html>
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<table>
<tr ><td><h1><! Header goes here ></h1></td></tr>
<tr> <td><h2><! Navigation goes here ></h2></td></tr>
<tr><td>
<! Content Place holder without default content >
<! Content Place holder without default content >
<asp:contentplaceholder id=“LeftSideContent" runat="server“/>
<asp:contentplaceholder id=“LeftSideContent" runat="server“/>
</td>
<td>
<! Content Place holder with default content >
<! Content Place holder with default content >
<asp:contentplaceholder id=“LeftSideContent" runat="server">
<asp:contentplaceholder id=“LeftSideContent" runat="server">
<asp:label runat=Server id=foo>Default content!!!</asp:label>
<asp:label runat=Server id=foo>Default content!!!</asp:label>
</asp:contentplaceholder>
</asp:contentplaceholder>
</td></tr></table>
</form>
</body>
</html>
Thiết kế 1 trang Master Page
Master-page: design-time
[...]... Programatic master selection Dynamic selection of master- page Master- pages Nested master- pages Master- pages can be nested Enables a master to master relationship Useful when a site enforces an overall layout and defines sub-layouts within ASPX ASPX MASTER (ASPX Content -page) MASTER (ASPX Content -page) MASTER (ASPX Content -page) MASTER (ASPX Content -page) MASTER (MASTER) MASTER (MASTER) Master- pages... Content -page) MASTER (MASTER) MASTER (MASTER) Master- pages Nested master- pages mysite .master Content Place Holder ‘Main’ productsection .master Content Place Holder ‘Sub’ Master- pages Nested master- pages: Conceptual mysite .master Header productsection .master ... Web Server dùng Master- page: design-time 1 2 3 Tạo 1trang ASP.NET page (.aspx) Tiền chỉ thị: 1 chỉ đến Master Page 2 Tạo thuộc tính Thêm nội dung thay thế phần content của Master Page: 1 Tag or server-side script allowed 2 controls replace regions in the master : 1 2 contentplaceholderid nội dung của MasterPage ... in the master : 1 2 contentplaceholderid nội dung của MasterPage chứa nội dung của từng trang web con Cách sử dụng a master- page default.aspx ... runat="server">Support section Support section login.aspx ... contentplaceholderId=“MainContent”> // Menu provided default Footer Master- pages Nested master- pages partners.aspx howtobuy.aspx Bài tập: Tạo 1 Website theo mẫu: Đề tài nhóm Bài tập 9: BT_WebTintuc (Design) BT_WebBank(Design) . within
ASPX
ASPX
MASTER (ASPX Content -page)
MASTER (ASPX Content -page)
MASTER (MASTER)
MASTER (MASTER)
MASTER (ASPX Content -page)
MASTER (ASPX Content -page)
Master- pages
Nested.
Programatic master
selection
Dynamic selection of master- page
Master- pages
Nested master- pages
Master- pages can be nested
Enables a master to master
Ngày đăng: 15/02/2014, 18:20
Xem thêm: Tài liệu CHƯƠNG IV: MASTER PAGE ppt, Tài liệu CHƯƠNG IV: MASTER PAGE ppt, Giới thiệu về Master Page, Thiết kế trang Master Page, Cách sử dụng a master-page
