1. Trang chủ
  2. » Tất cả

Tiể ậ u lu n môn h c ọ thiết kế web thiết kế website bán máy ảnh cho c a hàng kingcame

44 0 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Thiết Kế Website Bán Máy Ảnh Cho Cửa Hàng Kingcame
Người hướng dẫn ThS. Nguyễn Hữu Vĩnh
Trường học Trường Đại Học Thủ Dầu Một
Chuyên ngành Thiết Kế Web
Thể loại Tiểu luận môn học
Năm xuất bản 2021
Thành phố Thủ Dầu Một
Định dạng
Số trang 44
Dung lượng 3,5 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Nội dung

là nơi để mọi người trao đổi, chia s nhẻ ững suy nghĩ cũng như những điều học cảm nhận được qua cuộc s ng hàng ngày và hình ố ảnh đã trở thành một công cụ đắt l c cho viự ệc đó.. Các bạn

Trang 1

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT CÔNG NGHỆ

L P: D20CNTT04

Trang 2

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Ế WEB

THIẾT KẾ WEBSITE BÁN MÁY NH

CHO C ỬA HÀNG KINGCAME

GV: ThS Nguy n Hễ ữu Vĩnh

SVTH: Nguy n Hoàng Hi p ễ ệ

MSSV: 2024802010235 SVTH: Hoàng Lê Huy MSSV: 2024802010372

L P: D20CNTT04

BNH DƯƠNG - 04/2021

Trang 3

MỤC LỤC

MỤC LỤC ii

DANH MỤC HÌNH iv

MỞ ĐẦU 1

CHƯƠNG 1 KHẢO SÁT VÀ PHÂN TÍCH BÀI TOÁN 2

1.1 Phát bi u bài toán 2ể 1.2 Phân tích các chức năng 2

1.2.1 Gi i thi u trang Web bán máy nh Kingcame 2ớ ệ ả 1.2.2 Danh m ục sả n ph ẩm 2

1.2.3 Liên h 21.2.4 Đăng ký, đăng nhập 2

1.2.5 Xem thông tin s n ph m 2ả ẩ CHƯƠNG 2 GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG 3

2.1 Gi i thi u v HTML 3ớ ệ ề 2.1.1 HTML là gì? 3

2.1.2 Công d ng c a HTML 3ụ ủ 2.1.3 Định dạng của HTML 3

2.1.4 M t s ộ ố ưu điể m n ổi b t cậ ủa HTML 3

2.1.5 Nhược điểm củ a HTML 4

2.2 Giới thi u adobe Dreamweaver 4ệ 2.3 Ngôn ngữ CSS 5

2.4 Ngôn ng Javacript 5ữ CHƯƠNG 3 THIẾT KẾ GIAO DIỆN 6

3.1 Thiết kế sơ đồ 6

3.2 Giao di n trang ch 6ệ ủ 3.3 Giao di n thanh menu 7ệ 3.4 Giao di n trang Giệ ới thiệu 8

3.5 Giao di n trang Liên h 9ệ ệ 3.6 Giao di n trang s n phệ ả ẩm 9

9

3.7 Giao di n trang Chi tiệ ết sản phẩm 11 3.8 Giao di n trang qu n lý tài kho n 12ệ ả ả

Trang 4

3.9 Giao di n ph n footer 12ệ ầ CHƯƠNG 4 THIẾT KẾ CHƯƠNG TRNH 14

4.1 Code trang ch 14ủ

4.1.1 Source code HTML 14 4.1.2 nh d ng CSS 16Đị ạ

19

4.2 Code Trang gi i thi u 26ớ ệ

4.2.1 Source code HTML 26 4.2.2 nh d ng CSS 27Đị ạ 4.3 Code trang Liên h 27ệ

4.3.1 Source Code HTML 27

4.3.2 Định dạng CSS 27

4.4 Code trang hiển th s n ph m 29ị ả ẩ

4.4.1 Source Code HTML 29 4.4.2 nh d ng CSS 29Đị ạ 4.5 Code trang Chi ti t s n ph m 32ế ả ẩ

4.5.1 Source Code HTML 32 4.5.2 nh d ng CSS 32Đị ạ 4.6 Code trang Qu n lý tài kho n 35ả ả

4.6.1 Source code HTML 35

4.7 Code trang phân mục sản phẩm theo hãng 36

4.7.1 Source code HTML 36 4.7.2 nh d ng CSS 36Đị ạ

KẾT LUẬN 37

3.Hướng phát triển 37

TÀI LIỆU THAM KH O 38

Trang 5

DANH MỤC HÌNH Hình 3.1: Sơ đồ website 6

