Powerpoin thiết kế website bằng html css

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.5 MB, 62 trang )

TRƯỜNG ĐẠI HỌC KIẾN TRÚC HÀ NỘI
KHOA CÔNG NGHỆ THÔNG TIN

--------

BÀI TẬP LỚN
MÔN : THỰC TẬP CHUYÊN MÔN I
ĐỀ TÀI :
XÂY DỰNG WEBSITE BÁN HÀNG
TRỰC TUYẾN
Thành viên nhóm 16

: Nguyễn Văn Đại
Bùi Lệ Thu

Lớp

: 19CN2

Khóa

: 2019

Giảng viên hướng dẫn

: ThS. Nguyễn Hồng Thanh

Hà Nội năm 2021

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

Lời nói đầu
Ngày nay internet đã trở nên thông dụng và không thể thiếu trong cuộc
sống, gắn liền với sự phát triển của internet là hệ thống hàng triệu website.
Website có một vai trị quan trọng trong việc đưa mọi người tiếp cận thông tin
một cách nhanh nhất. Website là một nguồn thơng tin phong phú, nó giúp rút ngắn
khoảng cách giữa mọi người trên toàn thế giới. Ngày nay website đã trở thành
một phần không thể thiếu trong mọi lĩnh vực của đời sống. Nó được phát triển với
nhiều dạng khác nhau, một trang chia sẻ thông tin, tin tức giúp mọi người có thể
tiếp cận thơng tin một cách rễ ràng, một trang thương mại điện tử giúp mọi người
có thể trao đổi mua hàng mà không cần ra khỏi nhà hay một trang quảng bá cơng
ty giúp các doanh nghiệp có thể rễ ràng tiếp cận hàng triệu khách hàng với chỉ phi
tối ưu nhất... Đến đây ta có thấy được tầm quan trọng của website nó gắn liền với
sự phát triển của mỗi quốc gia.
Website chính là một sản phẩm tốt nhất của internet, mang đến lợi ích vơ
cùng to lớn cũng như đem lại nhiều cơ hội cho chính những người sử dụng.
Website mang lại cho người dùng những thông tin cần thiết, những vấn đề cần
giải đáp trong cuộc sống đều có thể tìm được trên các trang web, trả lời mọi thắc
mắc với thời gian nhanh chóng và hiệu quả. Khơng những thể với sự phát triển
của các mẫu web ban hàng trực tuyến cho phép người dùng internet tiếp cận được
tất cả những sản phẩm của các doanh nghiệp trên toàn thế giới Đối với doanh
nghiệp website là nơi giới thiệu hình ảnh, thương hiệu sản phẩm của doanh nghiệp
đến với người dùng. Website tạo lợi ích đa chiều từ người mua và người bản, giúp
cho người mua có thể có được mọi thơng tin minh cẩn, tư vấn, đặt hàng và thanh
toán trực tuyến, giúp cho mọi việc trở nên tự độnng hóa mà khơng phải trở nên
q phức tạp. Với lí do đó, em đã chọn đề tài “Xây dựng website bán hàng trực
tuyến” làm đề tài thực tập.
Chúng em xin cảm ơn thầy Nguyễn Hồng Thanh đã động viên, ủng hộ và

tạo những điều kiện thuận lợi nhất để chúng em có thể hồn thành đồ án này. Tuy
nhiên, do chưa có nhiều kinh nghiệm nên sẽ có nhiều sai sót, chúng em mong thầy
thơng cảm và góp ý thêm cho chúng em.

2

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2
Hà Nội Tháng 12/2021
Nhóm thực hiện
Nhóm 16

3

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

MỤC LỤC
Lời nói đầu ............................................................................................................ 2
MỤC LỤC ............................................................................................................. 4
DANH MỤC HÌNH ẢNH .................................................................................... 6
CHƯƠNG I : CƠ SỞ LÝ THUYẾT ..................................................................... 7
I. NGÔN NGỮ SIÊU VĂN BẢN HTML. .................................................... 7
1. HTML là gì? ........................................................................................... 7
2. Tập tin HTML là gì? .............................................................................. 7
3. Cấu trúc cơ bản của HTML:................................................................... 7

