Bài giảng Lập trình Web ASP.Net với C#: Chương 6 - Th.S Phạm Đào Minh Vũ

Chương 6 cung cấp cho người học những kiến thức về thiết kế layout. Những nội dung chính trong chương gồm: Web User controls, Master Pages, Themes Và Skin, Site Navigation Controls. Mời các bạn cùng tham khảo.
Nội dung trích xuất từ tài liệu:
Bài giảng Lập trình Web ASP.Net với C#: Chương 6 - Th.S Phạm Đào Minh Vũ 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 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 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 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 Thiết kế User control:  Thiết kế các controls theo ý muốn 236 Khoa CNTT Trường CĐ CNTT TP.HCM Sử dụng User control:  Kéo và thả UC vào trang aspx 237 Khoa CNTT Trường CĐ CNTT TP.HCM 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 Master page Content page Trang kết quả 239 Khoa CNTT Trường CĐ CNTT TP.HCM 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  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 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  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 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  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  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 247 Khoa CNTT Trường CĐ CNTT TP.HCM  Tạo Theme:  Click phải ProjectAdd ASP.NET FolderTheme 248 Khoa CNTT Trường CĐ CNTT TP.HCM 249 Khoa CNTT Trường CĐ CNTT TP.HCM 250 Khoa CNTT Trường CĐ CNTT TP.HCM 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