I. Lm quen vi Dreamweaver 1.

Tng quan giao din Dreamweaver

a. Menu

Cha cc lnh s dng Dreamweaver b. Thanh cng c

Cha cc lnh xem trc cng nh hin th cc tnh nng v t tiu cho trang

c. Bng component

C nhiu bng component khc nhau bn chn la theo nh cu a component vo trang thit k:

d. Vng lm vic chnh

e. Bng chc nng

f. Bng thuc tnh

2. Lm hin hoc n i mt ca s hoc bng iu khin S dng menu Window hin/n ca s lm vic hoc bng iu khin:

V d: m bng thuc tnh, t thanh Menu: Chn Window Properties:

II. Thit k website vi Dreamweaver Trc khi bt tay vo thit k cc trang web, bn cn thit lp mt s cc thuc tnh trong Dreamweaver 1. Thit lp mt website mi Menu Site Chn New Site

Hp thoi Site Setup xut hin:

Nhp tn cho website:

Ch nh v tr lu website bng cch nhp vo nt Hp thoi Choose Root Folder xut hin:

Chn v tr m bn mun lu cc trang web ca mnh o Bn c th to mt th mc mi cho site bng cch nhp vo Enter. Nhp nt Lc ny, bn s quay v hp thoi Site Setup. Tip theo bn nhp nt

, nhp vo tn th mc v g

Lu : Tt c cc tp tin ca website cn c lu trong cng mt th mc gc trn my tnh! iu ny gip bn nh nhng hn khi chuyn d liu ca website c thit k hon chnh ln web server m khng cn thay i cu trc cc tp tin v ng dn. 2. To mt trang web mi T menu File Chn New

Hp thoi New Document xut hin:

 Nhp vo Tab Nhp vo ch nh chng loi ca trang mun to mi Nhp vo to mt trang trng Lu : Bn cng c th to trang da trn nhng nh dng c sn trong vng Layout ca hp thoi ny:

Nhp nt

3. Thm tiu cho trang web Tiu ca trang web s xut hin trn thanh tiu khi trang c m ra t trnh duyt web. Tiu ny s gip cc my tm kim (nh Google, Bing) c th nh ch mc cho trang chnh xc hn. Khi to ra mt trang mi, Dreamweaver s mc nh cho tn trang v tn tp tin l Untitled cho n khi bn thc s lu chng.

t tiu cho trang, bn hy nhp vo vng textbox cnh nhn Title v g Enter khi hon tt.

Khi , tiu s xut hin trn thanh tiu ca trnh duyt:

4. Lu trang web Bn nn lu trang web ca mnh li ngay khi to, cng nh trc khi ng Dreamweaver hoc chuyn trang ln web server. ng thi ti cng khuyn bn hy xuyn thc hin thao tc ny trong sut qu trnh thit k trnh mt d liu do cc yu t bt ng nh ct in hoc li h thng. Menu File Chn Save:

o Chn Save As to mt bn lu khc cho tp tin ang tn ti o Nu l ln u thc hin lu trang, hp thoi Save As s xut hin:

10

Chn th mc lu trang:

Nhp tn trang web:

Nhp nt

lu li:

11

5. Quay li phin bn c lu trc ca trang Menu File Chn Revert

iu ny s a trang v phin bn c lu trc . Tt c nhng thay i thc hin t ln lu mi nht s mt ton b. Lu : Nu bn thot Dreamweaver sau khi lu trang, Dreamweaver s khng th quay li phin bn trc.

12

6. Xem trc trang web trong trnh duyt Nu mun xem trang web ca mnh s xut hin nh th no trn trnh duyt, bn c th s dng chc nng Preview in Browser. Trn thanh cng c, nhp vo nt

Danh sch cc trnh duyt c ci trn my bn xut hin:

o Bn cng c th xem trc trang bng trnh duyt mc nh trn my bn bng cch nhn phm F12 7. Thm mt trnh duyt vo danh sch cc trnh duyt V cch cc trnh duyt hin th trang web l khc nhau nn bn cn kim tra xem trang ca mnh s hin th nh th no trn cc trnh duyt v m bo rng khch gh thm s thy c b cc v ni dung trang m bn mong mun. Theo mc nh, Dreamweaver s t tm v nhn din nhng trnh duyt c ci trn my tnh ca bn. Tuy nhin, v mt l do no m mt trnh duyt khng xut hin trong danh sch ni phn trn; v phn ny ti s hng dn bn them mt trnh duyt vo danh sch . Menu File - Preview in Browser Edit Browser List:

