Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "4.1 Master page 4.2 Nested master-pages 4.3 Themes và skin"— Presentation transcript:

1 4.1 Master page 4.2 Nested master-pages 4.3 Themes và skin
Bài 4: MASTER PAGE 4.1 Master page 4.2 Nested master-pages 4.3 Themes và skin

2 4.1 Master page Ví dụ Khái niệm Thiết kế Demo

3 Ví dụ

4

5

6

7 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

8 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

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

10 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"> <h1> Chào mừng bạn đến với chúng tôi! Head</h1> <asp:ContentPlaceHolder ID="MainContent" runat="server"> vị trí một số thông tin footer </form> <asp:ContentPlaceHolder ID="FooterContent" runat="server" > </body> </html>

11 <%@ Page Language="C#" MasterPageFile="~/MasterPage
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"> <h2> Welcome to ASP.NET! </h2> <asp:Content ID="FootContent" runat="server" ContentPlaceHolderID="FooterContent" >

12 Demo 2

13 4.2 Nested master-pages Khái niệm Thiết kế Demo

14 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

15 Content Page Nested Master Page Master Page

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

17 Demo

18 4.2 Theme và skin Theme Skin

19 Theme Một file skin đơn Tập tin CSS Images
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

20 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

21 Bước 1 R_Click Add ASP.NET folder Theme

22 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

23 Hiệu chỉnh file css

24 Bước 3: Add file ảnh

25 Á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) <configuration> <system.web> <compilation debug="true" targetFramework="4.0"/> <pages theme="them1"></pages> </system.web> </configuration>

26 Áp dụng Theme vào ASP.NET
Loại bỏ Theme cho 1 server control: Bên trong tag server control, ta dùng thuộc tính EnableTheming=“false” Loại bỏ Theme cho 1 trang: Page Language="C#" EnableTheming="false" %>

27 Skin Skin cho phép bạn  thay đổi một số thuộc tính của các Controls trong asp.net. Trong Skin có thể sử dụng các css cùng Themes Một Theme có thể chứa 1 hoặc nhiều Skin

28 Tạo Skin R_Click vào folder Add_Themes  Chọn Add Existing Item ...  Chọn Skin file  Đặt tên  Soạn nội dung: <asp:Label Runat="server" ForeColor="#004000" Font-Names="Verdana" Font-Size="X-Small"/> <asp:Label runat="server" ForeColor="#585880" Font-Size="0.9em" Font-Names="Verdana" SkinID="LabelHeader" /> <asp:Textbox Runat="server" ForeColor="#004000" Font-Names="Verdana" Font-Size="X-Small" BorderStyle="Solid" BorderWidth="1px"/> <asp:Button Runat="server" ForeColor="#004000" BorderStyle="Solid" BorderWidth="1px" BorderColor="#00400"/>

29 Áp dụng Skin Đưa Skin vào 1 trang: Đưa Skin vào tag:
Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Theme="SkinFile" %> Đưa Skin vào tag: <asp:Label Text="Foot" runat="server" SkinID="LabelHeader" />


Download ppt "4.1 Master page 4.2 Nested master-pages 4.3 Themes và skin"

Similar presentations


Ads by Google