4. Thẻ trong HTML. ................................................................................... 8
II. NGÔN NGỮ CSS. ..................................................................................... 9
1. CSS là gì? ............................................................................................... 9
2. Tại sao phải học CSS? ............................................................................ 9
3. Cấu trúc CSS. ....................................................................................... 10
4. Cách chèn CSS vào HTML. ................................................................. 10
III. JAVASCRIP. ........................................................................................... 12
1. JavaScript là gì?.................................................................................... 12
2. Javascript dùng để làm gì: .................................................................... 13
3. Lợi ích khi dùng Javascript: ................................................................. 13
4. Các thư viện Javascript phổ biến: ........................................................ 13
5. Làm thế nào để thêm JavaScript trên website của bạn?....................... 14
CHƯƠNG II: THIẾT KẾ TRANG WEB CÁ NHÂN ........................................ 15
I. THẾ NÀO LÀ MỘT WEBSITE ? ........................................................... 15
II. CÁC BƯỚC THIẾT KẾ MỘT TRANG WEB. ...................................... 15
III. THIẾT KẾ WEBSITE. ............................................................................ 16
1. Thiết kế website giao diện có trước. .................................................... 16
2. Chuyển mẫu thiết kế sang trang web html. .......................................... 16
3. Chuẩn bị hình ảnh ,tài liệu cho trang website. ..................................... 16
4. Bố cục trang web. ................................................................................. 16
5. Viết mã HTML, CSS, JAVASCRIP. ................................................... 16
5.1. Mã HTML. .................................................................................... 16
5.1.1. Trang chủ (index.html): ............................................................ 17
4

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

5.1.2. Trang danh mục sản phẩm (cartegory.html) :........................... 19
5.1.3. Trang sản phẩm (product.html) : .............................................. 22
5.1.4. Trang giỏ hàng (cart.html) : ...................................................... 26
5.1.5. Trang giao hàng (delivery.html) : ............................................. 28
5.1.6. Trang thanh toán (payment.html) : ........................................... 31
5.2. Mã CSS: ........................................................................................ 33
5.3. Mã JS: ............................................................................................ 54
6. Demo sản phẩm: ................................................................................... 56
CHƯƠNG III: KẾT LUẬN ................................................................................ 61
TÀI LIỆU THAM KHẢO ................................................................................... 62

5

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

DANH MỤC HÌNH ẢNH
Hình 1. Giới thiệu CSS.......................................................................................... 9
Hình 2. JavaScript là một trong các ngơn ngữ lập trình đa nền tảng .................. 12
Hình 3. JavaScript được ứng dụng rất nhiều trong việc tạo dựng website ......... 13
Hình 4. Ngơn ngữ Javascript có thể được viết bởi những lập trình viên tập sự . 14
Hình 5. .............................................................................. 16
Hình 6. Giao diện trang chủ ................................................................................ 57
Hình 7. Giao diện trang Danh mục sản phẩm ..................................................... 58
Hình 8. Giao diện trang sản phẩm....................................................................... 59
Hình 9. Giao diện trang Giỏ hàng ....................................................................... 59
Hình 10. Giao diện trang Đặt hàng ..................................................................... 60
Hình 11. Giao diện trang Thanh tốn .................................................................. 60

6

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

CHƯƠNG I : CƠ SỞ LÝ THUYẾT
I.

NGÔN NGỮ SIÊU VĂN BẢN HTML.

