TRƯỜNG ĐẠI HỌC MỞ HÀ NỘIKHOA 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 CỬA HÀNG ĐIỆN THOẠI Giảng viên hướng dẫn: Nguyễn Thị Quỳnh Như...
Trang 1TRƯỜNG ĐẠ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 CỬA HÀNG
ĐIỆN THOẠI
Giảng viên hướng dẫn: Nguyễn Thị Quỳnh Như
Trang 2Sinh viên thực hiện :
Lê Đình Đức - 1910A02
Hà Nội – Năm 2021
I Giới thiệu.
1 Tên đề tài:
- Thiết kế giao diện website cửa hàng điện thoại
Thông tin sinh viên thực hiện:
- Họ và tên: Lê Đình Đức
- Lớp: 1910A02
Trang 3II Nội Dung.
1 Giới thiệu nội dung.
a) Lý do chọn đề tài:
Thế giới ngày càng phát triển, đời sống con người ngày càng hiện đại hóa, nhu cầu về đời sống vật chất và tinh thần ngày càng cao và có nhiều đòi hỏi khắt khe hơn
Hằng ngày mỗi người chúng ta đều phải có những nhu cầu thiết yếu như ăn uống, mua sắm, nghe nhạc, xem phim
Hiện nay thì nhu cầu mua sắm online ngày càng phát triển, tại nhà, tại nơi tại mọi thời điểm chúng ta đều có thể đặt hàng với đủ các sản phẩm từ nhỏ đến lớn Ngày càng nhiều các cá nhân, tổ chức, doanh nghiệp quan tâm đến lĩnh vực bán hàng để thỏa mãn nhu cầu của mọi người tại mỗi thời điểm Các phương tiện kỹ thuật và công cụ thiết kế website ngày càng lớn mạnh, rộng rãi để thiết kế và xây dựng
Trang 4Từ đó một thiết bị với kích thước vừa vặn và tiện ích ra đời, đó chính là điện thoại Điện thoại cho phép mọi người kết nối với nhau dễ dàng hơn và cũng mang nhiều tin tức đến cho mọi người nhanh hơn, ngoài ra còn có cả những chức năng giải trí v v
Từ các lý do trên em quyết định chọn đề tài thiết kế bán hàng online nói chung hay “thiết kế website cửa hàng điện thoại” nói riêng, xây dựng thử nghiệm web bán các mặt hàng điện thoại thế giới theo mô hình kiến thức của thầy(cô) và giáo trình Thông qua đó em có thể hiểu biết, nắm rõ về các lĩnh vực thiết kế website một cách hiệu quả
b) Mục đích của đề tài:
PHONE-STORE là một trong những trang web cung cấp đến cho người truy cập những phân loại, hãng điện thoại trên thế giới Từ những hãng, dòng điện thoại chưa được biết tới cho đến những hãng, dòng điện thoại nổi tiếng trên thế giới được ưa chuộng khắp quốc tế đều được nằm gọn trong web phonesmart.net
Trang 5Website PHONE-STORE là website bán hàng trực tuyến là một trong những hình thức giúp mọi người đễ truy cập, dễ mua sắm ở bất cứ đâu, và dang hàng tận nhà, khắp năm châu và sẽ đem đến cho người dùng cảm giác tin tưởng và an toàn
Cung cấp các hãng xe nổi tiếng như : Apple, Xiaomi, OPPO, Samsung, Huawei …
Hệ thống tìm kiếm nhanh chóng, tiện lợi, đáp ứng nhu cầu của mọi người, với giao diện gần gũi kết hợp với sắc vóc mà các dáng xe đem đến với mỗi người khi tận hưởng cảm giác mãn nhãn
c) Kết quả mong muốn đạt được:
Phân tích và thiết kế website theo kiến thức của môn thiết kế web
Thiết kế giao diện dễ nhìn và tiện ích với người dùng
Sử dụng được Flash, hình ảnh, âm thanh
Sử dụng thành tạo các thẻ trong HTML
Phân loại sản phẩm theo danh mục
Trang 6Nắm được các bước cơ bản trong thiết kế web.
Hiện thị thông tin từng loại điện thoại, và thông tin cập nhật nhanh chóng Mang lại tính khả dụng cao
III Kế hoạch làm việc.
Từ ngày 25/01/2021 đến 01/02/2021 tham khảo tài liệu, website khác
Từ ngày 02/02/2021 đến 09/02/2021 tìm kiếm các thư viện ảnh, thiết kế layout, bố cục trang web
Từ ngày 09/02/2021 đến 01/03/2021 hoàn thiện về website
IV Các phần mềm và ngôn ngữ sử dụng :
Visual Studio Code
Photoshop CC 2020
HTML, CSS
Google Chrome
Trang 7V Ý tưởng thiết kế:
Số lượng trang: 1 trang chủ và 2 trang con
Độ sâu: 3 mức
Font chữ sử dụng: Times New Roman, size 14
Mã màu: màu cam (#f04b00), màu đen (#000000), màu trắng (#ffffff), màu nâu (#702400)
1 Bố cục layout của trang chủ, style và cách thức thiết kế:
a) Đầu trang:
Bao gồm: logo, tên website, thanh tìm kiếm
b) Giữa trang:
Được chia làm 3 phần theo chiều ngang:
Phần đầu: là thanh menu
Trang 8Phần thứ 2: giới thiệc và hình ảnh khuyến mãi
Phần thứ 3: các sản phẩm
c) Cuối trang:
Trụ sở, liên hệ quảng cáo, liên hệ tuyền thông, quản lý trang web
Trang 9Đầu trang 90px
340px
325px
650px 50px
235px
975px
Trang 112 Bố cục layout của trang con, style và cách thức thiết kế:
a) Đầu trang:
Bao gồm: logo, tên website, thanh tìm kiếm
b) Giữa trang:
Được chia làm 4 phần:
Phần thứ nhất: thanh menu chính
Phần thứ hai: thanh menu hãng điện thoại
Phần thứ ba: thanh lọc theo giá và tính năng điện thoại
Phần thứ tư: hình ảnh thông tin sản phẩm c) Cuối trang:
Trụ sở, liên hệ quảng cáo, liên hệ tuyền thông, quản lý trang web
Trang 12Đầu trang 90px
975px
Cuối Trang
340px
130px
325px
50px
Trang 14VI Tài liệu tham khảo:
Nguyễn Thị Quỳnh Như- Giáo trình: THIẾT KẾ WEB-lưu hành nội
bộ-Hà Nội, 1/2019
Website:
o https://fptshop.com.vn
o https://www.thegioididong.com
o https://viettelstore.vn
Trang 15Mục Lục
I Giới thiệu 1
1 Tên đề tài: 1
II Nội Dung 1
1 Giới thiệu nội dung 1
III Kế hoạch làm việc 3
IV Các phần mềm và ngôn ngữ sử dụng : 3
V Ý tưởng thiết kế: 3
1 Bố cục layout của trang chủ, style và cách thức thiết kế: 3
2 Bố cục layout của trang con, style và cách thức thiết kế: 7
VI Tài liệu tham khảo: 10