Tiểu luận môn học thực hành thiết kế web thiết kế website bán áo và phụ kiện cho công ty tnhh tn

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Ế 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 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Ế 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 i 0 MỤC LỤC MỤC LỤC ii DANH MỤC H=NH iv MỞ ĐẦU CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1.1 Tên đề tài 1.2 Mục tiêu đề tài .2 1.3 Ý nghĩa đề tài 1.4 Đối tượng đề tài 1.5 Một số trang website CHƯƠNG GIỚI THIỆU CÔNG NGHỆ 2.1 Giới Thiệu Về HTML 2.1.1 HTML gì? .3 2.1.2 Công dụng HTML 2.1.3 Định dạng HTML 2.2 Giới thiệu Adobe Dreamweaver 2.3 Ngôn ngữ CSS 2.4 Ngôn ngữ Javascript CHƯƠNG GIAO DIỆN CHƯƠNG TR=NH 3.1 Sơ đồ 3.2 Đặc tả giao diện 3.2.1 Giao diện trang chủ 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 ii 0 3.9.4 Giao diện chi tiết áo Anti Ocial social 15 3.9.5 Giao diện áo Gucci 16 3.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 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 iii 0 DANH MỤC H=NH Hình 3.1: Giao diện trang chủ Hình 3.2: Giao diện liên hệ .8 Hình 3.3: Giao diện trang đăng ký 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 khố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 iv 0 MỞ ĐẦU Với sống ngày phát triển, công nghệ ngày đổi đặc biệt dịch Covid 19 hoành hành giới nhu cầu đường người giảm mạnh, việc dường nỗi lo người giới, viêc mua sắm trở nên khó khăn, nhu cầu thiết yếu người khó mà thực thời buổi dịch căng thẳng Để có đồ thiết yếu biện pháp khả quan mua hàng online để tránh khả tiếp xúc nhiểu người lúc, giảm khả lây bệnh cộng đồng Ngồi đồ thiết yếu nhu yếu phẩm, vật dụng cần thiết quần áo, thời trang đồ cần thiết cho người Vì thếế, em quyếết đ nhị ch nọđếề tài “ thiếết kếế website bán áo 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 m ục đích em nhằềm góp phầền gi ảm nguy c lầy nhiếễm Covid cộng đôềng 0 CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1.1 Tên đề tài CHƯƠNG + Thiết kế website bán áo phụ kiện cho công ty TNHH TN 2.1 Mục tiêu đề tài CHƯƠNG + Bán nhiều sản phẩm mang lại cho người dùng nhiều sản phẩm chất lượng đưa website đến gần với khách hàng 3.1 Ý nghĩa đề tài CHƯƠNG + Giúp người dùng thời gian ngồi, khách hàng mua sản phẩm cách nhanh chóng, tiện lợi CHƯƠNG + Quản bá thương hiệu cho công ty 5.1 Đối tượng đề tài CHƯƠNG + Đối tượng mà shop muốn nhắm đến tất người dùng giới từ trẻ em đến người lớn tuổi, đặc biệt độ tuổi thiếu niên 6.1 Một số trang website CHƯƠNG + Trang chủ: giao diện mà người dùng tiếp cận truy cập vào website CHƯƠNG + Trang liên hệ: giao diện khách hàng dùng để trao đổi với shop vấn đề sản phẩm shop Khách hàng đánh giá phản ánh cho shop CHƯƠNG + Trang đăng ký: giao diện để người dùng tạo tài khoản để sử dụng website CHƯƠNG 10 + Trang đăng nhập: 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): nơi khách hàng thoải mái lựa chọn mua sản phẩm shop CHƯƠNG 12 + Trang chi tiết sản phẩm: nơi mà khách hàng tham khảo thông tin sản phẩm size áo, nơi sản xuất, CHƯƠNG 13 CHƯƠNG 14 0 CHƯƠNG 15 0 Tiểu luận kết thúc học phần thực hành thiết kế website CHƯƠNG 16 GIỚI THIỆU CÔNG NGHỆ 16.1 Giới Thiệu Về HTML 16.1.1 HTML gì? CHƯƠNG 17 HTML (Hypertext Markup Language-Ngôn ngữ đánh dấu siêu văn bản) ngôn ngữ đánh dấu chuẩn dùng soạn thảo tài liệu World Wide Web, rõ trang Web hiển thị trình duyệt CHƯƠNG 18 Ngôn ngữ HTML dùng tag đoạn mã lệnh trình duyệt (Web browsers) cách hiển thị thành phần trang text graphics CHƯƠNG 19 HTML ngôn ngữ xác định cấu trúc thông tin CHƯƠNG 20 HTML sử dụng loạt thẻ thuộc tính dùng để thị văn thông tin khác, cung cấp siêu liên kết tới tài liệu khác 20.1.1 Công dụng HTML CHƯƠNG 21 Thiết kế nội dung hình thức trang web CHƯƠNG 22 Xuất tài liệu trực tuyến hay truy xuất thông tin trực tuyến cách dùng liên kết chèn vào trang web CHƯƠNG 23 Tạo biểu mẫu trực tuyến nhằm thu thập thông tin người dùng, quản lý giao dịch… CHƯƠNG 24 Thêm vào đối tượng hình ảnh video, âm thanh… 24.1.1 Định dạng HTML CHƯƠNG 25 Là tập tin có phần mở rộng htm html CHƯƠNG 26 Là tập tin văn túy, có chứa mã đặc biệt gọi Tag(thẻ), thường đặt xung quanh khối văn CHƯƠNG 27 Có thể viết nhiều trình soạn thảo: Microsoft Fontpage, notepad… sử dụng nhiều adobe dreamweaver 27.1 Giới thiệu Adobe Dreamweaver CHƯƠNG 28 Macromedia Dreamweaver trình biên soạn HTML chuyên nghiệp dùng để thiết kế, viết mã phát triển website trang web ứng dụng web Cho dù bạn có thích thú với cơng việc viết mã HTML thủ cơng bạn thích làm việc môi trường biên soạn trực quan, Dreamweaver cung cấp cho bạn cơng cụ hữu ích để nâng cao kinh nghiệm thiết kế web bạn 0 Tiểu luận kết thúc học phần thực hành thiết kế website CHƯƠNG 29 Các tính biên soạn trực quan Dreamweaver cho phép bạn tạo nhanh trang web mà khơng cần dịng mã Bạn xem tất thành phần website bạn kéo chúng trực tiếp từ panel dễ sử dụng vào văn Bạn nâng cao sản phẩm bạn cách tạo sửa ảnh Macromedia Fireworks ứng dụng ảnh khác, sau chèn trực tiếp vào Dreamweaver Dreamweaver cung cấp cơng cụ giúp đơn giản hóa việc chèn Flash vào trang web CHƯƠNG 30 Dreamweaver cho phép bạn Thiết kế ứng dụng web động dựa theo liệu sử dụng công nghệ máy chủ CFML, ASP.NET, ASP, JSP, PHP Nếu sở thích bạn làm việc với liệu XML, Dreamweaver cung cấp công cụ cho phép bạn dễ dàng tạo trang XSLT, chèn file XML hiển thị liệu XML trang web bạn CHƯƠNG 31 Dreamweaver tùy biến hồn tồn Bạn tạo cho riêng đối tượng yêu cầu, chỉnh sửa shortcut bàn phím chí viết mã JavaScript để mở rộng khả Dreamweaver với hành vi mới, chuyên gia giám định Property báo cáo site 31.1 Ngôn ngữ CSS CHƯƠNG 32 CSS (Cascading Style Sheets) ngôn ngữ quy định cách trình bày cho tài liệu viết HTML, XHTML, XML, SVG, hay UML,… CHƯƠNG 33 CSS cung cấp nhiều thuộc tính trình bày dành cho đối tượng với sáng tạo việc kết hợp thuộc tính giúp mang lại hiệu cao CHƯƠNG 34 CSS hỗ trợ tất trình duyệt hiển thị “như nhau” hệ điều hành CHƯƠNG 35 CSS đưa phương thức áp dụng từ file CSS ngồi Có hiệu đồng tạo website có hàng trăm trang hay muốn thay đổi thuộc tính trình bày CHƯƠNG 36 CSS cập nhật liên tục mang lại trình bày phức tạp tinh vi 36.1 Ngôn ngữ Javascript CHƯƠNG 37 Với HTML biểu diễn thông tin chưa phải trang Web động có khả đáp ứng kiện từ phía người dùng 0 Tiểu luận kết thúc học phần thực hành thiết kế website CHƯƠ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 29 0 Tiểu luận kết thúc học phần thực hành thiết kế website CHƯƠ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 30 0 Tiểu luận kết thúc học phần thực hành thiết kế website CHƯƠNG 126 Hình 126.1.1.1: Giao diện chi tiết áo khốc PatchWork Denim CHƯƠNG 127 127.1 Mục thương hiệu CHƯƠNG 128 Hình 128.1.1.1: Mục thương hiệu 31 0 Tiểu luận kết thúc học phần thực hành thiết kế website CHƯƠ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 CHƯƠNG 131 CHƯƠNG 132 CHƯƠNG 133 CHƯƠNG 134 Untitled Document CHƯƠNG 135 CHƯƠNG 136 CHƯƠNG 137 CHƯƠNG 138 CHƯƠNG 139 CHƯƠNG 140 CHƯƠNG 141 CHƯƠNG 142 CHƯƠNG 143 CHƯƠNG 144 height="132" alt=""/> CHƯƠNG 174 CHƯƠNG 175 CHƯƠNG 176 CHƯƠNG 177 CHƯƠNG 178 CHƯƠNG 179 CHƯƠNG 186 CHƯƠNG 187 CHƯƠNG 191 CHƯƠNG 192 CHƯƠNG 193 CHƯƠNG 194 CHƯƠNG 195 CHƯƠNG 203 CHƯƠNG 204 CHƯƠNG 208 CHƯƠNG 209 CHƯƠNG 210 CHƯƠNG 211 CHƯƠNG 212 CHƯƠNG 220 CHƯƠNG 221 CHƯƠNG 225 CHƯƠNG 226 CHƯƠNG 227 CHƯƠNG 228 CHƯƠNG 229 CHƯƠNG 237 CHƯƠNG 238 CHƯƠNG 242 CHƯƠNG 243 CHƯƠNG 244 CHƯƠNG 245 CHƯƠNG 246 CHƯƠNG 247 CHƯƠNG 254 CHƯƠNG 255 CHƯƠNG 259 CHƯƠNG 260 CHƯƠNG 261 CHƯƠNG 262 CHƯƠNG 263 CHƯƠNG 264 CHƯƠNG 271 CHƯƠNG 272 CHƯƠNG 276 CHƯƠNG 277 CHƯƠNG 278 CHƯƠNG 279 CHƯƠNG 280 CHƯƠNG 281 CHƯƠNG 282 CHƯƠNG 283 CHƯƠNG 284 CHƯƠNG 285 285.1.1 Source code CSS CHƯƠNG 286 @charset "utf-8"; CHƯƠNG 287 /* CSS Document */ CHƯƠNG 288 *{ CHƯƠNG 289 margin: 0px; CHƯƠNG 290 padding: 0px; CHƯƠNG 291 } CHƯƠNG 292 header{ CHƯƠNG 293 width: 100%; CHƯƠNG 294 CHƯƠNG 295 } CHƯƠNG 296 section1{ CHƯƠNG 297 margin-top: 90px; CHƯƠNG 298 margin-right: 20px; CHƯƠNG 299 float: right; CHƯƠNG 300 } CHƯƠNG 301 nav{ 38 0 Tiểu luận kết thúc học phần thực hành thiết kế website CHƯƠNG 302 background: linear-gradient( #BBBBBB,#206AB5,#206AB5); CHƯƠNG 303 height: 50px; CHƯƠNG 304 width: 100%; CHƯƠNG 305 } CHƯƠNG 306 nav>ul{ CHƯƠNG 307 CHƯƠNG 308 font-weight:lighter; CHƯƠNG 309 margin-top: 15px; CHƯƠNG 310 cursor: pointer; CHƯƠNG 311 color: #FFFFFF; CHƯƠNG 312 list-style: none; CHƯƠNG 313 margin-left: 20px; CHƯƠNG 314 float: left; CHƯƠNG 315 width: 800px; CHƯƠNG 316 } CHƯƠNG 317 nav>ul>li{ CHƯƠNG 318 float: left; CHƯƠNG 319 padding: 4px 20px; CHƯƠNG 320 } CHƯƠNG 321 nav>ul>li>a{ 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; 39 0 Tiểu luận kết thúc học phần thực hành thiết kế website CHƯƠNG 329 margin-top: 15px; CHƯƠNG 330 float: right; CHƯƠNG 331 } 331.1.1 Source code JavaScript CHƯƠNG 332 // JavaScript Document CHƯƠNG 333 // JavaScript Document CHƯƠNG 334 var t; CHƯƠNG 335 var currenIndex =1; CHƯƠNG 336 function next(){ CHƯƠNG 337 clearInterval(t); CHƯƠNG 338 if(currenIndex1){ currenIndex ; 40 0 Tiểu luận kết thúc học phần thực hành thiết kế website CHƯƠNG 353 currenIndex + ".jpg"; CHƯƠNG 354 } CHƯƠNG 355 else{ document.getElementById("hinhslide").src="images/" + CHƯƠNG 356 currenIndex=3; CHƯƠNG 357 currenIndex + ".jpg"; document.getElementById("hinhslide").src="images/" + CHƯƠNG 358 } CHƯƠNG 359 } CHƯƠNG 360 t=setInterval("next()",3000); CHƯƠNG 361 CHƯƠNG 362 CHƯƠNG 363 CHƯƠNG 364 CHƯƠNG 365 CHƯƠNG 366 CHƯƠNG 367 CHƯƠNG 368 CHƯƠNG 369 41 0 KẾT LUẬN CHƯƠNG 370 Kết đạt  Thiết kế thành công website bán hàng cho công ty TNHH TN, đáp ứng nhu cầu công ty  Thiết kế website bán hàng online phục vụ cho khách hàng thời buổi Covid 19 phức tạp Giúp người dùng đỡ tốn thời gian giảm tiếp xúc cộng đồng  Giúp khách hàng mua sản phẩm cách nhanh chống mà không cần phải trực tiếp đến cửa hàng  Tìm hiểu biết thêm nhiều kiến thức công cụ thực hành môn học thiết kế web CHƯƠNG 371 Hướng phát triển đề tài  Vì thời gian khơng cho phép khả vụng nên website chưa hồn thiện cịn nhiều sơ sót  Mục tiêu: em tập trung phát triển để đưa website đến gần với người dùng lan rộng thị trường  Cập nhật sản phẩm để mở rộng shop, đem lại nhiều lựa chọn cho khách hàng 42 0 TÀI LIỆU THAM KHẢO CHƯƠNG 372 Tiếng Việt  https://hiepsiit/public/thietkeweb/  W3chool.com  Bootstrap.com CHƯƠNG 373 Website  https://en.louisvuitton.com/eng-nl/homepage  https://www.gucci.com/ca/en/ca/women/accessories-for-women/hats-glovesfor-women-c-women-accessories-hats-and-gloves CHƯƠNG 374 CHƯƠNG 375 CHƯƠNG 376 CHƯƠNG 377 CHƯƠNG 378 CHƯƠNG 379 CHƯƠNG 380 CHƯƠNG 381 CHƯƠNG 382 CHƯƠNG 383 CHƯƠNG 384 CHƯƠNG 385 CHƯƠNG 386 CHƯƠNG 387 43 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Ế 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:... 368 CHƯƠNG 369 41 0 KẾT LUẬN CHƯƠNG 370 Kết đạt  Thiết kế thành công website bán hàng cho công ty TNHH TN, đáp ứng nhu cầu công ty  Thiết kế website bán hàng online phục vụ cho khách hàng thời... luận kết thúc học phần thực hành thiết kế website CHƯƠ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 21 0 Tiểu luận kết thúc học phần thực hành thiết kế