BÀI 5: Thiết kê và lập trình web với ASP.NET - CẤU HÌNH GIAO DIỆN WEDSITE

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (544.92 KB, 8 trang )

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

LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website
NidNid
N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
2
Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website
NidNid
N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
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

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
Content

Page
là

các

WebForm
k

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


Master page s đnh nghacác
PlaceHolderControl
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
PlaceHolderControl
trong

master

page
.
© 2009 Khoa CNTT - HKHTN
5
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
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

P
age
C
on
t
en
t

P
age

Cách
1
:
S
dng
phng
thc
FindControl
t
đi
tng

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

(
“
controlInMasterPage
"
);
HyperLink

ad (
HyperLink)
Master.FindControl
(
controlInMasterPage
);
if (ad != null)
{
ad.ImageUrl = "images/Logo.gif";
ad.NavigateUrl = "";
© 2009 Khoa CNTT - HKHTN
}
6
Lp trình và 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
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

P
age
C
on
t
en
t

P
age

Cách
2
:
Cách
2
:
– Master Page: óng gói d liu thành các thuc tính có th
tru
y
xut
(
Pro
p
erties
)
y
(p )
public string AdImageUrl

{
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

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

P
age
C

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

aspx
Ch
đnh
kiu
c
th
ca
Master

Page

trong
Content

page
.
aspx
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" …%>
/
<%@ MasterType
V
irtualPath="~
/
MasterPage.master" %> hoc
<%@ MasterType TypeName=“MyMasterPageClassName" %>
• Truy xut/Thay đi Master Page trong Content page.aspx.CS
Master
AdImageUrl
=
"images/Logo gif";

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

ay
th
ay
điđi
M
as
t
er
P
age
M
as
t
er
P
age

Gán
MasterPage
mi
cho
Page.MasterPageFile
trong
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";
}
© 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

control

phát
sinh
s
kin
trong
MasterPage
// MasterPage.aspx.cs
public RadioButtonList MyRadioList {
get {
return RadioButtonList1;
}
}
 Bts kinx 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);
© 2009 Khoa CNTT - HKHTN
10
}
Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website
NidNid
N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

CSS
v
i
v
i
ASP
.
NET

S
erver
C
on
t
ro
lASP
.
NET

S
erver
C
on
t
ro
l

Cách
1:
Thay

đ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
;

background-color:#FFFF80;
border-color:Lime;
border-st
y
le:Dashed
;
y
;
font-weight:bold;
font-style:italic;
text-decoration:underline;">
Hll W ld
© 2009 Khoa CNTT - HKHTN
H
e
ll
o
W
or
ld

12
Lp trình và 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
.
NET

S
erver
C
on
t
ro
lASP
.
NET

S
erver
C
on
t
ro

l
 Cách 2: Thay đini dung thuc tính Style (inline css)
ca đitng server control tng ng
• Ví d: Code behind:
LabelMsg.Style[“font-style"] = "italic“ ;
LabelMsg.Style[“text-decoration"] = “underline“ ;
LabelMsg.Style
[
“
color
"
]
= “
Red
“
;
LabelMsg.Style
[
color
]

Red

;

Hll W ld

© 2009 Khoa CNTT - HKHTN
H
e
ll
o
W
or
ld

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
.

NET

S
erver
C
on
t
ro
lASP
.
NET

S
erver
C
on
t
ro
l

Cách
3:
Thit
lp
giá
tr
thuc
tính
CssClass
ca

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
}

co
l
or: green;
}
• Code behind:
LabelMsg.Style.Clear
();
LabelMsg.Style.Clear
(

);
LabelMsg.CssClass = “myStyle”;
© 2009 Khoa CNTT - HKHTN
Hello World
14
Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website
NidNid
N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
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ó

th
xem
là
1
giao
din
ca
trang
web
1

Theme

có
th
xem
là
1

giao
din
ca
trang
web
 Ttc 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,
© 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