13

Hp thoi Preferences xut hin:

Nhp vo nt

k bn nhn Browser:

14

Hp thoi Add Browser xut hin:

Nhp tn ca trnh duyt:

Nhp nt Nhp nt

v chn ng dn n trnh duyt bn cn them lu thit lp v ng hp thoi Add Browser

Khi quay li hp thoi Preferences, bn li nhp nt lu v ng hp thoi ny li Lc ny, trnh duyt va them s xut hin trong danh sch trnh duyt.

III. Tm hiu giao din ca Dreamweaver CS5.5 1. Chn b cc vng lm vic Vi Dreamweaver CS5.5, bn c th chn b cc vng lm vic ph hp vi nhu cu ca mnh. V d, bn chn b cc Designer tp trung vo cc chc nng thit k sn c ca Dreamweaver, cn b cc Coder th bn tp trung vo vic lp trnh, hoc nu bn quen thuc vi b cc ca Dreamweaver CS3 th bn chn Classic. chn b cc vng lm vic, bn nhp vo nt :

iu ny s l m ra mt menu:

15

Lc ny bn c th chn b cng vng lm vic ph hp vi nhu cu ca mnh.

2. Ty chnh vng lm vic Trn thanh cng c, nhp vo nt

o iu ny s m ra ca s Code bn na tri ca vng lm vic:

Nhp nt

thu gn cc bng chc nng:

16

Khi cn, bn c th nhp vo nt

m rng cc bng chc nng tr li

Nhp kp bt c u trong thanh mu xm nm trn bng thuc tnh thu gn n:

17

m rng li bng thuc tnh, bn nhp kp vo thanh mu xm ny li ln na.

3. nh dng ni dung bng bng thuc tnh a. nh dng hnh nh Nhp vo chn nh mun nh dng

18

Lc ny, cc thuc tnh nh s xut hin trong ca s thuc tnh:

V d:

Thng qua ca s ny, bn c th thay i nhiu thuc tnh nh chng hn nh kch thc bin hoc ging hng cho nh. o cc dng ch trong bi vit bao quanh nh, bn nhp nt k nhn Align:

o T danh sch th xung, bn nhp mt ty chn ging hang, chng hn ti chn Left

o Cc dng ch s t ng bao quanh nh khi bn cn hng cho nh theo pha tri hng pha phi:

19

b. nh dng vn bn Chn phn vn bn mun nh dng

Nhp vo d, ti chn Heading 2:

v chn nh dng mong mun t danh sch th xung. V

20

4. M mt bng chc nng T menu Window, chn bng chc nng mun m, v d, ti mun m bng chc nng Files:

Bng chc nng va chn s xut hin:

21

5. M v ty chn bng chc nng Insert T menu Window Chn Insert:

Bng chc nng Insert xut hin:

22

thu gn bng chc nng Insert, bn nhp vo

v chn Hide Labels:

Khi , bng chc nng Insert s trng ging nh sau:

23

Nhp vo thanh xm trn bt c bng chc nng no s khin n thu gn li hoc m rng ra.

Cc bng chc nng s t iu chnh kch thc chnh n ph hp vi khong trng ca ni bn r n vo:

6. Lu b cc lm vic ring ca bn i khi v nhu cu c nhn, nhng b cc c sn ca Dreamweaver khng em li s thun tin nht cho bn, v bn cn sp xp li n. Sau khi thit lp v sp xp ng , bn mun lu li b cc ny s dng cho ln sau. Bn lm iu nh sau: Nhp vo nt trn thanh tiu ca Dreamweaver:

24

Trong danh sch th xung, bn chn New Workspace:

Hp thoi New Workspace xut hin:

Nhp tn m bn mun t cho b cc ny v nhn nt

lu li:

25

