+ Trang liên hệ: là giao diện khách hàng dùng để trao đổi với shop về các vấn đề của sản phẩm cũng như của shop.. + Trang đăng ký: là giao diện để người dùng tạo tài khoản để sử dụng web
Trang 1TIỂU LUẬN MÔN HỌCTHỰC HÀNH THIẾT KẾ WEB
THIẾT KẾ WEBSITE BÁN ÁO VÀ PHỤ KIỆN
CHO CÔNG TY TNHH TN
GV: ThS Nguyễn Hữu Vĩnh SVTH: Lê Minh Tâm
MSSV: 2024802010333 LỚP: D20CNTT02
Trang 2TIỂU LUẬN MÔN HỌCTHỰC HÀNH THIẾT KẾ WEB
THIẾT KẾ WEBSITE BÁN ÁO VÀ PHỤ KIỆN
CHO CÔNG TY TNHH TN
GV: ThS Nguyễn Hữu Vĩnh SVTH: Lê Minh Tâm
MSSV: 2024802010333 LỚP: D20CNTT02
B=NH DƯƠNG - 04/2021
Trang 3MỤC LỤC ii
DANH MỤC H=NH iv
MỞ ĐẦU 1
CHƯƠNG 1 TỔNG QUAN VỀ ĐỀ TÀI 2
1.1 Tên đề tài 2
1.2 Mục tiêu của đề tài 2
1.3 Ý nghĩa của đề tài 2
1.4 Đối tượng của đề tài 2
1.5 Một số trang chính của website 2
CHƯƠNG 2 GIỚI THIỆU CÔNG NGHỆ 3
2.1 Giới Thiệu Về HTML 3
2.1.1 HTML là gì? 3
2.1.2 Công dụng của HTML 3
2.1.3 Định dạng của HTML 3
2.2 Giới thiệu về Adobe Dreamweaver 3
2.3 Ngôn ngữ CSS 4
2.4 Ngôn ngữ Javascript 4
CHƯƠNG 3 GIAO DIỆN CHƯƠNG TR=NH 6
3.1 Sơ đồ 6
3.2 Đặc tả giao diện 7
3.2.1 Giao diện trang chủ 7
3.3 Giao diện trang liên hệ 8
3.4 Giao diện trang đăng ký 9
3.5 Giao diện trang đăng nhập 10
3.6 Giao diện cửa hàng 11
3.7 Giao diện trang phụ kiện 12
3.8 Giao diện trang áo khoác 13
3.9 Giao diện trang chi tiết sản phẩm 14
3.9.1 Giao diện chi tiết áo Balenciaga 14
3.9.2 Giao diện chi tiết áo Louis Vuitton 14
3.9.3 Giao diện chi tiết áo Buberry 15
Trang 43.9.6 Giao diện chi tiết túi Louis Vuitton 16
3.9.7 Giao diện Earring Gucci 17
3.9.8 Giao diện mắt kính Versace 17
3.9.9 Giao diện nước hoa Chanel 18
3.9.10 Giao diện áo khoác Baseball LV 18
3.9.11 Giao diện áo khoác Tresor De La Mer 19
3.9.12 Giao diện áo khoác Red GG Multicolor 19
3.9.13 Giao diện áo khoác Ken Scott Print Velvet 20
3.9.14 Giao diện chi tiết áo khoác PatchWork Denim 20
3.10 Mục thương hiệu 21
CHƯƠNG 4 THIẾT KẾ CHƯƠNG TR=NH 21
4.1 Thiết kế trang chủ 21
4.1.1 Source code HTML 21
4.1.2 Source code CSS 27
4.1.3 Source code JavaScript 29
KẾT LUẬN 31
TÀI LIỆU THAM KHẢO 32
Trang 5Hình 3.1: Giao diện trang chủ 7
Hình 3.2: Giao diện liên hệ 8
Hình 3.3: Giao diện trang đăng ký 9
Hình 3.4: Giao diện trang đăng nhập 10
Hình 3.5: Giao diện cửa hàng 11
Hình 3.6: Giao diện trang phụ kiện 12
Hình 3.7: Giao diện trang áo khoác 13
Hình 3.8: Giao diện trang chi tiết áo Balenciaga 14
Hình 3.9: Giao diện chi tiết áo Louis Vuitton 14
Hình 3.10: Giao diện chi tiết áo Buberry 15
Hình 3.11: Giao diện chi tiết áo Anti Ocial Social 15
Hình 3.12: Giao diện chi tiết áo Gucci 16
Hình 3.13: Giao diện túi Louis Vuitton 16
Hình 3.14: Giao diện Earring Gucci 17
Hình 3.15: Giao diện mắt kính Versace 17
Hình 3.16: Giao diện nước hoa Versace 18
Hình 3.17: Giao diện chi tiết áo khoác Baseball LV 18
Hình 3.18: Giao diện chi tiết áo khoác Tresor De La Mer 19
Hình 3.19: Giao diện chi tiết Red GG Multicolor 19
Hình 3.20: Giao diện chi tiết áo khoác Ken Scott Print Velvet 20
Hình 3.21: Giao diện chi tiết áo khoác PatchWork Denim 20
Hình 3.22: Mục thương hiệu 21
Trang 6Với cuộc sống hiện tại ngày càng phát triển, công nghệ ngày càng đổi mới
và đặc biệt là dịch Covid 19 đang hoành hành trên thế giới nhu cầu ra đường củamọi người giảm mạnh, việc ra ngoài dường như là nỗi lo của biết bao người trênthế giới, viêc mua sắm cũng trở nên khó khăn, không những vậy nhu cầu thiếtyếu của mọi người cũng khó mà thực hiện được trong thời buổi dịch đang căngthẳng như vậy Để có được những món đồ thiết yếu bây giờ biện pháp khả quannhất là chúng ta mua hàng online để tránh khả năng tiếp xúc nhiểu người cùngmột lúc, giảm khả năng lây bệnh trong cộng đồng Ngoài những món đồ thiếtyếu như nhu yếu phẩm, vật dụng cần thiết thì quần áo, thời trang là một trongnhững món đồ cần thiết cho mỗi con người
Vì thếế, em quyếết đ nh ch n đếề tài “ thiếết kếế website bán áo và ph ki n choị ọ ụ ệcông ty TNHH TN” nhằềm đáp ng nhu cầều mua sằếm cho m i ngứ ọ ười, đ m iể ọ
người thay đ i b n thần ngoài ra m c đích c a em cũng nhằềm góp phầền gi mổ ả ụ ủ ảnguy c lầy nhiếễm Covid trong c ng đôềng.ơ ộ
Trang 71.1 Tên đề tài
CHƯƠNG 2 + Thiết kế website bán áo và phụ kiện cho công ty TNHH TN
2.1 Mục tiêu của đề tài
CHƯƠNG 3 + Bán được nhiều sản phẩm và mang lại cho người dùng nhiều sản phẩm chất lượng nhất đưa website đến gần hơn với khách hàng
3.1 Ý nghĩa của đề tài
CHƯƠNG 4 + Giúp người dùng không phải mất thời gian ra ngoài, khách hàng có thểmua sản phẩm một cách nhanh chóng, tiện lợi
CHƯƠNG 5 + Quản bá thương hiệu cho công ty
5.1 Đối tượng của đề tài
CHƯƠNG 6 + Đối tượng mà shop muốn nhắm đến là tất cả các người dùng trên thế giới từ trẻ em đến người lớn tuổi, đặc biệt là độ tuổi thanh thiếu niên
6.1 Một số trang chính của website
CHƯƠNG 7 + Trang chủ: là giao diện mà người dùng tiếp cận đầu tiên khi truy cập vào website
CHƯƠNG 8 + Trang liên hệ: là giao diện khách hàng dùng để trao đổi với shop về các vấn đề của sản phẩm cũng như của shop Khách hàng có thể đánh giá hoặc phản ánh về cho shop bất cứ khi nào
CHƯƠNG 9 + Trang đăng ký: là giao diện để người dùng tạo tài khoản để sử dụng website
CHƯƠNG 10 + Trang đăng nhập: là nơi mà người dùng sử dụng tài khoản vừa tạo để truy cập vào website
CHƯƠNG 11 + Trang cửa hàng (bao gồm phụ kiện, áo khoác): là nơi khách hàng thoải mái lựa chọn và mua các sản phẩm của shop
CHƯƠNG 12 + Trang chi tiết sản phẩm: là nơi mà khách hàng có thể tham khảo thông tin sản phẩm về size áo, nơi sản xuất,
CHƯƠNG 13
CHƯƠNG 14
Trang 9CHƯƠNG 16 GIỚI THIỆU CÔNG NGHỆ 16.1 Giới Thiệu Về HTML.
16.1.1 HTML là gì?
CHƯƠNG 17 HTML (Hypertext Markup Language-Ngôn ngữ đánh dấu siêu vănbản) là ngôn ngữ đánh dấu chuẩn dùng soạn thảo các tài liệu World Wide Web, chỉ rõmột trang Web được hiển thị như thế nào trong trình duyệt
CHƯƠNG 18 Ngôn ngữ HTML dùng các tag hoặc các đoạn mã lệnh để chỉ cho cáctrình duyệt (Web browsers) cách hiển thị các thành phần của trang như text vàgraphics
CHƯƠNG 19 HTML là ngôn ngữ xác định cấu trúc của thông tin
CHƯƠNG 20 HTML sử dụng một loạt các thẻ và thuộc tính và được dùng để hiện thịvăn bản và các thông tin khác, cung cấp siêu liên kết tới các tài liệu khác
20.1.1 Công dụng của HTML.
CHƯƠNG 21 Thiết kế được nội dung và hình thức của trang web
CHƯƠNG 22 Xuất bản được các tài liệu trực tuyến hay truy xuất các thông tin trựctuyến bằng cách dùng các liên kết được chèn vào trang web
CHƯƠNG 23 Tạo ra các biểu mẫu trực tuyến nhằm thu thập các thông tin ngườidùng, quản lý giao dịch…
CHƯƠNG 24 Thêm vào đối tượng các hình ảnh video, âm thanh…
24.1.1 Định dạng của HTML.
CHƯƠNG 25 Là một tập tin có phần mở rộng là htm hoặc html
CHƯƠNG 26 Là một tập tin văn bản thuần túy, có chứa các mã đặc biệt gọi làTag(thẻ), thường được đặt xung quanh một khối văn bản nào đó
CHƯƠNG 27 Có thể viết trên nhiều trình soạn thảo: Microsoft Fontpage, notepad…
và được sử dụng nhiều nhất đó là adobe dreamweaver
27.1 Giới thiệu về Adobe Dreamweaver
CHƯƠNG 28 Macromedia Dreamweaver 8 là trình biên soạn HTML chuyên nghiệpdùng để thiết kế, viết mã và phát triển website cùng các trang web và các ứng dụngweb Cho dù bạn có thích thú với công việc viết mã HTML thủ công hoặc bạn thíchlàm việc trong môi trường biên soạn trực quan, Dreamweaver cung cấp cho bạn những
Trang 10CHƯƠNG 29 Các tính năng biên soạn trực quan trong Dreamweaver cho phép bạntạo nhanh các trang web mà không cần các dòng mã Bạn có thể xem tất cả các thànhphần trong website của bạn và kéo chúng trực tiếp từ một panel dễ sử dụng vào 1 vănbản Bạn có thể nâng cao sản phẩm của bạn bằng cách tạo và sửa các ảnh trongMacromedia Fireworks hoặc trong ứng dụng ảnh khác, rồi sau đó chèn trực tiếp vàoDreamweaver Dreamweaver cũng cung cấp những công cụ giúp đơn giản hóa việcchèn Flash vào trang web.
CHƯƠNG 30 Dreamweaver cũng cho phép bạn Thiết kế các ứng dụng web động dựatheo dữ liệu sử dụng công nghệ máy chủ như CFML, ASP.NET, ASP, JSP, và PHP.Nếu sở thích của bạn là làm việc với dữ liệu XML, Dreamweaver cung cấp nhữngcông cụ cho phép bạn dễ dàng tạo các trang XSLT, chèn file XML và hiển thị dữ liệuXML trên trang web của bạn
CHƯƠNG 31 Dreamweaver có thể tùy biến hoàn toàn Bạn có thể tạo cho riêng mìnhnhững đối tượng và yêu cầu, chỉnh sửa shortcut bàn phím và thậm chí viết mãJavaScript để mở rộng những khả năng của Dreamweaver với những hành vi mới,những chuyên gia giám định Property mới và những báo cáo site mới
CHƯƠNG 36 CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vihơn
36.1 Ngôn ngữ Javascript.
CHƯƠNG 37 Với HTML chỉ biểu diễn thông tin chứ chưa phải là các trang Webđộng có khả năng đáp ứng các sự kiện từ phía người dùng
Trang 11CHƯƠNG 38 Hãng Netscape đã đưa ra ngôn ngữ script có tên là LiveScript để thựchiện chức năng này Sau đó đổi tên thành JavaScript để tận dụng tính đại chúng củangôn ngữ lập trình Java.
CHƯƠNG 39 JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML.Được trình duyệt diễn dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn
CHƯƠNG 40 JavaScript là ngôn ngữ dựa trên đối tượng, nghĩa là bao gồm nhiều kiểuđối tượng, ví dụ đối tượng Math với tất cả các chức năng toán học Nhưng JavaScriptkhông là ngôn ngữ hướng đối tượng như C++/Java
Trang 12CHƯƠNG 41 GIAO DIỆN CHƯƠNG TR=NH 41.1 Sơ
Trang 1352.1.1 Giao diện trang chủ
Trang chủ là giao diện chính của shop là nơi mà khi truy cập vào ngườidùng sẽ thấy đầu tiên
Giao diện trang chủ cho người dùng thấy được logo của shop, các mục củashop bao gồm: cửa hàng, liên hệ, phụ kiện, đăng ký, đăng nhập
Khi truy cập được vào trang chủ thì người dùng đã có thể click vào cácmục để khám phá website và đặc biệt là đã có thể mua hàng của shop
Trang 14CHƯƠNG 53
Hình 53.1.1.1: Giao diện trang chủ
CHƯƠNG 54 Trang web được chia làm 6 phần:
CHƯƠNG 55 - Phần 1: Logo của trang web
CHƯƠNG 56 - Phần 2: Menu ngang: Bao gồm các mục: trang chủ, cửa hàng, liên hệ,phụ kiện
CHƯƠNG 57 - phần 3: thanh quảng cáo, chạy các phiếu giảm giá, các sữ kiện đangdiễn ra
CHƯƠNG 58 - Phần 4: Bên phải hiển thị sản phẩm bán nhiều nhất, phổ biến nhất vàđược yêu thích nhất
CHƯƠNG 59 - Phần 5: Ở giữa chứa các mặt hàng của shop được trưng bày một cách
tỉ mĩ để người dùng có thể dễ dàng nhìn thấy và tham khảo
Trang 15CHƯƠNG 60 - Phần 6: Footer.
60.1 Giao diện trang liên hệ
Mục đích:Trang này mục đích để khách hàng có thể liên lạc và trao đổivới shop bằng cách gửi tin nhắn, gửi mail cho shop hoặc có thể gọi trựctiếp qua hotline:0378569558
Chức năng: Trong giao diện này cho phép người dùng gửi những thông tin
về sản phẩm, thái độ phục vụ, cũng như phản hồi những sai phạm củanhân viên về shop
CHƯƠNG 61
Hình 61.1.1.1: Giao diện liên hệ
CHƯƠNG 62
Trang 16CHƯƠNG 66
Trang 17Hình 66.1.1.1: Giao diện trang đăng ký
Không chỉ có thể đăng nhập vào website bằng tài khoản vừa tạo mà kháchhàng có thể đăng nhập bằng tài khoản facebook, instagram và cả twitter
Trang 1880.1 Giao diện cửa hàng
Đây là nơi mà khách hàng có thể tự do lựa chọn, tham khảo các loại sảnphẩm của shop
Trang 19 Tại đây shop cung cấp cho khách hàng các sản phẩm mà công ty đang sảnxuất Khách hàng có thể mua bằng cách click vào nút đặt mua là có thể sởhữu ngay sản phẩm của shop.
Trang 20CHƯƠNG 86
CHƯƠNG 87
87.1 Giao diện trang phụ kiện
CHƯƠNG 88 Ngoài cung cấp các sản phẩm về áo thì TN shop còn cung cấp chokhách hàng các loại phụ kiện mà shop đang bán các loại phụ kiện này được nhập khẩu100% hàng chính hãng khách hàng cứ yên tâm lựa chọn và mua hàng của shop
CHƯƠNG 89
Hình 89.1.1.1: Giao diện trang phụ kiện
CHƯƠNG 90
Trang 2197.1 Giao diện trang áo khoác
CHƯƠNG 98 Với thời tiết bốn mùa trên thới giới áo khoác là món đồ không thể thiếuđối mới mọi người Nắm bắt được nhu cầu đó shop đã đầu tư mà mang dến cho khách hàng các loại áo khoác để phụ vụ cho mọi người
Trang 23CHƯƠNG 106
CHƯƠNG 107
107.1 Giao diện trang chi tiết sản phẩm
107.1.1 Giao diện chi tiết áo Balenciaga
CHƯƠNG 108
Hình 108.1.1.1: Giao diện trang chi tiết áo Balenciaga
108.1.2 Giao diện chi tiết áo Louis Vuitton
Trang 25CHƯƠNG 111
Hình 111.1.1.1: Giao diện chi tiết áo Buberry
111.1.2 Giao diện chi tiết áo Anti Ocial social
Trang 26CHƯƠNG 112
Hình 112.1.1.1: Giao diện chi tiết áo Anti Ocial Social
112.1.2 Giao diện áo Gucci
Trang 27CHƯƠNG 113
Hình 113.1.1.1: Giao diện chi tiết áo Gucci
113.1.2 Giao diện chi tiết túi Louis Vuitton
Trang 29CHƯƠNG 116
Hình 116.1.1.1: Giao diện Earring Gucci
116.1.2 Giao diện mắt kính Versace
Trang 31CHƯƠNG 119
Hình 119.1.1.1: Giao diện nước hoa Versace
119.1.2 Giao diện áo khoác Baseball LV
Trang 33CHƯƠNG 123
Hình 123.1.1.1: Giao diện chi tiết áo khoác Tresor De La Mer
123.1.2 Giao diện áo khoác Red GG Multicolor
Trang 34CHƯƠNG 124
Hình 124.1.1.1: Giao diện chi tiết Red GG Multicolor
124.1.2 Giao diện áo khoác Ken Scott Print Velvet
Trang 35CHƯƠNG 125
Hình 125.1.1.1: Giao diện chi tiết áo khoác Ken Scott Print Velvet
125.1.2 Giao diện chi tiết áo khoác PatchWork Denim
Trang 37CHƯƠNG 129 THIẾT KẾ CHƯƠNG TR=NH 129.1 Thiết kế trang chủ
129.1.1 Source code HTML
CHƯƠNG 130 <!doctype html>
CHƯƠNG 131 <html>
CHƯƠNG 132 <head>
CHƯƠNG 133 <meta charset="utf-8">
CHƯƠNG 134 <title>Untitled Document</title>
CHƯƠNG 135 <link a href="css/trangchu.css" rel="stylesheet" type="text/css">CHƯƠNG 136 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-
beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
CHƯƠNG 137 <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
Trang 39CHƯƠNG 171 <footer class="text-center text-white" style="background-color:
#caced1;">
CHƯƠNG 172 <! Grid container >
CHƯƠNG 173 <div class="container p-4">
CHƯƠNG 174 <! Section: Images >
CHƯƠNG 175 <section class="">
CHƯƠNG 176 <div class="row">
CHƯƠNG 177 <div class="col-lg-2 col-md-12 mb-4 mb-md-0">
Trang 40CHƯƠNG 196 class="bg-image hover-overlay ripple shadow-1-strong rounded"
CHƯƠNG 197 data-ripple-color="light"
CHƯƠNG 198 >
CHƯƠNG 199 <img
CHƯƠNG 200 src="https://mdbootstrap.com/img/new/fluid/city/111.jpg"CHƯƠNG 201 class="w-100"
CHƯƠNG 219 />
CHƯƠNG 220 <a href="#!">
CHƯƠNG 221 <div
Trang 42CHƯƠNG 248 data-ripple-color="light"
CHƯƠNG 249 >
CHƯƠNG 250 <img
CHƯƠNG 251 src="https://mdbootstrap.com/img/new/fluid/city/115.jpg"CHƯƠNG 252 class="w-100"
Trang 44CHƯƠNG 302 background: linear-gradient( #BBBBBB,#206AB5,#206AB5);CHƯƠNG 303 height: 50px;
CHƯƠNG 322 color: aliceblue;
CHƯƠNG 323 text-decoration: none;
CHƯƠNG 324 font-family: Cambria, "Hoefler Text", "Liberation Serif", Times,
"Times New Roman", "serif";
CHƯƠNG 325 font-weight: bold;
CHƯƠNG 326 }
CHƯƠNG 327 nav> div{
CHƯƠNG 328 margin-right: 10px;