Chương 06 THIẾT KẾ LAYOUT
1. Web User controls 2. Master Pages 3. Themes Và Skin 4. Site Navigation Controls
11
http://www.thayphet.net Written by: Dương Thành Phết
1. 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) (cid:1) Sử dụng UC cũng giống như sử dụng thủ tục, hàm (cid:2) khả năng tái sử dụng UC trên các trang web (cid:1) Phần mở rộng của US là: .ascx
22
http://www.thayphet.net Written by: Dương Thành Phết
1.2 Tạo và sử dụng User control
Tạo mới User control: (cid:1) Tạo mới 1 Web user control (cid:1) Thiết kế giống như thiết kế 1 trang aspx
Chọn: Web User Control
ðặt tên: *.ascx
33
http://www.thayphet.net Written by: Dương Thành Phết
Sử dụng User control: (cid:1) Kéo và thả UC vào trang aspx, lúc ñó trang aspx sẽ xuất hiện tag
<%@ Register . . %>
44
http://www.thayphet.net Written by: Dương Thành Phết
2. Master Pages
2.1 Giới thiệu (cid:1) 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) (cid:1) 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
(cid:1) Master page là tập tin có phần mở rộng .master (cid:1) 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
55
http://www.thayphet.net Written by: Dương Thành Phết
Master page
Content page
Trang kết quả
66
http://www.thayphet.net Written by: Dương Thành Phết
2.2 Tạo trang Master (cid:1) Bước 1: Tạo mới Item (cid:3) chọn icon Master Page và ñặt tên trang: *.master
77
http://www.thayphet.net Written by: Dương Thành Phết
(cid:1) 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
88
http://www.thayphet.net Written by: Dương Thành Phết
2.3 Sử dụng trang Master (cid:1) Bước 1: Tạo mới trang web (.aspx) khai báo sử dụng trang master
99
http://www.thayphet.net Written by: Dương Thành Phết
(cid:1) 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)
1010
http://www.thayphet.net Written by: Dương Thành Phết
3. Themes Và Skin
3.1 Giới thiệu
(cid:1) 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 (cid:1) 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 (cid:1) 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 (cid:1) 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.
1111
http://www.thayphet.net Written by: Dương Thành Phết
(cid:1) Có 2 loại skin:
(cid:4) 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. (cid:4) 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ể. (cid:1) Tạo file skin:
(cid:4) Thêm mới 1 item
1212
http://www.thayphet.net Written by: Dương Thành Phết
(cid:1) Tạo file skin:
(cid:4) Thêm mới 1 item(cid:2)chọn skin file(cid:2)ñặt tên file .skin
1313
http://www.thayphet.net Written by: Dương Thành Phết
(cid:1) Tạo Theme:
(cid:4) Click phải Project(cid:2)Add ASP.NET Folder(cid:2)Theme
1414
http://www.thayphet.net Written by: Dương Thành Phết
4. Site Navigation Controls
Giới thiệu
(cid:4) 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 (cid:4) Các ñiều khiển này thường sử dụng trong trang Master
1515
http://www.thayphet.net Written by: Dương Thành Phết
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
1616
http://www.thayphet.net Written by: Dương Thành Phết
(cid:1)Auto Format: Chọn mẫu ñịnh dạng
1717
http://www.thayphet.net Written by: Dương Thành Phết
(cid:1) Edit Menu Items: Thiết kế Menu
1818
http://www.thayphet.net Written by: Dương Thành Phết
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
1919
http://www.thayphet.net Written by: Dương Thành Phết
(cid:1)Auto Format: Chọn mẫu ñịnh dạng
2020
http://www.thayphet.net Written by: Dương Thành Phết
(cid:1) Edit Node: Thiết kế các node
2121
http://www.thayphet.net Written by: Dương Thành Phết
4.3 ðiều khiển SiteMapPath
(cid:1)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 (cid:1)Nội dung cấu trúc của Website mặc ñịnh ñược chứa trong tập tin Web.sitemap (cid:1)Thao tác tạo: Tạo tập tin Web.sitemap
2222
http://www.thayphet.net Written by: Dương Thành Phết
Nút gốc
Nút con
Nút cháu
Tạo ñiều khiển SitemapPath vào các trang
2323
http://www.thayphet.net Written by: Dương Thành Phết
Kết quả
2424
http://www.thayphet.net Written by: Dương Thành Phết
4.4 ðiều khiển SiteMapDataSource
(cid:1)Dùng ñể chứa nguồn dữ liệu lưu trữ trong tập tin Web.sitemap (cid:1) Thường sử dụng kết hợp với các ñiều khiển Menu, TreeView
(cid:1) ðể liên kết với TreeView, Menu chỉ ñịnh thuộc tính là: Tên DataSourceID của 2 ñiều khiển này SiteMapDataSource
2525
http://www.thayphet.net Written by: Dương Thành Phết