7. Thit lp s thch Bn c th d dng sa i giao din v nhiu ty chn mc nh ca Dreamweaver ph hp vi nhu cu lm vic ca bn thng qua hp thoi Preferences. T menu Edit chn Preferences

Hp thoi Preferences xut hin:

26

IV. Lm vic vi XHTML 1. Tng quan v XHTML Tnh nng t ng sinh ra XHTML ca Dreamweaver gip bn ng k trong vic tit kim thi gian v trnh mc phi nhng li phc tp. Tuy nhin, nu c c nhng kin thc c bn v XHTML th bn c th hiu tt hn v thit k web cng nh c thm mt la chn khi lm vic vi Dreamweaver l vit m th cng ti u trang web theo cch ca mnh hay chnh sa li m do Dreamweaver sinh ra. a. XHTML l g? XHTML l vit tt ca eXtensible HyperText Markup Language XHTML l ngn ng nh dng to ra cc trang web Khi trnh duyt m ra mt trang web th m XHTML s cho trnh duyt bit cch th hin vn bn, hnh nh v cc ni dung khc c trong trang ny. Dreamweaver CS5.5 s dng XHTML Transitional thay cho HTML v XHTML l phin bn hon thin hn ca HTML v n tun th cc tiu chun Web hin i. b. Th XHTML l g? n v c bn ca XHTML c gi l th:

Bn c th nh dng vn bn v cc thnh phn khc c trn trang web bng cch t chng trong cc th XHTML. Khi s dng cc cng c nh dng ca Dreamweaver, chng trnh s t chn th vo m cho bn. c. Cc th XHTML lm vic nh th no? Cc th XHTML thng lm vic theo tng cp: gm th m v th ng bao quanh ni dung mun nh dng, v d:

27

Mt s th ng c lp, chng hn: M ngun Th hin

d.

e.

f.

2.

Mi th m XHTML phi c mt th ng. Trong trng hp th c lp th n phi cha mt du gch xin thun {/} nh trng hp th <br/>. XHTML phi c vit bng cc k t vit thng. To trang web c cn kin thc v XHTML? Dreamweaver sp xp hp l qu trnh to web bng cch cung cp cho bn mt giao din trc quan v d s dng; thng qu , bn c th sinh m XHTML. Khi s dng Dreamweaver thit k web, bn c th thy trang web ca mnh xut hin nh trn trnh duyt thay v l m XHTML. C th bin son cc ti liu XHTML bng cc b son tho vn bn hay khng? Cc ti liu XHTML l cc tp tin thun vn bn, do , bn c th m v bin son chng bng bt c mt b son tho vn bn no, chng hn nh Notepad, tuy nhin, nu s dng Dreamweaver, bn c th la chn hoc l t vit m XHTML hoc Dreamweaver sinh m ny cho bn. C th truy xut trc tip m XHTML? Bn c php truy xut v chnh sa trc tip m XHTML ngay trong Dreamweaver thng qua 3 ch xem l Code Design Split. Quick Tag Editor bn chnh sa m m khng cn chuyn sang ch Code hoc Design Lm vic trong ch Design v Code Trn thanh cng c, nhp nt hin th m ngun ca trang trong vng lm vic:

28

Nhp nt n i m ngun v chuyn sang ch thit k trc quan cho trang web nh th n c th hin bi trnh duyt.

Nhp nt

th hin ng thi c hai ch Code v Design trong vng lm vic:

29

Trong vng Design, nu bn chn mt on vn bn bt k th trong vng Code, on m tng ng vi phn vn bn c chn cng s c chn:

Tng t, khi bn chnh sa trong vng Code th ni dung th hin trong vng Design cng t ng c cp nht theo:

30

Trong ch Split, ti c th chia ngang vng lm vic c khng? Mc nh, ch Split s chia vng Code pha tri v vng Design pha phi. Tuy nhin, bn vn c th thy i iu ny bng cch: Khi ang ch Split, t menu View tt ty chn Split Vertically:

Lc ny, giao din ca Dreamweaver CS5.5 s nh sau:

31

3. Tm hiu th Head v th Body Mi ti liu XHTML u cha th Head v th Body. xem m XHTML ca trang, bn nhp vo nt trn thanh cng c hoc t menu Window chn Code Inspector:

iu ny s m ra mt ca s m ngun ca trang ging nh sau:

32

Ti s gii thch mt s dng m y:

o Dng DOCTYPE ny cho bit ti liu ny c to bi chun XHTML 1.0 Transitional v y l chun c khuyn dng cho hu ht mi trang web.

o Th m <html> v th ng </html> dng bt u v kt thc cho mi ti liu HTML

o Th m <title> v th ng </title> hin th ni dung xut hin trn thanh tiu ca trnh duyt Web.

o Tt c ni dung c hin th trong ca s trnh duyt Web u cha bn trong th m <body> v th ng </body>

4. Tm hiu cc th nh dng khi XHTML c to thnh t nhiu loi th khc nhau, mi ci c thit k ch nh mt loi nh dng c th no , chng hn nh chia on, nh kiu tiu , hoc nh mc u dng a. Th div Th div c s dng chia ni dung v thng c kt hp vi cc style CSS

33

b. Th h1 n h6 Nhng th ny c s dng nh dng cc tiu , th h1 s c style ln nht v h6 s cho style nh nht

34

c. Th img

Th ny c s dng chn nh vo trang web ca bn

d. Th p Th ny c s dng phn on cho ni dung cng nh thm khong cch gia cch nh v nhng thnh phn khc.

35

5. V sinh cho m ngun Dreamweaver c th ti u m cho trang web ca bn bng cch xa b nhng th d tha hoc th khng s dng, iu thng xut hin khi bn ct v dn ni dung t mt ngun khc vo trang web. iu ny gip gim dung lng trang v khin m ngun trang d c hn trong ch Code.

36

T menu Commands chn Clean Up XHTML:

Hp thoi Clean Up HTML/XHTML xut hin:

37

Nhp cc ty chn m bn mun thc hin dn dp:

Sau , nhp vo nt thc hin cng vic. Dreamweaver s phn tch m HTML v hin th kt qu tm lc nhng ci c loi b:

Nhp vo nt V kt qu s nh sau:

ng hp thoi thng bo ny.

38

6. Xem v chnh sa ni dung u trang Ni dung u trang c s dng cho cc my tm kim thu thp thng tin v trang web ca bn a. Chn cc t kha meta T menu Insert HTML Head Tags chn Keywords:

39

Hp thoi Keywords xut hin:

Nhp chui t kha phn cch bi du phy m t ni dung ca trang web:

 Nhp nt lu thit lp. b. Chn cc m t meta T menu Insert HTML Head Tags chn Description:

40

Hp thoi Description xut hin:

Nhp vo m t tm lc ni dung trang web ca bn:

Nhp nt lu li thit lp. Lc ny, bn chuyn sang ch Code xem m ngun trang, bn s thy n nh sau:

41

7. Chnh sa nhanh cc th XHTML a. S dng Quick Tag Editor Chn vng trang m bn mun chnh sa, v d, ti chn tiu ca bi th:

Lc u ti s dng th h3 cho tiu bi th ny:

Vi tiu bi th c chn, nhn xung thanh trng thi, bn cng s thy iu ny:

42

Nhp phi vo th bn mun chnh sa trong thanh trng thi, khi menu ng cnh xut hin, bn chn Quick Tag Editor. V d, ti mun chnh sa th h3 thnh th h2:

Lc ny s xut hin mt bng nh sau:

43

Nhp vo th mun sa i v g Enter, v d y ti sa th h3 thnh h2:

Lc ny th s c t ng thay i trong m HTML v cp nht trc quan trng vng thit k:

b. S dng Remove Tag Chn vng trang m bn mun chnh sa, v d, ti mun hy th h3 bao quanh tiu bi th trn:

44

Nhp phi vo th bn mun chnh sa trong thanh trng thi, khi menu ng cnh xut hin, bn chn Remove Tag:

45

Lc ny th s c t ng thay i trong m HTML v cp nht trc quan trng vng thit k:

8. S dng Snippets thm cc nh dng c bit Bn c th chn nhng on m ngn c vit trc t bng chc nng Snippets. y l mt tnh nng tin li thm nh dng c bit v lu nhng ty chn nh dng thng s dng. T menu Window chn Snippets:

46

Bng chc nng Snippets xut hin:

Nhp vo v tr m bn mun snippet xut hin. V d ti mun xut hin cnh tiu ca bi th:

47

Tm snippet mun thm v nhp kp vo n:

Snippet ngay lp tc c chn vo ni dung trang:

48

V. nh dng v trang tr vn bn 1. To u mc nh du dng bn mun s dng lm u mc chnh:

Trong bng thuc tnh, nhp vo nt

49

Trong danh sch th xung, chn Heading 1:

Dng c chn s t ng chuyn i nh sau:

Lu : o Heading 1, 2 v 3 thng c s dng cho tiu v ph . o Heading 4 tng t dng in m ca font ch mc nh o Heading 5 v 6 thng dng cho cc dng vn bn nh hn chng hn thng tin bn quyn.

2. S dng phim Enter trong vng thit k Khi g Enter trong vng thit k c ngha l bn thm mt th p vo m ngun trang. N s to ra mt th ngt hng v phn cch gia cc on.

50

Ngay khi g Enter, vng Code s t ng c chn th p:

3. To phn on t tr chut ti v tr mun phn on v g Enter:

51

Mt hng trng s xut hin gia cc phn on to s tch bit:

4. Cn hng cho phn on Chn phn on mun cn hng:

52

T menu Format Align chn hnh thc cn hng mun thc hin, v d, ti chn cn gia:

Khi ny, phn on s c cp nht nh dng:

Lu : Trong HTML, cc phn on c bao quanh bi th m <p> v th ng </p>. Trong ch Code bn s d dng thy c iu ny:

53

5. Ngt hng Nhp vo v tr mun to ngt hng v nhn

Th ngt hng <br/> s c t thm vo vng Code:

54

6. Li dng phn on vi th Blockquote Trong HTML, th <blockquote> thng c s dng cho nhng on trch dn di, tuy nhin, chng ta cng c th s dng n li dng cho phn on. Chn phn on mun li dng:

Trong bng thuc tnh, nhp vo nt

55

Phn on c chn s li vo:

Nu mun li thm vo na, bn vn c th nhp nt ti s nhp thm mt ln na, v kt qu s l:

n khi no tha mn th thi, y

Ngc li vi tnh nng li dng ny, bn c th tin dng bng cch nhp vo nt c kt qu ngc li.

7. To danh sch Nu mun lit k mt danh sch g bn s thng mun sp xp chng theo trt t v nh du hoa th u dng trc khi lit tn ca chng ra. V trong phn ny, ti s hng dn bn to danh sch trong Dreamweaver.CS5.5. a. To danh sch im mc u dng y, ti c mt trang vi ni dung nh sau:

56

Ti mun to mt danh bao gm Mc 1 n Mc 5. vy, u tin ti s chn tt c chng:

Trong bng thuc tnh, nhp vo nt

57

Kt qu thao tc ny s cho chng ta danh sch mong mun:

b. To danh sch nh s u dng Thay v nhp nt im mc u dng th ta nhp nt to danh sch nh s u dng. Quay li v d trn, tng t, ta chn tt c cc dng mun to danh sch:

Trong bng thuc tnh, nhp nt

58

Ta s c kt qu nh sau:

c. Thay i kiu im mc v dng s khi to danh sch phn a v b, ti hng dn cc bn to danh sch im mc v nh s. Nu k bn s thy phn im mc l nhng du trn en xut hin u dng v phn nh s l nhng k t s trong h thp phn. By gi, nu mun thay i cc du chm trn bng du chm vung v cc s thp phn bng cc s La M th phi lm nh th no? By gi ti s hng dn cc bn lm vic ny. T menu Format List chn Properties:

Hp thoi List Properties xut hin:

59

Nhn nt

k nhn List type chn kiu to danh sch cn thit lp:

Trong danh sch th xung, c 2 phn tng ng vi hai kiu danh sch m ti trnh by: o Bulleted List: Danh sch im mc o Numbered List: Danh sch nh s

Tip , bn li nhp nt

k nhn Style chn kiu:

o Vi kiu im mc bn s c cc kiu sau:

o Tng t, vi kiu nh s bn cng c cc dng: