Tiể ậ u lu n môn h c ọ thực hành thiết kế website thiết kế website bán sách cho cửa hàng si’s bookstore

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT CÔNG NGHỆ TIỂU LUẬN MÔN HỌC THỰC HÀNH THIẾT KẾ WEBSITE THIẾT KẾ WEBSITE BÁN SÁCH CHO CỬA HÀNG SI’S BOOKSTORE GV: ThS Nguyễn Hữu Vĩnh SVTH: Nguyễn Hoàng Danh MSSV: 2024802010387 LỚP: D20CNTT04 BNH DƯƠNG - 04/2021 0 TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT CÔNG NGHỆ TIỂU LUẬN MÔN HỌC THỰC HÀNH THIẾT KẾ WEBSITE THIẾT KẾ WEBSITE BÁN SÁCH CHO CỬA HÀNG SI’S BOOKSTORE GV: ThS Nguyễn Hữu Vĩnh SVTH: Nguyễn Hoàng Danh MSSV: 2024802010387 LỚP: D20CNTT04 BNH DƯƠNG - 04/2021 i 0 MỤC LỤC MỤC LỤC ii DANH MỤC HÌNH iv MỞ ĐẦU CHƯƠNG PKHẢO SÁT VÀ PHÂN TÍCH BÀI TỐN 1.1 Phát biểu toán 1.2 Phân tích chức CHƯƠNG THIẾT KẾ GIAO DIỆN 2.1 Giao diện trang chủ 2.2 Giao diện trang đăng ký thành viên 2.3 Giao diện trang đăng nhập 2.4 Giao diện trang giới thiệu 2.5 Giao diện trang liên hệ 2.6 Giao diện trang sách giáo khoa 2.7 Giao diện trang sách tham khảo 2.8 Giao diện trang sách tập 10 2.9 Giao diện trang Văn học Việt Nam 11 2.10 Giao diện trang văn học nước 12 2.11 Giao diện trang chi tiết sản phẩm 13 CHƯƠNG THIẾT KẾ CHƯƠNG TRNH 15 3.1 Template 15 3.1.1 Source code HTML 15 3.1.2 Định dạng CSS 18 3.2 Trang chủ 20 3.2.1 Source code HTML 20 3.2.2 Định dạng CSS 24 3.3 Đăng nhập 27 3.3.1 Source code HTML 27 3.3.2 Định dạng CSS 28 3.4 Đăng ký 28 3.4.1 Source code HTML 28 3.4.2 Đinh dạng CSS 30 ii 0 3.5 Giới thiệu 30 3.5.1 Source code HTML 30 3.5.2 Định dạng CSS 30 3.6 Liên hệ 31 3.6.1 Source code HTML 31 3.6.2 Đinh dạng CSS 31 3.7 Sách giáo khoa 32 3.7.1 Định dạng CSS 35 3.8 Sách tham khảo 36 3.8.1 Source code HTML 36 3.8.2 Đinh dạng CSS 40 3.9 Sách tập 41 3.9.1 Source code HTML 41 3.9.2 Đinh dạng CSS 45 3.10 Văn học Việt Nam 46 3.10.1 Source code HTML 46 3.10.2 Định dạng CSS .50 3.11 Văn học nước 52 3.11.1 Source code HTML 52 3.11.2 Định dạng CSS .56 3.12 Chi tiết sản phẩm 57 3.12.1 Source code HTML 57 3.12.2 Định dạng CSS .58 KẾT LUẬN 61 TÀI LIỆU THAM KHẢO 62 iii 0 DANH MỤC HÌNH Hình 2.1: Giao diện trang chủ Hình 2.2: Giao diện trang chủ Hình 2.3: Giao diện trang đăng ký Hình 2.4: Giao diện trang đăng nhập Hình 2.5: Giao diện trang giới thiệu Hình 2.6: Giao diện trang liên hệ Hình 2.7: Giao diện trang sách giáo khoa Hình 2.8: Giao diện trang sách tham khảo Hình 2.9: Giao diện trang sách t ập 10 Hình 2.10: Giao diện trang Văn học Việt Nam 11 Hình 2.11: Giao diện trang văn học nước 12 Hình 2.12: Giao diện trang chi tiết sản phẩm 13 iv 0 MỞ ĐẦU Ngày học sinh, sinh viên lười việc đọc sách, chí khơng đọc Điều việc lười thư viện mượn sách có nhiều trị chơi điện tử hay hoạt động khác hấp dẫn việc đọc sách Với việc phát triển thiết bị di động đại, thông minh với trang mạng mua sắm trực tuyến việc đọc sách học sinh, sinh viên dễ dàng Các cửa hàng trực tuyến có nhiều loại sách, thể loại sách phong phú đáp ứng dược tất nhu cầu mà học sinh, sinh viên có Để tao mơi trường lành mạnh giúp cho học sinh, sinh viên tiếp cận với sách cách dễ dàng em định chọn đề tài “Thiết kế website Bán sách” 0 Chương Khảo sát phân tích tốn CHƯƠNG PKHẢO SÁT VÀ PHÂN TÍCH BÀI TỐN 1.1 Phát biểu toán Website xây dựng rõ ràng, dễ nhìn, dễ điều khiển xếp sản phẩm cách hợp lí theo nhóm l ớn để người mua dễ dàng việc truy cập, thao tác, quan sát mua sản phẩm, cần chức liên hệ để thuận tiện cho việc trao đổi với chủ trang web trang giới thiệu để nói lên sơ lượt trang web Sau người mua đăng kí thành viên mua sản phẩm trang web, thấy chi tiết sản phẩm bán trang web thực nhiều chức trang web 1.2 Phân tích chức STT CHỨC NĂNG MÔ TẢ Giới thiệu Giới thiệu tổng quan trang web, trang web bán sản phẩm Liên hệ Đưa thông tin chủ trang web số điện thoại, email để khách hàng tiện lợi việc liên hệ Đăng ký Giúp khách hàng đăng ký thành viên trang web Đăng nhập Giúp người mua đăng nhập vào trang web từ tài khoản đăng ký Phân loại s ản phẩm nhóm lại Phân loại sản phẩm với nhau, tạo thành nhiều nhóm để người mua dễ dàng chọn lựa Chỉ khách hàng chi tiết sản Chi tiết sản phẩm phẩm từ tên sản phẩm, tác giả, giá, nhà xuất bản, khách hàng đặt mua trang 0 Chương Thiết kế giao diện CHƯƠNG THIẾT KẾ GIAO DIỆN 2.1 Giao diện trang chủ Hình 2.1: Giao diện trang chủ Gồm có trang sau: Trang chủ, Giới thiệu, Liên hệ, Sách giáo khoa tham khảo, Văn học, Đăng nhập, Đăng ký Trên trang chủ hiển thị menu bao gồm trang Sách giáo khoa, Sách tha m khảo, Sách tập, Văn học Việt Nam, Văn học nước ngồi Bên cạnh trang cịn có slider hình ảnh quảng cáo, danh mục sản phẩm bán chạy sản phẩm để người mua theo dỗi 0 Chương Thiết kế giao diện Người dùng click chuột chọn vào thẻ tương ứng để chọn mục mong muốn Hình 2.2: Giao diện trang chủ 2.2 Giao diện trang đăng ký thành viên Hình 2.3: Giao diện trang đăng ký - Ý nghĩa hoạt động: Đăng kí thành viên để sử dụng nhiều chức trang web 0 Chương Thiết kế giao diện - Quy tắc hoạt động: Khách hàng muốn đăng kí thành viên để mua sản phẩm cần phải tạo tài khoản Điền tất thơng tin mà trang web u cầu để tạo tài khoản - Các thao tác hình: Người dùng nhập địa email, mật khẩu, nhập lại mật khẩu, nhập vào họ tên, số điện thoại ngày tháng năm sinh sau nhấn vào nút Đăng kí để tạo tài khoản 2.3 Giao diện trang đăng nhập Hình 2.4: Giao diện trang đăng nhập - Ý nghĩa hoạt động: Đăng nhập vào trang web - Quy tắc hoạt động: Khách hàng s dụng email mật đăng kí trước đăng nhập vào hệ thống cách gõ thông tin email mật vào khung mẫu Khi đăng nhập vào thành cơng khách hàng xem mua sản phẩm - Các thao tác hình: Khách hàng nhập email mật vào ô sau bấm vào nút đăng nhập để đăng nhập vào trang web 2.4 Giao diện trang giới thiệu 0 width: 200px; float: left; margin-top: 5px; } div#menu>div{ border: 1px solid #FF00CE; border-radius: 4px; margin-bottom: 10px; width: 180px; } div#menu>div>p{ background-color: pink; border-top-left-radius: 2px; border-top-right-radius: 2px; text-align: center; font-size: 16px; font-weight: bold; color: black; padding-top: 5px; font-size: 17px; } div#menu>div>ul{ 26 0 Chương Thiết kế chương trình padding-left: 10px; font-size: 14px; } div#menu>div>ul>li{ list-style-position: inside; list-style-type: none; padding-left: 5px; font-size: 17px; padding-bottom: 10px; } 3.3 Đăng nhập 3.3.1 Source code HTML Đăng nhập vào trang web Email: 0 Password: Ghi nhớ đăng nhập Đăng nhập Hủy 27 0 Chương Thiết kế chương trình 3.3.2 Định dạng CSS @charset "utf-8"; /* CSS Document */ div#mdangnhap>h2{ text-align: center; font-weight: bold; font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; } 3.4 Đăng ký 3.4.1 Source code HTML Đăng Ký Thành viên 0 28 Chương Thiết kế chương trình 0 Đăng Ký Hủy 29 0 Chương Thiết kế chương trình 3.4.2 Đinh dạng CSS @charset "utf-8"; /* CSS Document */ div#dangky{ float: left; } div#hinh1{ margin-top: 60px; } div#dangky>h1{ color:#746868; } div#mdangky{ background-color: white; } 3.5 Giới thiệu 3.5.1 Source code HTML Giới thiệu trang web

  Si’s bookstore cửa hàng bán sách tr ực tuyến chuyên cung cấp loại sách văn học nước cửa hàng cung cấp sách giáo khoa, sách tham khảo sách t ập từ lớp đến lớp 12.

  Với phương châm “khách hàng thượng đế” cửa hàng muốn đem lại sách hay bổ ích cho khách hàng Bên cạnh cửa hàng cố gắn cấp nhật sách nhanh để đem đến cho người mua, người đọc sách hay lạ.

  Note: Đây mọt trang web sinh viên thực để phục vụ cho mơn Thiết kế web nên cịn nhiều thiếu sót sơ xài.

