Tham khảo tài liệu 'lập trình asp.net_xây dựng giao diện website', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
AMBIENT/
Chủ đề:
Nội dung Text: Lập trình ASP.NET_Xây dựng giao diện Website
- 7/11/2009
TRƯ NG Đ I H C KHOA H C T NHIÊN
KHOA CÔNG NGH THÔNG TIN
B MÔN CÔNG NGH PH N M M
--- ---
Xây d ng giao di n Website
Môn học: Lập trình ASP.NET
1
N i dung
2
Web Server Controls và các thành phần thể hiện
giao diện
Sử dụng CSS trong ASP.NET
Skins và Themes
Master Pages
User Controls
1
- 7/11/2009
Thành ph n th hi n giao di n
3
Properties Mô tả
BackColor Thành phần background color
BorderColor Thành phần boder color
BorderWidth Độ dày của đường boder
BoderStyle Loại đường viền border (dotted, dashed, solid, double, etc)
CssClass Xác định tên của lớp Css được gán cho control
Enabled Enable, hoặc disable control
Font Xác định font chữ cho các control
ForeColor Xác định màu sắc của text hiển thị
Height Độ cao của control
Style Các định dạng thể hiện của control
Visible Xác định control có hiển thị ra giao diện website hay không
Width Độ rộng của control
Thành ph n th hi n giao di n
4
Các thuộc tính thành phần này có thể được khai
báo thông qua markup hoặc programmatically
Các thuộc tính thành phần này render trong
browser như các inline CSS styles
2
- 7/11/2009
Thành ph n th hi n giao di n
5
Inside CSS
CSS và ASP.NET
6
Ngoài cách thay đổi giao diện Website thông qua các
thuộc tính thành phần của các control, ASP.NET còn hỗ
trợ cơ chế Cascading Style Sheet (CSS)
Các Web Server Control có thể định nghĩa CSS thông
qua thuộc tính CssClass
3
- 7/11/2009
Vì sao s d ng CSS
7
Ưu điểm:
Là giải pháp tốt trong việc xây dựng layout của các
website
Phân rõ giữa nội dụng Website (HTML) và cách thể hiện
giao diện (CSS)
Dễ dàng thay đổi khi có nhu cầu bảo trì, nâng cấp
Khuyết điểm:
Khó sử dụng hơn so với khi thực hiện định dạng trên các
tag HTML
Gặp một số vấn đề về không tương thích trình duyệt
CSS và ASP.NET
8
Khi xây dựng các ứng dụng ASP.NET, cần lựa chọn
các xây dựng giao diện thể hiện như thế nào cho
website:
Sử dụng các thuộc tính thành phần của các control
(Forecolor, BackColor,…)
Sử dụng external CSS file => hiệu quả
Ví dụ: để xác định thuộc tính Font cho các controls
trong một trang web, thay vì phải khai báo nhiều lần
trên tất cả controls thì ta chỉ cần khai báo một luật duy
nhất trong CSS và áp dụng nó cho tất cả các control.
4
- 7/11/2009
Themes và skins
9
Themes và Skins là một cơ chế mở rộng trong
ASP.NET dùng với mục đích quản lý tập trung các thể
hiện giao diện của website
Giống như CSS, themes là cơ chế giúp tách biệt giữa
phần nội dung và định dạng thể hiện của website
Themes có thể kết hợp sử dụng cùng với CSS
Themes và skins
10
5
- 7/11/2009
Themes và skins
11
ASP.NET hỗ trợ xây dựng
nhiều themes trong cùng
một website và mỗi theme là
1 thư mục đặt trong thư muc
App_Themes
Trong mỗi thư mục themes
có thể tiếp tục định nghĩa
nhiều file skins, thực
images, file CSS…
Skin
12
Một skin xác định phần thể hiện giao diện của 1
hay nhiều control
Ví dụ:
Ghi chú rằng trong phần định nghĩa skin không đi
kèm với thuộc tính Id
Một skin file có thể chứa nhiều thể hiện giao diện
của nhiều control.
6
- 7/11/2009
Skin File
13
Skin file định dạng hiển thị các asp.net server
control
Ví dụ:Định nghĩa style áp dụng đối với mọi Label và TextBox trong trang
web
Lưu ý: Skin file ch ch a các đ nh nghĩa style cho control
Và KHÔNG CÓ thu c tính ID
SkinID
14
SkinID dùng thiết lập nhiều định dạng khác nhau
Ví dụ:
Skin File:
Sử dụng trong WebForm
- 7/11/2009
Theme
15
Một theme là một thư mục riêng chứa trong thư
mục App_Themes của website
Một theme được sử dụng cho một webpage thông
qua chỉ thị Page directive
Hoặc thông qua code-behind file
Theme
16
1 Theme có thể xem là 1 giao diện của trang web
Tất cả theme phải đặt trong thư mục App_Themes
Mỗi theme định nghĩa nhiều skin file, css file, hình
ảnh, ...
8
- 7/11/2009
S d ng Theme
17
Sử dụng Theme trong 1 Web form
…
L p trình Thay đ i Theme
18
Gán theme mới cho Page.Theme trong hàm xử lý
sự kiện Page_PreInit
protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = “Theme2”;
}
9
- 7/11/2009
Master pages
19
Cách tạo một master pages tương tự như cách tạo
một Web form
Bao gồm thành phần markup, server controls và
code behind file
Phần mở rộng .master
Có thể bao gồm một hay nhiều ContentPlaceHolder
control
Content-place-holder
20
ContentPageHolder định nghĩa một vùng trong
Master page mà sẽ được thay thế bởi nội dung của
Webpage sử dụng Master page này
10
- 7/11/2009
Content-place-holder
22
11
- 7/11/2009
Master page và themes
23
Mục đích chung:
Cung cấp thành phần look and feel chung cho toàn bộ
website.
Master Page: cung cấp các thành phần tĩnh, ít biến
động, các layout chung cho toàn bộ website
Themes: liên quan tới các graphical elements,
matting, layout…
Master Page
24
Master Page cho phép định nghĩa layout template
nhất quán cho toàn bộ WebForm trong site
Content Page là các WebForm kế thừa Master Page
và bổ sung thêm nội dung
Master Page ( .master ) Content Page ( .aspx )
12
- 7/11/2009
Master Page
25
Master page sẽ định nghĩa các PlaceHolderControl
Content page sẽ chèn nội dung tương ứng vào các
PlaceHolderControl trong master page.
L p trình thay đ i Master Page
26
Gán MasterPage mới cho Page.MasterPageFile
trong hàm xử lý sự kiện Page_PreInit
protected void Page_PreInit(object sender, EventArgs e)
{
Page.MasterPageFile = "~/AnotherMasterPage.master";
}
13
- 7/11/2009
X lý s ki n phát sinh t Master trong Content Page
Đóng gói control phát sinh sự kiện trong MasterPage
// MasterPage.aspx.cs\
public RadioButtonList MyRadioList {
get {
return RadioButtonList1;
}
}
Bắt sự kiện xử lý trong ContentPage
// ContentPage.aspx.cs
protected void Page_Load(object sender, EventArgs e) {
Master.MyRadioList.SelectedIndexChanged +=
new System.EventHandler(ContentList_Changed);
}
protected void ContentList_Changed(object sender, EventArgs e) {
RadioButtonList myRadioList = (RadioButtonList)sender;
Response.Write(myRadioList.SelectedValue);
}
27
S d ng CSS v i ASP.NET Server Control
28
Cách 1: Thay đổi Properties của các asp.net server
control lúc thiết kế (inline css)
Hello World
14
- 7/11/2009
S d ng CSS v i ASP.NET Server Control
29
Cách 2: Thay đổi nội dung thuộc tính Style
(inline css) của đối tượng server control tương
ứng
Ví dụ: Code behind:
LabelMsg.Style[“font-style"] = "italic“ ;
LabelMsg.Style[“text-decoration"] = “underline“ ;
LabelMsg.Style[“color"] = “Red“ ;
- 7/11/2009
N i dung
31
Master Page
Sử dụng CSS với ASP.NET Server Control
Skin và Theme
Site Navigation
Site Navigation
32
XML Site Map
SiteMapDataSource
SiteMapPath Control
Menu Control
TreeView Control
16
- 7/11/2009
C u trúc website
33
XML Site Map
34
Định nghĩa cấu trúc website trong file
Web.sitemap
…
…
17
- 7/11/2009
S d ng XML Site Map
35
Tạo SiteMapDataSource
Web.Sitemap
C u hình SiteMap File
36
Cấu hình thay đổi file sitemap trong Web.Config
- 7/11/2009
SiteMapPath Control
37
Hiển thị đường dẫn truy cập từ root node (trang
chủ) đến node hiện tại (breadcrumb)
Mỗi node phân cách nhau bởi PathSeperator
Menu Control
38
Hiển thị cấu trúc website dưới dạng Menu
Orientation=“Vertical"
StaticDisplayLevels="2"
StaticSubMenuIndent="0px
"
Orientation="Horizontal"
StaticDisplayLevels="2"
StaticSubMenuIndent="10p
x
19
- 7/11/2009
TreeView Control
39
Hiển thị cấu trúc website dưới dạng TreeView
Thêm vào BST
Báo xấu
Download
Vui lòng tải xuống để xem tài liệu đầy đủ
