Tutorial Dreamweaver MX Bagian 1:

Mengenal Lingkungan Kerja Dreamweaver

1. Mengenal Lingkungan Kerja Dreamweaver MX 2. Bekerja dengan Teks o Heading o Paragraf dan Line Break o Memformat Teks Dengan Property Inspe tor 3. Mem!uat Link" #n $or" dan Target o Target o %amed #n $ors 4. Page Properties 5. Penutup Figures 1. Lingkungan kerja Dreamweaver MX 2. Property Inspe tor 3. Heading 4. Paragraf dan Line Breaks 5. Mengu!a$ format $uruf 6. Mem!uat dokumen !aru 7. Memasukkan Link 8. Tampilan inde&'$tm di !rowser 9. Target pada Property Inspe tor 10. %amed an $or 11. Mem!uat link ke !agian atas dokumen 12. Page Properties 13. Tampilan ak$ir tentangsaya'$tm

Dreamweaver adalah software apli asi desai! we" visual #a!g "iasa di e!al de!ga! istilah $%&'$%()$hat %ou &ee 's $hat %ou (et)i!ti!#a *!da tida harus "erurusa! de!ga! tag+tag ,-./ u!tu mem"uat se"uah situs. .a0romedia "elum lama i!i telah me!geluar a! rilis ter"aru dari Dreamweaver #aitu Dreamweaver .12 de!ga! pe!am"aha! "e"erapa fasilitas "aru di dalam!#a. Dreamweaver tida ha!#a dapat digu!a a! oleh para desai!er we"2 !amu! 3uga dapat digu!a a! oleh programer u!tu mem"a!gu! halama! i!ter!a tif are!a Dreamweaver .1 me!du u!g pula 4,42 5oldFusio!2 *&4.67- da! lai!+lai!. .e!urut surve# #a!g dila u a! oleh Pantone' om2 www'pantone' om(produ ts(produ ts'asp) id#rti le*+,-.id#rea*/2 pe!ggu!a Dreamweaver adalah 598 dari seluruh

orespo!de! #a!g disurve# da! mema!g digu!a a! tida ha!#a oleh desai!er2 tapi 3uga programer. Dalam seri tutorial i!i ita a a! me!ge!al pe!ggu!aa! Dreamweaver se"agai editor ,-./ visual. 9!tu "agia! pertama2 ita a a! me!ge!al li!g u!ga! er3a dalam Dreamweaver .1 da! mem"uat halama! we" sederha!a. :Program0 9!tu me!0o"a Dreamweaver2 *!da mem"utuh a! program!#a #a!g "er3ala! di $i!dows. ;are!a u ura!!#a 0u up "esar <da! lagi "u a! freeware=2 Dreamweaver tida dapat diserta a! di 5D edisi ali i!i.> Mengenal Lingkungan Kerja Dreamweaver MX /ihat 1am!ar /. Dreamweaver .1 me!awar a! dua la#out view u!tu di3adi a! se"agai tampila! er3a saat *!da mem"uat halama! we". &etelah i!stalasi2 Dreamweaver .1 a a! mem"eri a! opsi? .a0romedia Dreamweaver .1 $or spa0e atau .a0romedia Dreamweaver 4 $or spa0e. *!da dapat me!gu"ah+ u"ah tampila! i!i lewat me!u prefere!0es2 Modify > Preferences > Change Workspace. 4iliha! i!i te!tu sa3a terserah *!da2 pada tutorial i!i sa#a a a! me!ggu!a a! Dreamweaver .1 $or spa0e.

Fig 1. Lingkungan kerja Dreamweaver M @eri ut i!i pe!3elasa! u!tu eleme!+eleme! wor spa0e seperti telah tertera pada gam"ar. Do ument 2indow adalah tempat di ma!a *!da dapat mem"uat halama! we" se0ara visual2 ode2 atau edua!#a. Insert panel adalah tempat *!da dapat memasu a! image2 Flash movie2 ta"le2 atau eleme! lai!. '!sert pa!el i!i serupa de!ga! me!u '!sert pada me!u "ar. 9!tu memu!0ul a! pa!el i!i2 li Windows > !nser" atau te a! C"r#$F%. Property Inspe tor "ergu!a u!tu mela u a! pe!gedita! pada suatu eleme! di Do0ume!t $i!dow. Do ument Tool!ar "ergu!a u!tu me!gu"ah tampila! dari disig!Avisual view2 0ode view2 atau edua!#a se aligus. &elai! itu 3uga u!tu mem"eri titel pada do ume!2 melihat tampila! di "rowser. Panels 1roup merupa a! umpula! dari pa!el+pa!el Dreamweaver .1. 4ada "agia! i!i ita a a! mem"uat halama! we" sederha!a de!ga! pemformata! dasar pada te s2 li! 2 a!0hor2 da! 4age 4roperties. Bekerja dengan Teks 4ada dasar!#a Dreamweaver tida 3auh "er"eda de!ga! program pe!golah ata dalam memformat te s. 6amu! terdapat sedi it per"edaa! are!a Dreamweaver