3.5.2 Định dạng CSS 30 0 Chương Thiết kế chương trình @charset "utf-8"; /* CSS Document */ div#hinh{ float: left; } div#noidung{ padding-left: 20px; border-right: 2px dashed #EC585B; margin-top: 30px; } div#noidung>p{ font-size: 24px; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; } div#noidung>p>i{ color: red; } div#noidung>h2{ text-align: center; font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; } 3.6 Liên hệ 3.6.1 Source code HTML THÔNG TIN LIÊN HỆ 3.6.2 Đinh dạng CSS @charset "utf-8"; /* CSS Document */ div#lienhe{ text-align: center; 31 0 Chương Thiết kế chương trình margin-top: 10px; } div#lienhe>h1{ color: #FF0004; font-weight: bold; font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; } 3.7 Sách giáo khoa SÁCH GIÁO KHOA

Bộ sách giáo khoa lớp 1

Giá: 54.000 VNĐ

Bộ sách giáo khoa lớp 2

Giá: 53.000 VNĐ

Bộ sách giáo khoa lớp 3

Giá: 58.000 VNĐ

Bộ sách giáo khoa lớp 4

Giá: 87.000 VNĐ

0 32 Chương Thiết kế chương trình

Bộ sách giáo khoa lớp 5

Giá: 100.000 VNĐ

