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.
AMBIENT/
Chủ đề:
Nội dung Text: 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 itemchọ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 ProjectAdd ASP.NET FolderTheme
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