Thiết kế và phát triển website 1 Đề tài thiết kế web thời trang

Do đó nhóm em đã lựa chọn đề tài “Thiết kế web thời trang” nhằm mục đích tìm hiểu và nghiên cứu về sự vận hành và các chức năng của Website cũng như trau dồi, họchỏi thêm các kiến thức v

Trang 1

TRƯỜNG ĐẠI HỌC BÀ RỊA – VŨNG TÀU

KHOA CNKT - NNCNC

-

-THIẾT KẾ VÀ PHÁT TRIỂN WEBSITE 1

ĐỀ TÀI: THIẾT KẾ WEB THỜI TRANGTrình độ đào tạo : Đại học

Chuyên ngành : Công nghệ thông tin

Nhóm sinh viên : Nguyễn Văn Đông -DH21CT1-21031367

Nguyễn Viết Hoàn -DH21CT1-21030923

BÀ RỊA - VŨNG TÀU, NĂM 2022

Trang 2

MỤC LỤC

MỤC LỤC 1

LỜI MỞ ĐẦU 6

LỜI CẢM ƠN 7

1 Tổng quan về html, mối quan hệ HTML, CSS, JS 8

1.1 Lịch sử của HTML 8

1.2 HTML là gì? 8

1.3 HTML hoạt động như thế nào? 8

1.4 Các tag thông dụng của HTML 9

1.5 Ưu và nhược điểm của HTML 10

1.5.1 Ưu điểm 10

1.5.2 Nhược điểm 10

1.6 HTML, CSS và JavaScript liên quan với nhau như thế nào? 10

2 Tổng quan Đề tài 11

2.1 Lý do chọn đề tài 11

2.2 Đối tượng nghiên cứu 11

2.3 Phạm vi nghiên cứu 11

2.4 Phương pháp nghiên cứu 11

2.5 Cấu trúc và chức năng của website 11

2.6 Sơ đồ Cây Mô tả mối quan hệ 12

2.7 Cấu trúc thư mục project: 12

3 Chi tiết các trang 16

3.1 Trang chủ 16

3.2 Đăng nhập 16

3.3 Đăng ký 17

3.4 Header 17

3.5 Footer 17

Trang 3

3.7 Trang chi tiết sản phẩm hàng nam mới về 1 18

3.10 Trang sản phẩm đang thịnh hành dành cho nam 20

3.11 Trang chi tiết sản phẩm thịnh hành cho nam 1 20

3.12 Trang chi tiết sản phẩm thịnh hành cho nam 2 21

3.13 Trang chi tiết sản phẩm thịnh hành dành cho nam 3 21

3.14 Trang sản phẩm quần nam 22

3.15 Trang chi tiết sản phẩm quần nam 1 22

3.18 Trang sản phẩm mới về dành cho nữ 24

3.19 Trang chi tiết sản phẩm mới về cho nữ 1 24

3.27 Trang sản phẩm thịnh hành của nữ 28

3.28 Trang chi tiết sản phẩm thịnh hành cho nữ 1 29

3.31 Trang sản phẩm quần jeans nữ 30

3.32 Trang chi tiết sản phẩm quần jeans nữ 1 31

Trang 4

3.35 Trang sản phẩm mới về cho trẻ em 32

3.36 Trang sản phẩm đồ dành cho bé trai 33

3.37 Trang sản phẩm đồ dành cho bé gái 33

3.38 Trang About Us 34

4 Chi tiết các chức năng 35

4.1 Chức năng đăng kí 35

4.2 Ẩn hiện password 35

4.3 Chức năng Slider của trang chủ 36

4.4 Chức năng Dropdown của các item trong menu 36

4.5 Thanh Menu 37

4.6 Chức năng xem chi tiết sản phẩm 37

5 Kết luận 39

5.1 Tổng kết 39

5.2 Hướng phát triển 39

TÀI LIỆU THAM KHẢO 39

Trang 5

MỤC LỤC HÌNH ẢNH

Hình 1 Sơ đồ mô tả mối quan hệ 12

Hình 2 Cấu trúc thư mục 12

Hình 3 Liên kết css,js 13

Hình 4.Các file css 13

Hình 5 Các file js 13

Hình 6 Các file Images 14

Hình 7 Các file HTML 14

Hình 8 Trang chủ 16

Hình 9 Đăng nhập 16

Hình 10 Đăng ký 17

Hình 11 Header 17

Hình 12 Footer 17

Hình 13 Hàng nam mới về 18

Hình 14 Chi tiết sản phẩm hàng nam mới về 1 18

Hình 17 Sản phẩm thịnh hành 20

Hình 18 Sản phẩm thịnh hành cho nam 1 20

Hình 21 Sản phẩm quần nam 22

Hình 22 Chi tiết sản phẩm quần nam 1 22

Hình 25 Sản phẩm mới về cho nữ 24

