Chương 3: MỘT SỐ CÔNG CỤ THIẾT KẾ WEBSITE docx
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 (503.82 KB, 35 trang )
Chương
Chương
3. M
3. M
Ộ
Ộ
T S
T S
Ố
Ố
CÔNG
CÔNG
C
C
Ụ
Ụ
THI
THI
Ế
Ế
T K
T K
Ế
Ế
WEBSITE
WEBSITE
Chương
Chương
3. M
3. M
Ộ
Ộ
T S
T S
Ố
Ố
CÔNG
CÔNG
C
C
Ụ
Ụ
THI
THI
Ế
Ế
T K
T K
Ế
Ế
WEBSITE
WEBSITE
Bộ môn CNTT – Khoa Tin họcthương mại
–Trường ĐH Thương Mại
Email:
9/3/2009 Công cụ thiết kế Web - CSS 2
N
N
ộ
ộ
i
i
dung
dung
•
•
Ngôn
Ngôn
ng
ng
ữ
ữ
đ
đ
á
á
nh
nh
d
d
ấ
ấ
u
u
HTML
HTML
•
•
PHP,
PHP,
Javascript
Javascript
•
•
M
M
ộ
ộ
t
t
s
s
ố
ố
công
công
c
c
ụ
ụ
h
h
ỗ
ỗ
tr
tr
ợ
ợ
thi
thi
ế
ế
t
t
k
k
ế
ế
website
website
9/3/2009 Công cụ thiết kế Web - CSS 3
3.1.
3.1.
Ngôn
Ngôn
ng
ng
ữ
ữ
đ
đ
á
á
nh
nh
d
d
ấ
ấ
u
u
HTML
HTML
3.1.1.
3.1.1.
T
T
ổ
ổ
ng
ng
quan
quan
v
v
ề
ề
HTML
HTML
3.1.2.
3.1.2.
C
C
á
á
c
c
th
th
ẻ
ẻ
c
c
ủ
ủ
a
a
HTML
HTML
3.1.3.
3.1.3.
S
S
ử
ử
d
d
ụ
ụ
ng
ng
Frontpage
Frontpage
thi
thi
ế
ế
t
t
k
k
ế
ế
web
web
t
t
ĩ
ĩ
nh
nh
3.1.4.
3.1.4.
Đ
Đ
ị
ị
nh
nh
d
d
ạ
ạ
ng
ng
website
website
v
v
ớ
ớ
i
i
CSS
CSS
9/3/2009 Công cụ thiết kế Web - CSS 4
CSS
CSS
•
•
CSS=Cascading Style Sheet:
CSS=Cascading Style Sheet:
M
M
ẫ
ẫ
u
u
quy
quy
đ
đ
ị
ị
nh
nh
c
c
á
á
ch
ch
th
th
ứ
ứ
c
c
th
th
ể
ể
hi
hi
ệ
ệ
n
n
c
c
á
á
c
c
th
th
ẻ
ẻ
HTML
HTML
•
•
Style
Style
đư
đư
ợ
ợ
c
c
đưa
đưa
v
v
à
à
o
o
HTML 4.0
HTML 4.0
đ
đ
ể
ể
gi
gi
ả
ả
i
i
quy
quy
ế
ế
t
t
m
m
ộ
ộ
t
t
s
s
ố
ố
v
v
ấ
ấ
n
n
đ
đ
ề
ề
.
.
•
•
Gi
Gi
ú
ú
p
p
ti
ti
ế
ế
t
t
ki
ki
ệ
ệ
m
m
đư
đư
ợ
ợ
c
c
r
r
ấ
ấ
t
t
nhi
nhi
ề
ề
u
u
th
th
ờ
ờ
i
i
gian
gian
v
v
à
à
công
công
s
s
ứ
ứ
c
c
cho
cho
vi
vi
ệ
ệ
c
c
thi
thi
ế
ế
t
t
k
k
ế
ế
web.
web.
•
•
C
C
ó
ó
th
th
ể
ể
đ
đ
ị
ị
nh
nh
ngh
ngh
ĩ
ĩ
a
a
nhi
nhi
ề
ề
u
u
style
style
v
v
à
à
o
o
m
m
ộ
ộ
t
t
th
th
ẻ
ẻ
HTML
HTML
(Cascading)
(Cascading)
9/3/2009 Công cụ thiết kế Web - CSS 5
C
C
á
á
c
c
lo
lo
ạ
ạ
i
i
style
style
•
•
C
C
ó
ó
4
4
lo
lo
ạ
ạ
i
i
style:
style:
–
–
Inline Style
Inline Style
(Style
(Style
đư
đư
ợ
ợ
c
c
qui
qui
đ
đ
ị
ị
nh
nh
trong
trong
1
1
th
th
ẻ
ẻ
HTML
HTML
c
c
ụ
ụ
th
th
ể
ể
)
)
–
–
Internal Style
Internal Style
(Style
(Style
đư
đư
ợ
ợ
c
c
qui
qui
đ
đ
ị
ị
nh
nh
trong
trong
ph
ph
ầ
ầ
n
n
<HEAD>
<HEAD>
c
c
ủ
ủ
a
a
1
1
trang
trang
HTML )
HTML )
–
–
External Style
External Style
(style
(style
đư
đư
ợ
ợ
c
c
qui
qui
đ
đ
ị
ị
nh
nh
trong
trong
file .CSS
file .CSS
ngo
ngo
à
à
i
i
)
)
–
–
Browser Default
Browser Default
(
(
thi
thi
ế
ế
t
t
l
l
ậ
ậ
p
p
m
m
ặ
ặ
c
c
đ
đ
ị
ị
nh
nh
c
c
ủ
ủ
a
a
tr
tr
ì
ì
nh
nh
duy
duy
ệ
ệ
t
t
)
)
•
•
Th
Th
ứ
ứ
t
t
ự
ự
ưu
ưu
tiên
tiên
:
:
M
M
ứ
ứ
c
c
ưu
ưu
tiên
tiên
gi
gi
ả
ả
m
m
d
d
ầ
ầ
n
n
t
t
ừ
ừ
trên
trên
xu
xu
ố
ố
ng
ng
9/3/2009 Công cụ thiết kế Web - CSS 6
C
C
á
á
ch
ch
ch
ch
è
è
n
n
CSS
CSS
•
•
Đ
Đ
ặ
ặ
t
t
trong
trong
<head>
<head>
…
…
</head>
</head>
•
•
V
V
ớ
ớ
i
i
Internal style:
Internal style:
<style type=
<style type=
“
“
text/
text/
css
css
”
”
>
>
<!
<!
N
N
ộ
ộ
i
i
dung
dung
đ
đ
ị
ị
nh
nh
ngh
ngh
ĩ
ĩ
a
a
style
style
>
>
</style>
</style>
9/3/2009 Công cụ thiết kế Web - CSS 7
C
C
á
á
ch
ch
ch
ch
è
è
n
n
CSS (
CSS (
tt
tt
)
)
•
•
V
V
ớ
ớ
i
i
External style:
External style:
–
–
Đ
Đ
ị
ị
nh
nh
ngh
ngh
ĩ
ĩ
a
a
style
style
trong
trong
file
file
riêng
riêng
(
(
thư
thư
ờ
ờ
ng
ng
c
c
ó
ó
đuôi
đuôi
.CSS)
.CSS)
–
–
Nh
Nh
ú
ú
ng
ng
file CSS
file CSS
đã
đã
đ
đ
ị
ị
nh
nh
ngh
ngh
ĩ
ĩ
a
a
v
v
à
à
o
o
trang
trang
web:
web:
<link
<link
href
href
=
=
“
“
đ
đ
ị
ị
a
a
ch
ch
ỉ
ỉ
file"
file"
rel
rel
="
="
stylesheet
stylesheet
"
"
type="text/
type="text/
css
css
">
">
•
•
V
V
ớ
ớ
i
i
Inline style:
Inline style:
<
<
tên_th
tên_th
ẻ
ẻ
style=
style=
“
“
tt1:gt1;tt2:gt2;
tt1:gt1;tt2:gt2;
…”
…”
>
>
Khai
Khai
b
b
á
á
o
o
v
v
à
à
s
s
ử
ử
d
d
ụ
ụ
ng
ng
style
style
9/3/2009 Công cụ thiết kế Web - CSS 9
Ch
Ch
ú
ú
ý
ý
khi
khi
vi
vi
ế
ế
t
t
style
style
•
•
Style
Style
phân
phân
bi
bi
ệ
ệ
t
t
ch
ch
ữ
ữ
hoa
hoa
,
,
ch
ch
ữ
ữ
thư
thư
ờ
ờ
ng
ng
•
•
Đ
Đ
ể
ể
ghi
ghi
ch
ch
ú
ú
trong
trong
style
style
s
s
ử
ử
d
d
ụ
ụ
ng
ng
:
:
/*
/*
Đo
Đo
ạ
ạ
n
n
ghi
ghi
ch
ch
ú
ú
*/
*/
9/3/2009 Công cụ thiết kế Web - CSS 10
Khai
Khai
b
b
á
á
o
o
style
style
selector {
selector {
Property1: Value1;
Property1: Value1;
Property2: Value2;
Property2: Value2;
}
}
9/3/2009 Công cụ thiết kế Web - CSS 11
Style
Style
á
á
p
p
d
d
ụ
ụ
ng
ng
cho
cho
th
th
ẻ
ẻ
c
c
ụ
ụ
th
th
ể
ể
•
•
Trư
Trư
ờ
ờ
ng
ng
h
h
ợ
ợ
p
p
1
1
th
th
ẻ
ẻ
:
:
Đ
Đ
ặ
ặ
t
t
selector
selector
l
l
à
à
tên_th
tên_th
ẻ
ẻ
p {
p {
color: red;
color: red;
}
}
•
•
Khai
Khai
b
b
á
á
o
o
đ
đ
ồ
ồ
ng
ng
th
th
ờ
ờ
i
i
nhi
nhi
ề
ề
u
u
th
th
ẻ
ẻ
:
:
Vi
Vi
ế
ế
t
t
danh
danh
s
s
á
á
ch
ch
tên
tên
th
th
ẻ
ẻ
phân
phân
c
c
á
á
ch
ch
b
b
ở
ở
i
i
d
d
ấ
ấ
u
u
ph
ph
ả
ả
y
y
h1,h2,h3,h4,h5,h6{
h1,h2,h3,h4,h5,h6{
font
font
-
-
family:arial
family:arial
;
;
}
}
9/3/2009 Công cụ thiết kế Web - CSS 12
T
T
ạ
ạ
o
o
l
l
ớ
ớ
p
p
•
•
G
G
ắ
ắ
n
n
v
v
ớ
ớ
i
i
th
th
ẻ
ẻ
c
c
ụ
ụ
th
th
ể
ể
:
:
Đ
Đ
ặ
ặ
t
t
selector
selector
l
l
à
à
tên_th
tên_th
ẻ
ẻ
.tên_l
.tên_l
ớ
ớ
p
p
p.loai1{
p.loai1{
color:red
color:red
;
;
}
}
p.loai2{
p.loai2{
color:blue
color:blue
;
;
}
}
•
•
Không
Không
g
g
ắ
ắ
n
n
v
v
ớ
ớ
i
i
th
th
ẻ
ẻ
c
c
ụ
ụ
th
th
ể
ể
:
:
b
b
ỏ
ỏ
ph
ph
ầ
ầ
n
n
tên_th
tên_th
ẻ
ẻ
đi
đi
,
,
gi
gi
ữ
ữ
l
l
ạ
ạ
i
i
d
d
ấ
ấ
u
u
ch
ch
ấ
ấ
m
m
:
:
.loai3{
.loai3{
color:green
color:green
;
;
}
}
9/3/2009 Công cụ thiết kế Web - CSS 13
S
S
ử
ử
d
d
ụ
ụ
ng
ng
l
l
ớ
ớ
p
p
•
•
Đ
Đ
ặ
ặ
t
t
thu
thu
ộ
ộ
c
c
t
t
í
í
nh
nh
class
class
c
c
ủ
ủ
a
a
th
th
ẻ
ẻ
=
=
“
“
tên_l
tên_l
ớ
ớ
p
p
”
”
:
:
<
<
tên_th
tên_th
ẻ
ẻ
class=
class=
“
“
tên_l
tên_l
ớ
ớ
p
p
”
”
>
>
•
•
V
V
í
í
d
d
ụ
ụ
:
:
<p class=
<p class=
“
“
loai1
loai1
”
”
>
>
Đo
Đo
ạ
ạ
n
n
n
n
à
à
y
y
m
m
à
à
u
u
đ
đ
ỏ
ỏ
</p>
</p>
<h1 class=
<h1 class=
“
“
loai2
loai2
”
”
>Style
>Style
không
không
c
c
ó
ó
hi
hi
ệ
ệ
u
u
l
l
ự
ự
c
c
</h1>
</h1>
<h2 class=
<h2 class=
“
“
loai3
loai3
”
”
>
>
Tiêu
Tiêu
đ
đ
ề
ề
m
m
à
à
u
u
xanh
xanh
</h3>
</h3>
9/3/2009 Công cụ thiết kế Web - CSS 14
Đ
Đ
ị
ị
nh
nh
danh
danh
•
•
Tương
Tương
t
t
ự
ự
như
như
class.
class.
Thay
Thay
d
d
ấ
ấ
u
u
ch
ch
ấ
ấ
m
m
(.)
(.)
th
th
à
à
nh
nh
d
d
ấ
ấ
u
u
thăng
thăng
(#).
(#).
•
•
Cho
Cho
th
th
ẻ
ẻ
c
c
ụ
ụ
th
th
ể
ể
:
:
tên_th
tên_th
ẻ
ẻ
#
#
đ
đ
ị
ị
nh_danh
nh_danh
{
{
…
…
}
}
•
•
T
T
ổ
ổ
ng
ng
qu
qu
á
á
t
t
:
:
#
#
đ
đ
ị
ị
nh_danh
nh_danh
{
{
…
…
}
}
•
•
V
V
í
í
d
d
ụ
ụ
:
:
p#doan1{
p#doan1{
color:red
color:red
;
;
}
}
#loai2{
#loai2{
color:blue
color:blue
;
;
}
}
9/3/2009 Công cụ thiết kế Web - CSS 15
S
S
ử
ử
d
d
ụ
ụ
ng
ng
đ
đ
ị
ị
nh
nh
danh
danh
•
•
M
M
ỗ
ỗ
i
i
đ
đ
ị
ị
nh
nh
danh
danh
l
l
à
à
duy
duy
nh
nh
ấ
ấ
t
t
trên
trên
trang
trang
•
•
Đ
Đ
ặ
ặ
t
t
thu
thu
ộ
ộ
c
c
t
t
í
í
nh
nh
id
id
c
c
ủ
ủ
a
a
th
th
ẻ
ẻ
=
=
đ
đ
ị
ị
nh_danh
nh_danh
<
<
tên_th
tên_th
ẻ
ẻ
id=
id=
“
“
đ
đ
ị
ị
nh_danh
nh_danh
”
”
>
>
•
•
V
V
í
í
d
d
ụ
ụ
:
:
<p id=
<p id=
“
“
doan1
doan1
”
”
>
>
Đo
Đo
ạ
ạ
n
n
n
n
à
à
y
y
m
m
à
à
u
u
đ
đ
ỏ
ỏ
</p>
</p>
<h1 id=
<h1 id=
“
“
loai2
loai2
”
”
>
>
Tiêu
Tiêu
đ
đ
ề
ề
xanh
xanh
</h1>
</h1>
M
M
ộ
ộ
t
t
s
s
ố
ố
trư
trư
ờ
ờ
ng
ng
h
h
ợ
ợ
p
p
c
c
ụ
ụ
th
th
ể
ể
9/3/2009 Công cụ thiết kế Web - CSS 17
CSS Basic
CSS Basic
1.
1.
CSS Background
CSS Background
2.
2.
CSS Text
CSS Text
3.
3.
CSS Font
CSS Font
4.
4.
CSS Border
CSS Border
5.
5.
CSS Margin
CSS Margin
6.
6.
CSS Padding
CSS Padding
7.
7.
CSS List
CSS List
9/3/2009 Công cụ thiết kế Web - CSS 18
CSS Advanced
CSS Advanced
1.
1.
CSS Dimension
CSS Dimension
2.
2.
CSS Classification
CSS Classification
3.
3.
CSS Positioning
CSS Positioning
4.
4.
CSS Pseudo
CSS Pseudo
-
-
class
class
5.
5.
CSS Pseudo
CSS Pseudo
-
-
element
element
6.
6.
CSS Media Types
CSS Media Types
9/3/2009 Công cụ thiết kế Web - CSS 19
CSS
CSS
cho
cho
n
n
ề
ề
n
n
9/3/2009 Công cụ thiết kế Web - CSS 20
CSS
CSS
cho
cho
n
n
ề
ề
n
n
(
(
tt
tt
)
)
9/3/2009 Công cụ thiết kế Web - CSS 21
CSS
CSS
v
v
à
à
cho
cho
b
b
ả
ả
n
n
9/3/2009 Công cụ thiết kế Web - CSS 22
CSS
CSS
v
v
à
à
cho
cho
b
b
ả
ả
n
n
(
(
tt
tt
)
)
9/3/2009 Công cụ thiết kế Web - CSS 23
CSS
CSS
v
v
à
à
font
font
9/3/2009 Công cụ thiết kế Web - CSS 24
CSS
CSS
v
v
à
à
font (
font (
tt
tt
)
)
9/3/2009 Công cụ thiết kế Web - CSS 25
CSS
CSS
v
v
à
à
font (
font (
tt
tt
)
)