1. HTML là gì?
✓ HTML (HyperText Markup language) là ngôn ngữ đánh dấu siêu văn bản
, dung để tạo ra các trang web .
✓ HTML bao gồm một số tập hợp các thẻ dùng để :
• Định nghĩa cấu trúc của trang web.
• Định nghĩa nội dung của trang web
• Tạo các siêu liên kết để liên kết đến nhưng trang web khác.
• Chèn âm thanh, hình ảnh, video ,…. vào trang web.
2. Tập tin HTML là gì?
✓ Tập tin HTML là một loại tin text có chứa các thẻ HTML(tập tin có phần
mở rộng là .html hoặc .htm).
✓ Tập tin HTML còn được gọi là một trang web.
✓ Nếu cú pháp có bị sai thì trình duyệt vẫn khơng báo lỗi , nó chỉ hiển thị
khơng như ý muốn.
3. Cấu trúc cơ bản của HTML:
✓ Một tài liệu HTML ln được gói trong cặp tag <html> và </html>
✓ Cặp tag <body> và </body> sẽ là nơi mơ tả những gì có thể nhìn thấy của

trang.
Như vậy, một trang web viết bằng html sẽ có cấu trúc cơ bản như sau:
<html>
<body>
Phần trình bày nội dung
</body>
</html>

Ngồi phần body cịn có phần head, được viết bởi cặp
tag <head></head>. Nếu bạn sử dụng cặp tag này, bạn bắt buộc phải viết
7

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

thêm một cặp tag nữa, đó là <title></title>. Giữa <title> và </title> là tên
của trang web được hiển thị phía trên cùng của menubar. Như vậy một trang
web với lúc này sẽ có cấu trúc như sau:
<head>
<title>Tiêu đề của trang web</title>
</head>
<body>
Phần trình bày nội dung
</body>
</html>

4. Thẻ trong HTML.
✓ Mỗi thẻ là một từ khóa được bao quanh bởi ngoặc nhọn (vd: <html>;

<head> ;<body>).
✓ Mỗi thẻ HTML thường bao gồm 1 cặp :thẻ mở (bắt đầu định dạng), thẻ
đóng (kết thúc định dạng).
✓ Thẻ đóng giống thẻ mở , nhưng ở thẻ đóng thì có thêm dấu gạch chéo
“/”trước tên thẻ (vd: </html>;</head>;</body>).
✓ Văn bản cần định dạng được đặt giữa thẻ đóng và thẻ mở:
✓ Các khoảng trắng dư thừa và ký tự xuống dòng sẽ bị bỏ qua.
✓ Có 2 loại thẻ :
• Thẻ đơn : Các thẻ chỉ có 1 thẻ mở ( vd: <img>)
• Thẻ kép là một cặp thẻ đóng và mở ( vd:

;<i></i> ).
• Các thẻ được lồng vào nhau nhưng không chéo nhau.
Vd đúng :

Tôi là <b>sinh</b>viên

Vd sai:

Tơi là <b>sinh

viên</b>
✓ Một số thẻ có thêm các thuộc tính.
• Dùng để chỉ định một số thuộc tính khác liên quan đến thẻ .
• Nếu có , sẽ được khai báo trong thẻ mở.
• Vd:

(color là một thuộc tính dùng chỉ màu sắc
văn bản.)

8

Bài tập lớn mơn: Thực tập chun mơn 1

II.

Nhóm 16 – Lớp 19CN2

NGƠN NGỮ CSS.

1. CSS là gì?
– CSS là viết tắt của cụm từ “Cascading Style Sheet”, nó là một ngơn ngữ
quy định cách trình bày của các thẻ html trên trang web. Là ngôn ngữ đang
được sử dụng rất nhiều trong lập trình web, có thể nói CSS ra đời đã tạo
nên một cuộc cách mạng. Đôi khi các bạn sẽ bối rối khi nhận thấy rằng các
đoạn code mình viết hiển thị khơng giống nhau trên các trình duyệt khác
nhau, CSS sẽ giúp các bạn giải quyết bài toán này.
– CSS quy định cách hiển thị nội dung của các thẻ HTML trên các trình
duyệt gần như giống nhau, bằng cách quy định các thuộc tính cho thẻ
HTML đó. Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng
chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều
kiểu khác. Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng
chọn đó.

