Download presentation
Presentation is loading. Please wait.
1
Lý thuyết 3 tiết Thực hành 6 tiết
CHƯƠNG IV: MASTER PAGE Lý thuyết 3 tiết Thực hành 6 tiết
2
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
3
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
4
Giới thiệu về Master Page
C MC Master page .master Content page .aspx Combined Page
5
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
6
Thiết kế trang Master Page
Ví dụ một kiểu trang master
7
Footer Content Header Navigation
8
Ví dụ: my.master Header Footer Navigation default.aspx (content-page)
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 the content that replaces … </asp:contentplaceholder> default.aspx (content-page) 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> master %> my.master Header Footer Navigation <asp:contentplaceholder Id=“MainContent”> Here is my basic default content </asp:contentplaceholder> page masterpagefile=“~/my.master” %> default.aspx (content-page) <asp:content contentplaceholderid=“MainContent”> Here is the content that replaces … /asp:content>
9
Thiết kế 1 trang Master Page Master-page: design-time
Tạo a master page với phần mở rộng .master Định nghĩa a master trong <tag> master .. %> Thêm Content: Có thể là trang .html control page content Thay thế phần place-holder: Sử dụng <asp:contentplaceholder> Thêm nội dung mặc định của trang
10
Thiết kế 1 trang Master Page Master-page: design-time
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 --> <asp:contentplaceholder id=“LeftSideContent" runat="server“/> </td> <td> <!-- Content Place holder with default content --> <asp:contentplaceholder id=“LeftSideContent" runat="server"> <asp:label runat=Server id=foo>Default content!!!</asp:label> </asp:contentplaceholder> </td></tr></table> </form> </body> </html>
11
Thiết kế 1 trang Web Server dùng Master-page: design-time
Tạo 1trang ASP.NET page (.aspx) Tiền chỉ thị: page masterpagefile= %> chỉ đến Master Page Tạo thuộc tính Page title=“scott” %> Thêm nội dung thay thế phần content của Master Page: Tag <asp:content> or server-side script allowed <asp:content> controls replace regions in the master: contentplaceholderid nội dung của MasterPage <asp:content> chứa nội dung của từng trang web con
12
Cách sử dụng a master-page
default.aspx page language=“C#" masterpagefile="~/site.master" title=“Home” %> <asp:content id=“foo" contentplaceholderid=“LeftSideContent"> <H2>Navigation </h2> <asp:treeview id=“Navigation tree" runat="server“ datasourceid=“NavSource”/> </asp:content> <asp:content id=“bar" contentplaceholderid=“RightSideContent"> <asp:label runat="server">Support section</asp:label> login.aspx page language=“C#" masterpagefile="~/mysite.master" title=“Login” %> <asp:content id=“foo“ contentplaceholderid=“RightSideContent"> <asp:login id="Login1" runat="server"></asp:Login> </asp:content>
13
Programatic master selection
Dynamic selection of master-page
14
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 MASTER (ASPX Content-page) MASTER (ASPX Content-page) MASTER (MASTER)
15
Master-pages Nested master-pages
mysite.master productsection.master Content Place Holder ‘Main’ Content Place Holder ‘Sub’
16
Master-pages Nested master-pages: Conceptual
mysite.master productsection.master master %> master masterpagefile=“~/mySite.Master” %> Header <asp:content contentplaceholderId=“MainContent”> </asp:content> <asp:contentplaceholder id=“MainContent” /> <asp:contentplaceholder id=“Navigation”> // Menu provided default </asp:contentplaceholder> <asp:contentplaceholder id=“Sub”/> Footer
17
Master-pages Nested master-pages
partners.aspx howtobuy.aspx
18
Bài tập: Tạo 1 Website theo mẫu: Đề tài nhóm.
BT_WebTintuc (Design) BT_WebBank(Design)
Similar presentations
