CAN BAN VE DREAMWEAVER 4.

0
A.TONG QUAN VE MACROMEDIA DREAMWEAVER 4.0 Dreamweaver la mot chng trnh Visual Editor chuyen nghiep e tao va quan ly cac trang web. Dreamweaver cung cap cac cong cu phac thao trang web cao cap, ho tr cac tnh nang DHTML (Dynamic HTML) ma khong can viet cac dong lenh giup cac ban khong biet lap trnh web cung co the thiet ke c cac trang web ong mot cach de dang, trc quan.Vi Dreamweaver ban co the de dang nhung cac san pham cua cac chng trnh thiet ke web khac nh Flash, Fireworks, Shockwave, Generator, Authorwave vv... Vi Dreamweaver ban co the quan ly cac Local va Remote site giup cho viec quan ly cac trang web trong cac site cuc bo va cac website ieu khien t xa co the ong bo. Ngoai ra Dreamweaver con cho phep ban chnh sa trc tiep HTML.Vi Quick Tag Editor ban co the nhanh chong bo sung hoac xoa bo mot HTML ma khong can thoat khoi ca so tai lieu.Che o soan thao trang web bang HTML giup cac ban co the thiet ke trang trc tiep bang ngon ng HTML. Dreamweaver con ho tr cac HTML Styles va Cascading Style Sheet giup ban nh dang trang web nham tang tnh hap dan khi duyet cac trang web nay. Vung lam viec cua chng trnh Deamweaver rat linh ong va de s dung gom cac thanh phan nh sau: Document, Launcher, Object Palette, Property Inspector, Floating Palette va cac context menu(menu ng canh) ... e m cac thanh phan nay ban co the vao menu Window-> chon ten cua thanh phan can hien th .

Document

Macromedia Dreamweaver 4.0

Mediaspace Club

#1

+ Launcher: co cha cac nut e m va ong cac Inspector va cac Palette c dung thng xuyen nhat.Ban cung co the truy cap Launcher tai Mini Launcher tai goc phai cua ca so Document.

+ Object Palette: co cha cac nut e tao cac oi tng khac nhau nh hnh anh, cac table, cac lp vv... + Propery inspector: hien th cac thuoc tnh cua cac oi tng hoac Text

c chon,va no cho phep ban chnh sa cac thuoc tnh nay. + Floating Palette: cac Floating Palette co the c neo co nh nham giup ban ket hp c vi nhieu ca so di ong, cac Inspector va cac Palette thanh mot hoac nhieu ca so c nh nhan nh Object Palette vv... + Context menu: cac menu ng canh giup ban nhanh chong truy cap vao cac muc chon. Object Palette co cha cac oi tng c dung thng xuyen nhat nh: Common Panel, Forms Panel, Frames Panel, Characters Panel, Head Panel, Invisibles Panel, Special Panel. ================================================================

B. LAM VIEC VI VAN BAN at con tro tai v tr muon nhap van ban trong ca so tai lieu (Document) sau o nhap d lieu vao. e nhap van ban co tieng viet ban hay cai at cac tham chieu Font nh sau (Hien tai phien ban 4.0 cha ho tr Font Unicode): a) Cai at cac tham chieu Fonts / Encoding. S dung cac tham chieu Fonts/Encoding e cai at viec tao ma font mac nh danh cho cac trang tai lieu mi va cai at cac font ma Dreamweaver dung e hien th moi mot che o tao ma font. Viec tao ma cho tai lieu (trang web) se xac nh cach ma trang web c hien th trong trnh duyet. Chon Edit->Preferences, chon mot che o tao ma t select box Default Encoding. Che o tao ma mac nh c lu cung luc vi tai lieu trong the <META> c chen au tai lieu. V du neu ban ch nh Western(Latin1) th the <meta> phat sinh ben source code ngon ng HTML la : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> e ch nh cac font dung cho US English va tat ca cac th tieng Tay Au hay chon Western. e cai at font cho cac th tieng Chau A hay chon Japanese.

Macromedia Dreamweaver 4.0

Mediaspace Club

#2

Hay chon kieu tao ma chang han nh Western (Latin 1) hoac Japaness t Font Settings . Tai Proportional Font chon font va kch thc hien th mac nhien khi soan thao trang web (v du: Times New Roman, size=12pt). + Fixed Font la font ma Dreamweaver dung nham hien th van ban ben trong cac the <PRE>,<CODE>,<TT> + HTML/Code Inspector la font c dung cho tat ca cac text (van ban) ben trong HTML Source Inspector

+ Tai hop thoai Property Inspector tai select box Default font hay chon Edit font list hoac chon menu Text->Font->Edit Font list se xuat hien hop thoai sau: + Tai Available Fonts hay chon fonts tieng viet thng dung (v du font VNI-Times hoac .vntime) sau o Click nut <<. Fonts c chon se hien trong hop Chosen Fonts va se hien trong hop danh sach cac Font List thng dung.Lu y e co tieng viet th ban phai chon font la VNITimes hoac .vntime hoac cac Fonts tieng viet khac tai select box chon Macromedia Dreamweaver 4.0 Mediaspace Club #3

font trong hop thuoc tnh Property Inspectorth mi phat sinh c thuoc tnh face<font face="VNI-Times" ... > th mi hien c font tieng viet khi duyet trang web trong trnh duyet.

Lu y: Ban nen Edit Font List moi lan mot font va ban thc hien viec Edit Font list nay cho cac font ban thng dung. b) nh dang van ban: Ban co the nh dang text trong ca so tai lieu Document bang cach cai at cac thuoc tnh trong hop Property Inspector. e nh dang van ban trc tien hay boi en van ban muon nh dang roi sau o chon cac thay oi tren hop thuoc tnh Property Inspector. Neu hop Property Inspector khong m hay chon menu Window->Properties

Lu y:Trong luc nh dang van ban ban co the s dung hop Property Inspector hoac ban co the s dung menu Text e nh dang van ban v co nhng chc nang ma hop thuoc tnh Property Inspector khong xay dng san cho ban (v du nh van ban c gach di,gach ngang hoac ban co the s dung che o thiet ke web bang ngon ng HTML e thiet ke them nhng thuoc tnh can thiet (v du nh ban muon van ban oc canh eu <p align="justify" ...> Neu ban ang thao tac vi cac Bullets hay Numbering ban co the Click nut List Item tren thanh Property Inspector e cai at mot so thong so sau:

Macromedia Dreamweaver 4.0

Mediaspace Club

#4

+ Chon kieu List Type la Bullet hay Numbering, chon kieu Style. Neu ban ang thao tac vi numbering ban co the cho so tang t may tai Start Count. Tai Reset Count to ban co the nhap vao gia tr so tr ve mac nhien (thng la 1). e hien che o thiet ke trang web ngon ng HTML ban co the click nut < > show code Inspector (hoac show HTML) thanh Mini-Launcher goc phai man hnh.

c) Tao sieu lien ket (Hyperlink) cho van ban: Vi Dreamweaver ban co nhieu cach e tao sieu lien ket en cac trang web khac hoac cac tap tin tai lieu, hnh anh, am thanh (Sound), Phim(Video) hoac cac chng trnh co the tai xuong (Download). Thng co cac loai sieu lien ket sau: 1. Internal Link :Lien ket en cac tai lieu trong cung Website (Local Site) . 2. External Link :Lien ket cac tai lieu ben ngoai Local website (v du nh link ti cac WebServer khac tren Internet, FTP Server khac tren Internet, cac Telnet Server, cac News Server vv...) 3. E-mail Link :tao mot sieu lien ket cho phep ngi s dung gi Email. 4. Link to Name Anchors (con co the goi la Bookmark) :Tao sieu lien ket nhay en mot v tr nao o trong trang web hien hanh. Nguyen tac chung khi ban tao mot sieu lien ket cho van ban(text), hnh anh(image), Hotpot cua ban o hnh anh(hotpot of Image map): hay chon van ban hoac hnh anh hoac Hotpot muon tao sieu lien ket sau o click nut Browse For file (tao Internal Link) tren hop thuoc tnh Property Inspector cua oi tng tng ng ang chon.
Macromedia Dreamweaver 4.0 Mediaspace Club

#5

Khi ban ch ng dan ti trang web ban se thay a ch cua trang web nay hien tai a ch URL nh hnh ve. Tai hop link cua hop Property Inspector xuat hien ng dan cua tap tin ban ang lien ket ti theo kieu cuc bo(tren a cng ) nhng neu ban a save lai co ten ban se co kieu ng dan la tng oi. Ban nen lu trang web lai trc khi tao sieu lien ket e khong hien thong bao nhac nh moi khi tao sieu lien ket.

S dung ng dan cuc bo neu ban cha lu trang web trc khi tao Hyperlink

S dung ung dan kieu tng oi Ban co the nh Target cho sieu lien ket (ni hien th noi dung cua trang web khi click vao). Ta co cac loai Target sau: _bank :noi dung trang web se hien ra ca so mi (New Window). _parent:noi dung se hien trang cha _self:noi dung hien trang hien hanh _top:noi dung hien toan trang (Whole page) Chu y: Neu ban tao mot External link ti mot Web Server,FTP Server,News Server vv.. ban khong can Click nut Browse For File ma hay nhap vao a ch cua Server (may chu) ma ban ang muon lien ket ti. V du: http://www.mediaspace.250x.com/ , ftp:// www.mediaspace.250x.com/,vv...

Tao sieu lien ket e Reply Email:( nptai@yahoo.com, huuthanh@50g.com ) + Hay Click nut Insert Email Link ban se thay hop thoai sau:

+ Tai hop thoai Text hay nhap vao chuoi hien th. + Tai hop E-mail:hay nhap vao a ch Email muon gi en.

C. LAM VIEC VI CAC HNH ANH:

Macromedia Dreamweaver 4.0 Mediaspace Club

#6

Vi Dreamweaver ban co the chen cac hnh GIF va JPG vao trong trang web hoac co the nh anh nen cho cac trang web hoac anh nen cho cac lp (Layer). e chen hnh anh vao trang web: at con tro tai v tr muon chen anh,chon menu Insert -> Images hoac Click nut Insert Image tren hop Object Pallete sau o ch ng dan en hnh anh ma ban muon chen vao.

Sau khi chen anh vao c trang Web ban co the Click chuot chon anh e xuat hien hop thuoc tnh Property Inspector e nh ngha cac thuoc tnh cua hnh anh.

e nh c bo soan thao anh ben ngoai (External Image Editor) khi ban nhap nut Edit ban hay vao menu Edit->Preferences chon External Editor. Trong hop Extensions hay chon kieu anh ma ban muon chnh sa hoac ban co the Click dau (+) e them mot kieu anh ma ban muon chnh sa, nhap nut (+) ben Editors sau o ban hay ch ng dan en tap tin chng trnh soan thao anh(v du nh photoshop.exe) Tao ban o hnh anh (Image Map / Hotpot): Hay chon anh sau o chon cong cu ve Hotpot vuong(Rectangular Hotpot Tool), tron (Oval Hotpot Tool) hay bat ky (Polygon Hotpot Tool)tren hop Property Inspector cua hnh anh
Macromedia Dreamweaver 4.0 Mediaspace Club

#7

sau o ve mot toa o tren anh ma ban muon tao o co sieu lien ket se xuat hien hop thuoc tnh cua Hotpot nh hnh ve.

Hay Click nut Browse For File e ch ng dan en tap tin can Link ti, neu ban muon tao External Link th nhay nhap a ch cua Webserver hay FTP Server tai hop Link. Nhap vao mot chu thch tren iem Hotpot khi mouse di chuyen qua no tai Alt. Ban co the ch nh Target cho noi dung cua sieu lien ket (tham khao cac loai Target phan tren). Trong luc thao tac vi Hotpot ban co the dung bieu tng mui ten e chon Hotpot e di chuyen hay thay oi kch thc toa o cua iem sieu lien ket. Chu y:Neu ban s dung nhieu ban o hnh anh trong cung mot trang Web th ban phai chac rang moi ban o phai co mot ten duy nhat.Ban co the at ten ban o tai hop Textbox Map. Tao Rollover Image: Rollover Image la mot hnh anh thay oi khi mouse di chuyen qua no.Mot Rollover cha 2 hnh anh: + Anh s cap (Primary Image) :la hnh anh c hien th khi trang au tien c load. + Anh ao (Rollover Image) : la anh se xuat hien khi mouse di chuyen tren anh s cap. Chu y : khi ban tao mot Rollover th ca hai hnh anh phai co kch thc giong nhau, neu cac hnh khong co kch thc giong nhau th Dreamweaver t ong nh lai kch thc hnh anh th hai e ket vi cac tnh chat cua hnh anh th nhat. Cach tao: + Hay at con tro tai v tr muon chen Rollover. + Chon Insert->Rollover Image (Dreamweaver 3.0) hoac Insert -> Interactive Image -> Rollover Image(Dreamweaver 4.0) t menu Insert hoac Click nut Insert Rollover Image tren thanh Object Palette, ban se thay xuat hien hop thoai sau:

+ Tai Original Image hay Click nut Browse e tm anh goc (Primary Image). + Tai Rollover Image hay Click nut Browse e tm anh ao (Rollover Image). + Hay chon Preload Rollover Image khi ban muon Dreamweaver tai trc hnh anh Rollover vao cache cua bo duyet e tang nhanh toc o load trang web.
Macromedia Dreamweaver 4.0 Mediaspace Club

#8

+ Tai When Click, Go To URL hay Click nut Browse e tm tap tin muon tao sieu lien ket hoac nhap vao a ch URL tai textbox nay.

Tao Navigation Bar:

Ban co the tao mot Navigation bar theo chieu ngang hoac chieu ng bang cach chon muc Insert -> Navigation Bar hoac Click nut Insert Navigation Bar tren hop Object Pallette se xuat hien hop thoai sau:

+ Trong trng Element Name hay nhap vao ten cua phan t Navigation bar. + Tai Up Image hay nhap Browse va ch ng dan en hnh anh c hien th ban au (v du a1.gif). + Tai Over Image hay nhap Browse va ch ng dan en hnh anh c hien th khi mouse di chuyen qua anh (v du a2.gif). + Tai Down Image hay nhap Browse va ch ng dan en hnh anh c hien th khi mouse Click vao anh (v du a2.gif ,hoac ban co the thiet ke them mot anh a3.gif). + Tai Over While Down Image hay nhap Browse va ch ng dan en hnh anh c hien th khi mouse Click vao anh trong luc di chuyen con tro len hnh anh o (ban co the khong can thiet ke trang thai nay). + Tai When Clicked,Go to URL hay Click nut Browse e ch ng dan en tap tin ma ma ban muon Link ti hoac nhap vao a ch External URL ma ban muon Link ti.
Macromedia Dreamweaver 4.0 Mediaspace Club

#9

+ Hay chon tuy chon Preload Image.Neu ban khong chon tuy chon nay se tao ra s cham tre khi mouse Over qua anh. + Show down Image Initially :Hien th anh trang thai nhan mouse khi trang va mi tai xuong. + Hay chon kieu Navigation bar nam doc hay ngang tai Insert. + Hay chon Use Tables e chen cac phan t Navigation bar trong Table. + Hay nhap nut + e them mot phan t Navigation mi hoac click nut - e loai bo phan t Navigation ang chon. + e sap xep cac phan t ban co the Click nut mui ten len hay xuong. * Lu y: Ban ch chen c mot Navigation Bar trong cung mot trang Web. Sau khi tao xong c Navigation Bar neu muon chnh sa lai ban hay chon Menu Modify > Navigation. =================================================================== D. LAM VIEC VI TABLE Table la mot cong cu thiet ke Web nham sap xep d lieu va cac hnh anh tren mot trang HTML.Vi Dreamweaver ban co the de dang chuyen oi gia mot thiet ke Table va thiet ke Lp. Ca Table va lp eu cho phep ban ieu khien v tr cua cac phan t cua trang Web nhng cac lp th khong c ho tr trong cac trnh duyet t 3.0 va trc o. Chen Table : e chen Table ban chon menu Insert -> Table hoac Click nut Insert Table tren thanh Object Palette ban se thay hop thuoc tnh cua Table nh sau: + Trong hop Rows hay nhap vao so hang cua Table. + Trong hop Columns hay nhap vao so cot cua Table. + Trong hop Cell Padding hay ch nh khoang cach t Text so vi canh cua Table. + Trong hop Cell Spacing hay nhap vao khoang cach gia cac Cell. + Trong hop Width hay nhap vao chieu rong cua Table di dang so Pixel hoac di dang mot ty le phan tram cua c so trnh duyet. + Trong hop Border hay nhap vao ng vien cua Table ,neu ban muon Table la dang li ban hay nhap vao gia tr la 0. nh dang Table: e nh dang Table ban hay di chuyen Mouse vao cac canh cua no sau cho xuat hien c hnh mui ten 4 au sau o Click chon Table ban se thay xuat hien hop thuoc tnh cua Table nh hnh ve

Macromedia Dreamweaver 4.0

Mediaspace Club

#10

nh dang Cell: e nh dang cell ban hay Drag chon cac Cell muon nh dang ban se thay xuat hien hop thuoc tnh cua Cell nh sau:

Chu y: Khi ban nh dang Cell ngoai cac thuoc tnh cua Cell tren hop thuoc tnh ban co the chon cac Cell muon nh dang bang cach Drag mouse chon sau o Click phm phai chuot vao cac Cell a chon sau o chon menu Table va chon cac lenh thch hp tren menu nay.

Macromedia Dreamweaver 4.0

Mediaspace Club

#11

e chnh sa Table hoac Cell ban con co the chon menu Modify -> Table ban cung thay c menu nh hnh tren.

nh dang Table theo cac mau cho trc (Preset Design) Cell 1 Cell 1 Cell 1 Cell 2 Cell 2 Cell 2 Cell 3 Cell 3 Cell 3

1. Chon bang sau o chon menu Command->Format Table ban se thay xuat hien nhieu mau table cho san ban hay chon mot trong nhng mau nay.

Macromedia Dreamweaver 4.0

Mediaspace Club

#12

2. Trong hop hoi thoai mi xuat hien ban hay chon mot kieu Table ben danh sach ben trai va ban cung co the thay oi cac thuoc tnh tuy chon cho Table. Sap xep d lieu cho Table: Columm 1 C B A

Columm 2 3 2 1

Columm3 300 200 100

Chon Table sau o chon menu Command->Sort Table ban se thay hop thoai sau ay:

Chon cot e phan loai tai Sort By Tai Order chon kieu sap xep theo Alphabe hay theo so va chon kieu sap xep tang dan Ascending hay giam dan Descending
Mediaspace Club

Macromedia Dreamweaver 4.0

#13

e thc hien viec sap xep th cap tren cot khac hay ch nh cac tuy chon phan loai trong menu Then by. Tuy chon Sort Include First Row cho phep ban sap xep luon dong au ma thng la tieu e cua Table khong c di chuyen,ban ng chon option nay neu Table co tieu e. Chen Table trong Table: Mot Table co the nam trong mot Table khac, tuy nhien chieu rong cua no b gii han bi chieu rong cua o qua o xuat hien.

e thc hien ban lam nh sau: + au tien ban hay chen vao trang Web mot Table bang menu Insert->Table hoac Click nut Insert Table tren hop Object.Hay at v tr con tro tai o ma ban muon co Table th 2 roi cung chon Insert->Table. Nguyen Phu Tai ( nptai@yahoo.com ) Bien soan: Huu Thanh Design (huuthanh@50g.com )

Macromedia Dreamweaver 4.0

Mediaspace Club

#14