Đề tài Đề 10 thiết kế website bán hàng Điện thoại mobiphone

1 HTML Hypertext Markup Languageanguage3.2.3.1 Layout “Trang Đăng... Trang Đăng Nh pậ.

B GIÁO D C VÀ ĐÀO T O Ộ Ụ Ạ

TR ƯỜ NG Đ I H C CÔNG NGH ĐÔNG Á Ạ Ọ Ệ

KHOA: CÔNG NGH THÔNG TIN Ệ

B GIÁO D C VÀ ĐÀO T O Ộ Ụ Ạ

TR ƯỜ NG Đ I H C CÔNG NGH ĐÔNG Á Ạ Ọ Ệ

KHOA: CÔNG NGH THÔNG TIN Ệ

STT Sinh viên th c hi nự ệ Mã sinh

viên Đi m b ng sể ằ ố Đi m b ng chể ằ ữ

M c L c ụ ụ

Danh M c Các T Vi t T t ụ ừ ế ắ……….……… ……… 4

1 HTML Hypertext Markup Languageanguage

3.2.3.1 Layout “Trang Đăng

m t chi c đi n tho i th t chính xác phù h p v i kh năng và nhu c u c aộ ế ệ ạ ậ ợ ớ ả ầ ủ

b n thân Riêng đi u đó thôi cũng t n khá nhi u th i gian đ i v i cáchả ề ố ề ờ ố ớ

Khách hàng đ n v i chúng tôi có th l a ch n nh ng m u đi n tho iế ớ ể ự ọ ữ ẫ ệ ạ

m i nh t, công ngh tân ti n nh t, phù h p v i s thích và nhu c u c aớ ấ ệ ế ấ ợ ớ ở ầ ủ

b n thân, đ c bi t mua hàng v i giá u đãi trả ặ ệ ớ ư ước và sau khi mua hàng

thông qua nh ng đ t sale kh ng, và luôn c p nh p nh ng m u mã s mữ ợ ủ ậ ậ ữ ẫ ớ

- M c đích c a đ tài thi t k website bán đi n tho i di đ ng là thi t k raụ ủ ề ế ế ệ ạ ộ ế ế

m t n n t ng tr c tuy n đ ngộ ề ả ự ế ể ười dùng có th ti n l i tìm ki m, mua s mể ệ ợ ế ắ

và t n hậ ưởng các s n ph m t nhi u thả ẩ ừ ề ương hi u và m u mã khác nhau,ệ ẫ

nh m mang l i s ti n ích, đa d ng s n ph m và tr i nghi m mua s m t tằ ạ ự ệ ạ ả ẩ ả ệ ắ ố

- M t m c tiêu quan tr ng khác là t o ra m t giao di n ngộ ụ ọ ạ ộ ệ ười dùng thânthi n,ệ d s d ng và h p d n Trang web c n có m t c u trúc dễ ử ụ ấ ẫ ầ ộ ấ ễnhìn, b t m t.ắ ắ

- Khách hàng có th d dàng truy c p đ n danh m c s n ph m mongể ễ ậ ế ụ ả ẩ

- Nh chúng ta đã bi t trong kinh doanh, Website đóng vai trò r t quanư ế ấ

tr ng M t trang Web hi u qu sẽ giúp doanh nghi p qu ng bá hình nh,ọ ộ ệ ả ệ ả ả

thương hi u, d ti p c n t i khách hàng ti m năng th m chí bi n hệ ễ ế ậ ớ ề ậ ế ọthành khách hàng th c th ự ụ

- Đó cũng chính là đ i tố ượng mà nhóm em hướng t i: Thi t k Websiteớ ế ếcho m c đích kinh doanh C th là thi t k Web bán đi n tho i.ụ ụ ể ế ế ệ ạ

- Thi t k Website đế ế ược chia thành 2 ph n :ầ

2.1.1 Thi t K Web Tĩnh ế ế

- Là trang Web dùng hoàn toàn thu t ng HTML nên ngậ ữ ười dùng không thể

tương tác Ch khi t i trang t máy ch xu ng thì trình duy t sẽ d ch thu t ỉ ả ừ ủ ố ệ ị ậ

mã đ hi n th n i dung trang ể ể ị ộ

- Đ th c hi n thi t k này c n hai giai đo n là Design và d ng giao ể ự ệ ế ế ầ ạ ự

di n Các Designer sẽ s d ng ph n m m thi t k đ h a nh Sketch, Ps, ệ ử ụ ầ ề ế ế ồ ọ ư

Dn, … đ b t đ u d ng giao di n trang Web dể ắ ầ ự ệ ướ ại d ng hình nh ả

- Đ d ng giao di n thi t k Website các l p trình viên sẽ dùng các ngôn ể ự ệ ế ế ậ

ng HTML Sau khi th c hi n xong thì b n sẽ có đữ ự ệ ạ ược trang Web c b n, ơ ảtuy nhiên v n ch a th s d ng đẫ ư ể ử ụ ược Nó ch cho phép ghi nh n, click hay ỉ ậchuy n trang mà ch a có kh năng l u tr hay xu t d li u.ể ư ả ư ữ ấ ữ ệ

2.1.2 Thi t K Web Đ ng ế ế ộ

-Website đ ng ộ là đ ch nh ng trang web để ỉ ữ ượ ỗ ợ ởc h tr b i m t ph n m m ộ ầ ềphát tri n web Lo i website này để ạ ược thi t k có thêm ph n x lý thông ế ế ầ ửtin và truy xu t d li u ấ ữ ệ tăng tính t ng tác gi a doanh nghi p và khách ươ ữ ệhàng được nhanh chóng và d dàng h n.ễ ơ

- Web đ ng độ ược tích h p thêm ph n x lý thông tin và truy xu t d li u ợ ầ ử ấ ữ ệnên ngườ ở ữi s h u trang có quy n ch nh s a, đi u hành và c p nh t các ề ỉ ử ề ậ ậthông tin lên trang d dàng Khách hàng có th trao đ i v i ch website và ễ ể ổ ớ ủ

- HTML5 là m t ngôn ng độ ữ ược phát tri n trên n n t ng c a HTMLể ề ả ủ

(HypertextMarkup Language) do đó chúng th a k r t nhi u l i ích trongừ ế ấ ề ợthi t k và c u trúc website c a HTML HTML5 có th h tr t i đa cho cácế ế ấ ủ ể ỗ ợ ố

phương ti n nh ng v n giúp trang web thân thi n v i ngệ ư ẫ ệ ớ ười dùng trên

m i thi t b , trình duy t Chính vì nh ng lý do này mà HTML5 đọ ế ị ệ ữ ược xây

d ng d a trên r t nhi u nguyên t c nh : Xây d ng các ch c năng ít phự ự ấ ề ắ ư ự ứ ụthu c vào plugin, Scripting có th độ ể ược thay th b ngmarkup b t c khiế ằ ấ ứnào, đ c l p thi t b , …ộ ậ ế ị

-CSS (Cascading Style Sheets) là m t ngôn ng thi t k đ n gi n, x lýộ ữ ế ế ơ ả ử

m tph n giao di n c a trang web CSS mô t cách các ph n t HTML hi nộ ầ ệ ủ ả ầ ử ể

th trên mànhình và các phị ương ti n khác S d ng CSS, b n có th ki mệ ử ụ ạ ể ểsoát màu ch , c ch ,ki u ch , kho ng cách gi a các đo n văn b n, kíchữ ỡ ữ ể ữ ả ữ ạ ả

thướ ủc c a các thành ph n trêntrang web, màu n n, thi t k b c c và cáchầ ề ế ế ố ụtrang web hi n th trên nh ng màn hìnhcó kích thể ị ữ ước khác nhau cũng nhưhàng lo t hi u ng khác CSS r t h u ích và ti nl i Nó có th ki m soátạ ệ ứ ấ ữ ệ ợ ể ể

t t c các trang trên m t website Các stylesheet ngoài đấ ả ộ ượ ưcl u tr dữ ưới

d ng các t p tin CSS đạ ậ ược k t h p v i ngôn ng đánh d u HTMLế ợ ớ ữ ấ ho cặXHTML

- JavaScript là ngôn ng l p trình đữ ậ ược nhà phát tri n s d ng đ t oể ử ụ ể ạtrang web tương tác T làm m i b ng tin trên trang m ng xã h i đ n hi nừ ớ ả ạ ộ ế ể

th hình nh đ ng và b n đ tị ả ộ ả ồ ương tác, các ch c năng c a JavaScript có thứ ủ ể

c i thi n tr i nghi m ngả ệ ả ệ ười dùng c a trang web Là ngôn ng k ch b nủ ữ ị ảphía máy khách, JavaScript là m t trong nh ng công ngh c t lõi c a Worldộ ữ ệ ố ủWide Web Ví d : khi duy t internet, b t c khi nào b n th y qu ng cáoụ ệ ấ ứ ạ ấ ảquay vòng d ng hình nh, menu th xu ng nh p đ hi n th ho c màu s cạ ả ả ố ấ ể ể ị ặ ắ

ph n t thay đ i đ ng trên trang web cũng chính là lúc b n th y các hi uầ ử ổ ộ ạ ấ ệ

- Hi n nay, v i xu hệ ớ ướng công ngh thông tin th i đ i 4.0, khi mà m iệ ờ ạ ọgiađình cá nhân đ u d dàng truy c p t đi n tho i, máy tính, laptop Nênề ễ ậ ừ ệ ạ

vi ccó th gi i trí t Internet là m t vi c c n thi t đ b t k p xu thệ ể ả ừ ộ ệ ầ ế ể ắ ị ếchi m l y th ph n ế ấ ị ầ Vu Tru Di Dong m t th ng hi u chuyên cung c p vộ ươ ệ ấ ề

đi n tho i c n thi t k m t trang web đ cung c p d ch v mua bán trênệ ạ ầ ế ế ộ ể ấ ị ụđó

Màu Ch Đ oủ ạ Màu

