1. Trang chủ
  2. » Công Nghệ Thông Tin

Tài liệu CHƯƠNG IV: MASTER PAGE ppt

18 367 4
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Master page
Chuyên ngành Lập trình web
Thể loại Tài liệu
Định dạng
Số trang 18
Dung lượng 0,91 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Nội dung

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.. Giới thiệu về Master Page Khi làm việc với

Trang 1

CHƯƠNG IV:

MASTER PAGE

Lý thuyết 3 tiết

Thực hành 6 tiết

Trang 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

Trang 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

 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

Trang 4

Giới thiệu về Master Page

MC

Master page master

Content page

.aspx

Combined Page

Trang 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

Trang 6

Thiết kế trang Master Page

 Ví dụ một kiểu trang master

Trang 7

Navigatio n

Header

Content

Footer

Trang 8

<%@ 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>

Trang 9

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

Trang 10

<%@ 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>

<%@ 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>

Thiết kế 1 trang Master Page Master-page: design-time

Trang 11

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

Thiết kế 1 trang Web Server

dùng Master-page: design-time

Trang 12

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:login id="Login1" runat="server"></asp:Login>

</asp:content>

<%@ page language=“C#" masterpagefile="~/mysite.master" title=“Login” masterpagefile="~/mysite.master" title=“Login” %>

<asp:content id=“foo“ contentplaceholderid=“RightSideContent">

<asp:login id="Login1" runat="server"></asp:Login>

</asp:content>

login.aspx

<%@ page language=“C#" masterpagefile="~/site.master" title=“Home” %> 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>

</asp:content>

<%@ page language=“C#" masterpagefile="~/site.master" title=“Home” 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>

</asp:content>

default.aspx

Trang 13

Programatic master

selection

Dynamic selection of master-page

Trang 14

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 (MASTER) MASTER (ASPX Content-page)

Trang 15

Nested master-pages

Content Place Holder

‘Sub’

Content Place Holder

‘Main’

Trang 16

Nested master-pages: Conceptual

<%@ master %>

mysite.master

Header

Footer

<asp:contentplaceholder

id=“MainContent” />

productsection.master

<%@ master masterpagefile=“~/mySite.Master” %>

<asp:content contentplaceholderId=“MainContent”>

<asp:contentplaceholder id=“Navigation”>

// Menu provided default

</asp:contentplaceholder>

<asp:contentplaceholder id=“Sub”/>

Trang 17

Nested master-pages

howtobuy.aspx partners.aspx

Trang 18

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)

Ngày đăng: 15/02/2014, 18:20

Xem thêm

TỪ KHÓA LIÊN QUAN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w