›
›

Bài giảng Lập trình web ASP.Net với C# - Chương 6: Thiết kế layout - Phạm Đào Minh Vũ

pdf 31 trang ngocly 2750
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình web ASP.Net với C# - Chương 6: Thiết kế layout - Phạm Đào Minh Vũ", để 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:

  • pdfbai_giang_lap_trinh_huong_doi_tuong_chuong_6_thiet_ke_layout.pdf

Nội dung text: Bài giảng Lập trình web ASP.Net với C# - Chương 6: Thiết kế layout - Phạm Đào Minh Vũ

  1. LẬP TRÌNH WEB ASP.NET VỚI C# Giảng Viên: Th.S Phạm Đào Minh Vũ Email: phamdaominhvu@yahoo.com 1
  2. Chương 06 Thiết Kế Layout 6.1 Web User controls 6.2 Master Pages 6.3 Themes Và Skin 6.4 Site Navigation Controls 233 Khoa CNTT Trường CĐ CNTT TP.HCM
  3. 6.1. Web User controls 6.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 234 Khoa CNTT Trường CĐ CNTT TP.HCM
  4. 6.1.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 Chọn: Web User Control Đặt tên: *.ascx 235 Khoa CNTT Trường CĐ CNTT TP.HCM
  5. Thiết kế User control:  Thiết kế các controls theo ý muốn 236 Khoa CNTT Trường CĐ CNTT TP.HCM
  6. Sử dụng User control:  Kéo và thả UC vào trang aspx 237 Khoa CNTT Trường CĐ CNTT TP.HCM
  7. 6.2. Master Pages 6.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  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 238 Khoa CNTT Trường CĐ CNTT TP.HCM
  8. Master page Content page Trang kết quả 239 Khoa CNTT Trường CĐ CNTT TP.HCM
  9. 6.2.2 Tạo trang Master  Bước 1: Tạo mới Item chọn icon Master Page và đặt tên trang: *.master 240 Khoa CNTT Trường CĐ CNTT TP.HCM
  10.  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 241 Khoa CNTT Trường CĐ CNTT TP.HCM
  11. 6.2.3 Sử dụng trang Master  Bước 1: Tạo mới trang web (.aspx) khai báo sử dụng trang master 242 Khoa CNTT Trường CĐ CNTT TP.HCM
  12.  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) 243 Khoa CNTT Trường CĐ CNTT TP.HCM
  13. 6.3. Themes Và Skin 6.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 điều khiển 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. 244 Khoa CNTT Trường CĐ CNTT TP.HCM
  14.  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ển có 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 245 Khoa CNTT Trường CĐ CNTT TP.HCM
  15.  Tạo file skin: . Thêm mới 1 item chọn skin file đặt tên file .skin 246 Khoa CNTT Trường CĐ CNTT TP.HCM
  16. 247 Khoa CNTT Trường CĐ CNTT TP.HCM
  17.  Tạo Theme: . Click phải Project Add ASP.NET Folder Theme 248 Khoa CNTT Trường CĐ CNTT TP.HCM
  18. 249 Khoa CNTT Trường CĐ CNTT TP.HCM
  19. 250 Khoa CNTT Trường CĐ CNTT TP.HCM
  20. 6.4. Site Navigation Controls 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 251 Khoa CNTT Trường CĐ CNTT TP.HCM
  21. 6.4.1 Điều khiển Menu 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 252 Khoa CNTT Trường CĐ CNTT TP.HCM
  22. Auto Format: Chọn mẫu định dạng 253 Khoa CNTT Trường CĐ CNTT TP.HCM
  23.  Edit Menu Items: Thiết kế Menu 254 Khoa CNTT Trường CĐ CNTT TP.HCM
  24. 6.4.2 Điều khiển TreeView 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 255 Khoa CNTT Trường CĐ CNTT TP.HCM
  25. Auto Format: Chọn mẫu định dạng 256 Khoa CNTT Trường CĐ CNTT TP.HCM
  26.  Edit Node: Thiết kế các node 257 Khoa CNTT Trường CĐ CNTT TP.HCM
  27. 6.4.3 Điều khiển SiteMapPath 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 258 Khoa CNTT Trường CĐ CNTT TP.HCM
  28. Nút gốc Nút con Nút cháu Tạo điều khiển SitemapPath vào các trang Trangchu.aspx Tinthethao.aspx 259 Khoa CNTT Trường CĐ CNTT TP.HCM
  29. Kết quả 260 Khoa CNTT Trường CĐ CNTT TP.HCM
  30. 6.4.4 Điều khiển SiteMapDataSource 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 261 Khoa CNTT Trường CĐ CNTT TP.HCM
  31. VÍ DỤ Thực thi 262 Khoa CNTT Trường CĐ CNTT TP.HCM