(Tiểu luận) tiểu luận môn học thiết kế website thiết kế website bán quần áo bóng đá cho cửa hàng aobongda 24h

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 (2.62 MB, 37 trang )

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
THIẾT KẾ WEBSITE

THIẾT KẾ WEBSITE
BÁN QUẦN ÁO BĨNG ĐÁ CHO
CỬA HÀNG AOBONGDA.24H
GVHD:

THS.

NGUYỄN

VĨNH
SVTH: NGUYỄN BÁ TOÀN
MSSV: 2024802010007
SVTH: TRẦN QUANG HUY
MSSV: 2024802010422
LỚP: D20CNTT03

0

0

Tieu luan

HỮU

Ti uểlu nậthiếết kếế website.

B7NH DƯƠNG – 4/2021

0

0

Tieu luan

LỜI NĨI ĐẦU
Hiện nay, trên thế giới cơng nghệ thơng tin và thương mại điện tử đang phát triển
rất mạnh mẽ. Việc mua bán trao đổi hàng hóa trở nên hết sức đơn giản và nhanh gọn,
giờ đây, mọi người có thể ngồi ở nhà để mua sắm mọi thứ theo ý muốn nhờ việc phát
triển các website trực tuyến. Thương mại điện tử giúp chúng ta tiết kiệm đáng kể các
chi phí vận chuyển trung gian, chi phí giao dịch và đặc biệt là giúp tiết kiệm thời gian
để con người tham gia vào các hoạt động khác. Hơn nữa, thương mại điện tử cịn giúp
con người có thể tìm kiếm tự động theo nhiều mục đích khác nhau, tự động cung cấp
thông tin theo nhu cầu và sở thích của con người với giá thành rẻ và được hỗ trợ rất
nhiều. Giờ đây, con người có thể ngồi tại nhà để mua sắm mọi thứ theo ý muốn và các
website bán hàng trên mạng sẽ giúp ta làm được điều đó. Bên cạnh đó, vấn đề di
duyển, đi lại ở một số nơi trở nên khó khăn do việc kẹt xe, dân cư đơng đúc và tình
hình dịch bệnh Covid 19 diễn biến phức tạp khiến mọi người gặp cản trở khi đến tận
cửa hàng để chọn mua hàng hóa. Nhằm giải quyết vấn đề này nhóm chúng em xây
dựng website “Bán quần áo bóng đá cho cửa hàng Aobongda.24h ” . Đây là một
website đơn giản nhưng có thể giải quyết được nhiều hạn chế của cửa hàng bán quần
áo truyền thống.
Đề tài tiểu luận gồm các phần được phân chương như sau:
Chương 1: Tổng quan về đề tài

Chương 2: Giới thiệu công nghệ
Chương 3: Giao diện website
Chương 4: Kết luận và hướng phát triển

i

0

0

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

MỤC LỤC
LỜI NĨI ĐẦU.................................................................................................................
DANH MỤC HÌNH..................................................................................................... .iv
CHƯƠNG 1. TỔNG QUAN VỀ ĐỀ TÀI
1.Tên Đề Tài....................................................................................................................
2.Mục Tiêu của Đề Tài....................................................................................................
3.Ý Nghĩa Của Đề Tài.....................................................................................................
4.Đối Tượng Của Đề Tài.................................................................................................
5.Một Số Trang Chính Của Website................................................................................
CHƯƠNG 2. GIỚI THIỆU CƠNG NGHỆ
1.Giới Thiệu Về HTML...................................................................................................
1.1

HTML là gì?

1.2

Cơng dụng của HTML.

1.3

Định dạng của HTML.

2.Giới thiệu về Adobe Dreamweaver...............................................................................
3.Ngôn ngữ CSS..............................................................................................................
4.Ngôn ngữ Javascript.....................................................................................................
CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH
1. Sơ đồ website..................................................................................................... 5
2. Đặc Tả Giao Diện.................................................................................................
2.1Giao diện trang chủ.....................................................................................................
2.2Giao diện trang giới thiệu...........................................................................................
2.3Giao diện trang liên hệ..............................................................................................9
2.4Giao diện trang đăng kí...........................................................................................10
2.5Giao diện trang đăng nhập......................................................................................11
2.6Giao diện trang danh mục sản phẩm.......................................................................12
2.7Giao diện áo Barca.................................................................................................13
2.8Giao diện áo Đức....................................................................................................13
2.9Giao diện áo Tây Ban Nha......................................................................................14
2.10Giao diện áo Brazil............................................................................................... 14
2.11Giao diện áo Pháp................................................................................................. 15
2.12Giao diện áo Italia................................................................................................. 15
ii

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

