Báo cáo cuối kì môn TW VÀ DH - Nhóm 1 - Công nghệ thông tin | Đại học Hoa Sen

Báo cáo cuối kì môn TW VÀ DH - Nhóm 1 - Công nghệ thông tin | Đại học Hoa Sen được sưu tầm và soạn thảo dưới dạng file PDF để gửi tới các bạn sinh viên cùng tham khảo, ôn tập đầy đủ kiến thức, chuẩn bị cho các buổi học thật tốt. Mời bạn đọc đón xem

KHOA KINH T VÀ QU N TR
NGÀNH DIGITAL MARKETING
L P 2234
BÁO CÁO Đ
BÁO CÁO Đ
BÁO CÁO Đ
BÁO CÁO ĐBÁO CÁO Đ
ÁN INTERNET
ÁN INTERNET
ÁN INTERNET
ÁN INTERNET ÁN INTERNET
Tên đ tài:
08/2023
THI
THI
THI
THITHI
T
T
T
TT
K
K
K
KK
N
N
N
N N
I
I
I
II
TH
TH
TH
THTH
T
T
T
T T
KHOA KINH T QU N TR
NGÀNH DIGITAL MARKETING
L P 2234
BÁO CÁO Đ
BÁO CÁO Đ
BÁO CÁO Đ
BÁO CÁO ĐBÁO CÁO Đ
ÁN INTERNET
ÁN INTERNET
ÁN INTERNET
ÁN INTERNET ÁN INTERNET
Tên đ tài:
Danh sách nhóm sinh viên th c hi n
1. Đ Th Thu Thúy - 22123051
2. Huỳnh Th Minh Th ư – 22107126
3. Ngô Phan Ánh D ngươ – 22205274
08/2023
THI
THI
THI
THITHI
T
T
T
TT
K
K
K
KK
N
N
N
N N
I
I
I
II
TH
TH
TH
THTH
T
T
T
TT
Tr ng Đ i h c Hoa Senườ
TRÍCH Y
TRÍCH Y
TRÍCH Y
TRÍCH YTRÍCH Y
U
U
U
UU
Thiết kế web và đồ họa Trang | i
Tr ng Đ i h c Hoa Senườ
M
M
M
MM
C L
C L
C L
C LC L
C
C
C
CC
TRÍCH Y
TRÍCH Y
TRÍCH Y
TRÍCH YTRÍCH Y
U
U
U
UU
.......
.......
.......
..............
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
................
................
................
................................
......
......
......
............
......
......
......
............
i
i
i
ii
M
M
M
MM
C L
C L
C L
C LC L
C
C
C
CC
.......
.......
.......
..............
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
......ii
......ii
......ii
......ii......ii
L
L
L
LL
I C
I C
I C
I CI C
M
M
M
M M
N
N
N
NN
Ơ
Ơ
Ơ
ƠƠ
.......
.......
.......
..............
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
.....................
.....................
.....................
..........................................
......
......
......
............
.......
.......
.......
..............
.
.
.
..
iv
iv
iv
iviv
DANH M
DANH M
DANH M
DANH MDANH M
C CÁC HÌNH
C CÁC HÌNH
C CÁC HÌNH
C CÁC HÌNH C CÁC HÌNH
NH
NH
NH
NHNH
.......
.......
.......
..............
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
....
....
....
........
......
......
......
............
.....
.....
.....
..........
v
v
v
vv
DANH M
DANH M
DANH M
DANH MDANH M
C CÁC B
C CÁC B
C CÁC B
C CÁC BC CÁC B
NG BI
NG BI
NG BI
NG BING BI
U
U
U
UU
.......
.......
.......
..............
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
..............
..............
..............
............................
......
......
......
............
...
...
...
......
viii
viii
viii
viiiviii
D
D
D
DD
N NH
N NH
N NH
N NHN NH
P
P
P
PP
.........
.........
.........
..................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
..................
..................
..................
....................................
......
......
......
............
.
.
.
..
1
1
1
11
1.
1.
1.
1.1.
CÁC K
CÁC K
CÁC K
CÁC KCÁC K
THU
THU
THU
THU THU
T
T
T
TT
THI
THI
THI
THI THI
T K
T K
T K
T KT K
WEBSITE
WEBSITE
WEBSITE
WEBSITE WEBSITE
.......
.......
.......
..............
............
............
............
........................
............
............
............
........................
..................
..................
..................
....................................
......
......
......
............
......
......
......
............
.
.
.
..
2
2
2
22
1.1 CSS............................................................................................................2
1.2 INSERT IMAGE............................................................................................2
1.3 HYPERLINK.................................................................................................2
1.4 BORDER.....................................................................................................2
1.4 TABLE.........................................................................................................2
2.
2.
2.
2.2.
CÁC CÔNG C
CÁC CÔNG C
CÁC CÔNG C
CÁC CÔNG CCÁC CÔNG C
ĐÃ S
ĐÃ S
ĐÃ S
ĐÃ S ĐÃ S
D
D
D
D D
NG
NG
NG
NGNG
.......
.......
.......
..............
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
.......
.......
.......
..............
......
......
......
............
.....
.....
.....
..........
3
3
3
33
2.1. Adobe Dreamweaver................................................................................3
2.2. Adobe Photoshop.....................................................................................3
3.
3.
3.
3.3.
N
N
N
NN
I
I
I
II
DUNG CHÍNH C
DUNG CHÍNH C
DUNG CHÍNH C
DUNG CHÍNH C DUNG CHÍNH C
A WEBSITE
A WEBSITE
A WEBSITE
A WEBSITEA WEBSITE
.......
.......
.......
..............
............
............
............
........................
............
............
............
........................
..
..
..
....
......
......
......
............
......
......
......
............
.......
.......
.......
..............
......
......
......
............
......
......
......
............
..
..
..
....
4
4
4
44
3.1. TRANG CH............................................................................................4
3.1.1 Ch p l i hình trang ch .........................................................................4
3.1.2 Code html và css cu trang ch .............................................................5
3.2. TRANG LIÊN H.....................................................................................15
3.2.1 Ch p l i hình trang liên h ..................................................................16
3.2.2 Code html và css cu trang liên h.......................................................16
3.3. TRANG PHONG CÁCH THI T K ..............................................................19
3.3.1 Ch p l i hình trang phong cách thi t k / phong cách hi n đ i ế ế ..............20
3.3.2 Code cu trang phong cách thi t k / phong cách hi n đ iế ế ....................21
3.3.3 Ch p l i hình trang phong cách thi t k / phong cách Indochineế ế ............28
3.3.4 Code cu trang phong cách thi t k / phong cách Indochineế ế ..................29
3.4 GI I THI U ..............................................................................................34
3.2.1
V Hi-Home ........................................................................................34
3.2.2
T m nhìn và s m nh .........................................................................37
3.2.3
Ch t l ng và d ch v ượ .........................................................................41
3.2.4
Thi t k và công trìnhế ế .........................................................................45
Thiết kế web và đồ họa Trang | ii
Tr ng Đ i h c Hoa Senườ
3.5 D ÁN THI T K ......................................................................................53
3.5.1 Ch p l i hình trang d án v cafe ........................................................54
3.5.2 Code html và css cu trang d án v cafe ............................................55
3.5.3 Ch p l i hình trang d án v căn h ....................................................56
3.5.4 Code html và css cu trang d án v căn h ........................................57
3.5.5 Ch p l i hình trang d án v nhà ph ..................................................58
3.5.6 Code html và css cu trang d án v nhà ph ......................................59
3.5.7 Ch p l i hình trang d án v nhà .........................................................60
3.5.8 Code html và css cu trang d án v bi t th ......................................61
4.
4.
4.
4.4.
H
H
H
HH
NG D
NG D
NG D
NG DNG D
N S
N S
N S
N SN S
D
D
D
D D
NG WEB SITE
NG WEB SITE
NG WEB SITE
NG WEB SITENG WEB SITE
ƯỚ
ƯỚ
ƯỚ
ƯỚƯỚ
.......
.......
.......
..............
............
............
............
........................
............
............
............
........................
............
............
............
........................
.....
.....
.....
..........
.......
.......
.......
..............
......
......
......
............
.62
.62
.62
.62.62
K
K
K
KK
T LU
T LU
T LU
T LUT LU
N
N
N
NN
.......
.......
.......
..............
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
.....................
.....................
.....................
..........................................
.......
.......
.......
..............
......
......
......
............
....
....
....
........
63
63
63
6363
TÀI LI
TÀI LI
TÀI LI
TÀI LITÀI LI
U THAM KH
U THAM KH
U THAM KH
U THAM KHU THAM KH
O
O
O
OO
.......
.......
.......
..............
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
.........64
.........64
.........64
.........64.........64
PH
PH
PH
PHPH
L
L
L
L L
C
C
C
CC
..............
..............
..............
............................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
............
............
............
........................
.............
.............
.............
..........................
......
......
......
............
..65
..65
..65
..65..65
Thiết kế web và đồ họa Trang | iii
Tr ng Đ i h c Hoa Senườ
L
L
L
LL
I C
I C
I C
I CI C
M
M
M
M M
N
N
N
NN
Ơ
Ơ
Ơ
ƠƠ
Nhóm em xin g i l i c m n chân thành đ n cô Hoàng Th Khánh Uyên – gi ng ơ ế
viên b môn “Thi t k web và đ h a” đã truy n đ t nh ng ki n th c quý báu cho ế ế ế
em trong su t th i gian h c t p v a qua. Trong th i gian tham gia l p Thi t k web ế ế
và đ h a c a cô, nhóm em đã có thêm cho mình nhi u ki n th c b ích, tinh th n ế
h c t p hi u qu , nghiêm túc. Đây ch c ch n s là nh ng ki n th c quý báu, là ế
hành trang đ em có th v ng b c sau này. ướ
B môn Thi t k web và đ h a là môn h c thú v , vô cùng b ích và có tính th c ế ế
t cao. Đ m b o cung c p đ ki n th c, g n li n v i nhu c u th c ti n c a sinh ế ế
viên. Tuy nhiên, do v n ki n th c còn nhi u h n ch và kh năng ti p thu th c t ế ế ế ế
còn nhi u b ng . M c dù nhóm em đã c g ng h t s c nh ng ch c ch n bài báo ế ư
cáo khó có th tránh kh i nh ng thi u sót và nhi u ch còn ch a chính xác, kính ế ư
mong th y/cô xem xét và góp ý đ bài ti u lu n c a em đ c hoàn thi n h n. ượ ơ
Em xin chân thành c m n cô ! ơ
Thiết kế web và đồ họa Trang | iv
Tr ng Đ i h c Hoa Senườ
DANH M
DANH M
DANH M
DANH MDANH M
C CÁC HÌN
C CÁC HÌN
C CÁC HÌN
C CÁC HÌNC CÁC HÌN
H
H
H
H H
NH
NH
NH
NHNH
Hình 3.1. 1: Ch p l i hình trang ch .................................................................................4
Hình 3.1. 2 Code html c a ph n slider hình nh ................................................................5
Hình 3.1. 3: Hình html c a ph n slider c a hình nh .........................................................5
Hình 3.1. 4: Code html c a ph n "Chúng tôi là ai" .............................................................5
Hình 3.1. 5: Code css c a ph n " chúng tôi là ai" ..............................................................6
Hình 3.1. 6: Code css c a ph n " Chúng tôi là ai" ..............................................................6
Hình 3.1. 7: Code html c a ph n "Hãy l a ch n Hihome vì" ...............................................7
Hình 3.1. 8: Code html c a ph n " Hãy l a ch n Hihome vì" ..............................................7
Hình 3.1. 9: Code css c a ph n "Hãy l a ch n Hihome vì" .................................................8
Hình 3.1. 10: Code css c a ph n " Hãy l a ch n Hihome vì" ..............................................8
Hình 3.1. 11: Code html c a ph n " Chúng tôi đã có" ........................................................9
Hình 3.1. 12: Code html c a ph n "Chúng tôi đã có" .........................................................9
Hình 3.1. 13: Code css c a ph n " Chúng tôi đã có" ........................................................10
Hình 3.1. 14: Code css c a ph n "Chúng tôi đã có " ........................................................10
Hình 3.1. 15: Code html c a ph n "Các lĩnh v c ho t đ ng c a doanh nghi p" ................11
Hình 3.1. 16: Code html c a ph n "Các lĩnh v c ho t đ ng c a doanh nghi p” ................11
Hình 3.1. 17: Code css c a ph n "Các lĩnh v c ho t d ng c a doanh nghi p" ..................12
Hình 3.1. 18: Code css c a ph n "Các lĩnh v c ho t đ ng c a doanh nghi p" ..................12
Hình 3.1. 19: Code html c a ph n "Quy trình làm vi c c a doanh nghi p" .......................13
Hình 3.1. 20: Code html c a ph n "Quy trình làm vi c c a doanh nghi p" .......................13
Hình 3.1. 21: Code css c a ph n "Quy trình làm vi c c a doanh nghi p" .........................14
Hình 3.1. 22: Code css c a ph n "Quy trình làm vi c c a doanh nghi p" .........................14
Hình 3.1. 23: Code html c a ph n “Liên h ngay v i HiHome” .........................................15
Hình 3.1. 24: Code html c a ph n “Liên h ngay v i HiHome” .........................................15
Hình 3.2. 1: Ch p l i liên h
Hình 3.2. 2: Code html c a ph n thông tin c a HiHome – phía bên trái
Hình 3.2. 3: Code html c a ph n thông tin c a HiHome – phía bên trái
Hình 3.2. 4: Code css c a ph n thông tin c a HiHome – phía bên trái
Hình 3.2. 5: Code html c a ph n đi n thông tin khách hàng – phía bên ph i
Hình 3.2. 6: Code css c a ph n đi n thông tin khách hàng – phía bên ph i
Hình 3.3. 1 Ch p l i hình trang phong cách thi t k / phong cách hi n đ i ế ế .......................20
Hình 3.3. 1 Ch p l i hình trang phong cách thi t k / phong cách hi n đ i ế ế .......................20
Hình 3.3. 2 Code html c a ph n title và hình nh đ u trang ............................................21
Hình 3.3. 3 Code html c a ph n title và hình nh đ u trang ............................................21
Hình 3.3. 4 Code html c a ph n “Phong cách thi t k n i th t hi n đ i và nh ng đi u c n ế ế
bi t”ế .............................................................................................................................21
Hình 3.3. 5 Code html c a ph n “Phong cách thi t k n i th t hi n đ i và nh ng đi u c n ế ế
bi t”ế .............................................................................................................................22
Hình 3.3. 6 Code html c a ph n “Phong cách thi t k n i th t hi n đ i và nh ng đi u c n ế ế
bi t”ế .............................................................................................................................22
Hình 3.3. 7 Code html c a ph n “Đôi nét v phong cách thi t k n i th t hi n đ i” ế ế .........23
Hình 3.3. 8 Code html c a ph n “Đ c tr ng c a phong cách thi t k n i th t hi n đ i” ư ế ế ...23
Hình 3.3. 9 Code css c a ph n “Đ c tr ng c a phong cách thi t k n i th t hi n đ i ư ế ế ......24
Hình 3.3. 10 Code css c a ph n “Đ c tr ng c a phong cách thi t k n i th t hi n đ i” ư ế ế ...25
Hình 3.3. 11 Code html c a ph n “Liên h ” - cu i trang ...............................................25
Hình 3.3. 12 Code html c a ph n “Liên h ” - cu i trang ...............................................26
Thiết kế web và đồ họa Trang | v
Tr ng Đ i h c Hoa Senườ
Hình 3.3. 13 Code html c a ph n “Liên h ” - cu i trang ...............................................26
Hình 3.3. 14 Code html c a ph n “Liên h ” - cu i trang ...............................................27
Hình 3.3. 15 Ch p l i hình trang phong cách thi t k / phong cách Indochine ế ế ...................28
Hình 3.3. 15 Ch p l i hình trang phong cách thi t k / phong cách Indochine ế ế ...................28
Hình 3.3. 16 Code html c a ph n hình nh và title đ u trang ..........................................29
Hình 3.3. 17 Code css c a ph n hình nh và title đ u trang ............................................29
Hình 3.3. 18 Code html c a ph n “Gi i thi u v khái ni m thi t k Indochine ế ế ..................29
Hình 3.3. 19 Code css c a ph n “Gi i thi u v khái ni m thi t k Indochine” ế ế ..................30
Hình 3.3. 20 Code html c a ph n “Tìm hi u sâu v phong cách Indochine” ......................30
Hình 3.3. 21 Code css c a ph n “Tìm hi u sâu v phong cách Indochine” ........................30
Hình 3.3. 22 Code html c a ph n “Đ c tr ng c a phong cách thi t k n i th t Indochine” ư ế ế
....................................................................................................................................31
Hình 3.3. 23 Code css c a ph n “Đ c tr ng c a phong cách thi t k n i th t Indochine” ư ế ế .31
Hình 3.3. 24 Code css c a ph n “Đ c tr ng c a phong cách thi t k n i th t Indochine” ư ế ế .32
Hình 3.3. 25 Code html c a ph n “Liên h ” - cu i trang ...............................................32
Hình 3.3. 26 Code css c a ph n “Liên h ” - cu i trang .................................................33
Hình 3.3. 27 Code css c a ph n “Liên h ” - cu i trang .................................................33
Hình 3.3. 28 Code css c a ph n “Liên h ” - cu i trang .................................................34
Hình 3.4. 1 Giao di n ph n đ u trang v hi-home
Hình 3.4. 2 Giao di n ph n cu i trang v hi-home
Hình 3.4. 2 Giao di n ph n cu i trang v hi-home
Hình 3.4. 3 M c v chúng tôi
Hình 3.4. 4 M c công ty n i th t hi-home NL decor
Hình 3.4. 4 M c công ty n i th t hi-home NL decor
Hình 3.4. 5 M c ph ng châm ho t đ ng. ươ
Hình 3.4. 5 M c ph ng châm ho t đ ng. ươ
Hình 3.4. 6 M c css trang v hi-home
Hình 3.4. 7 Giao di n trang t m nhìn và s m nh ph n đ u
Hình 3.4. 8 Giao di n trang t m nhìn và s m nh ph n gi a
Hình 3.4. 8 Giao di n trang t m nhìn và s m nh ph n gi a
Hình 3.4. 9 Giao di n trang t m nhìn và s m nh ph n cu i
Hình 3.4. 9 Giao di n trang t m nhìn và s m nh ph n cu i
Hình 3.4. 10 Html ph n đ u trang t m nhìn và s m nh
Hình 3.4. 10 Html ph n đ u trang t m nhìn và s m nh
Hình 3.4. 11 Html ph n gi a trang t m nhìn và s m nh
Hình 3.4. 12 Html ph n cu i trang t m nhìn và s m nh
Hình 3.4. 12 Html ph n cu i trang t m nhìn và s m nh
Hình 3.4. 13 Css tiêu đ màu xanh lá
Hình 3.4. 14 Giao di n ph n đ u trang ch t l ng và d ch v ượ
Hình 3.4. 15 Giao di n ph n cu i trang ch t l ng và d ch v ượ
Hình 3.4. 15 Giao di n ph n cu i trang ch t l ng và d ch v ượ
Hình 3.4. 16 HTML c a trang ch t l ng và d ch v ượ
Hình 3.4. 17 HTML c a trang ch t l ng và d ch v ượ
Hình 3.4. 17 HTML c a trang ch t l ng và d ch v ượ
Hình 3.4. 18 HTML c a trang ch t l ng và d ch v ượ
Hình 3.4. 18 HTML c a trang ch t l ng và d ch v ượ
Hình 3.4. 19 CSS c a trang ch t l ng và d ch v ượ
Hình 3.4. 20 Giao di n trang thi t k và công trình ế ế
Thiết kế web và đồ họa Trang | vi
Tr ng Đ i h c Hoa Senườ
Hình 3.4. 21 Giao di n trang thi t k và công trình ế ế
Hình 3.4. 22 HTML c a thi t k và công trình ế ế
Hình 3.4. 23 HTML c a thi t k và công trình ế ế
Hình 3.4. 24 HTML c a thi t k và công trình ế ế
Hình 3.4. 25 CSS c a thi t k và công trình ế ế
Hình 3.4. 26 CSS c a thi t k và công trình ế ế
Hình 3.4. 27 CSS c a thi t k và công trình ế ế
Hình 3.4. 28 CSS c a thi t k và công trình ế ế
Hình 3.4. 29 CSS c a thi t k và công trình ế ế
Hình 3.5. 1 Ch p l i hình trang d án v cafe
Hình 3.5. 2 Ch p l i hình trang d án v cafe
Hình 3.5. 3 Ch p l i hình trang d án v cafe
Hình 3.5. 4 Code html baner đ u trang cafe
Hình 3.5. 5 Code html d án đã th c hi n
Hình 3.5. 6 Banner căn h
Hình 3.5. 7 Các lo i căn h
Hình 3.5. 8 N i th t trong căn h
Hình 3.5. 9 các m u thi t k ế ế
Hình 3.5. 10 CSS căn h
Hình 3.5. 11 banner căn h
Hình 3.5. 12 html các lo i căn h
Hình 3.5. 13 html các m u thi t k ế ế
Hình 3.5. 14 Hình trang web nhà ph
Hình 3.5. 15 Các d án th c t đã th c hi n ế
Hình 3.5. 16 html v nhà ph
Hình 3.5. 17 html v các d án đã th c hi n
Hình 3.5. 18 CSS c a nhà ph
Hình 3.5. 19 Banner trang web bi t th
Hình 3.5. 20 khách hàng c a Hihome
Hình 3.5. 21 D án c a khách hàng
Hình 3.5. 22 html banner trang bi t th
Hình 3.5. 23 html khách hàng c a Hihome
Hình 3.5. 24 html d án c a khách hàng
Hình 3.5. 25 CSS c a trang bi t th
Y
Thiết kế web và đồ họa Trang | vii
Tr ng Đ i h c Hoa Senườ
DANH M
DANH M
DANH M
DANH MDANH M
C CÁC B
C CÁC B
C CÁC B
C CÁC BC CÁC B
NG BI
NG BI
NG BI
NG BING BI
U
U
U
UU
B ng 1: Phân công nhi m v ..............................................................................1
Thiết kế web và đồ họa Trang | viii
D
D
D
DD
N NH
N NH
N NH
N NHN NH
P
P
P
PP
Lý do ch n đ tài
Dân s n c ta ngày càng đông, đ i s ng con ng i ngày càng cao, kéo theo nhu ướ ườ
c u nhà ngày càng l n, bên c nh đó con ng i ph i ch y theo th i gian m i hòa ườ
nh p vào s phát tri n c a h i, t đó nhu c u đ c ngh ng i, th giãn c n ượ ơ ư
ph i u tiên đ t lên hàng đ u cho vi c thi t k không gian đ . Do v y, vi c thi t ư ế ế ế
k m t không gian đ p, hi n đ i, l ch lãm chuyên nghi p chi m m t vai trò r tế ế
quan tr ng không th thi u trong đ i s ng c a chúng ta. ế ế
Các m c tiêu c n đ t đ c ượ
Đ tìm hi u sâu v đ tài đ đ a ra ý t ng ng d ng vào th c ti n. Đ a ra nhi u ư ưở ư
m u d án thi t k , phong cách thi t k cho khách hàng l a ch n. S d ng thành ế ế ế ế
th o ng d ng Dreamweaver.
B ng phân công nhi m v
H và Tên MSSV Nhi m v
Đ Th Thu Thúy 22123051 D án thi t k (cafe-nhà ph - bi t ế ế
th - căn h ), làm power point, báo
cáo.
Huỳnh Th Minh Th ư 22107126 Gi i thi u (Ch t l ng d ch v - ượ
t m nhìn s m nh- thi t k ế ế
công trình vehihom), làm power
point.
Ngô Phan Ánh D ngươ 22205274 Trang ch , báo giá, liên h , phong
cách thi t k (indochin hi nế ế
đ i ),t ng h p l i html.
B ng 1: Phân công nhi m v
Tên đ tài T r a n g | 1
1.
1.
1.
1.1.
CÁC K
CÁC K
CÁC K
CÁC KCÁC K
THU
THU
THU
THU THU
T THI
T THI
T THI
T THIT THI
T K
T K
T K
T KT K
WEBSITE
WEBSITE
WEBSITE
WEBSITE WEBSITE
1.1 CSS
1.1 CSS
1.1 CSS
1.1 CSS1.1 CSS
CSS cho phép b n đ nh d ng các HTML nh văn b n, hình nh, đ ng vi n, ư ườ
ch nh font ch , căn l , n n, kích th c v trí c a chúng trên trang web. ướ
B ng cách áp d ng các thu c tính CSS, b n th t o ra giao di n đ ng
nh t và h p d n cho trang
1.2 INSER
1.2 INSER
1.2 INSER
1.2 INSER1.2 INSER
T IMAGE
T IMAGE
T IMAGE
T IMAGET IMAGE
Tr c khi mu n chèn hình nh vào trang web, b n nên chép t t c các hìnhướ
nh c n chèn vào th m c Image c a b web. Vi c l a ch n hình nh đ ư
chèn vào trang web cũng ph i chú ý đ n s l ng và kích th c c a nh vì ế ượ ướ
n u chèn quá nhi u ho c nh quá l n s làm cho trang web có d ng l ngế ượ
l n, vi c t i v xem cũng ch m h n. Đ th c hi n vi c chèn hình nh vào ơ
trang web, b n làm nh sau: vào Insert, ch n Image tìm đ n hình nh ư ế
mu n chèn .
1.3 HYPERLINK
1.3 HYPERLINK
1.3 HYPERLINK
1.3 HYPERLINK1.3 HYPERLINK
Là nh ng gì cho phép b n liên k t tài li u này v i các tài li u khác ho c tài ế
nguyên khác thông qua các l n l p l i đ c g i là “th <a>”. Đó là m t khái ượ
ni m c b n đ ng sau World Wide Web giúp đi u h ng gi a các trang web ơ ướ
d dàng h n thông qua các Link. ơ
1.4 BORDER
1.4 BORDER
1.4 BORDER
1.4 BORDER1.4 BORDER
Đ c s d ng đ ch đ nh ki u đ ng biên b n mu n hi n th trênượ ườ
trang web. ch đ nh không b t kỳ đ ng vi n nào đ c đ nh nghĩa. ườ ượ
đ c s d ng đ xác đ nh m t đ ng vi n c d u ch m (dotted).ượ ườ
Nó đ c s d ng đ xác đ nh m t đ ng vi n dashed.ượ ườ
1.4 T
1.4 T
1.4 T
1.4 T1.4 T
ABLE
ABLE
ABLE
ABLEABLE
Table m t đ nh d ng dùng đ hi n th d li u d ng danh sách. M i
table s đ c chia ra g m hai thành ph n hàng c t, -Trong HTML ượ
chúng đ c t o ra b i các th table , tr ,th, td , tbody , thead , tfood .ượ
Tên đ tài T r a n g | 2
| 1/73

