Thit k website bng phn mm Adobe Dreamweaver CS5 - Phn 2

Cp nht lc 17h21' ngy 12/02/2011 Bn in Chia s Trong phn 2 s gii thiu n cc bn cch chn cc ni dung a phng tin nh nh (km hiu ng khi di chuyn tr chut), on flash, video clip. ng thi hng dn s dng phn mm SothinkDHTMLMenu (tch hp vo Adobe Dreamweaver) to menu ng... 7. Chn hnh vo trang web - Chn nh tnh Trc khi mun chn hnh nh vo trang web, bn nn chp tt c cc hnh nh cn chn vo th mc Image ca b web. Vic la chn hnh nh chn vo trang web cng phi ch n s lng v kch thc ca nh v nu chn qu nhiu hoc nh qu ln s lm cho trang web c dng lng ln, vic ti v xem cng chm hn. thc hin vic chn hnh nh vo trang web, bn lm nh sau: vo Insert, chn Image v tm n hnh nh mun chn . Sau khi chn hnh nh vo trang web, bn tin hnh thit lp cc thuc tnh cho hnh nh va mi chn khung Properties (hnh 8)

Hnh 8. Thuc tnh ca hnh nh - To Rollover Images. Rollover Images l mt hnh nh s thay i khi con tr i ngang qua n. Khi to Rollover Images th hai nh phi c kch thc bng nhau. Nu hai nh c kch thc khng bng nhau th Dreamweaver s t chnh cho chng bng nhau. Trc tin bn t con tr v tr mun chn. Sau chn Insert > Image objects > Rollover Image. Hp thoi Insert Image Rollover xut hin ta thit lp cc ni dung sau:

Hnh 9. To hiu ng nh ng khi di chuyn tr chut - Image name: t tn cho Image. - Original image: bm vo nt Browse ch nh hnh u tin xut hin. - Rollover Images: bm vo nt Browse ch nh hnh s thay i khi di chuyn chut qua n. - When Clicked, Go to URL: bm vo nt Browse ch ra trang web lin kt n khi bm vo n. Chn OK hon tt (hnh 9). - Chn nh ng flash, video clip vo trang web. Vo Insert > media > chn SWF hoc FLV ty theo nh dng tp tin cn chn. Sau duyt n File flash hoc File Video v bm OK.

Hnh 10. Chn tp tin a phng tin 8. To menu cho trang web. Menu l mt phn khng th thiu cho mi trang web. N l ni lin kt cc trang ri rc ca b web li vi nhau thnh mt h thng. Vic to ra mt menu tht p v chuyn nghip l c ao ca nhiu ngi thit k web. i vi phn mm thit k web Dreamweaver, c mt cng c tch hp h tr to menu tht chuyn nghip l SothinkDHTMLMenu. Bn c th dng phn mm thit k menu cho trang web ca mnh. SothinkDHTMLMenu c cung cp bn dng th ti trang ch http://www.sothink.com/product/dhtmlmenu. Sau khi ci t thnh cng phn mm SothinkDHTMLMenu, trn thanh menu ca Adobe Dreamweaver s c thm menu Sothink v vi menu ny bn s to ra mt menu bng by cho website ca mnh (hnh 11).

Hnh 11. Khi ng DHTML Menu u tin m trang web cn to menu bng phn mm Adobe Dreamweaver t con tr v tr cn chn menu, chn menu Sothink, trong bng hin ra chn DHTML Menu (hoc bm t hp phm Alt+Shift+D). Lu , bn phi lu trang web trc khi tin hnh to menu. Trong ca s m ra ca SothinkDHTMLMenu, chn Blank Menu thit k mi, From Template

nu mun chn mt kiu menu c sn. Trong ca s Menu Tree (menu ng bn tri), bn c th thc hin cc thao tc nh ct, dn, cc ch , chuyn mc cho menu thng qua cc nt lnh trn thanh cng c. Ton b qu trnh thit k trong SothinkDHTMLMenu c thc hin ch yu bi cc khung tnh nng: Popup Menu, Menu Item. Ngoi ra, trong qu trnh thit k, bn c th tm hiu thm v cc ca s: Scrolling v Global Setting (hnh 12).

Hnh 12. Cc tc v thit k - Khung Menu Item: Ca s ny cho php bn nh dng cho tng ch , tng mc trong menu (hnh 13). Trong ca s ny, bn c th iu chnh cc mc nh sau:

Hnh 13. Thuc tnh ca menu + Chn nhn General nhp cc mc cho menu. + Chn Text nhp tn ch . + Chn mc HTML nhp tn ch c nh dng trong cc cp th HTML. + chn nh vo menu, bn chn Image, xc nh nh t nt lnh . + Cn chnh v tr hin th ni dung trn cc mc menu vi Align (left, right, center) hoc Valign (top, middle, bottom). + t lin kt cho cc mc menu thng qua mc Link. Ngoi ra trong ca s Menu Item bn cn c th nh dng font ch, mu ch, mu nn, hnh nn, khung, kiu cho menu trong cc nhn tng ng ca ca s Menu Item l Font, Icon, Background, Border, Condition, Style, Advanced. - Khung Popup Menu

Hnh 14. Ca s Popup Menu Sau khi to xong menu, ca s ny s gip chng ta thit k mu sc, kiu hin th menu v iu quan trng bn c th to nhng hiu ng c bit cho menu (hnh 14). Cc bc thc hin nh sau:

Trong nhn Genaral ca Popup Menu, chn Horizontally trong khung Display hin th menu nm ngang hoc chn Vertically cho kiu menu dc (hnh 15).

Hnh 15. Chn kiu hin th Tip theo chn nhn Background, trong mc Bg color, bm nt v chn mu nn cho menu t bng mu, cn nu mun menu c nn trong sut th bm nh du chn trc mc Transparent. Cng c th chn nh nn ca menu bng cch nhn nt trong mc Bg image (hnh 16).

Hnh 16. Chn mu nn hay hnh nn t mu nn cho menu, bn chn nhn Border, bm chn nt mi tn trn nt t mu cho mi cnh ca Menu. Trong nhn Effects t ca s Popup Menu, bn s t hiu ng cho menu (hnh 17). Cc hiu ng trong mc nh sau:

Hnh 17. Chn hiu ng + bng cho menu: Bn c th bng cho menu bng cch chn Simple hoc Complex t menu con ca Drop shadow, chn ng nt, dy cho bng v mu sc cho bng. + Hiu ng hin th menu (Effects for showing): bm chn menu v chn mt hiu ng c bit t danh sch. + Hiu ng c bit n menu (Effect for Hiding): bm chn mi tn, chn hiu ng n menu. + Effect Speed: Nhp gi tr vo text t tc hin th cho hiu ng menu. - Khung Scrolling Nu trong menu c qu nhiu menu con, bn c th lm cho cc menu con cun li bng cch tu chnh trong ca s Scrolling khi trn mn hnh khng khng gian hin th tt c chng (hnh 18).

Hnh 18. Ty chnh kiu dng thanh cun + Tu chnh kiu dng cho thanh cun theo chiu ngang (Horizontal Popup Menus) hoc theo chiu dc (Vertical Popup Menus). + nh du chn Enable Scrolling. Sau khi hon tt cc bc thit lp cho menu, bn chn lnh Save and close hon tt cng vic. SothinkDHTMLMenu s t ng a menu m bn va to vo trang web ca mnh m khng cn phi lm vic vi nhng on code na. Tuy nhin, SothinkDHTMLMenu li c mt nhc im l b li font ting Vit Unicode khi chy menu trn trnh duyt v cc tp tin do chng trnh to ra l rt nhiu v nm cng th mc vi tp tin web va to nn c phn no lm cho phn thit k khng c tnh khoa hc. Nhng hai li trn vn c th c khc phc d dng bng cch lm vic vi nhng on code. Trc tin, bn c th khc phc li font bng cch vo on code do chng trnh to ra trong Dreamweaver tm n cc t b li font v sa li cho ng. Tip theo, khc phc cc tp tin do

SothinkDHTMLMenu to ra nm mt trt t trong th mc cha trang web bn to ra mt th mc mi trong th mc cha trang web (th mc Menu chng hn), tip theo sao chp tt c cc tp tin m SothinkDHTMLMenu to ra vo th mc mi ny. Sau vo ca s son tho code v thm phn menu\ vo trc cc dn c l xong (cc ng dn c l tn ca cc tp tin do SothinkDHTMLMenu to ra). 9. To lin kt cho trang web. Mt trang web c thit k ra khng ch cha thng tin ca ni b trang web m n cn phi c lin kt vi nhiu trang web khc ni dung thm phong ph. C th to lin kt t mt hnh nh n trang web hoc t mt dng ch ty theo s thch ca ngi thit k. Cc bc thc hin nh sau: - Chn hnh hoc nhp dng ch cn to lin kt. - Bm chn hnh hoc chn dng ch cn to lin kt. Nhp vo Link khung Properties a ch trang web cn lin kt ti.

Hnh 19. Thuc tnh a ch lin kt