2.13 Giao diện áo Bồ Đào Nha....................................................................................16
2.14 Giao diện áo không Logo.....................................................................................16
2.16 Giao diện áo CLB Italia.......................................................................................17
2.18 Giao diện áo Đức+Pháp.......................................................................................17
2.17 Giao diện áo CLB Anh........................................................................................18
2.15 Giao diện giày thể thao........................................................................................19
2.19 Giao diện chi tiết giày thể thao............................................................................19
2.20 Giao diện chi tiết CLB Manchester United..........................................................20
2.21 Giao diện chi tiết CLB Barcelona........................................................................21
2.22 Giao diện chi tiết áo không Logo.........................................................................22
2.23 Giao diện chi tiết áo CLB Real Madrid...............................................................23
2.24 Giao diện chi tiết áo CLB Arsenal.......................................................................24
2.25 Giao diện chi tiết áo CLB Dortmund...................................................................25
2.26 Giao diện chi tiết giỏ hàng...................................................................................26
Kết luận....................................................................................................................... 27
Hướng phát triển đề tài................................................................................................27
Tài liệu tham khảo.......................................................................................................28

iii

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

DANH MỤC H7NH
Hình * Giao diện chương trình...................................................................................................5
Hình 1.1 Giao diện trang chủ.......................................................................................6
Hình 1.2 Giao diện trang giới thiệu.............................................................................8
Hình 1.3 Giao diện trang liên hệ..................................................................................9
Hình 1.4 Giao diện trang đăng kí.................................................................................10
Hình 1.5 Giao diện trang đăng nhập............................................................................11
Hình 1.6 Giao diện trang danh mục sản phẩm.............................................................12
Hình 1.7 Giao diện trang danh mục áo Barca..............................................................13
Hình 1.8 Giao diện trang danh mục áo Đức.................................................................13
Hình 1.9 Giao diện trang danh mục áo Tây Ban Nha..................................................14
Hình 1.10 Giao diện trang danh mục áo Brazil............................................................14
Hình 1.11 Giao diện trang danh mục áo Pháp..............................................................15
Hình 1.12 Giao diện trang danh mục áo Italia.............................................................15

Hình 1.13 Giao diện trang danh mục áo Bồ Đào Nha..................................................16
Hình 1.14 Giao diện trang danh mục áo khơng Logo..................................................16
Hình 1.15 Giao diện danh mục áo CLB Italia..............................................................17
Hình 1.18 Giao diện danh mục áo CLB Đức+Pháp.....................................................17
Hình 1.16 Giao diện danh mục áo CLB Anh...............................................................18
Hình 1.17 Giao diện danh mục áo CLB Tây Ban Nha.................................................18
Hình 1.19 Giao diện trang danh mục giày thể thao......................................................19
Hình 1.20 Giao diện danh mục trang chi tiết giày thể thao..........................................19
Hình 1.21 Giao trang diện danh mục chi tiết áo CLB Manchester United...................20
Hình 1.22 Giao trang diện danh mục chi tiết áo CLB Barcelona.................................21
Hình 1.23 Giao trang diện danh mục chi tiết áo khơng Logo......................................22
Hình 1.24 Giao trang diện danh mục chi tiết áo CLB Real Madrid.............................23
Hình 1.25 Giao trang diện danh mục chi tiết áo CLB Arsenal.....................................24
Hình 1.26 Giao trang diện danh mục chi tiết áo CLB Dortmund.................................25
Hình 1.27 Giao diện trang giỏ hàng.............................................................................26

iv

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

DANH SÁCH CÁC KÝ TỰ, CHỮ VIẾT TẮT
Từ viết tắt

Giải thích

CSDL

Cơ sở dữ liệu

ĐVT

Đơn vị tính

CNTT

Cơng Nghệ thông tin

SP

Sản phẩm

v

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

CHƯƠNG 1. TỔNG QUAN VỀ ĐỀ TÀI
1. Tên Đề Tài.
+ THIẾT KẾ WEBSITE BÁN QUẦN ÁO BÓNG ĐÁ CHO CỬA HÀNG
AOBONGDA.24H.
2. Mục Tiêu của Đề Tài.
+ Thiết kế Website bán quần áo bóng đa cho cửa hàng Aobongda.24h.
3. Ý Nghĩa Của Đề Tài.
+ Đưa sản phẩm của công ty đến đến gần hơn với người tiêu dùng.
+ Quảng bá thương hiệu.
+ Tạo dựng một thương hiệu thời trang mới thông qua việc mua bán trên Website
+ Trau dồi kĩ năng lập trình thiết kế web.
4. Đối Tượng Của Đề Tài.
+ Đối tượng nghiên cứu chủ yếu là các sản phẩm quần áo bóng đá ,giày của nam
và nữ.
5. Một Số Trang Chính Của Website.
+ Trang chủ: Đây là trang giới thiệu sơ lược về các sản phẩm phổ biến của
cửa hàng.
+ Trang Giới thiệu: Đây là trang giúp cho khách hàng biết thêm về thông tin
của Shop.
+ Trang liên hệ: : Đây là trang mà khách hàng có thể liên hệ với shop qua các
phương tiện như Email, Số điện thoại, địa chỉ trược tiếp của shop, và có thể liên
hệ qua tổng đài của shop.
+ Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng của

