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 1TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT CÔNG NGHỆ
L P: D20CNTT04 Ớ
Trang 2TRƯỜ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 Ớ
BNH DƯƠNG - 04/2021
Trang 3MỤ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 2ệ 1.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 43.9 Giao di n ph n footer 12ệ ầ CHƯƠNG 4 THIẾT KẾ CHƯƠNG TRNH 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 5DANH 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 6Hì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 7MỞ ĐẦ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 8CHƯƠ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 9Chươ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 10Mã 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 11Chươ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 12CHƯƠ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 13Chươ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 15Chươ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 17Chươ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 183.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 19Chươ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 20CHƯƠNG 4 THIẾT K CHƯƠNG TRNH Ế
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 21Chươ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 22Hình 4.6: Code HTML Htrang ch 6 ủ
4.1.2 Định dạng CSS
Hình 4.7: Code CSS Trang ch 1 ủ