Hình 26 Chi tiết sản phẩm mới về cho nữ 1 24

Hình 34 Sản phẩm thịnh hành của nữ 28

Hình 35 Chi tiết sản phẩm thịnh hành cho nữ 1 29

Trang 6

Hình 38 Sản phẩm quần jeans nữ 31

Hình 39 Chi tiết sản phẩm quần jeans nữ 1 31

Hình 42 Sản phẩm mới về cho trẻ em 32

Hình 43 Sản phẩm cho bé trai 33

Hình 44 Sản phẩm cho bé gái 33

Hình 45 Trang About Us 34

Hình 46 Chức năng đăng kí tài khoản 35

Hình 47 Chức năng ẩn hiện password 35

Hình 48 Chức năng slider 36

Hình 49 Chức năng Dropdown 36

Hình 50 Thanh Menu 37

Hình 51 Chức năng xem chi tiết sản phẩm 37

Hình 52 Giỏ hàng 38

Hình 53 Giỏ hàng trống 38

Trang 7

Do đó nhóm em đã lựa chọn đề tài “Thiết kế web thời trang” nhằm mục đích tìm hiểu và nghiên cứu về sự vận hành và các chức năng của Website cũng như trau dồi, họchỏi thêm các kiến thức về web để trang bị cho bản thân những kinh nghiệm quý báu áp dụng cho thực tế sau khi ra trường

Trang 8

LỜI CẢM ƠN

Trong suốt thời gian học tập và rèn luyện tại Trường Đại học Bà Rịa-Vũng Tàu cho đến nay, nhóm đã nhận được rất nhiều sự quan tâm, giúp đỡ của quý Thầy Cô và bạn

bè Với lòng biết ơn sâu sắc và chân thành nhất, nhóm xin gửi đến quý Thầy Cô ở Khoa

Kỹ thuật – Công nghệ – Trường Đại học Bà Rịa Vũng Tàu đã cùng với tri thức và tâm huyết của mình để truyền đạt vốn kiến thức quý báu cho chúng em trong suốt thời gian học tập tại trường

Với đề tài “Thiết kế website thời trang” Em xin chân thành cảm ơn Cô Nguyễn Lan Hương đã tận tâm hướng dẫn nhóm em qua các buổi học cũng như trao đổi.Với điều kiện thời gian cũng như kinh nghiệm còn hạn chế của học viên, bài báo cáo này không thể tránh được những thiếu sót Nhóm rất mong nhận được sự chỉ bảo, đóng góp ý kiến của các quý thầy cô để nhóm có điều kiện bổ sung, nâng cao ý thức của mình, phục vụ tốt hơn công tác thực tế sau này

Em xin chân thành cảm ơn!

Trang 9

1. TỔNG QUAN VỀ HTML, MỐI QUAN HỆ HTML, CSS, JS

1.1 Lịch sử của HTML

 Vào cuối năm 1991, phiên bản HTML đầu tiên do Tim Berners-Lee phát triển đã được công khai với tên HTML Tags Phiên bản này có thiết kế vô cùng đơn giản,

mô tả 18 phần tử Tiếp đến vào năm 1995, IETF đã hoàn thành "HTML 2.0" Sau

đó phiên bản HTML 4.01 được công bố vào năm 1999

 Đến năm 2000, các phiên bản HTML đã được các nhà phát triển thay thế bằng XHTML Năm 2014, HTML được nâng cấp lên chuẩn HTML5 với sự cải tiến rõ rệt Điều này được thể hiện trong việc đã có nhiều tag được thêm vào markup để giúp xác định rõ nội dung thuộc thể loại gì

1.2 HTML là gì?

 HTML có tên đầy đủ là Hypertext Markup Language nghĩa là ngôn ngữ đánh dấu siêu văn bản HTML thường được sử dụng để tạo và cấu trúc các phần trong trang web và ứng dụng, phân chia các đoạn văn, heading, link, blockquotes,… HTML không phải là một ngôn ngữ lập trình mà chỉ là một ngôn ngữ đánh dấu Điều này đồng nghĩa với việc HTML không thể thực hiện các chức năng “động” Nói cách khác, HTML tương tự như phần mềm Microsoft Word, chỉ có tác dụng định dạng các thành phần có trong website

1.3 HTML hoạt động như thế nào?

 HTML (Hypertext Markup Language) hoạt động bằng cách sử dụng các thẻ và thuộc tính để định dạng và hiển thị các phần tử trên trang web Một trang HTML bao gồm các thẻ HTML và nội dung được đặt giữa các thẻ đó

 Ví dụ:

 Thẻ “p” đại diện cho đoạn văn bản trong một đoạn,

 Thẻ “img” đại diện cho hình ảnh,…

 Thẻ “a” đại diện cho một liên kết,…

 Cách HTML hoạt động

 Mỗi thẻ HTML sẽ có tác dụng và cú pháp riêng, được đặt giữa các ký tự

