Tiểu luận môn học thiết kế website thiết kế website shop bán phụ kiện điện thoại, máy tính cho công ty vietphone

+ Trang chủ: Đây là trang giới thiệu sơ lược về các sản phẩm mới của cửa hàng.. + Trang liên hệ: Đây là trang mà khách hàng có thể liên hệ với shop + Trang đăng ký: Người dùng đăng ký tà

TIỂU LUẬN MÔN HỌC THIẾT KẾ WEBSITE

THIẾT KẾ WEBSITE SHOP BÁN PHỤ KIỆN ĐIỆN THOẠI, MÁY TÍNH CHO CÔNG TY VIETPHONE

GVHD: THS NGUYỄN HỮU VĨNH SVTH: MAI THÀNH NAM & NGUYỄN LÊ DANH

MSSV: 2024801030167 & 2024801030075 LỚP: D20KTPM01

LỜI NÓI ĐẦU

Với sức mạnh công nghệ hiện đại ngày nay, thật dễ dàng để cho bất kì ai mua sắmonline Tất cả những gì bạn cần là một thiết bị điện tử như máy tính để bàn, laptop,smartphone, có kết nối internet là bạn có thể tiến hành mua sắm mà không cần nhấcchân ra khỏi nhà Với sự thuận tiện về mặt công nghệ như vậy, các trang web bán hàngonline mọc lên như nấm với đầy đủ các mặt hàng từ phân khúc xa xỉ cho đến bình dân,gần như tất cả những thứ bạn có thể mua theo cách truyền thống đều có thể có sẵn trêncác trang web thương mại điện tử

Công ty Vietphone là một công ty chuyên bán các sản phẩm phụ kiện điện thoại,máy tính Công ty Vietphone mang trong mình khát vọng trở thành công ty có thị phầnnhiều nhất ở Việt Nam và là một trong những công ty hàng đầu thế giới về các phẩmphụ kiện điện thoại với các mặt hàng từ bình dân đến cao cấp

Đề 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 tiểu luận

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

MỤC LỤC

LỜI NÓI ĐẦU i

DANH MỤC HÌNH v

CHƯƠNG 1 TỔNG QUAN VỀ ĐỀ TÀI 1

1 Tên Đề Tài. 1

2 Mục Tiêu của Đề Tài. 1

3 Ý Nghĩa Của Đề Tài. 1

4 Đối Tượng Của Đề Tài. 1

5 Một Số Trang Chính Của Website. 1

CHƯƠNG 2 GIỚI THIỆU CÔNG NGHỆ 2

1 Giới Thiệu Về HTML. 2

1.1 HTML là gì? 2

1.2 Công dụng của HTML. 2

1.3 Định dạng của HTML. 2

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

3 Ngôn ngữ CSS. 3

4 Ngôn ngữ Javascript. 3

CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH 5

1 Đặc Tả Giao Diện 5

1.1 Giao diện trang chủ 6

1.2 Giao diện trang giới thiệu 8

1.3 Giao diện trang liên hệ 9

1.4 Giao diện trang đăng ký 10

1.5 Giao diện trang đăng nhập 11

1.6 Giao diện trang danh mục sản phẩm 12

1.6.1 Giao diện danh mục tai nghe điện thoại 13

1.6.2 Giao diện danh mục củ sạc điện thoại 14

1.6.3 Giao diện danh mục cáp sạc 15

1.6.4 Giao diện danh mục đồng hồ thông minh 16

1.6.5 Giao diện danh mục ốp lưng 17

1.6.6 Giao diện danh mục tai nghe máy tính 18

1.6.8 Giao diện danh mục chuột 20

1.7 Chi tiết sản phẩm 21

1.7.1 Chi tiết APPLE WATCH SE 21

1.7.2 Chi tiết Apple watch series 6 44mm LTE nhôm 22

1.7.3 Chi tiết Apple watch series 6 44mm LTE thép 23

1.7.4 Chi tiết bàn phím Dareu ek1280 RGB 24

1.7.5 Chi tiết Lamila 2.1A C11S 25

1.7.6 Chi tiết Loa blutooth kèm mic hát YS-K21 26

1.7.7 Chi tiết Xiaomi Mi Band 5 27

1.7.8 Chi tiết Xiaomi Mi Band 6 28

1.7.9 Chi tiết Realme watch Red 29

1.7.10Chi tiết Loa blutooth Oppo cao cấp kiêm đồng hồ led 30

1.7.11 Chi tiết Cục sạc nhanh Apple 20W PD Type-c 31

CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 32

1 Việc chưa làm được: 32

2 Hướng phát triển của đề tài 32

TÀI LIỆU KHAM KHẢO 33

DANH MỤC H;NH

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.6.1 Giao diện danh mục tai nghe điện thoại 13

Hình 1.6.3 Giao diện danh mục cáp sạc 15

Hình 1.6.4 Giao diện danh mục đồng hồ thông minh 16

Hình 1.6.5 Giao diện danh mục ốp lung 17

Hình 1.6.6 Giao diện danh mục tai nghe máy tính 18

Hình 1.6.7 Giao diện danh mục bàn phím 19

Hình 1.7.1 Giao diện trang chi tiết APPLE WATCH SE 21

Hình 1.7.2 Giao diện trang chi tiết Apple watch series 6 44mm LTE nhôm 22

Hình 1.7.3 Giao diện trang chi tiết Apple watch series 6 44mm LTE thép 23

Hình 1.7.4 Giao diện trang chi tiết Dareu ek1280 RGB 24

Hình 1.7.5 Giao diện trang chi tiết Lamila 2.1A C11S 25

Hình 1.7.6 Giao diện trang chi tiết Loa blutooth kèm mic hát YS-K21 26

Hình 1.7.7 Giao diện trang chi tiết Xiaomi Mi Band 5 27

Hình 1.7.8 Giao diện trang chi tiết Xiaomi Mi Band 6 28

Hình 1.7.9 Giao diện trang chi tiết Realme watch Red 29

Hình 1.7.10 Giao diện trang chi tiết Loa blutooth Oppo cao cấp kiêm đồng hồ led 30

Hình 1.7.11 Giao diện trang chi tiết Cục sạc nhanh Apple 20W PD Type-c 31

CHƯƠNG 1 TỔNG QUAN VỀ ĐỀ TÀI

1 Tên Đề Tài.

+ THIẾT KẾ WEBSITE SHOP PHỤ KIỆN ĐIỆN THOẠI VÀ MÁY TÍNH CHOCÔNG TY VIETPHONE

2 Mục Tiêu của Đề Tài.

+ Thiết kế Website shop bán phụ kiện điện thoại và máy tính cho công ty VIETPHONE

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

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 phụ kiện cho điện thoại và máytính

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 mới của cửa hàng

+ Trang Giới thiệu: Đây là trang giúp cho khách hàng xem 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

+ Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng của

+ 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

+ Trang giỏ hàng: Đây là trang để khách hang quản lý danh sách hàng hóa màngười dùng muốn mua

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ônngữ đánh dấu chuẩn dùng soạn thảo các tài liệu World Wide Web, chỉ rõ một trangWeb đượ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ằngcá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…

2 Giới thiệu về Adobe Dreamweaver

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ôitrườ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áctrang 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 trongwebsite 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 MacromediaFireworks 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àotrang 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íchcủ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épbạn dễ dàng tạo các trang XSLT, chèn file XML và hiển thị dữ liệu XML trên trangweb của bạn

Dreamweaver có thể tùy biến hoàn toàn Bạn có thể tạo cho riêng mình những đốitượ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 giagiám định Property mới và những báo cáo site mới

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ứcnă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ậptrình Java.

JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML Được trìnhduyệ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 toán học Nhưng JavaScript không làngôn ngữ hướng đối tượng như C++/Java

CHƯƠNG 3: GIAO DIỆN CHƯƠNG TR;NH

1 Đặc Tả Giao Diện

S đồồ ph ki n đi n tho iơ ụ ệ ệ ạ

S đồồ ph ki n máy tnhơ ụ ệ

1.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ẩmnổ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ảnPhẩm

Mô tả chức năng: Trang này cho phép người dùng xem thông tin sảnphẩm ngoài ra còn có thể sử các menu dọc, ngang để sang trang khác,

Hình 1.1 Giao diện trang chủ

Trang web được chia làm 7 phần:

- Phần 1: Logo của trang web và tiêu ngữ

- Phần 2: Menu ngang: Bao gồm các mục: trang chủ, giới thiệu, liên hệ, đăng

ký, đăng nhập Mỗi danh mục liên kết đến một trang với nội dung khác nhau

- Phần 3: Chạy chữ ngang bằng Marquee

- Phần 4: Bên trái là danh mục các sản phẩm được liên kết với các trang khácnhau và lịch ngày tháng năm

- Phần 5: Bên phải hiển thị sản phẩm bán nhiều nhất, quảng cáo được sửdụng thẻ Marquee để chạy và liên kết website được liên kết tới các trang khác.

- Phần 6: Ở 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ớitrang chi tiết sản phẩm

- Phần 7: Footer

1.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

1.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 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ủa nhân viên về shop

Hình 1.3 Giao diện trang liên hệ

1.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 để trở thành khách

hàng

Hình 1.4 Giao diện trang đăng ký

1.5 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

1.6 Giao diện trang danh mục sản phẩm

 Mục Đích: Thanh menu chứa danh sách các loại sản phẩm 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

 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