me!ggu!a a! ,-./. 9!tu memformat te s dapat ita la u a! de!ga! me!ggu!a a! 4ropert# '!spe0tor. /ihat 1am!ar +.

Fig %. Proper"y !nspec"or Heading ,eadi!g <1am!ar 3= digu!a a! u!tu mem"uat 3udul dari do ume! atau su"+ su"3udul "er"agai level. .isal!#a *!da me!ggu!a a! ,eadi!g 1 u!tu 3udul2 ,eadi!g 2 u!tu su"3udul ti!g at pertama2 da! se"agai!#a. *!da 3uga dapat me!ggu!a a! i!sert pa!el2 pada '!sert 4a!el2 li -a" -eBt.

Fig &. 'eading Paragraf dan Line Break @ila ita me!e a! 7!ter pada pe!golah ata2 ma a a a! me!ghasil a! paragraf "aru. Demi ia! pula pada Dreamweaver. 6amu! paragraf dalam ,-./ <<p>= se0ara default me!ghasil a! 3ara le"ih "esar daripada 3ara a!tar"aris. Ci a ita i!gi! a!tar"aris tida ada 3ara 2 ma a ita mem"utuh a! <br> di ,-./. 9!tu "erpi!dah "aris da! "u a! paragraf ita me!ggu!a a! (hif"$)n"er2 atau !nser" > Line *reaks. /ihat 1am!ar 4.

Fig +. Paragraf dan Line *reaks Memformat Teks Dengan Property Inspe tor &eperti #a!g sudah ita "ahas se"elum!#a2 4roper# '!spe0tor "ergu!a u!tu mela u a! pe!gedita! pada se"uah eleme! ,-./. ;ita a a! me!ggu!a a! 4ropert# '!spe0tor i!i u!tu memformat te s2 u ura!2 war!a2 da! perataa! paragraf. 9!tu memu!0ul a! 4ropert# '!spe0tor #aitu de!ga! Window > Proper"ies atau de!ga! me!e a! C"r#$F&. *!da dapat memilih 3e!is fo!t sesuai de!ga! selera *!da2 !amu! terdapat 5 3e!is fo!t #a!g #a!g umum digu!a a! u!tu halama! we"2 are!a hampir semua omputer memili i 3e!is huruf i!i? *rial2 -imes 6ew Doma!2 5ourier 6ew2 (eorgia2 da! Eerda!a. 9!tu me!gu"ah te s #a!g telah *!da eti #aitu de!ga! memilih te s #a!g i!gi! diu"ah2 emudia! pilih 3e!is fo!t #a!g i!gi! *!da gu!a a!. Dalam piliha! fo!t dari drop dow! 4ropert# '!spe0tor terdapat "e"erapa 3e!is huruf lai! #a!g dipisah a! de!ga! oma. 4ertama+tama "rowser a a! mem"a0a fo!t pertama u!tu ditampil a! di "rowser2 "ila fo!t pertama tida teri!stal di omputer ma a a a! dila!3ut a! de!ga! fo!t edua2 emudia! etiga2 da! seterus!#a. Fo!t default adalah -imes 6ew Doma!. /ihat 1am!ar 5.

Fig ,. Mengu-ah forma" huruf Mem!uat Link" #n $or" dan Target 9!tu mem"uat li! a!tarhalama!2 selai! diperlu a! halama! li! sum"er)&our0e /i! )3uga diperlu a! li! tu3ua!)Desti!atio! /i! . File 0o!toh halama! $e" sederha!a di atas sa#a simpa! de!ga! !ama file index.htm. ,alama! i!i #a!g a a! me!3adi li! sum"er ita. .ari ita "uat halama! "aru u!tu dili! ? @uatlah halama! "aru u!tu li! tu3ua!2 Fi#e > .ew2 pada ota dialog pilih ;ategori Dynamic Page2 da! *asic Page '/ML. /ihat 1am!ar 6. &etelah selesai mem"uat file "aru2 emudia! simpa!lah file terse"ut de!ga! !ama file tentangsaya.htm. 4ada 0o!toh2 sa#a memasu a! horiFo!tal Dule2 !nser" > 'ori0on"a# 1u#e u!tu memisah a! o!te! dari halama! terse"ut. ;emudia! simpa! di folder #a!g sama de!ga! index.htm.

Fig 2. Mem-ua" dokumen -aru 4ada index.htm2 pilihlah te s G-e!ta!g &a#aH2 emudia! pada 4ropert# '!spe0tor eti a! tentangsaya.htm pada ota li! . *tau gu!a a! @rowse For File u!tu memilih file tentangsaya.htm lewat ota dialog. /ihat 1am!ar 7. 5e de!ga! me!ggu!a a! "rowser2 "u alah file index.htm <1am!ar 8=.

Fig 3. Memasukkan Link

Fig 4. /ampi#an inde5.h"m di -rowser