“<” và “>” Nội dung của thẻ được đặt giữa các cặp thẻ mở và thẻ đóng, được đặt giữa các ký tự “<” và “>” và được phân biệt bằng dấu “/” Ví dụ,

để tạo một đoạn văn bản, bạn sử dụng thẻ “p” như sau:

 <p>Đây là một đoạn văn bản.</p>

 Ngoài ra, HTML còn sử dụng các thuộc tính để định dạng và tùy chỉnh các phần

tử trên trang web

 Ví dụ:

 Thuộc tính “href” được sử dụng để chỉ định đường dẫn của liên kết,

 Thuộc tính “src” được dùng để chỉ định đường dẫn của video hoặc hình ảnh,…

Trang 10

 Khi trình duyệt web hiển thị một trang HTML, nó sẽ tải và phân tích các thẻ HTML và các thuộc tính để hiển thị các phần tử trên trang web theo cách được định dạng trong mã HTML.

1.4 Các tag thông dụng của HTML

 <html>: Thẻ mở đầu của trang HTML - none

 <head> </head>: Thẻ chứa các thẻ trong phần đầu của trang HTML - none

 <title> </title>: Tiêu đề trang web - none

 <meta>: Mô tả tổng quát về nội dung trang web - none

 <link>: Dùng để nhúng một tập tin nào đó vào trang web - none

 <script> </script>: Dùng để nhúng các tập tin javascript - none

 <style> </style>: Dùng để bao bọc một nội dung về css - none

 <body> </body>: Thẻ chứa nội dung chính của website - block level

 <h1></h1>: Thẻ để hiện tiêu đề của một vấn đề nào đó - block level

 <div> </div>: Thẻ này thường dùng để chứa nội dung - block level

 <span> </span>: Thẻ chứa nội dung - inline

 <p> </p>: Thẻ chứa nội dung (đoạn văn) - block level

 <center> </center>: Thẻ canh giữa các đối tượng nằm bên trong - block level

 <a> </a>: Thẻ tạo link - inline

 <ul> </ul>: Kết hợp với thẻ <li> để mô tả liệt kê theo dạng danh sách - block level

 <img>: Thẻ dùng để hiển thị một hình ảnh nào đó - inline

 <form> <input>: Thẻ hiển thị những phần tử trong form nhập liệu - block level

 <br>: Thẻ xuống hàng - block level

 <hr>: Thẻ tạo đường kẻ ngang - block level

 <table> </table>: Tạo bảng - block level

 <iframe> </iframe>: Tạo frame - block level

 <b> </b>: Tạo chữ đậm - inline

 <i> </i>: Tạo chữ nghiêng - inline

 <u> </u>: Tạo chữ gạch dưới - inline

 <s> </s>: Tạo chữ gạch cắt ngang - inline

 <sub> </sub> <sup> </sup>: Tạo kiểu chứ - inline

 <blockquote>: Mộ tả một phần của trích dẫn - block level

 <tt> </tt> <code> </code>: Tạo kiểu chữ cho phần mô tả mã nguồn - block level

 <pre>: Định dạng nội dung - block level

Trang 11

1.5 Ưu và nhược điểm của HTML

1.5.1 Ưu điểm

 HTML là chuẩn mực Internet do tổ chức W3C (World Wide Web Consortium) duy trì

 Có mã nguồn mở, cho phép dữ liệu được công khai và miễn phí sử dụng

 Dễ dàng tìm hiểu và sử dụng nên HTML trở nên rất phổ biến, nhờ đó có được nguồn tài nguyên phong phú

 Tất cả trình duyệt hiện nay đều hỗ trợ ngôn ngữ HTML và được thiết lập mặc địnhtrong mọi cửa sổ, do đó người dùng không cần phải mua thêm phần mềm hỗ trợ nào khác

 Tính năng bảo mật của HTML không quá cao nên rất dễ bị tin tặc tấn công

 Các trang web được lập trình riêng biệt với nhau nên sẽ không có tính tập trung

1.6 HTML, CSS và JavaScript liên quan với nhau như thế nào?

 Trong quá trình xây dựng nên một website hoàn chỉnh, bộ 3 HTML, CSS và JavaScript sẽ đảm nhận các công việc sau:

 HTML có nhiệm vụ xây dựng nội dung, cấu trúc cơ bản trong các trang web

 Còn CSS được sử dụng nhằm kiểm soát hiệu quả trình bày, định dạng và bố cục nội dung

 Và cuối là JavaScript sẽ được dùng để kiểm soát hành vi của các yếu tố khác nhau trong quá trình xây dựng website

 Có thể xem HTML, CSS và JavaScript là bộ 3 kiến thức nền tảng mà mọi lập trìnhviên bắt buộc phải nắm vững

