LỜI NÓI ĐẦUTrong thời đại của công nghệ thông tin và internet, website là một công cụ hiệu quả để truyền tải thông tin, quảng bá hình ảnh và thương hiệu, cũng như tạo ranhững giá trị kin
Trang 1TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á KHOA: CÔNG NGHỆ THÔNG TIN
BÀI TẬP LỚN HỌC PHẦN: THIẾT KẾ WEB
ĐỀ TÀI 39: THIẾT KẾ WEBSITE BÁN ĐỒ ĂN
Bắc Ninh, năm 2023
Trang 2TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á
KHOA: CÔNG NGHỆ THÔNG TIN
BÀI TẬP LỚN HỌC PHẦN: THIẾT KẾ WEB
ĐỀ TÀI 39: THIẾT KẾ WEBSITE BÁN ĐỒ ĂN
STT Sinh viên thực hiện Mã sinh
viên
Điểm bằng số
Điểm bằng chữ
Trang 3DANH MỤC CÁC TỪ VIẾT TẮT 2
CHƯƠNG I TỔNG QUAN 3
I Cơ sở lý thuyết về thiết kế Website 3
1 Lý thuyết cơ bản 3
2 Cách sử dụng 4
3 Tổng quan về Bootstrap 4
II Giới thiệu 5
1 Lý do chọn đề tài 5
2 Phân tích đề tài 6
CHƯƠNG II THIẾT KẾ WEBSITE 7
I Lên kế hoạch thiết kế 7
II Xây dựng cấu trúc trang 7
1 Header 7
2 Body 9
3 Footer 16
CHƯƠNG III GIAO DIỆN WEBSITE 17
I Header 17
II Body 17
III Footer 18
IV Tổng kết 19
TÀI LIỆU THAM KHẢO 20
Trang 4LỜI NÓI ĐẦU
Trong thời đại của công nghệ thông tin và internet, website là một công cụ hiệu quả để truyền tải thông tin, quảng bá hình ảnh và thương hiệu, cũng như tạo ranhững giá trị kinh tế cho các cá nhân và tổ chức Trong lĩnh vực kinh doanh, website càng có vai trò quan trọng hơn, bởi nó không chỉ giúp khách hàng tiếp cận được với những thông tin về các loại hình dịch vụ, mà còn giúp họ có thông tin về sản phẩm, thanh toán và nhận được sự hỗ trợ từ những nhà cung cấp dịch vụ kinh doanh
Để thiết kế được một website bán đồ ăn chuyên nghiệp, hấp dẫn và hiệu quả,người thiết kế cần phải có những kiến thức và kỹ năng về thiết kế giao diện, lập trình web, cũng như nắm bắt được nhu cầu và xu hướng của thị trường Đây là một công việc không hề đơn giản và đòi hỏi sự sáng tạo, linh hoạt và tỉ mỉ từ ngườithiết kế
Bài tập lớn này là một phần của môn học Thiết kế web, do Thầy Nguyễn Quang Hưng giảng dạy Mục tiêu của bài tập lớn là để sinh viên có thể áp dụng những kiến thức và kỹ năng đã học trong môn học vào thực tế, qua việc thiết kế một website theo yêu cầu đề bài Bài tập lớn cũng là cơ hội để sinh viên rèn luyện khả năng giải quyết vấn đề và trình bày báo cáo
Trang 5DANH MỤC CÁC TỪ VIẾT TẮT
Trang 6cơ bản là: <html>, <head>, <body>, <title>, <h1> đến <h6>, <p>, <a>,
<img>, <div>, <span>, <ul>, <li> và nhiều thẻ khác Một số thuộc tínhHTML cơ bản là: id, class, href, src, alt, style và nhiều thuộc tính khác
CSS là ngôn ngữ định kiểu siêu văn bản, được sử dụng để tạo ra giao diện vàhiệu ứng cho trang web CSS gồm các quy tắc (rule) và các thuộc tính(property) để áp dụng cho các phần tử HTML Một quy tắc CSS gồm một bộchọn (selector) và một khối khai báo (declaration block) Một khối khai báogồm một hoặc nhiều thuộc tính CSS và giá trị của chúng Một số bộ chọnCSS cơ bản là: tên thẻ, id, class, phần tử con, phần tử anh em, thuộc tính vànhiều bộ chọn khác Một số thuộc tính CSS cơ bản là: color, background-color, font-family, font-size, font-weight, text-align, margin, padding, border
và nhiều thuộc tính khác
JavaScript là ngôn ngữ lập trình siêu văn bản, được sử dụng để tạo ra cácchức năng và hành vi cho trang web JavaScript gồm các biến (variable),kiểu dữ liệu (data type), toán tử (operator), câu lệnh điều khiển (controlstatement), hàm (function), đối tượng (object), mảng (array), chuỗi (string),
số (number), boolean, null, undefined và nhiều khái niệm khác JavaScriptcũng có thể tương tác với các phần tử HTML thông qua DOM (DocumentObject Model) và BOM (Browser Object Model)
Trang 72 Cách sử dụng
HTML được sử dụng để tạo ra các trang web tĩnh, tức là chỉ có nội dung vàkhông có chức năng hay hành vi Để sử dụng HTML, cần một trình soạnthảo văn bản (như Notepad) và một trình duyệt web (như Chrome) Sau đó,viết các thẻ HTML trong tệp văn bản và lưu lại với đuôi html Cuối cùng,
mở tệp đó bằng trình duyệt để xem kết quả
CSS được sử dụng để tạo ra giao diện và hiệu ứng cho các trang webHTML Để sử dụng CSS, có thể viết các quy tắc CSS trong cùng tệp HTMLhoặc trong một tệp riêng biệt với đuôi css Nếu viết CSS trong tệp riêng,cần liên kết tệp đó với tệp HTML bằng thẻ <link> Sau đó, mở tệp HTMLbằng trình duyệt để xem kết quả
JavaScript được sử dụng để tạo ra các chức năng và hành vi cho các trangweb HTML Để sử dụng JavaScript, ta có thể viết mã JavaScript trong cùngtệp HTML hoặc trong một tệp riêng biệt với đuôi js Nếu viết JavaScripttrong tệp riêng, ta cần liên kết tệp đó với tệp HTML bằng thẻ <script> Sau
đó, mở tệp HTML bằng trình duyệt để xem kết quả
3 Tổng quan về Bootstrap
Bootstrap là một framework CSS phổ biến, được sử dụng để tạo ra các trangweb đáp ứng (responsive) và thân thiện với thiết bị di động Bootstrap gồmcác thành phần (component), bố cục (layout) và tiện ích (utility) để giúp bạnthiết kế trang web nhanh chóng và dễ dàng Một số thành phần Bootstrap cơbản là: navbar, carousel, card, modal, alert, badge, button, form, table vànhiều thành phần khác Một số bố cục Bootstrap cơ bản là: container, row,column, grid system và nhiều bố cục khác Một số tiện ích Bootstrap cơ bảnlà: display, flex, margin, padding, position, border, color và nhiều tiện íchkhác
Trang 8 Bootstrap được sử dụng để tạo ra các trang web đáp ứng và thân thiện vớithiết bị di động Để sử dụng Bootstrap, cần liên kết các tệp Bootstrap (nhưbootstrap.min.css và bootstrap.min.js) với tệp HTML bằng các thẻ <link> và
<script> Ta cũng cần liên kết jQuery và Popper.js, là hai thư viện JavaScript
hỗ trợ cho Bootstrap Sau đó, mở tệp HTML bằng trình duyệt để xem kếtquả
3.1 Ưu điểm khi sử dụng Bootstrap
Ưu điểm đầu tiên cần kể đến của Bootstrap chính là công cụ này sẽ giúp bạn nhanh chóng tạo ra một giao diện web mà không cần phải viết ra các class CSS hay những đoạn mã HTML rắc rối
Không những vậy, Bootstrap còn tạo sẵn một thư viện để lưu trữ các thiết kế, nhờ đó, bạn có thể thiết kế website nhanh chóng bằng cách sử dụng những mẫu lưu sẵn này
Nếu sử dụng với Bootstrap mặc định hỗ trợ responsive và viết theo xu hướng mobile firs thì sẽ giúp ích rấy nhiều trong việc cải thiện hiệu suất trang web khi người dùng truy cập bằng điện thoại
Sử dụng Boostrap, bạn có thể hoàn toàn yên tâm vì giao diện này rất đầy đủ
và sang trọng, website hiển thị tốt và bạn có thể dễ dàng tùy chỉnh web để phù hợp với mọi chương trình
Tuyệt vời hơn, Bootstrap rất thân thiện với Google, nên việc SEO web sẽ trở nên thật dễ dàng mà vẫn mang đến kết quả cao
3.2 Nhược điểm khi sử dụng Bootstrap
Nhưng bên cạnh các ưu điểm thì Bootstrap cũng có rất nhều những nhược điểm Đầu tiên chính là công cụ này không được phổ biến và không nhiều người có thể sử dụng Bootstrap nhuần nhuyễn
Tiếp đến, Bootstrap có tốc độ tối ưu chưa cao, các thư viện cũng chưa thật sựhoàn thiện, chưa thể tạo ra một framework riêng hoàn hảo, vì thế mà một số trang web vẫn phải dùng phiên bản dành riêng cho mobile
Bootstrap cũng có quá nhiều code thừa và "giết chết" khả năng sáng tạo của người thiết kế Bởi việc tích hợp những mẫu có sẵn, khiến người dùng "lười" sáng tạo nên những giá trị mới
Nhìn chung, dù sở hữu nhiều hạn chế nhưng Bootstrap vẫn được đánh giá là một công cụ tuyệt vời Bạn có thể sử dụng công cụ này đúng cách để mang về hiệu quả công việc cao.
II Giới thiệu
1 Lý do chọn đề tài
Trang 9Việc thiết kế website bán đồ ăn là một giải pháp hiệu quả để quảng bá và cung cấp các dịch vụ cho khách hàng Website là một kênh truyền thông trực tuyến, cho phép khách hàng tìm kiếm, so sánh và đặt hàng một cách nhanh chóng
và tiện lợi Website cũng là một công cụ để tăng cường uy tín và thương hiệu của các cửa hàng kinh doanh
Vì vậy, em đã chọn đề tài thiết kế website bán đồ ăn làm bài tập lớn Đây là một đề tài rất thực tiễn và có ý nghĩa Em có đam mê và quan tâm đến kinh doanh, muốn góp phần vào sự phát triển của Việt Nam Em mong muốn nhận được những kết quả và hiệu quả từ đề tài này
Thiết kế và hỗ trợ những trang web tốt nhất cho các công ty kinh doanh
Hình thành nên những mạng lưới kinh doanh rộng lớn trong và ngoài nước
Tạo sựu gắn kiết và trao đổi buôn bán dễ hơn giữa cửa hàng với khách hàng
Tăng tính thuận lợi, nhanh chóng cho các cửa hàng kinh doanh
Đem lại nhiều sự lựa chọn, tư vấn nhiệt tình giữa nhân viên bán hàng vớikhách hàng, tạo một cầu nối giữa cửa hàng với khách hàng
Trang 10CHƯƠNG II THIẾT KẾ WEBSITE
I Lên kế hoạch thiết kế
- Tìm khuân mẫu trên Bootstrap định hình khung trang Wed
- Đặt tên cho trang Wed
II Xây dựng cấu trúc trang
- Dẫn đường link Bootstrap để sử dụng khuân mẫu tạo hình thái đầu tiên cho
Wedsite và đặt tên cho nó
<! doctype html >
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Q&K Bakery </ title >
< link
href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min css" rel = "stylesheet" integrity = "sha384-
T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin = "anonymous" >
< link rel = "stylesheet" href = "style.css" >
< link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/ all.min.css"
integrity = "sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/ 9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin = "anonymous"
< section class = "myheader" >
< div class = "container py-3" >
< div class = "row" >
< div class = "col-md-3" >
< style = "font-family:'Playpen Sans', cursive ;font-size: 30px ;" Q&K Bakery </ > p
</ div >
< div class = "col-md-4" >< div class = "input-group mb-3" >
< input type = "text" class = "form-control" placeholder = "Tìm kiếOm saPn phẩPm" aria-label = "Tìm kiếOm saPn phẩPm" aria-describedby = "basic-addon2" >
Trang 11 < span class = "input-group-text" id = "basic-addon2" >< i
class = "fa-solid fa-magnifying-glass" ></ ></ ></ i i span >
</ div >
</ div >
< div class = "col-md-3" >
< div class = "row" >
< div class = "col" >
< div class = "row" >
< div class = "col-3 fs-3" >< i class = "solid
< div class = "col" >
< div class = "row" >
< div class = "col-3 fs-3" >< i class = "solid
< div class = "col-md-2" >
< div class = "row" >
< div class = "col" >
< href = "#" class = "position-relative" >
< span class = "fs-3" >< i class = "solid
fa-envelope" ></ ></ i span >
< span class = "position-absolute top-0 start-100
translate-middle badge rounded-pill bg-danger" >
Trang 12 < href = "cart.html" class = "position-relative" >
< span class = "fs-3" >< i class = "fa-solid
fa-cart-shopping" ></ ></ i span >
< span class = "position-absolute top-0 start-100
translate-middle badge rounded-pill bg-danger" >
Thêm thanh menu bao gồm: Trang chủ, Giới thiệu, Sản phẩm, Tin tức, Liên hệ
< section class = "mymainmenu bg-danger" >
< div class = "container" >
< div class = "row" >
< div class = "col-md-9" >
< nav class = "navbar navbar-expand-lg bg-danger" >
< div class = "container-fluid" >
< class = "navbar-brand d-none" href = "#" > Navbar </ > a
< button class = "navbar-toggler" type = "button" toggle = "collapse" data-bs-target = "#navbarSupportedContent" aria-
data-bs-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" ></ span >
< class = "nav-link active" aria-current = "page"
href = "index.html" > Trang chuP </ > a
Trang 13 < class = "nav-link dropdown-toggle"
href = "shop.html" role = "button" data-bs-toggle = "dropdown"
< class = "nav-link active"
href = "contract.hmtl" > Liến hệ </ > a
< section class = "banner" >
< div class = "container py-5" >
< div class = "row py-5" >
< div class = "col-lg-7 pt-5 text-center" >
< h1 class = "pt-5" > ThếP hiện tình caPm cuPa bạn bằng bánh và bánh! </ > h1
< button class = "btn1 mt-3" > Tìm hiếPu thếm </ button >
</ div >
</ div >
</ div >
</ section >
Thêm Danh mục sản phẩm bán chạy bao gồm hình ảnh, giá của từng sản phẩm
<! Danh muc san pham ban chay >
< section class = "product" >
< div class = "container py-5" >
Trang 14 < div class = "row py-5" >
< div class = "col-lg-5 m-auto text-center" >
< h1 > SaPn phẩPm bán chạy </ > h1
< h6 style = "color: brown" > Đặc biệt trong từng miếOng ăn </ > h6
</ div >
</ div >
< div class = "row" >
< div class = "col-lg-3 text-center" >
< div class = "card border-0 bg-light mb-2" >
< div class = "card-body pro" >
< div class = "col-lg-3 text-center" >
< div class = "card border-0 bg-light mb-2" >
< div class = "card-body pro" >
< div class = "col-lg-3 text-center" >
< div class = "card border-0 bg-light mb-2" >
< div class = "card-body" >
< img
src = "./img/passion_fruit _chocolate_cake_81a17ce02408407b8ac29d61cd7abd9 b_grande.webp" class = "img-fluid" alt = "" >
< div class = "col-lg-3 text-center" >
< div class = "card border-0 bg-light mb-2" >
< div class = "card-body pro" >
Trang 15 < div class = "row" >
< div class = "col-lg-3 text-center" >
< div class = "card border-0 bg-light mb-2" >
< div class = "card-body pro" >
< div class = "col-lg-3 text-center" >
< div class = "card border-0 bg-light mb-2" >
< div class = "card-body pro" >
< div class = "col-lg-3 text-center" >
< div class = "card border-0 bg-light mb-2" >
< div class = "card-body pro" >
< div class = "col-lg-3 text-center" >
< div class = "card border-0 bg-light mb-2" >
< div class = "card-body pro" >