– Ví d: nh nghastyle ápdng đivimi Label và TextBox trong trang
web
<
a
sp:Label runat="server"
ForeColor="Blue" Font-Size="10pt“ Font-Name="Verdana" />
<
asp
:
TextBox
runat
="server"
<
asp
:
TextBox

runat
="server"

BackColor="#FFFFC0" ForeColor="Green“ />
Lu
ý
: Skin file ch cha các đ

nh n
g
hast
y
le cho control

© 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

dng
khác
nhau
– Ví d:
•
Skin File:
Skin

File:
<asp:TextBox runat="server"
BackColor="#FF0000" ForeColor="White" SkinID="skin1" />
• S dng trong WebForm
<
asp
:
TextBox
ID
=
"
TextBoxUsername
"
runat
=
"
server
“
<
asp
:
TextBox

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

dng
Theme

trong
1

Web

form
– <%@ Page Theme="Theme1“
 S dng Theme trong mi Web form
Trong file web.config, b sung:
<system.web>
…
<pages theme=“Theme1" />
…
</system.web>
© 2009 Khoa CNTT - HKHTN
20
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
ThTh
L
p
L
p
t

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

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”;
}
© 2009 Khoa CNTT - HKHTN
21
LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website
NidNid
N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
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

Site

Map
 SiteMapDataSource
 SiteMapPath Control
 Menu Control
 TreeView Control
© 2009 Khoa CNTT - HKHTN
23
LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website
CC
tútú
bitbit
C
u
C
u
t
r
ú
c
t
r
ú
cwe
b
s
it
ewe

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

ngha
cu
trúc
website

trong
file

Web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap
xmlns=" /><siteMapNode url=“Home.aspx" title="Home" description="HomePage"
>
<siteMapNode url=“Product.aspx" title=“Product" >
<siteMapNode url
=
“Manufactory.aspx" title=“Manufactory" /
>
<siteMapNode url=“Category.aspx" title=“Category“ >
…
/
id
<
/
s
i
teMapNo
d
e>
</siteMapNode>

<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
"

>
…
</siteMapNode>
</
siteMapNode
>
© 2009 Khoa CNTT - HKHTN
25
</
siteMapNode
>
</siteMap>
LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website
SS
dd
XML Sit MXML Sit M
SS
d
ng
d
ng
XML

Sit
e
M
ap
XML

Sit

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

Sit
e
M
ap
Fil
e
Fil
e

Cu
hình
thay
đi
file sitemap
trong
Web.Config
Cu
hình
thay
đi
file

sitemap

trong
Web.Config
<configuration>
<system.web>
<siteMap defaultProvider=“XmlSiteMapProvider" enabled="true">
<providers>

<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

Sit
e
M
ap
P
a
thSit
e
M
ap
P
a
th
C
on
t
ro
lC
on
t
ro
l

Hin
th
đng
dn
truy
cp
t

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

PathSeperator
Mi
node

phân
cách
nhau
bi
PathSeperator
© 2009 Khoa CNTT - HKHTN
28
Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website
MCtlMCtl
M
enu
C
on
t
ro
lM
enu
C
on
t
ro
l

Hin
th
cu

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

29
St
a
ti
c
S
u
bM
enu
I
n
d
en
t
="
10
px
LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website
TViTVi
CtlCtl
T
ree
Vi
ew
T
ree
Vi
ew
C
on

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

Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website
TT
ktkt
T
ng
T
ng
ktkt

Master Page
Master

Page
– Master Page, Content Page, PlaceHolderControl
Thay
đi
/
Truy
xut
Master Page
t
Content Page
–
Thay
đi
/

Truy
xut
Master

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à

Theme
Skin

và
Theme
– Theme
Skin File
SkinID
–
Skin

File
,
SkinID
 Site Navigation
–
XML Site Ma
p
p
– SiteMapDataSource
–
SiteMapPath
Control
SiteMapPath
Control
– Menu Control
Tree View Control
© 2009 Khoa CNTT - HKHTN
–
Tree

View

Control
32

BÀI 5: Thiết kê và lập trình web với ASP.NET - CẤU HÌNH GIAO DIỆN WEDSITE

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về