Trang 12

2. TỔNG QUAN ĐỀ TÀI

2.1 Lý do chọn đề tài

 Đến với học kì môn “Thiết kế và phát triển website 1”, sinh viên được học về những kiến thức cơ bản về HTML, CSS và JS cũng với hiểu được cách thiết kế một trang web bằng html đơn giản

 DHShop là một trang web dành cho các tín đồ thời trang có thể tìm hiểu và mua những trang phục và phụ kiện phù hợp với bản thân mình Nói cách khác DHShop

là nơi thoả mãn đam mê mua sắm của mọi người

2.2 Đối tượng nghiên cứu

 Nghiên cứu, ứng dụng HTML, CSS và JS để tạo một trang web đơn giản

2.3 Phạm vi nghiên cứu

 Web thời trang DHShop

2.4 Phương pháp nghiên cứu

 Về lý thuyết

 Tìm hiểu cơ bản về HTMl, CSS và JS

 Tìm hiểu sâu về CSS để làm web trở nên linh động hơn

 Tìm hiểu về JS để xử lý các sự kiện của trang web

 Về thực nghiệm

 Xây dựng Web DHShop dành cho các các tín đồ thời trang

2.5 Cấu trúc và chức năng của website

 Bao gồm các trang sau:

 Trang chủ

 Trang Đăng nhập-Đăng ký

 Trang hiển thị danh sách sản phẩm cho nam

 Trang hiển thị danh sách sản phẩm cho nữ

 Trang hiển thị danh sách sản phẩm cho trẻ em

 Các trang chi tiết sản phẩm của nam(3 trang)

 Các trang chi tiết sản phẩm của nữ(8 trang)

 Các trang chi tiết sản phẩm của trẻ em(3 trang)

Trang 13

2.6 Sơ đồ Cây Mô tả mối quan hệ

Hình 1 Sơ đồ mô tả mối quan hệ

2.7 Cấu trúc thư mục project:

Hình 2 Cấu trúc thư mục

Trang 14

₋ Account.js: thực hiện chức năng của trang account.

₋ Home.js: thực hiện các chức năng của trang chủ

Trang 15

 Ý nghĩa thư mục Images

Hình 6 Các file Images

₋ Chứa tất cả các hình ảnh để thiết kế trang web

 Ý nghĩa file html

Hình 7 Các file HTML

Trang 16

 Login.html: trang đăng nhập.

 Register.html: trang đăng ký.

 DOAN.html: trang chủ.

 Dhshop.html: trang liên hệ.

 Category-kid-boy.html: trang sản phẩm dành cho bé trai.

 Category-kid-girl.html: trang sản phẩm dành cho bé gái.

 Category-kid.html: trang sản phẩm dành cho trẻ em.

 Category-jeansNu.html: trang sản phẩm dành cho nữ.

 CategoryNam.html: trang sản phẩm dành cho nam.

 CategoryNamTrend.html: trang sản phẩm đang thịnh hành dành cho nam.

 NamTrend1.html: trang chi tiết sản phẩm 1 về hàng đang thịnh hành dành cho nam.

 CategoryQuanNam.html: trang sản phẩm dành cho nam.

 QuanNam1.html: trang chi tiết sản phẩm dành cho nam.

 CategoryNu.html: trang sản phẩm dành cho nữ.

 Product1.html: trang chi tiết sản phẩm hàng mới về cho nữ.

 CategoryNuTrend.html: trang sản phẩm đang thịnh hành dành cho nữ.

 NuTrend1.html: trang chi tiết sản phẩm 1 đang thinh hành dành cho nữ.

 JeanNu1.html: trang chi tiết sản phẩm 1 về quần jeans dành cho nữ.

Trang 17

3 CHI TIẾT CÁC TRANG

3.1. Trang chủ

Hình 8 Trang chủ 3.2. Đăng nhập

Hình 9 Đăng nhập

Trang 19

3.6. Trang Hàng Nam Mới Về

Hình 13 Hàng nam mới về 3.7. Trang chi tiết sản phẩm hàng nam mới về 1

Hình 14 Chi tiết sản phẩm hàng nam mới về 1

Trang 20

3.8. Trang chi tiết sản phẩm hàng nam mới về 2

Hình 15 Chi tiết sản phẩm hàng nam mới về 2

3.9. Trang chi tiết sản phẩm hàng nam mới về 3

Tiêu đề	Thiết Kế Web Thời Trang
Tác giả	Nguyễn Văn Đông, Nguyễn Viết Hoàn
Người hướng dẫn	Nguyễn Lan Hương
Trường học	Trường Đại Học Bà Rịa – Vũng Tàu
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Đề Tài
Năm xuất bản	2022
Thành phố	Bà Rịa - Vũng Tàu

Định dạng
Số trang	40
Dung lượng	10,68 MB