trang.
+ Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua sản phẩm của
trang.
+ Trang sản phẩm: Đây là trang khách hàng xem hoặc tham khảo các mặt
hàng của cửa hàng có sẵn để lựa chọn.
+ Trang chi tiết sản phẩm: Đây là trang khách hàng nhấn vào từng sản phẩm để
xem chi tiết.

1

SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

CHƯƠNG 2. GIỚI THIỆU CÔNG NGHỆ
1. Giới Thiệu Về HTML.
1.1 HTML là gì?
HTML (Hypertext Markup Language-Ngơn ngữ đánh dấu siêu văn bả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.
Ngơn ngữ HTML dùng các tag hoặc các đoạn mã lệnh để chỉ cho các trình duyệt
(Web browsers) cách hiển thị các thành phần của trang như text và graphics.
HTML là ngôn ngữ xác định cấu trúc của thông tin.
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.
1.2 Công dụng của HTML.
Thiết kế được nội dung và hình thức của trang web.
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ực tuyến bằng
cách dùng các liên kết được chèn vào trang web.
Tạo ra các biểu mẫu trực tuyến nhằm thu thập các thông tin người dùng, quản lý
giao dịch….
Thêm vào đối tượng các hình ảnh video, âm thanh…..
1.3 Định dạng của HTML.
Là một tập tin có phần mở rộng là .htm hoặc .html
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 đó.
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.

2. Giới thiệu về Adobe Dreamweaver

2

SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

Macromedia Dreamweaver 8 là trình biên soạn HTML chuyên nghiệp dùng để
thiết kế, viết mã và phát triển website cùng các trang web và các ứ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 hoặc bạn thích làm việc
trong môi trường biên soạn trực quan, Dreamweaver cung cấp cho bạn những cơng cụ
hữu ích để nâng cao kinh nghiệm thiết kế web của bạn.
Các tính năng biên soạn trực quan trong Dreamweaver cho phép bạn tạ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ành phần

2

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ăn bả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 trong Macromedia
Fireworks hoặc trong ứng dụng ảnh khác, rồi sau đó chèn trực tiếp vào Dreamweaver.
Dreamweaver cũng cung cấp những công cụ giúp đơn giản hóa việc chèn Flash vào
trang web.
Dreamweaver cũng cho phép bạn Thiết kế các ứng dụng web động dựa theo 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ững cô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ệu XML
trên trang web của bạn.
Dreamweaver có thể tùy biến hồn tồn. Bạn có thể tạo cho riêng mình những đối

tượng và 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.
3. Ngôn ngữ CSS.
CSS (Cascading Style Sheets) là một ngơn ngữ quy định cách trình bày cho các tài
liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…
CSS cung cấp nhiều thuộc tính trình bày dành cho các đối tượng với sự sáng tạo
trong việc kết hợp các thuộc tính giúp mang lại hiệu quả cao.
CSS đã được hỗ trợ bởi tất cả các trình duyệt và hiển thị “như nhau” trên mọi hệ
điều hành.
CSS đưa ra phương thức áp dụng từ một file CSS ở ngồi. Có hiệu quả đồng bộ
khi tạo một website có hàng trăm trang hay khi muốn thay đổi một thuộc tính trình
bày nào đó.

3

SVTH: NGUYỄN BÁ TỒN – LỚP D20CNTT03

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

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 vi hơn.

4. Ngôn ngữ Javascript.
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.
Hãng Netscape đã đưa ra ngơn ngữ script có tên là LiveScript để thực hiện chức
năng này. Sau đó đổi tên thành JavaScript để tận dụng tính đại chúng của ngơn ngữ
lập trình Java.
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.
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 tốn học. Nhưng JavaScript khơng là
ngơn ngữ hướng đối tượng như C++/Java.

4

SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

CHƯƠNG 3: GIAO DIỆN CHƯƠNG TR7NH
1. Sơ đồ website :
Aobongda.
24h.com

Tool bar

Account

registration

Search

Login
introduce

Contact

Cart

Shoes

Home
page

National
team

Club

shirt
without
logo

Products

product information
and price

Hình * : Sơ đồ website.

5

SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

2. Đặc Tả Giao Diện
2.1 Giao diện trang chủ
 Mục đích: Chức năng này cho phép người dùng xem danh sách Sản Phẩm nổi
bật và mới nhất
 Trong giao diện cho người dùng, chọn kiểu hiển thị từng theo Loại Sản Phẩm.
 Mô tả chức năng: Trang này cho phép người dùng xem thông tin sản phẩm
ngồi ra cịn có thể sử các menu dọc,ngang để sang trang khác,...

6

SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

Hình 1.1: Giao diên› trang chủ

Trang web được chia làm 6 phần:
- Phần 1: Logo của trang web
- Phần 2 - Menu ngang: Bao gồm các mục: Trang chủ, Câu lạc bô ,› Đô ›i tuyển quốc

gia, Áo không logo và Giày. Mỗi danh mục liên kết đến một trang với nội dung khác
nhau.
- Phần 3: Bên trái là danh mục các sản phẩm, thương hiệu được liên kết với các
trang khác nhau và lịch ngày tháng năm.
- Phần 4: Bên phải hiển thị sản phẩm hot, chạy và liên kết website được liên kết tới
các trang khác.
- Phần 5: Ở giữa chứa các sản phẩm nổi bật và mới nhất được liên kết với trang chi
tiết sản phẩm
- Phần 6: Footer

7

SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

2.2 Giao diện trang giới thiệu
Mục đích: Khi vào trang này, khách hàng sẽ biết được một số nét khái quát về
shop, lịch sử hình thành và phát triển, định hướng phát triển trong tương lai.

Hình 1.2 : Giao diê ›n trang giới thiê ›u.

8

SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

2.3 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ới shop.
 Chức năng: Trong giao diện này cho phép người dùng gửi góp ý về sản phẩm,
thái độ phục vụ, cũng như phản hồi những sai phạm của nhân viên về shop.

Hình
1.3 : Giao diê ›n trang liên hê .›

9

SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

2.4 Giao diện trang đăng ký
 Mục Đích: Người dùng đăng ký tài khoản để trở thành khách hàng của trang.
Chức năng: Cho phép khách hàng có thể đăng ký thơng tin để đă ›t hàng cũng như
hư•ng những ưu đãi siêu vippro.

Hình 1.4 : Giao diê n› trang đăng kí.

10

SVTH: NGUYỄN BÁ TỒN – LỚP D20CNTT03

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

2.4 Giao diện trang đăng nhập

 Mục Đích: Người dùng đăng nhập tài khoản để đặt mua sản phẩm của trang.

Hình 1.5 : Giao diê ›n trang đăng nhâ ›p.

11

SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

2.6 Giao diện trang danh mục sản phẩm tiêu biểu
 Mục Đích: Thanh menu chứa danh sách các loại sản phẩm được ưa chuô n› g của
cửa hàng. Khách hàng có thể sử dụng menu này để lựa chọn sản phẩm mà mình cần
tìm nhanh chóng.
 Sử dụng danh mục sản phẩm để chọn loại sản phẩm mà mình cần.

Hình 1.6 : Giao diê n› trang danh mục sản phẩm.

12

SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

2.7 Giao diên› trang áo clb Barca

Hình

1.7 : Hình áo clb Barca.

2.8 Giao diên› trang áo ĐTQG Đức

Hình 1.8 : áo ĐTQG Đức.

13

SVTH: NGUYỄN BÁ TỒN – LỚP D20CNTT03

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

2.9 Giao diê ›n trang áo ĐTQG Tây Ban Nha

Hình
1.9 : Áo ĐTQG Tây Ban Nha.

2.11 Giao diê ›n trang áo ĐTQG Brazil

Hình 1.10 : Áo ĐTQG Brazil.

14

SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Ti uểlu nậthiếết kếế website.

2.12 Giao diê ›n trang áo ĐTQG Pháp

Hình 1.11 : Áo ĐTQG Pháp.
2.11 Giáo diên› trang áo ĐTQG Italia

Hình 1.12 : Áo ĐTQG Italia.

15

SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03

2.16 Giao diên› trang áo các clb Anh

Hình 1.17 : Áo các clb Anh.

18

SVTH: NGUYỄN BÁ TOÀN – LỚP D20CNTT03

0

0

(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h(Tieu.luan).tieu.luan.mon.hoc.thiet.ke.website.thiet.ke.website.ban.quan.ao.bong.da.cho.cua.hang.aobongda.24h

Tieu luan

(Tiểu luận) tiểu luận môn học thiết kế website thiết kế website bán quần áo bóng đá cho cửa hàng aobongda 24h

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về