Bài giảng Phát triển web nâng cao Bài 4 Master Pages

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 (629.07 KB, 29 trang )

Bài 4:

MASTER PAGE
4.1 Master page
4.2 Nested master-pages
4.3 Themes và skin

4.1 Master page





Ví dụ
Khái niệm
Thiết kế
Demo

Ví dụ


/>


/>

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

Demo 1


Sử dụng demo mặc định

<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<html xmlns=" /><head runat="server">
<title></title>
<asp:ContentPlaceHolder id="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">

Chào mừng bạn đến với chúng tôi! Head

<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">

Welcome to ASP.NET!

</asp:Content>
<asp:Content ID="FootContent" runat="server" ContentPlaceHolderID="FooterContent" >
</asp:Content>

Demo 2

4.2 Nested master-pages




Khái niệm
Thiết kế
Demo

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

Content Page

Nested Master Page

Master Page

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 – Page
MasterPageFile="~/MasterPage_Cha.master"



Bước 3: Tạo một trang Content
MasterPageFile="~/MasterPage_Con.master"

Demo

4.2 Theme và skin



Theme
Skin

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

Các bước thực hiện




Bước 1: Tạo các folder
Bước 2: Tạo file css
Bước 3: Add ảnh

Bước 1
R_Click

Add ASP.NET folder

Theme

Bước 2: Tạo File css
R_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

Hiệu chỉnh file css

Bước 3: Add file ảnh

Á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)