Bộ sách giáo khoa lớp 6

Giá: 115.000 VNĐ

Bộ sách giáo khoa lớp 7

Giá: 134.000 VNĐ

Bộ sách giáo khoa lớp 8

Giá: 149.000 VNĐ

Bộ sách giáo khoa lớp 9

Giá: 140.000 VNĐ

33 0 Chương Thiết kế chương trình

Bộ sách giáo khoa lớp 10

Giá: 164.000 VNĐ

Bộ sách giáo khoa lớp 11

Giá: 169.000 VNĐ

Bộ sách giáo khoa lớp 12

Giá: 180.000 VNĐ

0

SÁCH GIÁO KHOA VÀ THAM KHẢO

• Sách giáo khoa
• Sách tham khảo
• Sách tập

VĂN HỌC

• Văn học Việt Nam
• Văn học nước ngoài

34 0 ...TRƯỜNG ĐẠI H? ? ?C THỦ D? ?U MỘT VI? ?N KỸ THUẬT C? ?NG NGHỆ TI? ?U LU? ? ?N M? ?N H? ? ?C TH? ?C H? ?NH THIẾT KẾ WEBSITE THIẾT KẾ WEBSITE B? ?N SÁCH CHO C? ??A H? ?NG SI’S BOOKSTORE GV: ThS Nguy? ?n H? ? ?u Vĩnh SVTH: Nguy? ?n Hoàng... sách tham khảo cho người mua lựa ch? ?n dễ dàng - Quy t? ?c hoạt động: Khách h? ?ng lựa ch? ?n mua sách tập hi? ?n thị trang, s? ?n phẩm hi? ?n thị theo t? ?n c? ? để giá cho s? ?n phẩm - Thao t? ?c h? ?nh: Kh? ?c h? ?ng... dàng C? ?c cửa h? ?ng tr? ?c tuy? ?n c? ? nhi? ?u loại sách, thể loại sách phong phú đáp ứng dư? ?c tất nhu c? ? ?u mà h? ? ?c sinh, sinh vi? ?n c? ? Để tao mơi trường lành mạnh giúp cho h? ? ?c sinh, sinh vi? ?n tiếp c? ? ?n với