›

Giáo trình Phát triển Web nâng cao - Bài 4: Master Page

pdf 29 trang huongle 3060
Download
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Phát triển Web nâng cao - Bài 4: Master Page", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfgiao_trinh_phat_trien_web_nang_cao_bai_4_master_page.pdf

Nội dung text: Giáo trình Phát triển Web nâng cao - Bài 4: Master Page

  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. 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
  4. 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
  5. Demo 1 Sử dụng demo mặc định
  6. Chào mừng bạn đến với chúng tôi! Head vị trí một số thông tin footer
  7. Welcome to ASP.NET!
  8. Demo 2
  9. 4.2 Nested master-pages Khái niệm Thiết kế Demo
  10. 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
  11. Content Page Nested Master Page Master Page
  12. 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"
  13. 4.2 Theme và skin Theme Skin
  14. 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
  15. 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
  16. Bước 1 R_Click Add ASP.NET folder Theme
  17. 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
  18. Hiệu chỉnh file css
  19. Bước 3: Add file ảnh
  20. Áp dụng Theme vào ASP.NET Chỉ áp dụng cho 1 trang: Áp dụng cho toàn website: (web.config)
  21. Á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:
  22. 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
  23. 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:
  24. Áp dụng Skin Đưa Skin vào 1 trang: Đưa Skin vào tag: