Tài liệu CHƯƠNG IV: MASTER PAGE ppt
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (820.47 KB, 18 trang )
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
1. Tạo 1trang ASP.NET page (.aspx)
2. Tiền chỉ thị:
1. <%@ page masterpagefile= %>
chỉ đến Master Page
2. Tạo thuộc tính <%@ Page title=“scott” %>
3. Thêm nội dung thay thế phần content của Master Page:
1. Tag
<asp:content>
or server-side script allowed
2. <asp:content> controls replace regions in the master:
1. contentplaceholderid
nội dung của MasterPage
2. <asp:content> chứa nội dung của từng trang web
con
Thiết kế 1 trang Web Server
dùng Master-page: design-time
Cách sử dụng a master-page
<%@ page language=“C#"
masterpagefile="~/mysite.master" title=“Login”
masterpagefile="~/mysite.master" title=“Login” %>
<asp:content id=“foo“ contentplaceholderid=“RightSideContent">
<asp:content id=“foo“ contentplaceholderid=“RightSideContent">
<asp:login id="Login1" runat="server"></asp:Login>
</asp:content>
</asp:content>
<%@ page language=“C#"
masterpagefile="~/mysite.master" title=“Login”
masterpagefile="~/mysite.master" title=“Login” %>
<asp:content id=“foo“ contentplaceholderid=“RightSideContent">
<asp:content id=“foo“ contentplaceholderid=“RightSideContent">
<asp:login id="Login1" runat="server"></asp:Login>
</asp:content>
</asp:content>
login.aspx
<%@ page language=“C#"
masterpagefile="~/site.master" title=“Home”
masterpagefile="~/site.master" title=“Home” %>
<asp:content id=“foo" contentplaceholderid=“LeftSideContent">
<asp:content id=“foo" contentplaceholderid=“LeftSideContent">
<H2>Navigation </h2>
<asp:treeview id=“Navigation tree" runat="server“
datasourceid=“NavSource”/>
</asp:content>
</asp:content>
<asp:content id=“bar" contentplaceholderid=“RightSideContent">
<asp:content id=“bar" contentplaceholderid=“RightSideContent">
<asp:label runat="server">Support section</asp:label>
</asp:content>
</asp:content>
<%@ page language=“C#"
masterpagefile="~/site.master" title=“Home”
masterpagefile="~/site.master" title=“Home” %>
<asp:content id=“foo" contentplaceholderid=“LeftSideContent">
<asp:content id=“foo" contentplaceholderid=“LeftSideContent">
<H2>Navigation </h2>
<asp:treeview id=“Navigation tree" runat="server“
datasourceid=“NavSource”/>
</asp:content>
</asp:content>
<asp:content id=“bar" contentplaceholderid=“RightSideContent">
<asp:content id=“bar" contentplaceholderid=“RightSideContent">
<asp:label runat="server">Support section</asp:label>
</asp:content>
</asp:content>
default.aspx
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 (MASTER)
MASTER (MASTER)
MASTER (ASPX Content-page)
MASTER (ASPX Content-page)
Master-pages
Nested master-pages
Content Place Holder
‘Sub’
Content Place Holder
‘Main’
mysite.master productsection.master
Master-pages
Nested master-pages: Conceptual
<%@ master %>
mysite.master
Header
Footer
<asp:contentplaceholder
id=“MainContent” />
productsection.master
<%@ master masterpagefile=“~/mySite.Master” %>
<asp:content
contentplaceholderId=“MainContent”>
</asp:content>
<asp:contentplaceholder id=“Navigation”>
// Menu provided default
</asp:contentplaceholder>
<asp:contentplaceholder id=“Sub”/>
Master-pages
Nested master-pages
howtobuy.aspxpartners.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)
