Bài giảng Master Page, Theme và Skin - Nguyễn Hà Giang

Nội dung text: Bài giảng Master Page, Theme và Skin - Nguyễn Hà Giang

1. 1 Master page, Theme & Skin Nguyễn Hà Giang Nguyen Ha Giang
2. Nội dung 2  Master page  Cách tạo trang master  Tạo các trang nội dung  Demo  Theme & skin  Ý nghĩa của Theme  Phân biệt theme và CSS  File Skin  Demo Nguyen Ha Giang
3. Master page 3  Master page định nghĩa một khuôn mẫu chung cho phép áp dụng cho nhiều trang web trong toàn bộ web site  Content page là web form có sử dụng master page Master Page Content Page Nguyen Ha Giang
4. Cách thức master page làm việc 4  Master page định nghĩa cấu trúc cơ bản của trang  Bao gồm các thành phần chung như header, footer, menu  Master page có thể chứa các content region nơi mà nội dung mới có thể được thêm vào.  Một content page sẽ có tất cả các thành phần cố định từ một master page, và có thể bổ sung tùy ý vào các content region Nguyen Ha Giang
5. Minh họa Master page 5 master content master master content Nguyen Ha Giang
6. Cú pháp của Master page 6  Tạo trang master page  Phần mở rộng là .master  Directive:  Xây dựng các phần nội dung chung cho toàn site  Header, footer, menu, layout  Tạo các vùng placeholder control cho dành nội dung (content region), mà các trang sẽ tùy biến bổ sung vào! Nguyen Ha Giang
7. Cú pháp của Content page 7  Đối với những trang .aspx  Tham chiếu đến master page trong directive  Xây dựng nội dung cho các phần placeholder control đã tạo trong master page. ◼ Thiết kế phần Content control, mỗi trang sẽ có nội dung riêng ◼ Có thể có nhiều vùng content control, tùy theo cách thiết kế master page ◼ Ánh xạ các content control này vào placeholder trong master page. Nguyen Ha Giang
8. Kết hợp MP & CP 8  Trang master định nghĩa nội dung chung và placeholder   Content page tham chiếu đến master và đưa nội dung vào các placeholder  Site.master default.aspx http:// /default.aspx RunAt="server" /> Nguyen Ha Giang
9. Cách tạo Master page 9 Nguyen Ha Giang
10. Cách tạo Master page (2) 10  Mặc định site.master có dạng sau Để dành nội dung Cho content page Nguyen Ha Giang
11. Cách tạo Master page (3) 11  Ta thiết kế lại site.master  Thêm table vào, chia làm các phần header, left, main content và footer header left Content placeholder footer Nguyen Ha Giang
12. Cách tạo Master page (4) 12  Phần source của site.master Lưu ý: phần header , footer và left sẽ được thiết kế tùy theo ứng dụng web cụ thể Phần placeholder dành cho content page Nguyen Ha Giang
13. Cách tạo Content page 13  Tạo form mới có template là “web content form” (trong phiên bản VS 2008), trong VS 2005 thì chọn “select master page”. Chọn Web content form Tên file aspx Nguyen Ha Giang
14. Cách tạo Content page (2) 14  Tiếp theo chọn master page cho content web form Tên file master page Nguyen Ha Giang
15. Cách tạo Content page (3) 15  Phần source của content page: DemoWebForm1.aspx Ánh xạ đến placeholder control “MainContent” trong site1.master Nguyen Ha Giang
16. Cách tạo Content page (4) 16  Trong màn hình design của content page Phần thiết kế dành cho content page: DemoWebForm1.aspx ở đây! Phần này là của site1.master, không edit ở đây được! Nguyen Ha Giang
17. Cách tạo Content page (5) 17  Ví dụ bổ sung nội dung cho Content page Nguyen Ha Giang
18. Cách tạo Content page (6) 18  Các trang Content page chỉ chứa phần chỉ dẫn, và các tag content control (phụ thuộc vào số placeholder control của master page)  Bên trong các vùng content control ta thiết kế web form bình thường. Nguyen Ha Giang
19. Khai báo sử dụng master page 19  Khai báo trong từng file aspx  Sử dụng thuộc tính MasterPageFile trong phần Directive  Khai báo sử dụng master page trong toàn site Web.config Nguyen Ha Giang
20. Ưu điểm khi dùng Master page 20  Tạo ra khuôn mẫu chung cho toàn bộ phần layout của site  Định nghĩa một lần và sử dụng lại, chung cho toàn site  Include phần nội dung chung của các page  Tương tự như User Control  Loại bỏ những phần trùng lắp, khi xây dựng layout chung như các phiên bản trước của ASP.NET 2.0 Nguyen Ha Giang
21. 21 Theme & Skin Nguyen Ha Giang
22. Theme 22  Theme cho phép áp dụng một định dạng thống nhất cho nhiều control, và trên nhiều page  Theme cho phép áp dụng định dạng cho các control một cách tự động, không cần phải thiết lập cho từng thuộc tính  Theme là khái niệm tương tự như style của HTML  Cả hai cách tiếp cận cho phép sử dụng lại định dạng trong nhiều nơi  Style áp dụng cho client, trong khi theme được xử lý trên server  Style sử dụng các thuộc tính định dạng CSS, trong khi theme có thể sử dụng bất cứ thuộc tính nào của ASP.NET control  Có thể sử dụng CSS và theme trong cùng ứng dụng! Chúng bổ sung cho nhau Nguyen Ha Giang
23. Theme Folder 23  Để sử dụng theme trong web app, cần thiết phải tạo thư mục định nghĩa theme đó.  Thư mục này chứa bên trong thư mục khác có tên “App_Theme”, thư mục này đặt trên cùng của thư mục web app  VD: web app có tên MyWebApp một theme có tên CloudTheme sẽ được đặt bên trong thư mục MyWebApp\App_Theme\CloudTheme  Một ứng dụng có thể định nghĩa nhiều theme, chứa trong nhiều folder. Chỉ một theme được áp dụng cho một page tại một thời điểm Nguyen Ha Giang
24. Skin file 24  Các định dạng cho theme chứa trong một file gọi là skin, tối thiểu một theme phải có 1 file skin  File Skin là dạng file text có phần mở rộng là .skin  Skin chứa danh sách các control tag. Các control tag này không cần phải chứa đầy đủ các thành phần của control, nó chứa các thuộc tính cần định dạng  VD: áp dụng nền màu cam, với màu text là trắng cho control textbox thì mô tả như sau Nguyen Ha Giang
25. Skin file 25  Có thể tạo nhiều skin file hoặc cho tất cả control tag vào cùng một file skin đều như nhau. Nguyen Ha Giang
26. Minh họa skin file đơn giản 26  Skin thiết lập màu nền và màu text cho một số control cơ bản  Để áp dụng theme trong page ta cần thiết lập thuộc tính theme trong page directive đến thư mục theme tương ứng Nguyen Ha Giang
27. Minh họa tạo theme 27  Tạo ứng dụng ASP.NET  Tạo web form có layout như sau ◼ Trên form có 2 text box và Button là dạng ASP.NET control browser Nguyen Ha Giang
28. Minh họa tạo theme 28  Tạo skin cho Web app  Tạo thư mục theme ◼ Đặt tên theme là DemoTheme Nguyen Ha Giang
29. Minh họa tạo theme 29  Tạo skin file cho DemoTheme  Kích chuột phải lên thư mục DemoTheme trong App_Theme chọn Add New Items, chọn skin file trong phần template Nguyen Ha Giang
30. Minh họa tạo theme 30  Định nghĩa style cho TextBox và Button trong file Skin1.skin của DemoTheme  Khai báo sử dụng theme trong page Nguyen Ha Giang
31. Minh họa tạo theme 31  Ứng dụng khi chạy, hiển thị trong trình duyệt với skin đã chọn.  Có thể tạo nhiều theme khác để tùy chọn sử dụng. Nguyen Ha Giang