Hình 1. Giới thiệu CSS
2. Tại sao phải học CSS?
– Css có thể tùy chỉnh bố cục định dạng hiển thị nội dung,màu sắc căn chỉnh
màu nền,đường viền,đổ bóng... cho các thẻ html . Nếu 1 website mà chỉ
làm bằng html không sử dụng css thì website đó nhìn sẽ rất thơ xơ. Bạn có
thể tưởng tượng nó như 1 chiếc xe máy mà bỏ hết lớp sơn và áo bên ngồi
chỉ cịn lại mỗi bộ khung và máy.
9

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

– CSS cung cấp cho bạn hàng trăm thuộc tính trình bày đành cho các đối
tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu

quả.
– Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt khác nhau.
3. Cấu trúc CSS.
Một đoạn CSS bao gồm 4 phần như thế này:

vùng chọn {
thuộc tính: giá trị;
thuộc tính:giá trị;
}
Nghĩa là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và
giá trị sẽ nằm bên trong cặp dấu ngoặc nhọn {}. Mỗi thuộc tính sẽ ln có
một giá trị riêng, giá trị có thể là dạng số, hoặc các tên giá trị trong danh
sách có sẵn của CSS.
Phần giá trị và thuộc tính phải được cách nhau bằng dấu hai chấm, và
mỗi một dòng khai báo thuộc tính sẽ ln có dấu chấm phẩy ở cuối. Một
vùng chọn có thể sử dụng khơng giới hạn thuộc tính.
VD:
.product-related-title p {
font-family: var(--main-text-font);
font-size: 14px;
font-weight: bold;
color: #333333;
}

4. Cách chèn CSS vào HTML.
Trên thực tế thì chúng ta có tới 3 cách hay được sử dụng chèn css vào
website:
10

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

– Cách 1: Chèn nội dung CSS vào trong cặp thẻ <style></style> trong
phần <head></head> của trang web.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cách chèn CSS vào html</title>
<style>
body{background: red;}
h1{ color:blue;font-size:12px;}
</style>
</head>
<body>

Cách 1

</body>
</html>

– Cách 2 :Chèn nội dung CSS vào trực tiếp thẻ mở thông qua thuộc tính
style:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cách chèn CSS vào html</title>
</head>
<body>

Cách 2

</body>

</html>

– Cách 3: Lưu nội dung CSS ra 1 file riêng có phần mở rộng là .css và
chèn file này vào website thông tin thẻ <link>, thường file css được chèn
trong cặp thẻ <head></head>
Sau khi tao file có tên style.css vs nội dung như sau:
body { backgroud:red;}
h1{font-size: 12px;color: blue;}

Lúc này chúng ta sẽ chèn file này vào website như sau:
<!DOCTYPE html>

11

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

<html lang="en">
<head>
<title>Cách chèn CSS vào html</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

Cách2

</body>
</html>

III.

JAVASCRIP.

1. JavaScript là gì?
– JS (viết tắt của Javascript) là một nền tảng (cross-platform), ngôn ngữ
kịch bản hướng đối tượng (object-oriented). Nó là một ngơn ngữ nhỏ và
nhẹ. Chạy trong mơi trường máy chủ lưu trữ (ví dụ: trình duyệt web),
JavaScript có thể được kết nối với các đối tượng của mơi trường để cung
cấp kiểm sốt chương trình đối với chúng.
– JavaScript là ngơn ngữ lập trình dựa trên logic. Nó có thể được sử dụng
để sửa đổi nội dung trang web. Và khiến nó hoạt động theo nhiều cách
khác nhau để đáp ứng với hành động của người dùng. Các cách sử dụng
phổ biến cho JavaScript bao gồm các hộp xác nhận, kêu gọi hành động
và thêm các danh tính mới vào thơng tin hiện có.

Hình 2. JavaScript là một trong các ngơn ngữ lập trình đa nền tảng

