TangXuanDiep 2110a01 BTL Thiet ke Web site ban may tinh

ĐẠI HỌC MỞ HÀ NỘI
KHOA CÔNG NGHỆ THÔNG TIN
----------------------

BÁO CÁO BÀI TẬP LỚN
MÔN: THIẾT KẾ WEB
ĐỀ TÀI:
“Thiết Kế Giao Diện Website Bán Thiết Bị Điện Tử”

Giảng viên hướng dẫn: ThS. Nguyễn Thị Quỳnh Như
Sinh viên thực hiện : Tăng Xuân Điệp
Lớp
: 2110A01

Hà Nội – năm 2022


I, GIỚI THIỆU
1. Lý do chọn đề tài
Ngày nay với sự phát triển mạnh mẽ của công nghệ thông tin và những
ứng dụng của nó trong đời sống. Máy tính điện tử khơng cịn là một thứ phương
tiện lạ lẫm đối với mọi người mà nó dần trở thành cơng cụ làm việc và giải trí
thơng dụng và hữu ích của chúng ta, không chỉ trong công sở mà ngay trong cả
gia đình.
Trong nền kinh tế hiện nay, với xu thế tồn cầu hóa nền kinh tế thế giới,
mọi mặt của đời sống xã hội này càng được nâng cao, đặc biệt là nhu cầu trao
đổi hàng hóa của con người ngày càng tăng cả về số lượng và chất lượng. Hiện
nay các công ty tin học hàng đầu thế giới không ngừng đầu tư và cải thiện giải
pháp cũng như các sản phẩm nhằm cho phép tiến hành thương mại hóa trên
INTERNET. Thơng qua các sản phẩm và cơng nghệ này, chúng ta dễ dàng nhận
ra tầm quan trọng và tính tất yếu của thương mại điện tử. Với những thao tác cơ

bản trên máy tính có INTERNET bạn sẽ có tận tay những gì mình cần mà khơng
phải mất nhiều thời gian. Bạn chỉ cần vào các trang thương mại điện tử, làm
theo hướng dẫn và mua những gì mình cần. Các nhà dịch vụ sẽ mang đến tận
nhà cho bạn.
Một công ty, một cá nhân, tổ chức hay sàn thương mại điện tử cần một
trang web để có thể triển khai mơ hình bán thiết bị điện tử online.
2. Mục đích của đề tài
Hiện nay có rất nhiều công ty sản xuất thiết bị điện tử, linh kiện máy tính
hầu hiết các cơng ty đều có trang web giới thiệu sản phẩm và được thiết kế riêng
biệt theo cách của họ. Nhưng các trang web thương mại điện tử đều là của bên
thứ ba nhập về và phân phối. Vì vậy có rất nhiều trang web khác nhau với nhiều
úng dụng khác nhau. Hầu hết các trang web sẽ cập nhật nhanh nhất những sản
phẩm mới nhất, hiện thị theo chủ đề riêng biệt và có rất nhiều chức năng như:
xem hàng, mua hàng, thanh toán,…
Trang web được thiết kế phải có giao diện sáng ưa nhin, dễ dàng truy cập,
giới thiệu những loại sản phẩm tốt nhất, không bao gồm mặt hàng kém chất
lượng,…
3. Kết quả mong đạt được
• Bản thiết kế đẹp có đầy đủ các chức năng :
 MENU: Trong menu chứa nhiều liên kết tới trang con, menu cấp 1,
menu cấp 2.
 Danh mục sản phẩm: mỗi loại sản phẩm sẽ được hiện thị và phân
loại theo: Laptop, Máy tính để bàn, phụ kiện laptop, phụ kiện máy
tính, thiết bị văn phịng,…..
 Hiện thị thông tin đây đủ: Tên sản phẩm, hãng, giá bán, tình trạng
sản phẩm,…..


 Phần đánh giá sản phẩm: cho người mua hàng biết thêm chi tiết về

các tính năng của mặt hàng
4. Kế hoạch thực hiện
• Kế hoạch thực hiện dựa trên tiến độ của giáo viên:
 Tuần 1: Nộp đề cương (ngày 16/02/2022), bản cứng (bìa theo mẫu
bài tập lớn của khoa, khơng sử dụng bìa bóng kính).
 Tuần 2: Nộp đề cương lần 2 đối với những bạn không đạt lần 1
(ngày 21/02/2022).
 Tuần 3: Nộp bản thiết kế trang chủ (ngày 28/02/2022) (gồm tất cả
các file .psd, .jpg).
 Tuần 4: Nộp bản thiết kế các trang con chính ( Ngày 07/03/2022)
(gồm tất cả các file .psd, .jpg).
 Tuần 5: Nộp website hoàn thiện theo thiết kế của tuần 3, 4 (gồm tất
cả các file .psd, .jpg, .html và file .doc báo cáo) (ngày 14/03/2022).
5. Các phần mềm sử dụng
• Phần mềm;
 Photoshop CC 2020
• Ngơn ngữ:
 HTML
 CSS
• Trình duyệt kiểm thử
 Google chrome

II, Ý TƯỞNG THIẾT KẾ
1. Xác định và phân tích u cầu
Cơng ty TXD là một nhà chuyên phân phối những thiết bị điện tử với
nhiều mặt hàng sản phẩm khác nhau như Laptop, máy tính để bàn, linh kiện
máy tính, thiết bị văn phịng,…
Với xu hướng cơng nghệ 4.0 hiện đại thì mọi người ai cũng có thể dễ
dàng truy cập Internet để tra cứu mọi thứ thơng qua các thiết bị như: máy tính,
smartphone, laptop,….

Công ty TXD cần một trang web để quảng bá, giới thiệu sản phẩm và đặc
biệt là bán các sản phẩm trên thị trường. Khách hàng mà công ty muốn hướng
tới:
 Từ 14 đến 35 tuổi: đó là lứa tuổi trẻ được sớm tiếp xúc với công
nghệ đặc biệt là khi đại dịch covid-19 hoành hành họ rất cần các
thiết bị như máy tính, laptop để có thể học, dạy và làm việc.
 Từ 36 đến 55 tuổi: Đây là lứa tuổi của thế hệ trước khi họ mới tiếp
xuc với công nghệ họ sẽ quan tâm nhiêu hơn về khả năng thuận tiên
đễ dàng sử dụng, hỗ trợ được nhiều cho đời sống hàng ngày.


Trang web sẽ được thiết kế phù hợp cho nhiều lứa tuổi khác nhau, sao cho
mỗi khách hàng sẽ tìm được sản phẩm ưng ý cho riêng mình.
Một số chức năng của trang góp bao gồm:
• Menu: Phần header có đầy đủ các đường dẫn đến trang con, thiết lập
menu con cấp 1, cấp 2.
• Đăng ký, đăng nhập
 Có các trang con tương ứng, cho phép khách hàng đăng ký, đăng
nhập.
• Trang chủ:
 Hiển thị sản phẩm theo các tính ứng dụng của sản phẩm.
 Có danh mục sản phẩm mới nhất, bán chạy nhất.
 Chương trình khuyến mãi.
 Giỏ hàng: bao gồm các sản phẩm của khách hàng đã chọn.
• Trang con:
 Các trang con bao gồm tin tức, chi tiết sản phẩm, mua hàng. Mỗi
trang sẽ có bố cục khác nhau.
 Ví dụ trang chi tiết sản phẩm: Hiện thị giá bán, tên hàng, mã sản
phẩm, hãng, giới thiệu và đánh giá về sản phẩm.
2. Phác thảo ý tưởng thiết kế

Trang web bán thiết bị điện tử của cơng ty TXD phải có giao diện đẹp, bố
cục hài hịa, nhìn bắt mặt. Trang web đáp ứng một số yêu cầu sau:
• Màu sắc chủ đạo là xanh dương đậm.
• Trang web được thiết kế linh hoạt với chiều dài và chiều rộng phù
hợp với màn hình các thiết bị máy tính, laptop……
• Phương pháp phối màu: bổ túc bộ ba.
• Tham khảo bảng màu:

Màu chủ đạo của trang web: #2555a7
Độ sâu của trang: 3
Số lượng trang web: 8.
Logo: sử dụng logo của công ty XuanComputer
Nền và chi tiết của logo màu đỏ nhạt.
Sử dụng phần mềm photoshop lên ý tưởng thiết kế, rồi chuyển cho
khách hàng nhìn nhận và đánh giá trang web. Bổ sung những thiếu sót,
chỉnh sửa sao cho phù hợp và tiện ích nhất.



•


-


-

-

Bộ phận thiết kế và bộ phận lập trình cần phải kết hợp ăn ý với nhau

để tạo nên trang web hồn thiện nhất có thể,đáp ứng nhu cầu của
khách hàng.
Giao diện thiết kế hoàn chỉnh nhất sẽ giao bên bộ phận lập trình và
kiểm thử trang web trên giao diện trình duyệt, thiết bị….
Trang web dự kiến hồn thành trong 1 tháng kể từ lúc lên ý tưởng.

3. Bố trí trang web
- Trang web được bố trí hài hịa giữa các phần menu danh mục các loại
sản phẩm.
- Các trang con được thiết kế:

Trang đăng ký

Trang đăng nhập

Trang tin tức

Trang tin tức chi tiết

Trang chủ
Trang giỏ hàng

Trang chính sách

Trang sản phẩm

4. Bố cục layout trang web
- Trang chủ cấp 1:

Trang sản phẩm chi tiết

-

Trang con cấp 2:
o Trang con sản phẩm


o Trang con đăng nhập

o Trang con đăng ký


o Trang con tin tức


o Trang con giỏ hàng


o Trang con chính sách


-

Trang con cấp 3:
o Trang chi tiết sản phẩm


o Trang chi tiết tin tức

III, SẢN PHẨM THIẾT KẾ
1. Trang chủ


2. Trang con cấp 2
2.1 Trang con sản phẩm


2.2 Trang con giỏ hàng


2.3 Trang con đăng nhập


2.4 Trang con đăng ký


2.5 Trang con chính sách


2.6 Trang con tin tức


2.7 Trang con tìm kiếm


3. Trang con cấp 3

3.1 Trang con sản phẩm chi tiết


3.2 Trang tin tức chi tiết

IV, KẾT LUẬN
Trang web được thiết kế với đề tài là website thương mại thiết bị điện tử, từng
trang web được thiết kế trên phần mềm Photoshop CC2020, sau đó liên kết trang
và xuất ra File HTML.
Trang web được thiết kế đúng với ý tưởng ban đầu, đầu đủ các trang con cấp 2,
cấp 3 với màu sắc chủ đạo là xanh đậm (#2555a7) nổi bật để lại nhiều ấn tượng,
bố cục hài hòa các lại thiết bị điện tử, sử dụng thanh thạo công cụ Photoshoptạo
nên một website đúng như mong muốn ban đầu.
Trang web hoàn thiện được tải lên địa chỉ sau:
/>

V, TÀI LIỆU THAM KHẢO
Giao diện trang web được tham khảo: