07 chuong06 tủ tài liệu bách khoa

Chương 06
THIẾT KẾ LAYOUT
1. Web User controls
2. Master Pages
3. Themes Và Skin
4. Site Navigation Controls

1
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)
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

2
Written by: Dương Thành Phết




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
3
Written by: Dương Thành Phết




Sử dụng User control:
Kéo và thả UC vào trang aspx, lúc ñó trang aspx sẽ
xuất hiện tag
<%@ Register . . %>

4
Written by: Dương Thành Phết




2. 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
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

5
Written by: Dương Thành Phết




Master page

Content page

Trang kết quả
6
Written by: Dương Thành Phết




2.2 Tạo trang Master
Bước 1: Tạo mới Item
tên trang: *.master

chọn icon Master Page và ñặt

7
Written by: Dương Thành Phết




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

8
Written by: Dương Thành Phết




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

9
Written by: Dương Thành Phết




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)

10
Written by: Dương Thành Phết




3. Themes Và Skin
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.
11
Written 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

12
Written by: Dương Thành Phết

Tạo file skin:
Thêm mới 1 item

chọn skin file

ñặt tên file .skin

13
Written by: Dương Thành Phết




Tạo Theme:
Click phải Project

Add ASP.NET Folder

Theme

14
Written by: Dương Thành Phết




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

15
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

16
Written by: Dương Thành Phết




Auto Format: Chọn mẫu ñịnh dạng

17

Written by: Dương Thành Phết




Edit Menu Items: Thiết kế Menu

18
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

19
Written by: Dương Thành Phết




Auto Format: Chọn mẫu ñịnh dạng

20
Written by: Dương Thành Phết




Edit Node: Thiết kế các node

21
Written by: Dương Thành Phết




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

22
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

23
Written by: Dương Thành Phết




Kết quả

24
Written by: Dương Thành Phết




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

25

Written by: Dương Thành Phết