12

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

2. Javascript dùng để làm gì:
– JavaScript có thể được ứng dụng trong rất nhiều lĩnh vực:
• Lập trình web
• Xây dựng ứng dụng cho website máy chủ
• Ứng dụng di động, app, trị chơi…
3. Lợi ích khi dùng Javascript:

Là một ngơn ngữ lập trình phổ biến sử dụng trên 92% nền tảng website
hiện nay, JavaScript đã thể hiện vai trò quan trọng với lĩnh vực này. Tầm
quan trọng của nó thể hiện qua các thao tác, cơng dụng như:
– Triển khai tập lệnh phía máy khách
– Viết mã phía máy chủ
– Thiết kế web responsive
– Google AMP
– Nhiều bộ chuyển đổi

Hình 3. JavaScript được ứng dụng rất nhiều trong việc tạo dựng website
4. Các thư viện Javascript phổ biến:
Hiện nay có rất nhiều thư viện và khung được viết từ Javascript như:
• jQuery: Chuyên về hiệu ứng.
• js: Chuyên xây dựng ứng dụng thời gian thực.
• AngularJS: Chuyên xây dựng ứng dụng trang cá nhân.
• ReactJS: Chuyên viết ứng dụng mobile.
13

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

• Một số thư viện khác như ExtJS, Sencha Touch,….

Hình 4. Ngơn ngữ Javascript có thể được viết bởi những lập trình viên tập sự
5. Làm thế nào để thêm JavaScript trên website của bạn?
Để thêm chuỗi code JavaScript vào trang web, bạn sẽ cần gắn tag
<script></script>. Ví dụ như sau:
<script type="text/javascript">

Your JavaScript code
</script>

Với quy tắc cơ bản, bạn nên gắn JavaScript trong tag <header> cho
website của bạn trừ khi bạn muốn nó thực thi tại một thời điểm nhất định
hoặc một yếu tố nhất định của trang web. Bạn cũng có thể lưu code
JavaScript dưới file riêng và gọi nó lên mỗi khi cần trên website.

14

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

CHƯƠNG II: THIẾT KẾ TRANG WEB CÁ NHÂN
I.

