Tng quan v thit kt WEB

Chng 2

Tng quan v thit k Web

Phn 1 Xc nh mc ch, yu cu ca Website cn thit k

l l l

Mc tiu, yu cu c bn ca WebSite i tng phc v Ch ca WebSite

Lm Quang V V

Tng quan v thit k Web

1.1 Mc tiu, yu cu c bn
l l l

ra mc tiu khi qut, ngn gn, r rng ca Website cn thit k L cng c nh gi s thnh bi ca mt Website Mc tiu phi di hn, bao trm ton b k hoch pht trin.

Lm Quang V V

Tng quan v thit k Web

1.2 i tng phc v

l l

Xc nh loi c gi chnh ca Website Tm hiu v:

S hiu bit Trnh S thch Kinh nghim duyt Web

Thit k tt = thch hp cho mt di rng cc loi c gi c trnh v nhu cu khch nhau

Lm Quang V V

Tng quan v thit k Web

1.3 Ch
l

Gip nh hng cho nh thit k

Gio dc Hun luyn (online trainning) Tin tc Gii tr Din n trao i tho lun Mua bn, qun l.

Xem v d
Tng quan v thit k Web

Lm Quang V V

V d - Din n

Lm Quang V V

Tng quan v thit k Web

V d - Online training

Lm Quang V V

Tng quan v thit k Web

V d - tin tc

Lm Quang V V

Tng quan v thit k Web

V d

Lm Quang V V

Tng quan v thit k Web

V d - Online Shopping

10

Lm Quang V V

Tng quan v thit k Web

Phn 2 - Thit k giao din

l l l

im khc bit gia ti liu thng thng v trang WEB Mt s vn lin quan n vic thit k giao din c bn Thit k giao din WebSite

11

Lm Quang V V

Tng quan v thit k Web

2.3 Thit k giao din Website

Logo

Header

Menu

Content

12

Lm Quang V V

Tng quan v thit k Web

2.3 Thit k giao din Website 2 x 2 Layout

13

Lm Quang V V

Tng quan v thit k Web

2.3 Thit k giao din Website Table within a table

14

Lm Quang V V

Tng quan v thit k Web

2.3 Thit k giao din Website The outer table

15

Lm Quang V V

Tng quan v thit k Web

2.3 Thit k giao din Website The inner table

16

Lm Quang V V

Tng quan v thit k Web

2.3 Thit k giao din Website Centered with three columns

17

Lm Quang V V

Tng quan v thit k Web

Really complicated design!

18

Lm Quang V V

Tng quan v thit k Web

2.1 im khc bit gia ti liu thng thng v trang WEB

l l

Ging nhau: phi c tri qua s pht trin v chun ha. Khc nhau: cc mi lin kt siu vn bn, multimedia cho php ngi c truy nhp n mt trang n l m khng cn n li ta . Tm kim nhanh v n gin hn. C th quay li mt lot cc lin kt.
Tng quan v thit k Web

19

Lm Quang V V

2.2 Mt s vn lin quan n vic thit k giao din c bn.

l l l l l l l l

Thit k hng ti ngi s dng Cc gip nh hng r rng Khng c trang cui cng (dead-end) Bng thng v nh hng n gin v tnh nht qun Tnh n nh ca cc trang Web Phn hi v i thoi Tnh tng thch trn cc trnh duyt khc nhau (thay th)

20

Lm Quang V V

Tng quan v thit k Web

2.2.1 Thit k hng ti ngi s dng

l l l l

Ngi s dng l i tng chnh quyt nh s thnh bi ca Website Yu cu mc hon ho ca thit k giao din ha Xy dng cc kch bn mu cho cc loi i tng s dng khc nhau Cch tt nht: th nghim nhn cc phn hi t c gi.
Tng quan v thit k Web

21

Lm Quang V V

2.2.2 Cc gip nh hng r rng

l

c gi c th tr li cc cu hi:

ang u ? C th lm g ? C th i tip ti u ?

l l

Biu tng nht qun, d hiu, theo chun qui nh Lun c kh nng quay li trang ch, cc trang ch cht trn Website
Tng quan v thit k Web

22

Lm Quang V V

2.2.3 Khng c trang cui cng (deadend)

l l l

Mi trang c t nht mt lin kt Trang dead-end tht vng, mt kh nng n vi cc trang khc. Nn lin kt v trang ch trong mi trang.

23

Lm Quang V V

Tng quan v thit k Web

2.2.4 Bng thng v nh hng

l l l