Hình 3.2: Giao di n trang ch 6ệ ủ

Hình 3.3: Giao di n thanh menu trên máy tính 7ệ 7

Hình 3.4: Giao diện thanh menu trên điện thoại 7

Hình 3.5: Giao di n trang gi i thi u 8ệ ớ ệ

Hình 3.6: Giao di n trang liên h 9ệ ệ

Hình 3.7: Giao di n trang s n phệ ả ẩm 1 9

Hình 3.8: Giao di n trang s n phệ ả ẩm 2 10

Hình 3.9: Giao di n trang hi n th s n ph m 11ệ ể ị ả ẩ

Hình 3.10: Giao di n trang chi ti t s n phệ ế ả ẩm 11

Hình 3.11: Giao di n trang qu n lý tài kho n 12ệ ả ả

Hình 3.12: Giao di n ph n chân Footer trên máy tính 12ệ ầ

Hình 3.13: Giao di n phệ ần footer trên điện thoại 13

Trang 6

Hình 4.19: Code CSS Trang ch 24ủ 13

Hình 4.20: Code CSS Trang ch 24ủ 14

Hình 4.21: Code CSS Trang ch 25ủ 15

Hình 4.22: Code CSS Trang ch 25ủ 16

Hình 4.23: Code CSS Trang ch 26ủ 17

Hình 4.24: Code CSS Trang ch 26ủ 18

Hình 4.25: Code HTML trang Giới thiệu 27

Hình 4.26: Code CSS trang Gi i thi u 27ớ ệ

Hình 4.27: Code HTML trang Liên h 27

Hình 4.28: code CSS trang Liên h 1 28

Hình 4.29: Code CSS trang liên h 2 28

Hình 4.30: Code HTML trang hi n th s n ph m 29ể ị ả ẩ

Hình 4.31: Code CSS trang hi n th s n ph m 1 29ể ị ả ẩ

Hình 4.32: Code CSS trang hi n th s n ph m 2 30ể ị ả ẩ

Hình 4.33: Code CSS trang hi n th s n ph m 3 30ể ị ả ẩ

Hình 4.34: Code CSS trang hi n th s n ph m 4 31ể ị ả ẩ

Hình 4.35: Code CSS trang hi n th s n ph m 5 31ể ị ả ẩ

Hình 4.36: Code HTML trang chi tiết sản ph m 32ẩ

Hình 4.37: Code CSS trang chi ti t s n ph m 1 33ế ả ẩ

Hình 4.38: code CSS trang chi ti t s n ph m 2 33ế ả ẩ

Hình 4.39: Code CSS trang chi ti t s n ph m 3 33ế ả ẩ

Hình 4.40: Code CSS trang chi tiết sản ph m 4 34ẩ

Hình 4.41: Code CSS trang chi ti t s n ph m 5 34ế ả ẩ

Hình 4.42: Code HTML trang qu n lý tài kho n 1 35ả ả

Hình 4.43: Code HTML trang qu n lý tài kho n 2 35ả ả

Hình 4.44: Code HTML trang qu n lý tài kho n 3 36ả ả

Hình 4.45: Code HTML trang phân mục sản phẩm theo hăng 36

Hình 4.46: Code CSS trang phân loại sản ph m theo hãng 1 36ẩ

Hình 4.47: Code CSS trang phân loại sản ph m theo hãng 36ẩ

Trang 7

MỞ ĐẦU

Ngày nay, khi chất lượng cu c sộ ống ngày càng được c i thiả ện thì người ta quan tâm nhiều hơn đến các giá tr tinh th n Vì v y nh ng kho nh khị ầ ậ ữ ả ắc vui tươi ạ, h nh phúc bên gia đình, người thân, bạn bè luôn được chúng ta mong muốn giữ lại Bên cạnh đó, cùng s phát tri n c a Internet thì các trang m ng x hự ể ủ ạ ẫ ội như Facebook, Twitter, Instagram, Zalo, là nơi để mọi người trao đổi, chia s nhẻ ững suy nghĩ cũng như những điều học cảm nhận được qua cuộc s ng hàng ngày và hình ố ảnh đã trở thành một công

cụ đắt l c cho viự ệc đó Những điều trên làm cho máy ảnh d n tr thành m t thi t b quen ầ ở ộ ế ịthuộc và quan trọng trong cuộc s ng ngày nay Các bạn trẻ ngày càng quan tâm nhiều ốhơn về máy ảnh và nghệ thuật nhiếp ảnh, họ xem đó là một cách hiệu quả để thể hiện một góc nhìn riêng c a bủ ản thân đố ới nh ng s ki n, hoi v ữ ự ệ ạt động đời thường ễ di n ra trước mắt Ch p ụ ảnh không còn đơn giản là cằm máy lên và bấm nút chụp, họ đòi hỏi nhiều hơn ở bức ảnh được chụp, nó phải thật sự đẹp Vì thế, máy ảnh chính là công cụ quan tr ng không chọ ỉ giúp chúng ta lưu giữ nh ng kho nh kh c s trôi qua mà còn là ữ ả ắ ẽphương tiện s giúp chúng ta th hi n cá tính riêng, th hi n cái nhìn c a chính b n thân ẽ ể ệ ể ệ ủ ảmình về thế ớ gi i xung quanh

Hiện nay trên mạng đã có nhiều website bán máy ảnh, có th k ể ể đến m t s website ộ ốthịnh hành như binhminhdigital.com, Zshop.vn, Mayanh24h.com, Điều đó một lần nữa ch ng minh cho t m quan trứ ầ ọng và mức độ quan tâm của người dùng đố ới v i máy ảnh Tuy nhiên, đại đa số các website đều sử dụng các thuật ngữ trong lĩnh vực nhiếp ảnh, điều đó dẫn đến việc khó tiếp cận thông tin đố ới người v i dùng phổ thông, không quá “sành” về nhiếp ảnh, ho c lặ ần đầu đến v i nhi p ớ ế ảnh Vì v y, vi c xây d ng website ậ ệ ựbán máy nh v i giao diả ớ ện đẹp, đầy đủ chức năng nhưng vẫn thân thi n, d s dệ ễ ử ụng đối với người dùng là điều cần thiết

Để giải quyết vấn đề đó, đồng thời hoàn thành học phần Thiết kế web, cũng như hiểu được sâu hơn và sử d ng thành th o các ngôn ng HTML, CSS, JAVACRIPT Nay ụ ạ ữ

em làm một tiểu lu n báo cáo cuậ ối kỳ ề đề tài “Thiết kế v Website bán máy nh cho cả ửa hàng Kingcame” với đầy đủ các chức năng cơ bản c a m t trang web, có tính ng d ng, ủ ộ ứ ụthân thiện và d ễ tiếp cận người dùng

Trang 8

CHƯƠNG 1 KHẢO SÁT VÀ PHÂN TÍCH BÀI TOÁN

1.1 Phát biểu bài toán

Website cung c p các chấ ức năng cơ bản của một website bán hàng, người dùng có thể đăng ký tạo tài khoản và thực hiện việc quản lý tài khoản cá nhân như đăng nhập, đổi mật khẩu, Sau đó khách hàng có thể mua hàng trực tuyến một cách thuận tiện Hoặc xem các thông tin v máy ề ảnh như giá, thông số kỹ thuật, đánh giá, liên h v i cệ ớ ửa hàng mà không cần đăng nhập

1.2 Phân tích các chức năng

Website cung c p các chấ ức năng cơ bản d dàng ti p cễ ế ận người dùng, bao gồm:

1.2.1 Giới thiệu trang Web bán máy ảnh Kingcame

Giới thiệu cho khách hàng biết về cửa hàng, về những tiêu chí c a cửa hàng, thái ủ

độ phục v và tầm nhìn c a cửa hàng nhụ ủ ằm tăng uy tín, quảng bá thương hiệu và giúp khách hàng tin tưởng hơn khi mua hàng

1.2.4 Đăng ký, đăng nhập

Đây là chức năng không thể thiếu đối với mọi trang web bán hàng, khách hàng có thể đăng ký tài khoản, thông qua tài khoản đó có thể quản lý được gi hàng, l ch s mua ỏ ị ửhàng của bản thân

1.2.5 Xem thông tin s ản phẩ m

Trang này nh m giúp cho khách hàng tìm hi u v ằ ể ề thông số ỹ k thuật, các đặc điểm nổi b t c a máy ậ ủ ảnh, xem hình ảnh một cách chi tiết để có th ể xem xét đưa ra quyết định đặt mua hay không

Trang 9

Chương 2 Gi i thiệu công nghệ sử dụng ớ

CHƯƠNG 2 GIỚI THIỆU CÔNG NGH SỆ Ử Ụ D NG

2.1 Giới thiệu v HTML

2.1.1 HTML là gì?

