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