Lp trình và Thit k Web 2
Bà
i
5
Bà
i

5
CuCu
hìnhhình
GiaoGiao
dindin
WebsiteWebsite
CuCu
hìnhhình
GiaoGiao
dindin
WebsiteWebsite
Ths
Trn
Th
Bích
Hnh
Ths
.
Trn
Th
Bích
Hnh
Khoa CNTT Khoa CNTT –– H.KHTNH.KHTN
© 2009 Khoa Công ngh thông tin


Master Page
Master

Page
 S dng CSS vi ASP.NET Server Control
 Skin và Theme
 Site Navigation
© 2009 Khoa CNTT - HKHTN
3
LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website
MtPMtP
M
as
t
er
P
age
M
as
t
er
P
age

Master Page
cho phép đnh ngha layout template nht
Master

Page

tha

Master

Page

và

b

sung thêm ni dung
© 2009 Khoa CNTT - HKHTN
Master Page ( .master )
Content Page ( .aspx )
4
Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website
MtPMtP
M
as
t
er
P
age
M
as
t
er
P
age


//
ThTh
điđi
MtPMtP
tt
CttPCttP
T
ruy
T
ruy xu
t
xu
t
//
Th
ay
Th
ay
điđi
M
as
t
er
P
age
M
as
t
er
P

Cách
1
:
S
dng
phng
thc
FindControl
t
đi
tng
Master
• Ví d
– Trong Master Page có 1 Hyperlink vi
ID=
“controlInMasterPage“.
C
CS
–
Trong
C
ontent Page.aspx.
CS
:
HyperLink
ad
=
(
HyperLink)
Master.FindControl

ruy
T
ruy xu
t
xu
t
//
Th
ay
Th
ay
điđi
M
as
t
er
P
age
M
as
t
er
P
age
tt
C
on
t
en
t

{
get {
return
controlInMasterPage.ImageUrl;
}
}
set {
c
ontrolInMasterPa
g
e.ImageUrl = value;
g
}
}
© 2009 Khoa CNTT - HKHTN
7
LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website
TT
tt
//
ThTh
điđi
MtPMtP
tt
CttPCttP
T
ruy
T
ruy xu
t

on
t
en
t

P
age

Cách
2(
tt
):
Cách
2

(
tt
):

– Content Page:
•
Ch
đnh
kiu
c
th
ca
Master Page
trong
Content page

Master
.
AdImageUrl
=

"images/Logo
.
gif";
© 2009 Khoa CNTT - HKHTN
8
Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website
LL
tì htì h
thth
điđi
MtPMtP
L
p
L
p
t
r
ì
n
ht
r
ì
n
h
th

protected void Page_PreInit(object sender, EventArgs e)
{
Page.MasterPageFile = "~/AnotherMasterPage.master";
}
© 2009 Khoa CNTT - HKHTN
9
LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website

CC
X

X

lýlý ss kinkin phátphát sinhsinh tt Master Master trongtrong
C
ontent Page
C
ontent Page

óng
gói
control
phát
sinh
s
kin
trong
MasterPage
óng
gói


d
ung
Ni

d
ung

Master Page
Master

Page
 S dng CSS vi ASP.NET Server Control
 Skin và Theme
 Site Navigation
© 2009 Khoa CNTT - HKHTN
11
LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website
SS
dd
CSSCSS
ii
ASP NET S C t lASP NET S C t l
SS
d
ng
d
ng
CSS


đi
Properties
ca
các
asp.net server
Cách
1:
Thay
đi
Properties

ca
các
asp.net

server

control lúc thitk (
inline css)
• Ví d:
<span id="LabelMsg"
style="display:inline-block;
lRd
co
l
or:
R
e
d
;

ng
d
ng
CSS

CSS
v
i
v
i
ASP
.
NET

S
erver
C
on
t
ro
lASP
.
NET

S
erver
C
on
t
ro

© 2009 Khoa CNTT - HKHTN
H
e
ll
o
W
or
ld
</span>
13
LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website
SS
dd
CSSCSS
ii
ASP NET S C t lASP NET S C t l
SS
d
ng
d
ng
CSS

CSS
v
i
v
i
ASP
.