Preview text:

KHOA KINH T VÀ QU Ế N TR Ả Ị NGÀNH DIGITAL MARKETING LỚP 2234 BÁO CÁO Đ ÁN INTERNET Tên đ tài: ề THI T K N N I TH T 08/2023 KHOA KINH T QU Ế N TR Ả Ị NGÀNH DIGITAL MARKETING LỚP 2234 BÁO CÁO Đ ÁN INTERNET Tên đ tài: ề THI T K N N I TH T
Danh sách nhóm sinh viên th c hi ự n ệ 1. Đỗ Th Thu Thúy ị - 22123051 2. Huỳnh Th Minh Th ị ư – 22107126 3. Ngô Phan Ánh Dư ng ơ – 22205274 08/2023 Tr ng Đ ườ i h ạ ọc Hoa Sen TRÍCH Y U
Thiết kế web và đồ họa Trang | i Tr ng Đ ườ i h ạ ọc Hoa Sen M M C LC TRÍCH Y U
...........................................................................................................i M M C L
C.............................................................................................................ii L I C M M ƠN
Ơ ......................................................................................................iv DANH M DANH M C CÁC HÌNH C CÁC HÌNH
NH..................................................................................v DANH M DANH M C CÁC B C CÁC B NG BI NG BI
U..............................................................................viii D D N NH N NH
P..........................................................................................................1 1. 1. CÁC K THU THU T THI THI T K T K
WEBSITE..............................................................2
1.1 CSS............................................................................................................2
1.2 INSERT IMAGE............................................................................................2
1.3 HYPERLINK.................................................................................................2
1.4 BORDER.....................................................................................................2
1.4 TABLE.........................................................................................................2 2. 2. CÁC CÔNG C CÁC CÔNG C ĐÃ S D
NG.........................................................................3
2.1. Adobe Dreamweaver................................................................................3
2.2. Adobe Photoshop.....................................................................................3 3. 3. N I DUNG CHÍNH C DUNG CHÍNH C
A WEBSITE..................................................................4
3.1. TRANG CHỦ............................................................................................4 3.1.1 Ch p l ụ i hình tr ạ
ang chủ.........................................................................4
3.1.2 Code html và css cuả trang chủ.............................................................5
3.2. TRANG LIÊN HỆ.....................................................................................15 3.2.1 Ch p l ụ i hình tr ạ
ang liên hệ..................................................................16
3.2.2 Code html và css cuả trang liên hệ.......................................................16 3.3. TRANG PHONG CÁCH THI T K Ế
Ế..............................................................19 3.3.1 Ch p l ụ i hình tr ạ ang phong cách thi t k ế ế/ phong cách hi n đ ệ i ạ ..............20
3.3.2 Code cuả trang phong cách thiết kế/ phong cách hi n đ ệ i ạ ....................21 3.3.3 Ch p l ụ i hình tr ạ
ang phong cách thiết kế/ phong cách Indochine............28
3.3.4 Code cuả trang phong cách thiết kế/ phong cách Indochine..................29 3.4 GI I THI Ớ U
Ệ ..............................................................................................34
3.2.1 Về Hi-Home........................................................................................34 3.2.2 Tầm nhìn và s m ứ nh
ệ .........................................................................37
3.2.3 Chất lượng và d ch v ị
ụ.........................................................................41
3.2.4 Thiết kế và công trình.........................................................................45
Thiết kế web và đồ họa Trang | ii Tr ng Đ ườ i h ạ ọc Hoa Sen 3.5 D ÁN THI Ự T K Ế
Ế......................................................................................53 3.5.1 Ch p l ụ i hình tr ạ ang dự án v ca ề
fe........................................................54
3.5.2 Code html và css cuả trang dự án về cafe............................................55 3.5.3 Ch p l ụ i hình tr ạ ang dự án v că ề
n hộ....................................................56
3.5.4 Code html và css cuả trang d án v ự căn h ề
ộ........................................57 3.5.5 Ch p l ụ i hình tr ạ ang dự án v nhà ề
phố..................................................58
3.5.6 Code html và css cuả trang d án v ự nhà ph ề
ố......................................59
3.5.7 Chụp lại hình trang d án v ự nhà ề
.........................................................60
3.5.8 Code html và css cuả trang d án v ự bi ề t th ệ
ự......................................61 4. 4. H ƯỚNG D NG D N S D D
NG WEB SITE..............................................................62 K T LU
N.........................................................................................................63 TÀI LI U THAM KH U THAM KH
O........................................................................................64 PH L L
C...........................................................................................................65
Thiết kế web và đồ họa Trang | iii Tr ng Đ ườ i h ạ ọc Hoa Sen L I C M M N Ơ Nhóm em xin g i l ử i c
ờ ảm ơn chân thành đ n cô Hoàng Th ế Khánh Uyên – gi ị ng ả viên b môn “Thi ộ t k ế ế web và đ h ồ a” đã truy ọ n đ ề t nh ạ ng ki ữ n th ế c ứ quý báu cho em trong su t th ố i gian h ờ c t ọ p v ậ a qua. T ừ rong th i gian tham gia l ờ p Thi ớ t k ế web ế và đ h ồ a c ọ
a cô, nhóm em đã có thêm cho mình nhi ủ u ki ề n th ế c b ứ ích, tinh th ổ n ầ h c t ọ ập hi u qu ệ , nghiêm túc. Đây ch ả c ch ắ n s ắ là nh ẽ ng ki ữ n th ế c quý báu, là ứ hành trang đ em có th ể v ể ng b ữ c sau này ướ . B môn Thi ộ t k ế web và đ ế h ồ a là môn h ọ c thú v ọ , vô cùng b ị ích và có tính th ổ c ự tế cao. Đ m b ả o cung c ả p đ ấ ki ủ n th ế c, g ứ n li ắ ền v i nhu c ớ u th ầ c ti ự n c ễ a sinh ủ viên. Tuy nhiên, do v n ki ố n th ế c còn nhi ứ u h ề n ch ạ và kh ế năng ti ả p ế thu th c t ự ế còn nhi u b ề ng ỡ . M ỡ c dù nhóm em đã c ặ g ố ng h ắ t s ế c nh ứ ng ch ư c ch ắ n bài báo ắ cáo khó có th tránh kh ể i nh ỏ ng thi ữ u sót và nhi ế u ch ề còn ch ỗ a chính xác, kính ư
mong th y/cô xem xét và góp ý đ ầ bài ti ể u lu ể n c ậ a em đ ủ c hoàn thi ượ n h ệ n. ơ Em xin chân thành c m ả n ơ cô !
Thiết kế web và đồ họa Trang | iv Tr ng Đ ườ ại h c Hoa Sen ọ DANH M DANH M C CÁC HÌNH H NH Hình 3.1. 1: Ch p l
ụ ại hình trang chủ.................................................................................4 Hình 3.1. 2 Code html c a ph ủ ần slider hình nh
ả ................................................................5
Hình 3.1. 3: Hình html c a ph ủ ần slider c a hình ủ nh
ả .........................................................5 Hình 3.1. 4: Code html c a ph ủ n "Chúng tôi là ai" ầ
.............................................................5
Hình 3.1. 5: Code css của ph n " chúng tôi là ai" ầ
..............................................................6 Hình 3.1. 6: Code css c a ph ủ n " Chúng tôi là ai" ầ
..............................................................6 Hình 3.1. 7: Code html c a ph ủ n "Hãy l ầ a ch ự n
ọ Hihome vì"...............................................7 Hình 3.1. 8: Code html c a ph ủ n " Hãy l ầ a ch ự
ọn Hihome vì"..............................................7 Hình 3.1. 9: Code css c a ph ủ n "Hãy l ầ a ch ự n
ọ Hihome vì".................................................8 Hình 3.1. 10: Code css c a ủ ph n " Hãy l ầ a ch ự n Hihome vì" ọ
..............................................8
Hình 3.1. 11: Code html c a ph ủ n " Chúng tôi đã có" ầ
........................................................9
Hình 3.1. 12: Code html c a ph ủ n "Chúng tôi đã có" ầ
.........................................................9 Hình 3.1. 13: Code css c a
ủ ph n " Chúng tôi đã có" ầ
........................................................10 Hình 3.1. 14: Code css c a
ủ ph n "Chúng tôi đã có " ầ
........................................................10
Hình 3.1. 15: Code html c a ph ủ n "Các lĩnh v ầ c ho ự t ạ đ ng c ộ a doanh nghi ủ p" ệ ................11
Hình 3.1. 16: Code html c a ph ủ n "Các lĩnh v ầ c ho ự t ạ đ ng c ộ a doanh nghi ủ p” ệ ................11 Hình 3.1. 17: Code css c a ủ ph n "Các lĩnh v ầ c ho ự t d ạ ng c ộ a doanh nghi ủ p ệ "..................12 Hình 3.1. 18: Code css c a ủ ph n "Các lĩnh v ầ c ho ự t đ ạ ng c ộ a doanh nghi ủ p" ệ ..................12
Hình 3.1. 19: Code html c a ph ủ n "Quy trình làm vi ầ c c ệ a doanh nghi ủ p" ệ .......................13
Hình 3.1. 20: Code html c a ph ủ n "Quy trình làm vi ầ c c ệ a doanh nghi ủ p" ệ .......................13 Hình 3.1. 21: Code css c a ủ ph n "Quy trình làm vi ầ c c ệ a doanh nghi ủ p"
ệ .........................14 Hình 3.1. 22: Code css c a ủ ph n "Quy trình làm vi ầ c c ệ a doanh nghi ủ p"
ệ .........................14
Hình 3.1. 23: Code html c a ph ủ n “Liên h ầ ngay v ệ i HiHome” ớ
.........................................15
Hình 3.1. 24: Code html c a ph ủ n “Liên h ầ ngay v ệ i HiHome” ớ
.........................................15 Hình 3.2. 1: Ch p l ụ i liên h ạ ệ Hình 3.2. 2: Code html c a ph ủ n thông tin c ầ a HiHome – phía bên trái ủ Hình 3.2. 3: Code html c a ph ủ n thông tin c ầ a HiHome – phía bên trái ủ Hình 3.2. 4: Code css c a ph ủ n thông tin c ầ a HiHome – phía bên trái ủ Hình 3.2. 5: Code html c a ph ủ n đi ầ
n thông tin khách hàng – phía bên ph ề i ả Hình 3.2. 6: Code css c a ph ủ n đi ầ
n thông tin khách hàng – phía bên ph ề i ả Hình 3.3. 1 Ch p l ụ i hình trang phong cách thi ạ t k ế / phong cách hi ế n đ ệ i ạ .......................20 Hình 3.3. 1 Ch p l ụ i hình trang phong cách thi ạ t k ế / phong cách hi ế n đ ệ i ạ .......................20 Hình 3.3. 2 Code html c a ủ ph n title và hình ầ nh đ ả u trang ầ
............................................21 Hình 3.3. 3 Code html c a ủ ph n title và hình ầ nh đ ả u trang ầ
............................................21 Hình 3.3. 4 Code html c a ủ ph n ầ “Phong cách thi t ế k ế n i ộ th t ấ hi n ệ đ i ạ và nh ng ữ đi u ề c n ầ bi t”
ế .............................................................................................................................21 Hình 3.3. 5 Code html c a ủ ph n ầ “Phong cách thi t ế k ế n i ộ th t ấ hi n ệ đ i ạ và nh ng ữ đi u ề c n ầ bi t”
ế .............................................................................................................................22 Hình 3.3. 6 Code html c a ủ ph n ầ “Phong cách thi t ế k ế n i ộ th t ấ hi n ệ đ i ạ và nh ng ữ đi u ề c n ầ bi t”
ế .............................................................................................................................22 Hình 3.3. 7 Code html c a ủ ph n “Đôi nét v ầ phong cách thi ề t k ế n ế i th ộ t hi ấ n ệ đ i” ạ .........23 Hình 3.3. 8 Code html c a ủ ph n “Đ ầ c tr ặ ng c ư a phong cách thi ủ t k ế n ế i th ộ t hi ấ n đ ệ i” ạ ...23 Hình 3.3. 9 Code css c a ủ ph n “Đ ầ c tr ặ ng c ư a phong cách thi ủ t k ế n ế i th ộ t ấ hi n đ ệ i ạ ......24 Hình 3.3. 10 Code css c a ủ ph n “Đ ầ c tr ặ ng c ư a phong cách thi ủ t k ế n ế i th ộ t ấ hi n đ ệ i” ạ ...25 Hình 3.3. 11 Code html c a ph ủ n “Liên h ầ ” - ệ cu ở i trang ố
...............................................25 Hình 3.3. 12 Code html c a ph ủ n “Liên h ầ ” - ệ cu ở i trang ố
...............................................26
Thiết kế web và đồ họa Trang | v Tr ng Đ ườ ại h c Hoa Sen ọ Hình 3.3. 13 Code html c a ph ủ n “Liên h ầ ” - ệ cu ở i trang ố
...............................................26 Hình 3.3. 14 Code html c a ph ủ n “Liên h ầ ” - ệ cu ở i trang ố
...............................................27 Hình 3.3. 15 Ch p l ụ i hình trang phong cách thi ạ t k ế / phong cách Indochine ế ...................28 Hình 3.3. 15 Ch p l ụ i hình trang phong cách thi ạ t k ế / phong cách Indochine ế ...................28 Hình 3.3. 16 Code html c a ph ủ n hình ầ nh và title đ ả u trang ầ
..........................................29 Hình 3.3. 17 Code css c a ủ ph n hình ầ nh và title đ ả u tran ầ
g............................................29 Hình 3.3. 18 Code html c a ph ủ n “Gi ầ i thi ớ u v ệ khái ni ề m thi ệ t k ế Indochine ế ..................29 Hình 3.3. 19 Code css c a ủ ph n “Gi ầ i thi ớ u v ệ khái ni ề m thi ệ t k ế Indochine” ế ..................30 Hình 3.3. 20 Code html c a ph ủ n “Tìm hi ầ u sâu v ể phong cách Indochine” ề ......................30 Hình 3.3. 21 Code css c a ủ ph n “Tìm hi ầ u sâu v ể phong cách Indochine” ề ........................30 Hình 3.3. 22 Code html c a ủ ph n ầ “Đ c ặ tr ng ư c a ủ phong cách thi t ế k ế n i ộ th t ấ Indochine”
....................................................................................................................................31 Hình 3.3. 23 Code css c a ủ ph n “Đ ầ c tr ặ ng c ư a phong cách thi ủ t k ế n ế i th ộ t ấ Indochine”.31 Hình 3.3. 24 Code css c a ủ ph n “Đ ầ c tr ặ ng c ư a phong cách thi ủ t k ế n ế i th ộ t ấ Indochine”.32 Hình 3.3. 25 Code html c a ph ủ n “Liên h ầ ” - ệ cu ở i trang ố
...............................................32 Hình 3.3. 26 Code css c a ủ ph n “Liên h ầ ” - ệ cu ở i trang ố
.................................................33 Hình 3.3. 27 Code css c a ủ ph n “Liên h ầ ” - ệ cu ở i trang ố
.................................................33 Hình 3.3. 28 Code css c a ủ ph n “Liên h ầ ” - ệ cu ở i trang ố
.................................................34
Hình 3.4. 1 Giao diện ph n đ ầ u trang v ầ hi-home ề
Hình 3.4. 2 Giao diện ph n cu ầ i trang v ố hi-home ề
Hình 3.4. 2 Giao diện ph n cu ầ i trang v ố hi-home ề Hình 3.4. 3 M c v ụ chúng tôi ề Hình 3.4. 4 M c công ty n ụ i th ộ t ấ hi-home NL decor Hình 3.4. 4 M c công ty n ụ i th ộ t ấ hi-home NL decor Hình 3.4. 5 M c ph ụ ương châm ho t đ ạ ng. ộ Hình 3.4. 5 M c ph ụ ương châm ho t đ ạ ng. ộ Hình 3.4. 6 M c css trang v ụ hi-home ề Hình 3.4. 7 Giao di n tran ệ g t m nhìn và s ầ m ứ nh ph ệ n đ ầ u ầ Hình 3.4. 8 Giao di n tran ệ g t m nhìn và s ầ m ứ nh ph ệ n gi ầ a ữ Hình 3.4. 8 Giao di n tran ệ g t m nhìn và s ầ m ứ nh ph ệ n gi ầ a ữ Hình 3.4. 9 Giao di n tran ệ g tầm nhìn và s m ứ nh ph ệ n cu ầ i ố Hình 3.4. 9 Giao di n tran ệ g tầm nhìn và s m ứ nh ph ệ n cu ầ i ố Hình 3.4. 10 Html ph n đ ầ u trang t ầ m nhìn và s ầ ứ m nh ệ Hình 3.4. 10 Html ph n đ ầ u trang t ầ m nhìn và s ầ ứ m nh ệ Hình 3.4. 11 Html ph n gi ầ a ữ trang t m nhìn và s ầ m ứ nh ệ Hình 3.4. 12 Html ph n cu ầ i trang t ố m nhìn và s ầ ứ m nh ệ Hình 3.4. 12 Html ph n cu ầ i trang t ố m nhìn và s ầ ứ m nh ệ
Hình 3.4. 13 Css tiêu đ màu xanh lá ề Hình 3.4. 14 Giao di n ph ệ n đ ầ u trang ch ầ t l ấ ng và d ượ ch ị vụ Hình 3.4. 15 Giao di n ph ệ n cu ầ i trang ch ố t l ấ ng ượ và d ch v ị ụ Hình 3.4. 15 Giao di n ph ệ n cu ầ i trang ch ố t l ấ ng ượ và d ch v ị ụ
Hình 3.4. 16 HTML c a trang ch ủ t l ấ ng ượ và d ch v ị ụ
Hình 3.4. 17 HTML c a trang ch ủ t l ấ ng ượ và d ch v ị ụ
Hình 3.4. 17 HTML c a trang ch ủ t l ấ ng ượ và d ch v ị ụ
Hình 3.4. 18 HTML c a trang ch ủ t l ấ ng ượ và d ch v ị ụ
Hình 3.4. 18 HTML c a trang ch ủ t l ấ ng ượ và d ch v ị ụ Hình 3.4. 19 CSS c a tr ủ ang ch t l ấ ng và d ượ ch v ị ụ Hình 3.4. 20 Giao di n tran ệ g thi t k ế và công trình ế
Thiết kế web và đồ họa Trang | vi Tr ng Đ ườ ại h c Hoa Sen ọ Hình 3.4. 21 Giao di n tran ệ g thi t k ế và công trình ế Hình 3.4. 22 HTML của thi t ế k và công trình ế Hình 3.4. 23 HTML của thi t ế k và công trình ế Hình 3.4. 24 HTML của thi t ế k và công trình ế
Hình 3.4. 25 CSS của thi t k ế và công trình ế
Hình 3.4. 26 CSS của thi t k ế và công trình ế
Hình 3.4. 27 CSS của thi t k ế và công trình ế
Hình 3.4. 28 CSS của thi t k ế và công trình ế
Hình 3.4. 29 CSS của thi t k ế và công trình ế Hình 3.5. 1 Ch p l ụ i hình trang d ạ án v ự cafe ề Hình 3.5. 2 Ch p l ụ i hình trang d ạ án v ự cafe ề Hình 3.5. 3 Ch p l ụ i hình trang d ạ án v ự cafe ề
Hình 3.5. 4 Code html baner đ u tr ầ ang cafe Hình 3.5. 5 Code html d ự án đã th c ự hi n ệ Hình 3.5. 6 Banner căn hộ Hình 3.5. 7 Các lo i căn h ạ ộ Hình 3.5. 8 N i th ộ t trong căn h ấ ộ Hình 3.5. 9 các m u thi ẫ t ế kế Hình 3.5. 10 CSS căn hộ Hình 3.5. 11 banner căn hộ
Hình 3.5. 12 html các lo i căn h ạ ộ
Hình 3.5. 13 html các m u thi ẫ t k ế ế
Hình 3.5. 14 Hình trang web nhà phố Hình 3.5. 15 Các d án th ự c t ự đã th ế c hi ự n ệ Hình 3.5. 16 html v nhà ph ề ố Hình 3.5. 17 html v các d ề án đã th ự c hi ự n ệ Hình 3.5. 18 CSS c a nhà ph ủ ố
Hình 3.5. 19 Banner trang web bi t th ệ ự
Hình 3.5. 20 khách hàng c a Hihome ủ Hình 3.5. 21 D án c ự a khách hàng ủ
Hình 3.5. 22 html banner trang bi t t ệ hự
Hình 3.5. 23 html khách hàng c a Hihome ủ Hình 3.5. 24 html d án c ự a khách hàng ủ Hình 3.5. 25 CSS c a trang bi ủ t th ệ ự Y
Thiết kế web và đồ họa Trang | vii Tr ng Đ ườ ại h c Hoa Sen ọ DANH M DANH M C CÁC B C CÁC B NG BI NG BI U B ng 1: Phân công nhi ả m v ệ
ụ..............................................................................1
Thiết kế web và đồ họa Trang | viii D D N NH N NH P Lý do ch n đ ọ tài ề Dân số n c
ướ ta ngày càng đông, đ i ờ s ng ố con ng i
ườ ngày càng cao, kéo theo nhu c u ầ nhà ở ngày càng l n, ớ bên cạnh đó con ng i ườ ph i ả ch y ạ theo th i ờ gian m i ớ hòa nhập vào sự phát tri n ể c a ủ xã h i, ộ từ đó nhu c u ầ đ c ượ nghỉ ng i, ơ th ư giãn c n ầ ph i ả u ư tiên đ t ặ lên hàng đ u cho ầ vi c ệ thi t ế k không gian ế đ ể . Do v ở y ậ , vi c thi ệ t ế kế m t ộ không gian đ p ẹ , hi n ệ đ i, ạ l c ị h lãm chuyên nghi p ệ chi m ế m t ộ vai trò r t ấ quan tr ng không th ọ thi ế u trong đ ế i s ờ ng c ố a chúng ta. ủ Các m c tiêu c ụ ần đạt được Để tìm hi u sâu v ể ề đ ề tài đ đ ể a ư ra ý t ng ưở ng d ứ ng vào th ụ c ti ự n. Đ ễ a ra nhi ư u ề m u ẫ dự án thi t ế k , ế phong cách thi t ế kế cho khách hàng l a ự ch n. ọ S ự d n ụ g thành thạo ng d ứ n ụ g Dreamweaver. B ng phân công nhi ả m v ệ ụ Họ và Tên MSSV Nhi m ệ vụ Đ Th ỗ Thu Thúy ị 22123051 Dự án thi t
ế kế (cafe-nhà phố - bi t ệ thự - căn h ), ộ làm power point, báo cáo. Huỳnh Th Minh Th ị ư 22107126 Gi i ớ thi u ệ (Ch t ấ l n ượ g và d ch ị vụ - tầm nhìn và sứ m nh- ệ thi t ế kế và
công trình – vehihom), làm power point. Ngô Phan Ánh Dư ng ơ 22205274 Trang ch , ủ báo giá, liên h , ệ phong cách thi t ế kế (indochin – hi n ệ đại ),tổng h p ợ l i html. ạ
Bả ng 1: Phân công nhiệ m vụ Tên đ tài ề T r a n g | 1 1. 1. CÁC K CÁC K THU THU T THI T THI T K T K WEBSITE 1.1 CSS CSS cho phép b n đ ạ nh d ị ng các ạ HTML nh ư văn b n, ả hình nh, ả đ ng vi ườ n, ề ch nh ỉ font ch , ữ căn l , ề n n, ề kích th c ướ và v ịtrí c a ủ chúng trên trang web. B ng ằ cách áp d ng ụ các thu c ộ tính CSS, b n ạ có thể t o ạ ra giao di n ệ đ ng ồ nhất và h p d ấ n cho tr ẫ ang 1.2 INSERT IMAGE Tr c ướ khi mu n ố chèn hình nh vào ả trang web, b n ạ nên chép t t ấ c các ả hình nh ả cần chèn vào thư m c ụ Image c a ủ bộ web. Vi c ệ l a ự ch n ọ hình nh ả để
chèn vào trang web cũng ph i ả chú ý đ n ế s ố l ng ượ và kích th c ướ c a ủ nh vì ả nếu chèn quá nhi u ề ho c ặ nh ả quá l n ớ s làm ẽ cho trang web có d ng l ụ ng ượ l n, ớ vi c ệ t i ả về xem cũng ch m ậ h n. ơ Để th c ự hi n ệ vi c ệ chèn hình nh ả vào trang web, b n ạ làm nh ư sau: vào Insert, ch n ọ Image và tìm đ n ế hình nh ả mu n chèn . ố 1.3 HYPERLINK Là nh ng ữ gì cho phép b n ạ liên k t ế tài li u ệ này v i ớ các tài li u ệ khác ho c ặ tài
nguyên khác thông qua các l n l ầ p ặ l i đ ạ c ượ g i là “th ọ ” ẻ . Đó là m t khái ộ ni m
ệ cơ bản đằng sau World Wide Web giúp đi u h ề ng gi ướ a các tra ữ ng web d
ễ dàng h n thông qua các Link. ơ 1.4 BORDER Đ c ượ sử d ng ụ để chỉ đ nh ị ki u ể đ ng ườ biên mà b n ạ mu n ố hi n ể thị trên trang web. Nó chỉ đ nh ị không có b t ấ kỳ đ ng ườ vi n ề nào đ c ượ đ nh ị nghĩa. Nó đ c ượ sử d ng ụ để xác đ nh ị m t ộ đ ng ườ vi n ề là các d u ấ ch m ấ (dotted). Nó đ c s ượ d ử ng đ ụ ể xác đ nh m ị t đ ộ ng vi ườ n dashed. ề 1.4 TABLE Table là m t ộ đ nh ị d ng ạ dùng để hi n ể thị dữ li u ệ ở d ng ạ danh sách. M i ỗ table sẽ đ c ượ chia ra g m ồ hai thành ph n ầ là hàng và c t, ộ -Trong HTML chúng đ c t ượ o ra ạ b i các th ở table , tr ,th, td , tbod ẻ y , thead , tfood . Tên đ tài ề T r a n g | 2