đ (#B22222)ỏMàu Đen(#ddd)Màu n nề Tr ng(#fffff)ắ Làm cho thi t k ế ế

h n, trông s ch ơ ạ

sẽ h n,làm n iơ ổ

b t n t dung ậ ộchính c a ủwebsite

(#000000)

- Màu đen: D ễnhìn và n i b t ổ ậtrên n n tr ngề ắ

B ng 3.1.4.1 : B ng Màu dùng cho webả ả

Font ch ch y u:ữ ủ ế Cambria, Cochin, Georgia, Times, 'Times New Roman',serif

Hình 3.2.1.1: B ng layout “Trang Ch ”ả ủ2.Trang con

Hình 3.2.2.1: B ng layout “Trang Con”ả

3 Trang Đăng Nh pậ

Hình 3.2.3.1:Hình layout “Trang Đăng Nh p”ậ

3.2.2 S Đ UseCase ơ ồ

Hình 3.3.1: S đ usecase.ơ ồ

3.2.3 S Đ Phân C p ơ ồ ấ

+ Khám Phá S n Ph m: Khách hàng có th d dàng xem thông tin v cácả ẩ ể ễ ề

s n ph m đa d ng mà chúng tôi cung c p T nh ng chi c đi n tho iả ẩ ạ ấ ừ ữ ế ệ ạthông d ng đ n nh ng siêu ph m hàng đ u, chúng tôi cam k t mang đ nụ ế ữ ẩ ầ ế ế

s đa d ng và ch t lự ạ ấ ượng

+ Đăng Ký Mua Hàng: V i ch c năng đăng ký mua hàng, quý khách có thớ ứ ể

l a ch n nh ng s n ph m yêu thích và thêm vào gi hàng m t cách thu nự ọ ữ ả ẩ ỏ ộ ậ

ti n Chúng tôi sẽ đ m b o quý khách nh n đệ ả ả ậ ược nh ng s n ph m ch tữ ả ẩ ấ

lượng và đúng nh mong đ i.ư ợ

+ Thông Tin và Khuy n Mãi: Quý khách có th đăng ký nh n thông tin m iế ể ậ ớ

nh t v s n ph m ho c các chấ ề ả ẩ ặ ương trình khuy n mãi h p d n Đi u nàyế ấ ẫ ềgiúp quý khách không b l b t kỳ c h i mua s m hay u đãi nào tỏ ỡ ấ ơ ộ ắ ư ừchúng tôi

+ H Tr Khách Hàng: Chúng tôi luôn l ng nghe và s n sàng h tr quýỗ ợ ắ ẵ ỗ ợkhách Khách hàng có th đăng ký đ nh n s h tr mong mu n t đ iể ể ậ ự ỗ ợ ố ừ ộngũ chăm sóc khách hàng c a chúng tôi.ủ

4 L p Trình Xây D ng Giao Di n ậ ự ệ

1.Ph n Chungầ

- Xây d ng file css g m các thu c tính dùng chung c a t t c các trang.ự ồ ộ ủ ấ ả

- Các th m c trang con sẽ bao g m file HTML, CSS, Javacript đ đ nh d ngư ụ ồ ể ị ạcác thu c tính riêng c a t ng trangộ ủ ừ

-Header , Footer dùng cho t t c trang web tr trang loginấ ả ừ

a) Header :

Khai báo th container bao hàm t t c các th làm khungẻ ấ ả ẻ

Footer được chia làm hai ph n :ầ

+ Ph n Thông Tin Liên L cầ ạ

+ Ph n Copyrightầ

-Ph n Thông Tin liên l c đầ ạ ượ ọ ởc b c b i th section ẻ

M i lo i đ u đỗ ạ ề ược phân chia thành m i c t khác nhau Đem l i c m giácỗ ộ ạ ả

Banner qu ng bá các s n ph m đang đả ả ẩ ược quan tâm và nhi u u đãiề ư

S n Ph m N i B t là nh ng s n ph m đả ẩ ổ ậ ữ ả ẩ ượ ưc a chu ng yêu thích và bán ộ

ch y sẽ đạ ược hi n th ti p theo sau bannerể ị ế

Các dòng mã này đượ ịc đ nh d ng chung b ng cách là đ t chung tên class ạ ằ ặ

và c n ch đ nh d ng m t l n M y cái ti p theo tầ ỉ ị ạ ộ ầ ấ ế ương t ch thay nh và ự ỉ ảthông tin s n ph mả ẩ

Ph n s n ph m cũng tầ ả ẩ ương t ch c n đ nh d ng m t l nự ỉ ầ ị ạ ộ ầ

3 Trang Con

- Gi i Thi u Thông Tin S n Ph m : Hình nh , Thông s kỹ thu t ; ớ ệ ả ẩ Ả ố ậ

Chương Trình Khuy n Mãi Khi Mua Hàng ; Nút Mua Hàng; S n Ph m ế ả ẩ

Còn v i thông tin b o hành:ớ ả

Thông S Kỹ Thu t:ố ậ

- Còn Bên Ph i là nh ng nút mua hàng , khuy n mãi , và các s n ph m ả ữ ế ả ẩ

tương t ự

Nh ng nút mua hàng:ữ

Thông Tin khuy n mãi:ế

S n ph m tả ẩ ương t :ự

- V i s n ph m khác c u trúc hoàn toàn tớ ả ẩ ấ ương t ch khác n i dung , hình ự ỉ ộ

nh , cách hi n th , b c c trình bày trên web

5.Thành Ph m ẩ

1.Header

2.Footer

3.Trang chủ

4 Trang con

5 Trang đăng nh pậ

CH ƯƠ NG 4: K T LU N Ế Ậ 1.K t Qu Đ t Đ ế ả ạ ượ c

-Qua bài t p l n Thi t k trang Web bán hàng máy tính, nhóm ậ ớ ế ế 2 chúng em

- Xây d ng đự ượ ố ục b c c trang web h p lí, Giao di n đ p m t, các hình nhợ ệ ẹ ắ ả

và banner qu ng cáo b t m t ả ắ ắ các ch c năng hay các phím đi u h ngứ ề ướ

được thi t k theo phong cách ph thông t o nên s thu n l i cho ngế ế ổ ạ ự ậ ợ ườidùng

- Hình nh, thông tin v s n ph m khá chi ti t.ả ề ả ẩ ế

- Bài v n còn m t s thi u sót v n i dung, trình bày b c c giao di nẫ ộ ố ế ề ộ ố ụ ệtrang Web ch a đư ược sáng t o và t i u Nhóm em sẽ c g ng đ c i thi nạ ố ư ố ắ ể ả ệ

và nâng cao kĩ năng, kinh nghi m trong th i gian t i.ệ ờ ớ

3 Bài H c Kinh Nghi m ọ ệ

- Khi nhúng t p javascript thì nên đ cu i cùng trệ ể ố ước khi k t thúc thế ẻ