HTML (Hypertext Markup Language-Ngôn ngữ đánh d u siấ êu văn bản) ngôn làngữ đánh d u ấ chuẩn dùng so n th o ạ ả các li u World Wide Wtài ệ eb, chỉ mrõ ộ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ạ mã ện l nh để chỉ cho các ình duy t tr ệ(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

2.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…

2.1.4 M ột số ưu điểm nổi b t c ậ ủa HTML

Nguồn tài nguyên h ỗ trợ l n Ngày nay cớ ộng đồng c a HTML ủ đang phát triển ngày càng lớn trên th giế ới

HTML có thể chạy tương đối mượt mà trên h u h t nh ng trình duy t ph biầ ế ữ ệ ổ ến nhất hiện nay như: Cốc Cốc, Chrome, FireFox, IE,

Trang 10

Mã nguồn mà HTML sử ụ d ng là mã ngu n m và chúng ta có th s d ng mồ ở ể ử ụ ột cách mi n phí ễ

Quá trình học HTML tương đối đơn giản, dễ hiểu nên người học dễ dàng n m bắ ắt được các kiến thức căn bản nhanh chóng Quá trình xây dụng cho website căn bản có

th thể ực hiện được qua một vài tuần học

HTML được quy định theo một tiêu chuẩn nhất định nên việc markup sẽ trở nên đồng nhất, gọn gàng hơn nhiều

Quá trình thực hiện dễ dàng hơn bởi nó tích h p v i nhi u lo i ngôn ng backend ợ ớ ề ạ ữnhư: PHP, NodeJs, Ruby, Java, để có thể tạo thành một website hoàn chỉnh với đầy

đủ mọi tính năng

2.1.5 Nhược điểm của HTML

HTML không có khả năng tạo ra s riêng bi t và m i mự ệ ớ ẻ cho người dùng b i vì ở

nó thường chỉ có thể thực thi những thứ logic và có cấu trúc nhất định

Hiện nay, m t s trình duy t v n còn ộ ố ệ ẫ chậm trong vi c hệ ỗ trợ cho tính năng mới nhất của HTML và đặc biệt là với HTML5

2.2 Giới thiệu 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ô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 trong ầ ạ ể ấ ả ầ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ớ ữ liệu XML, Dreamweaver cung c p nh ng công c cho i d ấ ữ ụ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

Trang 11

Chương 2 Gi i thiệu công nghệ sử dụng ớ

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

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

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ế ợp các thuộc tính giúp mang lạt h 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 ở ngoà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 đó

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

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 toán học Nhưng JavaScript không là ngôn ng ữ hướng đối tượng như C++/Java

Trang 12

CHƯƠNG 3 THIẾT K GIAO DI N Ế Ệ

3.1 Thiết kế sơ đồ

Hình 3.1: Sơ đồ website

3.2 Giao diện trang chủ

Hình 3.2: Giao diện trang ch ủ

Trang 13

Chương 3: Thiết Kế chương trình

Bao g m các trang sau: Trang ch , trang ồ ủ Giới thiệu,trang liên h liên h , ệ ệ trang sản phẩm, trang qu n lý tài kho n và hi n th các s n ph m mả ả ể ị ả ẩ ới, slider qu ng cáo, ph n ả ầfooter

Người dùng click vào các mục để chuyển hướng đến các trang khác, click vào biểu tượng ho c ch máy ặ ữ ảnh, lens, ph kiụ ện để truy c p nhanh vào m c s n ph m Click vào ậ ụ ả ẩform tìm ki m tìm các s n ph m c n thiế ả ẩ ầ ết Click vào tên s n phả ẩm để xem chi ti t cế ủa sản phẩm đó Click vào phía bên trái ho c ph i c a ặ ả ủ slider để xem các chương trìnhkhuyến mãi, ưu đãi đang được cửa hàng áp d ng ụ Ngoài ra, người dùng có thể click vào mail phở ần footer để ử g i mail v cho c a hàng, nh p mail mề ử ậ ở ục đăng ký nhận tin khuyến mãi để nhận được các tin khuyến mãi một cách sớm nhất có thể

3.3 Giao diện thanh menu

Hình 3.3: Giao diện thanh menu trên máy tính

Hình 3.4: Giao diện thanh menu trên điện thoại

Trang 14

-Ý nghĩa của hoạt động: chuy n trang ể

-Quy t c hoắ ạt động: người dùng click chu t vào t ng mộ ừ ục trong menu để chuy n ểsang trang tương ứng

3.4 Giao diện trang Gi i thi u ớ ệ

-Ý nghĩa: dùng để gi i thi u v cớ ệ ề ửa hàng cho người dùng biết, để quan tâm, tin tưởng nhiều hơn cửa hàng

Hình 3.5: Giao diện trang giới thiệu

Trang 15

Chương 3: Thiết Kế chương trình

3.5 Giao diện trang Liên h

Hình 3.6: Giao diện trang liên h ệ

-Ý nghĩa hoạt động: nhằm giúp người dùng liên h vệ ới cửa hàng

-Thao tác màn hình: Click vào mail để gửi mail cho cửa hàng, click vào bản đồ đểxem vị trí cửa hàng trên bản đồ ở trang Google Maps

3.6 Giao diện trang s n phẩm.

Hình 3.7: Giao diện trang s n ph m 1 ả ẩ-Ý nghĩa hoạt động: phân loại các sản ph m theo loẩ ại thiế ịt b

Trang 16

-Thao tác: chọn vào các biểu tượng để đến trang mong mu n ố

Hình 3.8: Giao diện trang s n ph m 2 ả ẩ-Ý nghĩa: phân loại s n ph m theo nhà s n xu t ả ẩ ả ấ

-Quy t c hoắ ạt động: người dùng ch n hãng s n xu t c n tìm ọ ả ấ ầ sau khi đã chọn loại thiết bị phía trên ở để xem s n ph m ả ẩ

-Thao tác màn hình: click vào biểu tượng để đến chuyển đến trang xem các sản phẩm

Trang 17

Chương 3: Thiết Kế chương trình

Hình 3.9: Giao diện trang hi n th s n ph m ể ị ả ẩ-Ý nghĩa: xem các sản ph m theo danh mẩ ục đã chọ ởn trên

-Quy tắc hoạt động: xem bao quát các s n phả ẩm

-Thao tác màn hình: người dùng click vào tên của từng s n phả ảm đang hiển th ị để

có thể xem chi tiết sản ph m ẩ

3.7 Giao diện trang Chi ti ết sản phẩm.

-Ý nghĩa hoạt động: xem thông tin chi tiết của s n phả ẩm

-Quy t c hoắ ạt động: xem tên, giá, hình nh mô t c a s n phả ả ủ ả ẩm, điểm n i b t cổ ậ ủa sản ph m và chẩ ọn vào nút “mua ngay” hay “Thêm vào giỏ” để tiến hành đặt hàng -Thao tác màn hình: click vào t ng hình nhừ ỏ ở phía dưới để xem rõ hơn hình ảnh

mô t c a s n ph m Rê chu t vào hình ả ủ ả ẩ ộ ảnh để xem nh vả ới kích thướ ớn hơn Click c lnút Mua ngay ho c Thêm vào giặ ỏ hàng để thanh toán

Hình 3.10: Giao diện trang chi ti t s n phế ả ẩm

Trang 18

3.8 Giao diện trang qu n lý tài khoản.

Hình 3.11: Giao diện trang qu n lý tài kho n ả ả-Ý nghĩa hoạt động: đăng ký tài khoản, đăng nhập vào Website khi đã có tài khoản -Quy t c hoắ ạt động: người dùng tiến hành đăng ký tài khoản sau đó đăng nhập Nếu các ph n thông tin bầ ị để trống thì hệ thống s báo lẽ ỗi đăng ký hoặ ỗi đăng nhậc l p Nếu điền đủ các phần thông tin thì hệ thống sẽ thông báo đăng ký / đăng nhập thành công

-Thao tác màn hình: điền đầy đủ thông tin sau đó bấm nút Đăng ký / Đăng nhập

3.9 Giao diện ph n ầ footer

Hình 3.12: Giao diện ph n chân Footer trên máy tính ầ

Trang 19

Chương 3: Thiết Kế chương trình

Hình 3.13: Giao diện phần footer trên điện thoại

-Ý nghĩa hoạt động: hiện thông tin sơ bộ về cửa hàng, đăng ký nhận mail khuyến mãi, chuy n trang ể

-Quy t c hoắ ạt động: người dùng nh p mail c a bậ ủ ản thân sau đó click nút “Nhận mail” để đăng ký nhận mail khuy n mãi Click vào các danh mế ục menu để chuy n trang ểtương tự như ở thanh menu ở phía trên

Trang 20

CHƯƠNG 4 THIẾT K CHƯƠNG TRNH

4.1 Code trang chủ

4.1.1 Source code HTML

Hình 4.1: Code HTML trang ch 1 ủ

Hình 4.2: Code HTML trang ch 2 ủ

Trang 21

Chương 3: Thiết Kế chương trình

Hình 4.3: Code HTML Trang ch 3 ủ

Hình 4.4: Coder HTML Trang ch 4 ủ

Hình 4.5: Code HTML Trang ch 5 ủ

Trang 22

Hình 4.6: Code HTML Htrang ch 6 ủ

4.1.2 Định dạng CSS

Hình 4.7: Code CSS Trang ch 1 ủ

Ngày đăng: 21/02/2023, 18:58

🧩 Sản phẩm bạn có thể quan tâm