Báo cáo đề án thiết kế web và đồ họa - tài liệu tham khảo | Đại học Hoa Sen

Báo cáo đề án thiết kế web và đồ họa - tài liệu tham khảo | Đại học Hoa Sen và thông tin bổ ích giúp sinh viên tham khảo, ôn luyện và phục vụ nhu cầu học tập của mình cụ thể là có định hướng, ôn tập, nắm vững kiến thức môn học và làm bài tốt trong những bài kiểm tra, bài tiểu luận, bài tập kết thúc học phần, từ đó học tập tốt và có kết quả cao cũng như có thể vận dụng tốt những kiến thức mình đã học.

12 6 lượt tải Tải xuống
Chia sẻ Báo cáo tài liệu

Môn: Digital marketing

Trường: Đại học Hoa Sen

Thông tin:

71 trang 1 tuần trước

Tác giả:

Profile Kim Oanh
KHOA KINH TẾ QUẢN TRỊ
NGÀNH DIGITAL MARKETING
LỚP 2234
BÁO CÁO ĐỀ ÁN
THIẾT KẾ WEB VÀ ĐỒ HỌA
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ẾT
KẾ
NỘI
THẤT
Trường Đại học Hoa Sen
TRÍCH YẾU
1. Mục tiêu nghiên cứu:
Tạo nên một website cơ bản cho một doanh nghiệp thiết kế nội thất
bao gồm đầy đủ thông tin chức năng của một website cơ bản.
2. Đối tượng nghiên cứu:
Website của doanh nghiệp thiết kế - thi công nội thất .HiHome
3. Phương pháp nghiên cứu:
- Phương pháp nghiên cứu tài liệu
- Phương pháp phân tích tổng kết kinh nghiệm
4. Kết quả nghiên cứu:
Thứ nhất, bài báo cáo giúp cho chúng ta hiểu được cách thức tạo
nên một trang web cho một doanh nghiệp thông qua phần mềm
Dreamweaver.
Thứ hai, từ bài báo cáo có thể rút ra được các kinh nghiệm và kiến
thức về thiết kế web.
Thiết kế web và đồ họa | iTrang
Trường Đại học Hoa Sen
MỤC LỤC
TRÍCH YẾU.................................................................................i
MỤC LỤC..................................................................................ii
LỜI CẢM ƠN.............................................................................iv
DANH MỤC CÁC HÌNH ẢNH.........................................................v
DANH MỤC CÁC BẢNG BIỂU.....................................................viii
DẪN NHẬP................................................................................1
1. CÁC KỸ THUẬT THIẾ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. CÁC CÔNG CỤ ĐÃ SỬ DỤNG...................................................3
2.1. Adobe Dreamweaver.......................................................................3
2.2. Adobe Photoshop.............................................................................3
3. NỘI DUNG CHÍNH CỦA WEBSITE............................................4
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................................................................44
Thiết kế web và đồ họa | iiTrang
Trường Đại học Hoa Sen
3.5 DỰ ÁN THIẾT KẾ...............................................................................52
3.5.1 Chụp lại hình trang dự án về cafe..............................................53
3.5.2 Code html và css cuả trang dự án về cafe.................................54
3.5.3 Chụp lại hình trang dự án về căn hộ..........................................55
3.5.4 Code html và css cuả trang dự án về căn hộ.............................56
3.5.5 Chụp lại hình trang dự án về nhà phố........................................57
3.5.6 Code html và css cuả trang dự án về nhà phố...........................58
3.5.7 Chụp lại hình trang dự án về nhà...............................................59
3.5.8 Code html và css cuả trang dự án về biệt thự...........................60
4. HƯỚNG DẪN SỬ DỤNG WEB SITE.........................................61
KẾT LUẬN...............................................................................62
TÀI LIỆU THAM KHẢO...............................................................63
Thiết kế web và đồ họa | iiiTrang
Trường Đại học Hoa Sen
LỜI CẢ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. 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 | ivTrang
Trường Đại học Hoa Sen
DANH MỤC CÁC HÌNH Ả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. 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
Thiết kế web và đồ họa | vTrang
Trường Đại học Hoa Sen
Hình 3.3. 12 Code html của phần “Liên hệ” - ở cuối trang...................................26
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. 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. 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
Hình 3.4. 21 Giao diện trang thiết kế và công trình
Thiết kế web và đồ họa | viTrang
Trường Đại học Hoa Sen
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ự
Thiết kế web và đồ họa | viiTrang
Trường Đại học Hoa Sen
DANH MỤC CÁC BẢNG BIỂU
Bảng 1: Phân công nhiệm vụ......................................................................1
Thiết kế web và đồ họa | viiiTrang
DẪ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ị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 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ế (indochine –
hiện đại), header, footer, tổng
hợp lại các trang web, báo cáo
(3.1; 3.2; 3.3; 4.; Kết luận; Trích
yếu)
Bảng 1: Phân công nhiệm vụ
Tên đề tài | 1T r a n g
1. CÁC KỸ THUẬT THIẾ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 trang
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ẻ
<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
Đượ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 , tbody ,
thead , tfood .
Tên đề tài | 2T r a n g
| 1/71
| | Tải xuống

Có thể bạn quan tâm:

Preview text:

KHOA KINH TẾ QUẢN TRỊ NGÀNH DIGITAL MARKETING LỚP 2234 BÁO CÁO ĐỀ ÁN
THIẾT KẾ WEB VÀ ĐỒ HỌA Tên đề tài: THIẾT KẾ 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
1. Mục tiêu nghiên cứu:
Tạo nên một website cơ bản cho một doanh nghiệp thiết kế nội thất
bao gồm đầy đủ thông tin chức năng của một website cơ bản.
2. Đối tượng nghiên cứu:
Website của doanh nghiệp thiết kế - thi công nội thất HiHome.
3. Phương pháp nghiên cứu:
- Phương pháp nghiên cứu tài liệu
- Phương pháp phân tích tổng kết kinh nghiệm
4. Kết quả nghiên cứu:
Thứ nhất, bài báo cáo giúp cho chúng ta hiểu được cách thức tạo
nên một trang web cho một doanh nghiệp thông qua phần mềm Dreamweaver.
Thứ hai, từ bài báo cáo có thể rút ra được các kinh nghiệm và kiến thức về thiết kế web.
Thiết kế web và đồ họa Trang | i Trường Đại học Hoa Sen MỤC LỤC
TRÍCH YẾU.................................................................................i
MỤC LỤC..................................................................................ii
LỜI CẢM ƠN.............................................................................iv
DANH MỤC CÁC HÌNH ẢNH.........................................................v
DANH MỤC CÁC BẢNG BIỂU.....................................................viii
DẪN NHẬP................................................................................1
1. CÁC KỸ THUẬT THIẾ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. CÁC CÔNG CỤ ĐÃ SỬ DỤNG...................................................3
2.1. Adobe Dreamweaver.......................................................................3
2.2. Adobe Photoshop.............................................................................3
3. NỘI DUNG CHÍNH CỦA WEBSITE............................................4
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................................................................44
Thiết kế web và đồ họa | ii Trang Trường Đại học Hoa Sen
3.5 DỰ ÁN THIẾT KẾ...............................................................................52
3.5.1 Chụp lại hình trang dự án về cafe..............................................53
3.5.2 Code html và css cuả trang dự án về cafe.................................54
3.5.3 Chụp lại hình trang dự án về căn hộ..........................................55
3.5.4 Code html và css cuả trang dự án về căn hộ.............................56
3.5.5 Chụp lại hình trang dự án về nhà phố........................................57
3.5.6 Code html và css cuả trang dự án về nhà phố...........................58
3.5.7 Chụp lại hình trang dự án về nhà...............................................59
3.5.8 Code html và css cuả trang dự án về biệt thự...........................60
4. HƯỚNG DẪN SỬ DỤNG WEB SITE.........................................61
KẾT LUẬN...............................................................................62
TÀI LIỆU THAM KHẢO...............................................................63
Thiết kế web và đồ họa | iii Trang Trường Đại học Hoa Sen LỜI CẢ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. 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ỤC CÁC HÌNH Ả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. 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
Thiết kế web và đồ họa | v Trang Trường Đại học Hoa Sen
Hình 3.3. 12 Code html của phần “Liên hệ” - ở cuối trang...................................26
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. 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. 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
Hình 3.4. 21 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. 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ự
Thiết kế web và đồ họa | vii Trang Trường Đại học Hoa Sen
DANH MỤC CÁC BẢNG BIỂU
Bảng 1: Phân công nhiệm vụ......................................................................1
Thiết kế web và đồ họa | viii Trang DẪ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ị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 22107126
Giới thiệu (Chất lượng và dịch vụ Thư
- tầm nhìn và sứ mệnh- thiết kế
và công trình – vehihom), làm power point. Ngô Phan Ánh 22205274
Trang chủ, báo giá, liên hệ, Dương
phong cách thiết kế (indochine –
hiện đại), header, footer, tổng
hợp lại các trang web, báo cáo
(3.1; 3.2; 3.3; 4.; Kết luận; Trích yếu)
Bảng 1: Phân công nhiệm vụ Tên đề tài T r a n g | 1
1. CÁC KỸ THUẬT THIẾ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 trang 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 trang 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 , tbody , thead , tfood . Tên đề tài T r a n g | 2