THẾ NÀO LÀ MỘT WEBSITE ?
Website còn gọi là trang web, trang mạng, là một tập hợp trang web,
thường chỉ nằm trong một tên miền hoặc tên miền phụ trên World Wide
Web của Internet. Một tran veb là tập tin HTML hoặc XHTML có thể
truy nhập dùng giao thức HTTP. Website có thể được xây dựng các tệp
tin HTML (website tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ
(website động). Website có thể được xây dựng bằng nhiều ngơn ngữ lập
trình khác nhau (PHP,.NET, Java, Ruby on Rails...)
 Nghĩa đen:
Hãy hình dung website như một tịa nhà nơi bạn đang ở .Nó sẽ bao gồm
các thành phần sau:
+ Địa chỉ : là 1 cái tên miền ,vd : www.facebook.com

+ Một chỗ với đủ không gian (Hosting -không gian lưu trữ website)
+ Các căn phòng khác nhau như phòng ngủ , phòng bếp ( các trang web
khác nhau)
+ Một cái cửa lớn cho mọi người ra vào( Bandwidth- băng thông)
+ Một người cai quản ( nhà thiết kế , quản lí trang web)

II.

CÁC BƯỚC THIẾT KẾ MỘT TRANG WEB.
✓ Chọn một mẫu thiết kế
✓ Chuyển mẫu thiết kế sang trang web html
✓ Chuẩn bị ảnh , tài liệu website
✓ Chuẩn bị bố cục trang web
✓ Viết code html,css, javascrip

15

Bài tập lớn mơn: Thực tập chun mơn 1
III.

Nhóm 16 – Lớp 19CN2

THIẾT KẾ WEBSITE.

1. Thiết kế website giao diện có trước.
Giao diện trang web này của nhóm em được tham khảo từ TRANG
WEB IVYMODA và được chỉnh sửa lại để phù hợp
với mơn học hơn.

Hình 5. />
2. Chuyển mẫu thiết kế sang trang web html.
Sử dụng visual studio code để chuyển hình ảnh giao diện có sẵn sang
mã html ,css, javascrip.
3. Chuẩn bị hình ảnh ,tài liệu cho trang website.
Tài liệu , hình ảnh được lấy trực tiếp từ trang web chính. nó giúp bài
làm thêm đẹp và hoàn thiện hơn hơn.
4. Bố cục trang web.
Về bố cục của trang chủ và các trang con cơ bản là giống nhau. Và
được định dang bởi file CSS. Từ kích thước cách trình bày , font chữ .. của
pagge , head , ngang , và footer. Chỉ có phần center tùy thuộc vào nội dung
của mỗi trang nên sẽ khác nhau.

5. Viết mã HTML, CSS, JAVASCRIP.
5.1.

Mã HTML.
16

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

5.1.1. Trang chủ (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

alt=""></a>
</div>
<div class="top-menu-items">
<ul>
<li>Nữ
<ul class="top-menu-item">
<li>
<a href="cartegory.html">Hàng nữ mới
về</a>
</li>
<li>
<a href="">Hoàng Cúc Collection</a>
</li>
<li>
<a href="">Áo nữ</a>
</li>
<li>

<a href="">Váy nữ</a>
</li>
</ul>
</li>
<li>Nam
<ul class="top-menu-item">
<li>
<a href="">Hàng Nam mới về</a>
</li>

17

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

<li>
<a href="">Áo nam</a>
</li>
<li>
<a href="">Váy nam</a>
</li>
<li>
<a href="">Quần nam</a>
</li>
</ul>
</li>
<li>Trẻ em</li>
<li>Flast sale</li>

<li>Hot items</li>
<li>Bộ sưu tập</li>
<li>Tin tức</li>
<li>Thơng tin</li>
</ul>
</div>
<div class="top-menu-icons">
<ul>
<li>
<input type="text" placeholder="tìm kiếm">
<i class="fas fa-search"></i>
</li>
<li>
<i class="fas fa-user-secret"></i>
</li>
<li>
<i class="fas fa-shopping-cart"></i>
</li>
</ul>
</div>
</div>
</div>
</secsion>

<section class="sliders">
<div class="aspect-ratio-169">
<img src="image/slide1.jpg">
<img src="image/slide2.jpg">
<img src="image/slide3.jpg">
</div>

Tải ứng dụng IVY moda

Nhận bản tin IVY moda

alt=""></a></li>

<li><a href="">Liên hệ</a></li>
<li><a href="">Tuyển dụng</a></li>
<li><a href="">Giới thiệu</a></li>
<li><a href=""><i class="fab fa-facebook-f"></i></a>href=""><i class="fab fa-youtube"></i></a></li>
</div>
<div class="footer-text">
Công ty Cổ phần Dự Kim với số đăng ký kinh doanh:
0105777650

Địa chỉ đăng ký: Tổ dân phố Tháp, P.Đại Mỗ, Q.Nam Từ
Liêm, TP.Hà Nội, Việt Nam - 0243 205 2222

Đặt hàng online : 0246 662 3434 .
</div>
<div class="footer-bottom">
©Ivymoda All rights reserved
</div>
</div>
</section>

<script src="script.js"></script>

</body>
</html>

5.1.2. Trang danh mục sản phẩm (cartegory.html) :
19

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

<section class="cartegory">
<div class="container">
<div class="cartegory-top row">

Trang chủ

Nữ

Hàng nữ mới về

</div>
</div>
<div class="container">
<div class="row">
<div class="cartegory-left">
<ul>
<li class="cartegory-left-li "><a href="#">NỮ</a>
<ul>
<li><a href="">HÀNG NỮ MỚI VỀ</a></li>
<li><a href="">BEYOND TRENDY</a></li>
<li><a href="">JEANS FOR JOY</a></li>
<li><a href="">JEANS FOR JOY</a></li>
</ul>
</li>
<li class="cartegory-left-li"><a href="#">NAM</a>
<ul>
<li><a href="">HÀNG NAM MỚI VỀ</a></li>
<li><a href="">BEYOND TRENDY</a></li>
<li><a href="">JEANS FOR JOY</a></li>
<li><a href="">JEANS FOR JOY</a></li>
</ul>
</li>

HÀNG NỮ MỚI VỀ

</div>
<div class="cartegory-right-top-item">
<button><span>Bộ lọc</span> <i class="fas fa-sortdown"></i></button>
</div>
<div class="cartegory-right-top-item">
<select name="" id="">
<option value="">Sắp xếp</option>
<option value="">Giá cao đến thấp</option>

20

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

<option value="">Giá thấp đến cao</option>
</select>
</div>

SET ÁO DÀI Ý NIÊN MS 86M7107

</a>

1.743.000<sup>đ</sup>

</div>
<div class="cartegory-right-content-item">
<img src="image/sp2.jpg" alt="">

SET ÁO DÀI Ý NIÊN MS 86M7107

1.743.000<sup>đ</sup>

</div>
<div class="cartegory-right-content-item">
<img src="image/sp3.jpg" alt="">

SET ÁO DÀI Ý NIÊN MS 86M7107

1.743.000<sup>đ</sup>

</div>
<div class="cartegory-right-content-item">
<img src="image/sp4.jpg" alt="">

SET ÁO DÀI Ý NIÊN MS 86M7107

1.743.000<sup>đ</sup>

</div>
<div class="cartegory-right-content-item">
<img src="image/sp5.jpg" alt="">

SET ÁO DÀI Ý NIÊN MS 86M7107

1.743.000<sup>đ</sup>

</div>
<div class="cartegory-right-content-item">
<img src="image/sp6.jpg" alt="">

SET ÁO DÀI Ý NIÊN MS 86M7107

1.743.000<sup>đ</sup>

</div>
<div class="cartegory-right-content-item">
<img src="image/sp7.jpg" alt="">

SET ÁO DÀI Ý NIÊN MS 86M7107

1.743.000<sup>đ</sup>

</div>
<div class="cartegory-right-content-item">
<img src="image/sp8.jpg" alt="">

SET ÁO DÀI Ý NIÊN MS 86M7107

1.743.000<sup>đ</sup>

</div>
</div>

21

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

<div class="cartegory-right-bottom row">
<div class="cartegory-right-bottom-items">

Hiện thị 2 <span>|</span> 4 sản phẩm

</div>
<div class="cartegory-right-bottom-items">

<span>«</span>1 2 3 4 5<span>»</span>Trang
cuối

</div>

</div>
</div>
</div>
</div>
</section>

5.1.3. Trang sản phẩm (product.html) :
<section class="product">
<div class="container">
<div class="product-top row">

Trang chủ

Nữ

Hàng nữ mới về

ÁO DÀI Ý NIÊN MS 86M7107

</div>
<div class="product-content row">
<div class="product-content-left row">
<div class="product-content-left-big-img">
<img src="image/sp1.1.jpg" alt="">
</div>
<div class="product-content-left-small-img">
<img src="image/sp1.1.jpg" alt="">
<img src="image/sp1.2.jpg" alt="">
<img src="image/sp1.3.jpg" alt="">
</div>
</div>
<div class="product-content-right">
<div class="product-content-right-product-name">

SET ÁO DÀI Ý NIÊN MS 86M7107

MSP: 86M7107

</div>
<div class="product-content-right-product-price">

1.743.000<sup>đ</sup>

</div>
<div class="product-content-right-product-color">

22

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

<div class="product-content-right-product-colorimg">
src=" alt="">
</div>
</div>
<div class="product-content-right-product-size">

Size:

Số lượng:

Vui lòng chọn size

MUA HÀNG

</button></a>
<button>

TÌM TẠI CỬA HÀNG

</button>
</div>
<div class="product-content-right-product-icon">
<div class="product-content-right-product-iconitem">
<i class="fas fa-phone-alt"></i>

Hotline

</div>
<div class="product-content-right-product-iconitem">
<i class="far fa-comments"></i>

Chat

</div>
<div class="product-content-right-product-iconitem">
<i class="far fa-envelope"></i>

Mail

</div>
</div>
<div class="product-content-right-product-QR">

23

Bài tập lớn mơn: Thực tập chun mơn 1

Nhóm 16 – Lớp 19CN2

<img src="image/qrcode2.png" alt="">
</div>
<div class="product-content-right-bottom">
<div class="product-content-right-bottom-top">
∨
</div>
<div class="product-content-right-bottom-contentbig">
<div class="product-content-right-bottomcontent-title row">
<div class="product-content-right-bottomcontent-title-item chitiet">

Chi tiết

</div>
<div class="product-content-right-bottomcontent-title-item baoquan">

Bảo quản

</div>
<div class="product-content-right-bottomcontent-title-item">

Tham khảo size

</div>
</div>
<div class="product-content-right-bottomcontent">
<div class="product-content-right-bottomcontent-chitiet">
Với BST Hồng Cúc, ta vẫn thấy được
những gì mộc mạc nhất của chiếc áo dài, nhưng
điều làm ta rạo rực là chút ngẫu hứng
đầy tinh tế đến hút hồn trong các thiết kế của

BST: những đường nét mềm mại mà dứt
khoát, cách điệu ở nơi cổ áo, tay và đặc biệt là
sự 'chơi màu' từ áo, quần đến
khánh,...đã khiến BST vừa có sắc, vừa có thanh
âm.

Ý Niên: Được chọn làm dresscode cho
những ngày Tết bởi sắc đỏ tượng trưng cho may
mắn, sung túc và sự nồng nàn của tình
yêu.

Kiểu dáng: áo dài thiết kế cổ truyền
thống, dáng suông, tay dài kiểu giắc lăng.

Phù hợp: lễ tết, cưới hỏi, đi sự
kiện, tạo vẻ trẻ trung, duyên dáng cho người mặc.

24

Nhóm 16 – Lớp 19CN2

Bài tập lớn mơn: Thực tập chuyên môn 1

Màu sắc: Cam - Đỏ - Xanh Lime - Đỏ
Hồng
</div>
<div class="product-content-right-bottomcontent-baoquan">
Chi tiết bảo quản sản phẩm :
* Vải dệt kim : sau khi giặt sản phẩm
phải được phơi ngang tránh bai dãn.

* Vải voan , lụa , chiffon nên giặt
bằng tay.

* Vải thô , tuytsy , kaki khơng có
phối hay trang trí đá cườm thì có thể giặt
máy.

* Vải thơ , tuytsy, kaki có phối màu
tường phản hay trang trí voan , lụa , đá cườm
thì cần giặt tay.

* Đồ Jeans nên hạn chế giặt bằng máy
giặt vì sẽ làm phai màu jeans.Nếu giặt thì nên
lộn trái sản phẩm khi giặt , đóng
khuy , kéo khóa, khơng nên giặt chung cùng đồ sáng
màu , tránh dính màu vào các sản phẩm
khác.

* Các sản phẩm cần được giặt ngay
không ngâm tránh bị loang màu , phân biệt màu và
loại vải để tránh trường hợp vải
phai. Không nên giặt sản phẩm với xà phịng có chất
tẩy mạnh , nên giặt cùng xà phịng pha
lỗng.

* Các sản phẩm có thể giặt bằng máy
thì chỉ nên để chế độ giặt nhẹ , vắt mức trung
bình và nên phân các loại sản phẩm
cùng màu và cùng loại vải khi giặt.
</div>
</div>
</div>
</div>
</div>