9!tu mem"uat li! e situs lai!2 setelah te s dipilih2 eti la!gsu!g pada ota li! alamat #a!g ditu3u2 misal!#a $ttp0((www'mwmag' om <Ca!ga! lupa a! http://=. Target -arget <1am!ar -= adalah peri!tah atau opsi pada li! #a!g mem"eritahu a! di wi!dow ma!a li! terse"ut a a! di"u a. &etiap wi!dow atau frame di ,-./ dapat ita "eri !ama da! "rowser a a! memuat halama! e wi!dowAframe sesuai #a!g ditu!3u a! oleh li! . &esuai atura! di ,-./2 terdapat !ama+!ama target husus #a!g "erarti spesial. 9:elf adalah piliha! default2 "ila *!da tida me!e!tu a! target2 li! a a! di"u a pada wi!dow "rowser atau frame #a!g sama. 9top memuat e wi!dow terluar <di luar semua frame #a!g ada=. 9Blank mem"u a li! pada "rowser wi!dow "aru. 9Parent mem"u a li! pada frame i!du < ita a a! mem"ahas te!ta!g hal i!i pada "agia! Frame !a!ti=.

Fig 6. /arge" pada Proper"y !nspec"or %amed #n $ors @ila halama! we" *!da memu!g i! a! pe!gu!3u!g me!s0roll wi!dow "rowser are!a isi dari halama! terse"ut pa!3a!g da! terdiri dari "e"erapa halama!2 *!da dapat me!ggu!a a! 6amed *!0hors i!i u!tu me!e!tu a! titi +titi terte!tu pada halama! de!ga! tu3ua! memudah a! !avigasi pe!gu!3u!g me!0ari sesuatu dalam halama! de!ga! 0epat. 4ada halama! #a!g sa#a "uat tentangsaya.htm terdapat "e"erapa me!u #a!g la!gsu!g me!u3u e topi0 terte!tu pada halama! terse"ut2 setelah itu pe!gu!3u!g dapat em"ali e atas halama!. 9!tu mem"uat 6amed *!0hor2 pertama ita ta!dai "agia! husus dari halama!? li !nser" > .amed 7nchors2 atau te a! C"r#$7#"$7. &etelah ota dialog mu!0ul masu a! !ama a!0hor. 4ada file i!i sa#a mem"eri !ama kesukaan. &etelah itu li 89. 4ada "agia! #a!g dita!dai a a! tampa ta!daAi0o! "u u ter"u a. /ihat 1am!ar /,.

Fig 1:. .amed anchor

&etelah itu em"ali e halama! atas pilih te s #a!g a a! di "uat li! pada "agia! atas do ume! #a!g a a! dihu"u!g a! de!ga! *!0hor terse"ut2 pada ota li! di 4ropert# '!spe0tor eti a! #kesukaan. 9!tu me!gem"ali a! e atas halama! "uat li! "aru pada "agia! terse"ut misal? kembali ke atas. /ihat 1am!ar //. ;emudia! masu a! di ota li! ta!da # da! pilih _top u!tu target dari li! terse"ut. /ihat di "rowser de!ga! me!e a! F1%.

Fig 11. Mem-ua" #ink ke -agian a"as dokumen Page Properties 4age 4roperties adalah fasilitas u!tu me!gu"ah properti dasar se"uah do ume! $e"2 seperti 3udul halama!2 war!a+war!a li! 2 ds". 9!tu mem"u a 4age 4roperties li Modify > Page Proper"ies. /ihat 1am!ar /+. Title u!tu me!e!tu a! 3udul do ume!. Ba kground Image tempat memasu a! gam"ar se"agai latar "ela a!g. Ba kground me!e!tu a! war!a latar. Te&t u!tu me!e!tu a! war!a te s. Links me!gu"ah war!a li! . ;isited Link me!gu"ah war!a li! #a!g telah di u!3u!gi. # tive Link me!gu"ah war!a li! #a!g seda!g di li . Margin me!e!tu a! margi! halama!. &emua eleme! i!i memili i pada!a!!#a di dalam ode ,-./2 #aitu dalam atri"ut eleme! <body>. &elai! me!gu"ah format tampila! melalui 4age 4roperties2 ita 3uga dapat mela u a!!#a de!ga! 5&& <5as0adi!g &t#le &heet= #a!g a a! ita "ahas pada tutorial "agia! lai!. &etelah selesai2 *!da dapat melihat tampila!!#a di "rowser <1am!ar /3=.

Fig 1%. Page Proper"ies

Fig 1&. /ampi#an akhir "en"angsaya.h"m

Penutup Di '!ter!et terdapat "a!#a ole si "a0 grou!d u!tu situs #a!g *!da "uat2 salah satu!#a adalah free<!a kgrounds' om. Pupung *udi Purnama sedang menye#esaikan ku#iahnya di Faku#"as Pe"ernakan ;niversi"as Padjadjaran< -ekerja di sa#ah sa"u perusahaan desain di *andung< dan ak"if di komuni"as !/ ;.P7D dan anggo"a D7/7.)/ ;npad. Dapa" dihu-ungi di pupungbp@fapet-online.com.