S kin nhn ca c gi c gii hn. Tc i khi l yu t quyt nh n vic la chn Website. Phn bit gia thit k cho Internet v Intranet.

24

Lm Quang V V

Tng quan v thit k Web

2.2.5 n gin v tnh nht qun

l l

Ty vo loi ng dng c gi s khng n tng v s phc tp khng l do. c bit l c gi phc thuc vo thi gian v thng tin chnh xc. Cc biu tng n gin, quen thuc, nht qun trong tt c cc trang

25

Lm Quang V V

Tng quan v thit k Web

2.2.6 Tnh n nh ca cc trang Web

l l l

n nh v cu trc v ni dung Cu trc: cc thnh phn c t ng ch v hot ng nhp nhng. Ni dung: cc mi lin kt lun m bo c ch n, ni dung lun m bo thch hp v phi cp nht cho ph hp vi ng cnh ti thi im c gi duyt Web.

26

Lm Quang V V

Tng quan v thit k Web

2.2.7 Phn hi v i thoi

l

l l

Chun b trc cho vic tr li, p ng cc i hi, gp ca c gi mt cch nhanh nht c th. Lun c cung cp a ch lin kt vi Webmaster Ln k hoch nhn s ph trch lu di.

27

Lm Quang V V

Tng quan v thit k Web

2.2.8 Tnh tng thch trn cc trnh duyt khc nhau (thay th)
l l l

Khng phi mi trnh duyt u hin th trang web ca chng ta ging nhau. Lu khi c c gi s dng web browser khng c kh nng h tr ha. S dng nhn (tag) ALT trong HTML thay th.

28

Lm Quang V V

Tng quan v thit k Web

2.3 Thit k giao din Website

l l l l l l

Xc nh kiu ch, mu sc Xc nh kch thc khung nhn Xc nh cc k thut, cng c thit k Ct on, tm lc thng tin H thng Menu iu khin, cc lin kt gia cc trang Xc nh cu trc WebSite
Tng quan v thit k Web

29

Lm Quang V V

2.3.1 Xc nh kiu ch, mu sc

l

Phng ch ph thuc vo

c im thng tin c gi Trnh duyt, phn gii Ngn ng s dng Font c chn, khng chn

l l

Gam mu thng nht trong ton b Website Font ting Vit: VNI, TCVN3, Unicode

30

Lm Quang V V

Tng quan v thit k Web

10

2.3.2 Xc nh kch thc khung nhn

l

Phi lm cho c gi cm nhn c kch thc ca trang thng tin, bit h ang u, c th lm g ? Lu , hu ht cc trang web u khng va khp vi mn hnh 14-15 inch.

31

Lm Quang V V

Tng quan v thit k Web

V d:

32

Lm Quang V V

Tng quan v thit k Web

2.3.3 Xc nh cc k thut, cng c thit k

l

Ph thuc nhiu yu t:

Mi trng hosting i ng thit k Chi ph thit k Bng thng ng truyn .

Chi ph
33

Lm Quang V V

Tng quan v thit k Web

11

2.3.4 Ct on, tm lc thng tin

l

Lun c mt s li im:

c gi c t thi gian c cc ti liu trn mn hnh. Lun c nhu cu mun tm phn thng tin ch nh, khng nn chia ct qu nh, tm lc qu ngn gy tht vng Hnh thc v cch t chc ng nht kinh nghim tm kim, khm ph. Thng tin ngn gn, sc tch thch hp vi mn hnh my tnh (b gii hn tm nhn).

Vic p dng phi linh ng, nht qun.

34

Lm Quang V V

Tng quan v thit k Web

2.3.5 H thng Menu iu khin, cc lin kt gia cc trang

l l l l

H thng k ha phong ph, nht qun, mang tnh gi nh H thng phm n ng nht, logic C th lin kt n mt site khc cng nh quay li site trc. Cc lin kt n cc site c gi tr s tng gi tr chnh website ca chng ta.
Tng quan v thit k Web

35

Lm Quang V V

V d

36

Lm Quang V V

Tng quan v thit k Web

12

2.3.6 Xc nh cu trc WebSite

l l l l

H thng phn cp H thng cc trang ni tip Li Mng nhn

37

Lm Quang V V

Tng quan v thit k Web

2.3.6.1 Phn cp

38

Lm Quang V V

Tng quan v thit k Web

H thng Phn cp
l

Dng t chc cc khi thng tin phc hp. l L h thng c dng thng dng nht l Gn vi m hnh t chc th gii thc l D hnh dung t chc website Ci nhn tng quan t trang ch

