1 / 29

Bài 4: MASTER PAGE

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ụ. http://hn.24h.com.vn / http://hui.edu.vn/QuangNgai /. 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

sammy
Download Presentation

Bài 4: MASTER PAGE

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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ụ • http://hn.24h.com.vn/ • http://hui.edu.vn/QuangNgai/

  4. Khái niệm • Master Pagecho phép bạn bố trí layout của ứng dụng một cách phù hợp • Tổ chứcthực hiện: • xây dựng Master Page  • xây dựng các trang nội dung

  5. 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

  6. Demo 1 • Sử dụng demo mặc định

  7. <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <html xmlns="http://www.w3.org/1999/xhtml"> <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"> </asp:ContentPlaceHolder> vị trí một số thông tin footer </form> <asp:ContentPlaceHolder ID="FooterContent" runat="server" > </asp:ContentPlaceHolder> </body> </html>

  8. <%@ 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> <asp:Content ID="FootContent" runat="server" ContentPlaceHolderID="FooterContent" > </asp:Content>

  9. Demo 2

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

  11. 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

  12. Content Page Nested Master Page Master Page

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

  14. Demo

  15. 4.2 Theme và skin • Theme • Skin

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

  17. 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

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

  19. 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

  20. Hiệu chỉnh file css

  21. Bước 3: Add file ảnh

  22. Á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>

  23. Á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: <%@PageLanguage="C#"EnableTheming="false"%>

  24. 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

  25. 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" Font-Names="Verdana" Font-Size="X-Small" BorderStyle="Solid" BorderWidth="1px" BorderColor="#00400"/>

  26. Áp dụng Skin • Đưa Skin vào 1 trang: <%@ 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" />

More Related