BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

KHOA CÔNG NGHỆ THÔNG TIN



BÁO CÁO ĐỒ ÁN THIẾT KẾ WEB

(Báo cáo lần 1)

Giảng viên hướng dẫn: BÙI DUY TÂN

Sinh viên thực hiện: NGÔ CÔNG HUÂN
MSSV: 2000002680
Lớp: 22DTH3B
Môn học: Thiết kế web
Khoá: 2022

Tp.HCM, tháng 8 năm 2023

 LỜI CẢM ƠN
Đầu tiên, em xin gửi lời cảm ơn chân thành đến Trường Đại học Nguyễn Tất Thành
vì đã tạo điều kiện thuận lợi cho em trong quá trình học tập và hoàn thành Đồ án Thiết
kế web. Đặc biệt, em xin bày tỏ lòng biết ơn sâu sắc đến Thầy Bùi Duy Tân - người đã
trực tiếp hướng dẫn em trong đồ án này.
Thầy Bùi Duy Tân đã dành thời gian và công sức để truyền đạt cho em kiến thức
cơ bản về cách thiết kế và tạo ra một website. Thầy cũng đã tận tình hướng dẫn em các
kỹ năng viết code một cách rõ ràng và dễ hiểu.
Mặc dù đã cố gắng hoàn thành đồ án trong phạm vi và khả năng của bản thân
nhưng chắc chắn sẽ không tránh khỏi những thiếu sót. Em rất mong nhận được sự thông
cảm, góp ý và tận tình chỉ bảo của Thầy để đề tài ngày càng hoàn thiện hơn.
Em rất biết ơn vì tất cả những gì Thầy đã làm cho em trong quá trình thực hiện Đồ
án Thiết kế web này. Kiến thức và kinh nghiệm quý báu mà Thầy đã truyền đạt sẽ luôn
là nguồn động lực và cảm hứng cho em trong công việc tương lai.
Một lần nữa, em xin chân thành cảm ơn Thầy Bùi Duy Tân và hy vọng rằng Thầy
sẽ tiếp tục hỗ trợ và truyền cảm hứng cho thế hệ mai sau trong lĩnh vực Thiết kế web.
 MỤC LỤC
CHƯƠNG 1: TỔNG QUAN VỀ WEBSITE..........................................................................................1
CHƯƠNG 2: SƠ ĐỒ TỔ CHỨC LƯU TRỮ.........................................................................................3
CHƯƠNG 5: GIAO DIỆN VÀ TÀI NGUYÊN WEBSITE...................................................................6
5.1. Giao diện website............................................................................................................................6
5.2. Tài nguyên website..........................................................................................................................6
 DANH MỤC HÌNH ẢNH
Hình 2.1. Cấu trúc thư mục gốc (Root Folder) NanaWebsite.....................................................................3
Hình 3.1. Sơ đồ liên kết của website..........................................................................................................4
Hình 4.1. Home Layout của website..........................................................................................................5
 CHƯƠNG 1: TỔNG QUAN VỀ WEBSITE
Tên của website đồ án: Nana
Đây là website giới thiệu tập trung vào việc cung cấp thông tin cơ bản của quán trà
sữa như lịch sử ra đời, menu và địa chỉ...
Website được chia thành các trang sau:
 Trang chủ:
o Giới thiệu sơ về Nana.
o Cung cấp thông tin nổi bật về các sản phẩm đặc trưng.
o Các tin tức và ưu đãi của quán.
 Giới thiệu:
o Chia sẻ câu chuyện về Nana, bao gồm lịch sử, triết lý và tầm nhìn của
thương hiệu.
o Trình bày các giá trị và cam kết của Nana đối với khách hàng.
 Tin tức:
o Cung cấp thông tin về tin tức, sự kiện và các cập nhật mới nhất liên quan
đến Nana.
o Cập nhật về các sản phẩm mới, chiến dịch tiếp thị hoặc thông tin về mùa
hàng đặc biệt.
o Liệt kê các ưu đãi, khuyến mãi và chương trình giảm giá đặc biệt từ
Nana.
 Thực đơn:
o Liệt kê các loại trà sữa và các sản phẩm khác được cung cấp bởi Nana.
o Cung cấp mô tả chi tiết về từng sản phẩm, bao gồm hình ảnh và thông tin
về thành phần.
 Cửa hàng:
o Liệt kê các địa điểm cửa hàng của Nana.
o Cung cấp thông tin về địa chỉ, giờ mở cửa và các tiện ích khác tại mỗi
cửa hàng.
1
 o Cung cấp bản đồ hướng dẫn đi lại đến từng cửa hàng.
 Tuyển dụng:
o Giới thiệu về quá trình tuyển dụng và các vị trí tuyển dụng hiện đang mở
của Nana.
o Cung cấp thông tin về các yêu cầu công việc, mô tả công việc và quy
trình nộp đơn.
o Hướng dẫn cho người quan tâm nộp đơn xin việc hoặc liên hệ với đội
ngũ tuyển dụng.
 Liên hệ:
o Cung cấp thông tin liên hệ: địa chỉ, số điện thoại, email.
o Cung cấp mẫu liên hệ trực tuyến để khách hàng có thể gửi câu hỏi, phản
hồi hoặc yêu cầu hỗ trợ.

2
 CHƯƠNG 2: SƠ ĐỒ TỔ CHỨC LƯU TRỮ

Hình 2.1. Cấu trúc thư mục gốc (Root Folder) NanaWebsite

Mô tả chi tiết thư mục gốc NanaWebsite:

 Thư mục gốc (NanaWebsite):
o “Nana.html” là trang chủ của trang web.
o Thư mục “css” chứa các file định dạng css.
o Thư mục “js” chứa các file javascript.
o Thư mục “images” chứa các tệp hình ảnh của website.
o Thư mục “pages” chứa các tệp html của các trang như “gioi_thieu.html”,
“tin_tuc.html”, “thuc_don.html”, “cua_hang.html”, “tuyen_dung.html”,
“lien_he.html”.

3
 CHƯƠNG 3: SƠ ĐỒ LIÊN KẾT CỦA WEBSITE

Hình 3.1. Sơ đồ liên kết của website

4
 CHƯƠNG 4: LAYOUT CỦA WEBSITE

Hình 4.1. Home Layout của website

Các trang web sử dụng Home Layout: Trang chủ, Giới thiệu, Tin tức, Thực đơn,
Cửa hàng, Tuyển dụng.

5
 CHƯƠNG 5: GIAO DIỆN VÀ TÀI NGUYÊN WEBSITE
5.1. Giao diện website
Công cụ hỗ trợ thiết kế giao diện website: Figma, Adobe Photoshop,…
Các nguồn giao diện tham khảo:
 Cánh Cam - Web Design Agency uy tín chuyên nghiệp TPHCM. (n.d.)
https://www.canhcam.vn/
 Dribbble - discover the world’s top designers & creative professionals.
(n.d.). https://dribbble.com/following
 Free Figma Component Library. (n.d.). Figcomponents.
https://www.figcomponents.com/
 Free UI Kit for Figma. (n.d.). Free Figma UI Kits, 3D assets, Icon set,
illustration set, and Design systems. https://figmaui4free.com/
5.2. Tài nguyên website
Các hình ảnh trong website được lấy từ trang web:
 Facebook. (n.d.). https://www.facebook.com/tiemtranana