Cách
3:
Thit
lp
giá
tr
thuc
tính
CssClass
ca
đitng control (embeded, external css)
•
Ví
d
:
.
myStyle
{
Ví
d
:

.
myStyle
{
font-style: bold;
text-decoration:
line-through;
l
}

 S dng CSS vi ASP.NET Server Control
 Skin và Theme
 Site Navigation
© 2009 Khoa CNTT - HKHTN
15
LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website
Th & SkiTh & Ski
Th
eme
&

Ski
n
Th
eme
&

Ski
n
© 2009 Khoa CNTT - HKHTN
16
Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website
ThTh
Th
eme
Th
eme

1 Theme
có


u skin file, css file, hình nh,
© 2009 Khoa CNTT - HKHTN
17
LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website
Ski FilSki Fil
Ski
n
Fil
e
Ski
n
Fil
e

Skin file đ

nh d

n
g
hinth

các as
p
.net server control

 g

p

© 2009 Khoa CNTT - HKHTN
ý

g
y
Và KHÔNG CÓ thuctínhID
18
Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website
Ski IDSki ID
Ski
n
IDSki
n
ID

SkinID
dùng
thit
lp
nhiu
đnh
dng
khác
nhau
SkinID
dùng
thit
lp
nhiu
đnh


ID
= TextBoxUsername

runat
= server

SkinID="skin1" />
© 2009 Khoa CNTT - HKHTN
19
LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website
SS
dd
ThTh
SS
d
ng
d
ng
Th
eme
Th
eme

S
dng
Theme
trong
1Webform
S

r
ì
n
ht
r
ì
n
h
Th
ay
Th
ay
điđi
Th
eme
Th
eme

Gán
theme
mi
cho
Page.Theme
trong
hàm
x
lý
s
kin
Gán

Master Page
Master

Page
 S dng CSS vi ASP.NET Server Control
 Skin và Theme
 Site Navigation
© 2009 Khoa CNTT - HKHTN
22
Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website
Sit N i tiSit N i ti
Sit
e
N
av
i
ga
ti
on
Sit
e
N
av
i
ga
ti
on

XML Site Map
XML

b
s
it
e
© 2009 Khoa CNTT - HKHTN
24
Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website
XML Sit MXML Sit M
XML

Sit
e
M
ap
XML

Sit
e
M
ap

nh
ngha
cu
trúc
website
trong
file
Web.sitemap
nh

<siteMapNode url=“Search.aspx" title=“Search" />
<
it M N d
l
“H l " titl “H l " >
<
s
it
e
M
ap
N
o
d
eur
l
=“H
e
l
p.aspx
"

titl
e=
“H
e
l
p
"


e
M
ap

To
SiteMapDataSource
To
SiteMapDataSource
<asp:SiteMapDataSource ID="SiteSource" runat="server" />
Web.Sitemap
© 2009 Khoa CNTT - HKHTN
26
Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website
CC
hì hhì h
Sit MSit M
FilFil
C
u
C
u
hì
n
hhì
n
h
Sit
e
M
ap

<add name=“
SpecialSiteMapProvider"
type=
"
System Web XmlSiteMapProvider
"
type=
System
.
Web
.
XmlSiteMapProvider

siteMapFile="~/Special.Sitemap"/>
<add name=“
XmlSiteMapProvider"
type="System.Web.XmlSiteMapProvider"
siteMapFile="~/web.Sitemap"/>
</providers>
</siteMap>
</system web>
</system
.
web>
</configuration>
© 2009 Khoa CNTT - HKHTN
27
LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website
Sit M P thSit M P th
CtlCtl

root node (
trang
ch
)
đn
Hin
th
đng
dn
truy
cp
t
root

node

(
trang
ch
)

đn
node hinti (breadcrumb)

Mi
node
phân
cách
nhau
bi

trúc
website
di
dng
Menu
Hin
th
cu
trúc
website

di
dng
Menu
<asp:Menu ID="MenuMain" runat="server“ DataSourceID="SiteSource“>
</asp:Menu>
Orientation
=“
Vertical
"
Orientation Vertical

StaticDisplayLevels="2"
StaticSubMenuIndent="0px"
Orientation="Horizontal"
StaticDisplayLevels="2"
St ti S bM I d t
"
10
© 2009 Khoa CNTT - HKHTN

t
ro
lC
on
t
ro
l

Hin
th
cu
trúc
website
di
dng
TreeView
Hin
th
cu
trúc
website

di
dng
TreeView
<asp:TreeView ID="TreeViewMain" runat="server" DataSourceID="SiteSource”>
</asp:TreeView>
ImageSet=“Arrows" ImageSet="WindowsHelp"ImageSet=“BulletedList6"
© 2009 Khoa CNTT - HKHTN
30


Page

t
Content

Page
 S dng CSS vi ASP.NET Server Control
–
Inline CSS
– Embedded, external CSS
© 2009 Khoa CNTT - HKHTN
31
LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website
TT
ktkt
((
tttt
))
T
ng
T
ng
ktkt
((
tttt
))

Skin
và


View

Control
32