Kĩ thuật lập trình - Chương 06: Thiết kế layout

1Chương 06 THIẾT KẾ LAYOUT 1.Web User controls 2.Master Pages 3.Themes Và Skin 4.Site Navigation Controls by: Dương Thành Phết 21. Web User controls 1.1 Giới thiệu Khi kết hợp các control ñể tạo thành một control mới gọi là Web user control (UC)
Sử dụng UC cũng giống như sử dụng thủ tục, hàm  khả năng tái sử dụng UC trên các trang web
Phần mở rộng của US là: .ascx by: Dương Thành Phết 31.2 Tạo và sử dụng User control Tạo mới User control:
Tạo mới 1 Web user control
Thiết kế giống như thiết kế 1 trang aspx by: Dương Thành Phết Chọn: Web User Control ðặt tên: *.ascx 4Sử dụng User control:
Kéo và thả UC vào trang aspx, lúc ñó trang aspx sẽ xuất hiện tag by: Dương Thành Phết 52. Master Pages 2.1 Giới thiệu
Master pages cho phép tạo 1 bố cục nhất quán trên các trang web trong cùng 1 website (tương tự template)
Nội dung thể hiển trên trình duyệt là sự kết hợp giữa trang .master -master page và trang .aspx (hoặc .ascx) - content page by: Dương Thành Phết
Master page là tập tin có phần mở rộng .master
Thao tác thiết kế: Giống như trang aspx, nhưng phải bổ sung ít nhất một ñiều khiển ContentPlaceHolder 6 by: Dương Thành Phết Master page Content page Trang kết quả 72.2 Tạo trang Master
Bước 1: Tạo mới Item  chọn icon Master Page và ñặt tên trang: *.master by: Dương Thành Phết 8
Bước 2: Thiết kế bố cục chung (có thể sử dụng User control) và bổ sung ContentplaceHolder vào trang master by: Dương Thành Phết 92.3 Sử dụng trang Master
Bước 1: Tạo mới trang web (.aspx) khai báo sử dụng trang master by: Dương Thành Phết 10
Bước 2: Thiết kế bổ sung nội dụng trên trang *.aspx (có thể kéo các User control vào) by: Dương Thành Phết 11 3. Themes Và Skin by: Dương Thành Phết 3.1 Giới thiệu
Themes là tập hợp các khai báo thuộc tính về hình thức hiển thị(màu sắc, nét chữ, . . .) của ñiều khiển
Dùng áp dụng chung cho tất cả các trong trong một ứng dụng hoặc tất cả các ứng dụng trên webserver
Themes ñược tạo từ các thành phần: skin, css, images . . . Tối thiểu phải có skin. Các thành phần này ñặt trong thư mục App_Themes
Skin là một tập tin có phần mở rộng là .skin, chứa các tag tạo ra các server control kèm theo các khai báo thuộc tính. 12 by: Dương Thành Phết
Có 2 loại skin:  Default skin: Không khai báo thuộc tính skinID, mặc ñịnh ứng dụng sẽ áp dụng skin này cho tất cả các ñiều khiểnco1 cùng kiểu khai báo.  Named skin: có khai báo thuộc tính skinID, muốn sử dụng thì phải khai báo tường minh trên ñiều khiển cụ thể.
Tạo file skin:  Thêm mới 1 item 13 by: Dương Thành Phết
Tạo file skin:  Thêm mới 1 itemchọn skin fileñặt tên file .skin 14 by: Dương Thành Phết
Tạo Theme:  Click phải ProjectAdd ASP.NET FolderTheme 15 4. Site Navigation Controls by: Dương Thành Phết Giới thiệu  Dùng ñể chuyển ñến một trang web khác và thể hiện cấu trúc logic của website (sitemap). Gồm các ñiều khiển: Menu, TreeView, SiteMapPath kết hợp với SiteMapDataSource  Các ñiều khiển này thường sử dụng trong trang Master 16 4.1 ðiều khiển Menu by: Dương Thành Phết Dùng thể hiện menu và cho phép người dùng chuyển ñến một trang web khác khi chọn một chức năng Thao tác tạo: Tạo ñiều khiển Menu vào trang web Chọn mẫu ñịnh dạng Thiết kế Menu 17 by: Dương Thành Phết
Auto Format: Chọn mẫu ñịnh dạng 18 by: Dương Thành Phết
Edit Menu Items: Thiết kế Menu 19 4.2 ðiều khiển TreeView by: Dương Thành Phết Dùng thể hiện menu ở dạng cây và cho phép người dùng chuyển ñến một trang web khác khi chọn node Thao tác tạo: Tạo ñiều khiển TreeView vào trang web Chọn mẫu ñịnh dạng Thiết kế các node 20 by: Dương Thành Phết
Auto Format: Chọn mẫu ñịnh dạng 21 by: Dương Thành Phết
Edit Node: Thiết kế các node 22 4.3 ðiều khiển SiteMapPath by: Dương Thành Phết
Dùng thể hiện cấu trúc logic của website và cho phép người dùng chuyển ñến một trang web khác
Nội dung cấu trúc của Website mặc ñịnh ñược chứa trong tập tin Web.sitemap
Thao tác tạo: Tạo tập tin Web.sitemap 23 by: Dương Thành Phết Nút gốc Tạo ñiều khiển SitemapPath vào các trang Nút con Nút cháu 24 by: Dương Thành Phết Kết quả 25 4.4 ðiều khiển SiteMapDataSource by: Dương Thành Phết
Dùng ñể chứa nguồn dữ liệu lưu trữ trong tập tin Web.sitemap
Thường sử dụng kết hợp với các ñiều khiển Menu, TreeView
ðể liên kết với TreeView, Menu chỉ ñịnh thuộc tính DataSourceID của 2 ñiều khiển này là: Tên SiteMapDataSource