39

Lm Quang V V

Tng quan v thit k Web

13

2.3.6.2 Ni tip

40

Lm Quang V V

Tng quan v thit k Web

H thng cc trang ni tip

l l l

Biu din thng tin tun t, cc bng tng thut ni tip theo thi gian Cc thng tin tra cu tham kho: t in bck khoa, t in thut ng Thch hp cho h thng website nh.

41

Lm Quang V V

Tng quan v thit k Web

2.3.6.2 li

42

Lm Quang V V

Tng quan v thit k Web

14

H thng li
l l l l

Danh sch kha hc, cc bin c, s kin Tng n v trong cu trc phi c cng cu trc cho cc ch ln v nh Kh hiu i vi khi xc nh mi lin quan gia cc loi thng tin. Rt tt i vi nhng c gi c kinh nghim, c sn kin thc v h thng, ch trong h thng
Tng quan v thit k Web

43

Lm Quang V V

2.3.6.4 Mng nhn

44

Lm Quang V V

Tng quan v thit k Web

H thng mng nhn

l l l l

T chc t hn ch cho vic s dng mu thng tin M hnh t khm ph, khai thc trit u im ca hyperlink Cu trc phi thc t nht, kh hiu, kh d on cho c gi Thch hp vi nhng site nh, c gi chuyn nghip hoc trnh cao, tm kim cc kin thc chuyn su

45

Lm Quang V V

Tng quan v thit k Web

15

Phn 3 Cc thnh phn c bn ca Website

l l l

Trang ch (HomePage) H thng Menu, Logo, nh danh Cc trang thnh vin

46

Lm Quang V V

Tng quan v thit k Web

3.1 Trang ch
l l l

Mi website u c thit lp quanh Homepage iu kin c bn website thnh cng Lu khi s dng h thng ha

47

Lm Quang V V

Tng quan v thit k Web

3.2 H thng menu,logo, nh danh

l

l l

H thng menu phi r rng, y s gip c gi hnh dung c cu trc, t chc website. Cn quan tm n v tr, cc th hin (c hay khng c hiu ng) V tr logo, nh danh cng ty phi c nh nht qun

48

Lm Quang V V

Tng quan v thit k Web

16

3.3 Cc trang thnh vin

l l

Xy dng theo cu trc c bn ca website Nht qun, ph hp vi cc thuc tnh nh dng trc

49

Lm Quang V V

Tng quan v thit k Web

Phn 4 Mt s vn cn quan tm
l l l l

Thi gian qun l Lin kt cc trang Web, qung co Ph lc, ngun thng tin, cc trang gip , FAQ Thit k trang Web cho mng Interanet

50

Lm Quang V V

Tng quan v thit k Web

4.1 Thi gian qun l

l l l l

Website cn c cp nht thng tin c gi lun cm nhn c ci mi Nu phn no c cp nht thm k hiu New Ghi thi gian cp nht, s ngi truy cp Nu website phc tp thm mt trang What new ?
Tng quan v thit k Web

51

Lm Quang V V

17

4.2 Lin kt trang web, qung co

l l

To lin kt n cc trang thng tin (i tc, khch hng) tng uy tn Khi n nh chuyn i hnh thc kinh doanh, thu ph:

Thu t logo, qung co Thu ph thnh vin .

52

Lm Quang V V

Tng quan v thit k Web

4.3 Ph lc, ngun thng tin, cc trang gip , FAQ

l l l

Thng tin bo co thng c ng trn web c thm cc ph lc FAQ (Frequently Asked Questions) l tng cho vic thit k website h tr FAQ gim thiu nhn s v chi ph cho vic h tr, t vn khch hng

53

Lm Quang V V

Tng quan v thit k Web

4.4 Thit k trang web cho mng Intranet

l l

Mt s site thit k ring cho cc t chc, s dng mng LAN Mc tiu : nng cao thi gian truy cp, dn dt vo su trong cu trc website i hi thng tin phi hp dn, c gi tr ng ti bng thng v tc ch trng n ni dung c gi tr v s hp dn cho website.
Tng quan v thit k Web

54

Lm Quang V V

18

LAB2 Kho st cc Website

l l

Kho st cc trang Web v rt ra cc nhn xt v cch thit k trang Web Lm quen vi cch s dng mt s cng c tin ch h tr trong qu trnh thit k Web

Swish Frontpage Dreamweaver

S dng FTP Server

Tng quan v thit k Web

55

Lm Quang V V

19