1.6.1 Giao diện danh mục tai nghe điện thoại

Hình 1.6.1 Giao diện danh mục tai nghe điện thoại

1.6.2 Giao diện danh mục củ sạc điện thoại

Hình 1.6.2 Giao diện danh mục củ sạc điện thoại

1.6.3 Giao diện danh mục cáp sạc

Hình 1.6.3 Giao diện danh mục cáp sạc

1.6.4 Giao diện danh mục đồng hồ thông minh

Hình 1.6.4 Giao diện danh mục đồng hồ thông minh

1.6.5 Giao diện danh mục ốp lưng

Hình 1.6.5 Giao diện danh mục ốp lung

1.6.6 Giao diện danh mục tai nghe máy tính

Hình 1.6.6 Giao diện danh mục tai nghe máy tính

1.6.7 Giao diện danh mục bàn phím

Hình 1.6.7 Giao diện danh mục bàn phím

1.6.8 Giao diện danh mục chuột

Hình 1.6.8 Giao diện danh mục chuột

1.7 Chi tiết sản phẩm

1.7.1 Chi tiết APPLE WATCH SE

Hình 1.7.1 Giao diện trang chi tiết APPLE WATCH SE

1.7.2 Chi tiết Apple watch series 6 44mm LTE nhôm

Hình 1.7.2 Giao diện trang chi tiết Apple watch series 6 44mm LTE nhôm

1.7.3 Chi tiết Apple watch series 6 44mm LTE thép

Hình 1.7.3 Giao diện trang chi tiết Apple watch series 6 44mm LTE thép

1.7.4 Chi tiết bàn phím Dareu ek1280 RGB

Hình 1.7.4 Giao diện trang chi tiết Dareu ek1280 RGB

1.7.5 Chi tiết Lamila 2.1A C11S

Hình 1.7.5 Giao diện trang chi tiết Lamila 2.1A C11S

1.7.6 Chi tiết Loa blutooth kèm mic hát YS-K21

Hình 1.7.6 Giao diện trang chi tiết Loa blutooth kèm mic hát YS-K21

1.7.7 Chi tiết Xiaomi Mi Band 5

Hình 1.7.7 Giao diện trang chi tiết Xiaomi Mi Band 5

1.7.8 Chi tiết Xiaomi Mi Band 6

Hình 1.7.8 Giao diện trang chi tiết Xiaomi Mi Band 6

1.7.9 Chi tiết Realme watch Red

Hình 1.7.9 Giao diện trang chi tiết Realme watch Red

1.7.10 Chi tiết Loa blutooth Oppo cao cấp kiêm đồng hồ led

Hình 1.7.10 Giao diện trang chi tiết Loa blutooth Oppo cao cấp kiêm đồng hồ led

1.7.11 Chi tiết Cục sạc nhanh Apple 20W PD Type-c

Hình 1.7.11 Giao diện trang chi tiết Cục sạc nhanh Apple 20W PD Type-c

CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Trong thời buổi công nghiệp hóa hiện nay, việc buôn bán qua mạng đã trở nên phổbiến với hầu hết mọi người Đây cũng là xu hướng trong xã hội hiện nay khi mọingười chỉ với một cú nhấp chuột cũng có thể dễ dàng đặt mua được sản phầm mà mìnhưng ý một cách dễ dàng và không phải mất thời gian đi đến tận nơi để mua

Website “Bán phụ kiện điện thoại, máy tính cho công ty Vietphone” là một websitechuyên bán phụ kiện cho điện thoại, máy tính với tiêu chí “chất lượng phải luôn điđầu” đang dần trở thành sự lựa chọn mặc định của các công ty lớn trong lĩnh vực hợptác phát triển điện thoại, máy tính ngày càng hiện đại, tiện lợi hơn

- Giao diện website được thiết kế đơn giản, thân thiện và dễ sử dụng

1 Việc chưa làm được:

- Việc biểu diễn các thông tin trên website chưa được linh hoạt

- Nhiều chức năng còn thiếu và chưa sử dụng được

- Website chưa được tối ưu hóa một cách hoàn thiện

2 Hướng phát triển của đề tài

 Trau chuốt giao diện đẹp hơn, thân thiện với người dùng hơn nữa và có nhiều

chức năng, tương tác tốt hơn với người dùng

 Thiết kế, bổ sung các tính năng còn thiếu hay chưa thật sự hoàn chỉnh trong quá

trình sử dụng

 Tối ưu hóa trang web cho việc thương mại dễ dàng và nhanh chóng hơn.

TÀI LIỆU KHAM KHẢO

[1]Tài liệu bài giảng môn “Thiết kế website” của thầy Nguyễn Hữu Vĩnh.[2] Website http://www.hiepsiit.com

[3] Website https://gearvn.com

[4] Website https://didongthongminh.vn