Ardan Sirodjuddin, S.

Pd
Guru SMK Negeri 8 Semarang
MEMBUAT DISAIN WEB DENGAN DREAMWEAVER
Memulai Dreamwever 8
Langkah untuk menjalankan Dreamwever 8 adalah :
1. Klik Start All Program Macromedia Macromedia Dreamwever 8
. Akan tam!il jendela Dreamwever 8
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
". Klik #$ML maka akan tam!il jendela Dreamwever 8 %e&agai &erikut
Keterangan :
'n%ert (ar )1*
$erdiri dari tom&ol tom&ol +ang da!at dima%ukkan dari &er&agai o&jek %e!erti image%,
ta&el, -rame, dan la+er ke dalam document
Document $ool (ar )*
$erdiri dari tom&ol tom&ol untuk menentukan o!tion tam!ilan +ang &er&eda dari
document window% %e!erti De%ign .iew )untuk tam!ilan de%ain %aja*, /ode .iew )untuk
tam!ilan kode #$ML* dan S!lit )untuk tam!ilan de%ain dan code*
Document 0indow )"*
Meru!akan tem!at untuk menam!ilkan dokumen +ang %edang di&uat dan diedit %aat ini
Panel 1rou! )2*
Meru!akan %et dari kum!ulan gru! !anel. 3ntuk menam!ilkan !anel gru! klik !anah
!ada &agian kiri nama gru!
4ile% Panel )5*
3ntuk memudahkan mengatur -ile dan -older kita +ang meru!akan &agian dari we&%ite
+ang kita &uat. 4ile% !anel juga memudahkan untuk mengak%e% %emua -ile di lokal di%c
%e!erti han+a window ek%!oler
Pro!ert+ 'n%!ector )6*
Meru!akan tem!at untuk meru&ah &er&agai !ro!ertie% dari o&jek +ang di!ilih atau!un
tek%
$ag Selector )7*
(erada !ada %tatu% &ar !ada &agian &awah documen window% menam!ilkan hirarki
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
)tingkatan* dari tag )kelom!ok* +ang digunakan %aat ini. Klik &e&era!a tag di dalam
urutan untuk memilih tag dan %emua i%in+a.
Setting Web Site Dreamwever
Melanjutkan tutorial +ang !ertama, kali ini kita akan mem&aha% %etting we&%ite. Se&uah we& %ite
meru!akan %ekum!ulan dokumen +ang %aling &erhu&ungan. Dreamweaver da!at digunakan
untuk mengatur %ite +ang kita &uat %ehingga kita da!at mem&uat we& %ite +ang %em!urna. Site
adalah i%tilah di dunia internet +ang menjela%kan tentang kum!ulan halaman halaman we& dan
&e&era!a o&jek lainn+a +ang dimiliki oleh %e&uah in%titu%i dan &eri%i content content +ang
%e%uai dengan !emilik %ite ter%e&ut. /ontoh %ite mi%aln+a www.+ahoo.com atau
www.google.com. Langkah ter&aik !ertama dalam merancang %e&uah we& %ite adalah
merencanakan we& %ite ter%e&ut +aitu mem&uat %truktur dokumen di we& %erver. Mulailah
mem&angun %itu% anda dengan menentukan %itu% lokal untuk -ile -ile dalam lokal %ite. Se&uah
%itu% adalah loka%i !en+im!anan dokumen dokumen dan -ile -ile +ang &erhu&ungan dengan
%itu% we& tertentu. Menentukan %itu% lokal meluki%kan %truktur dari %itu% +ang anda &uat dan
mem&eritahu dreamweaver dimana anda &erencana menem!atkan %emua -ile -ile.
Langkah mem&uat lokal %itu% adalah :
1. (uka dreamweaver dan %e&uah dokumen ko%ong akan muncul
. Klik %ite new
". Akan muncul %ite de-inition ketik nama %itu% untuk memudahkan anda mengidenti-ika%i
dan memilih %e&uah %itu% dari da-tar %itu% %itu% +ang !ernah anda &uat. Pada tutorial ini
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
%a+a ketik %mk8 kemudian klik ne8t
2. Pada %ite de-inition -or %mk8, !ilih o!tion +ang !ertama kemudian klik ne8t
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
5. 3ntuk men+im!an -ile, klik gam&ar -older dan !ilih tem!at !en+im!anan -older. Pada
tutorial ini, %a+a tem!atkan di D : %mk8. Kemudian klik o!en
6. Sehingga akan muncul gam&ar &erikut dan klik %elect
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
7. Sehingga akan muncul gam&ar &erikut dan klik ne8t
8. Karena kita akan mem&uat we&%ite %tati% maka !ilih none dan klik ne8t
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
9. Kita akan menda!atkan rangkuman dari %ite +ang di&uat kemudian klik ne8t
1:. Sekarang kita %udah %ia! mem&uat we&%ite
MEMBUAT DOKUMEN BARU
Setelah mem&uat %etting we&%ite, melanjutkan tutorial %a+a &elajar mem&uat we&%ite kali ini kita
akan &elajar mem&uat dokumen &aru. 3ntuk mem&uat dokumen &aru 'kuti langkah &erikut :
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
1. Start All !rogram Macromedia Macromedia Dreamweaver 8
. Kita akan mema%uki halaman de!an dreamweaver
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
". 3ntuk mem&uat halaman &aru !ilih create ;ew #$ML
2. Kita mema%uki jendela kerja Dreamweaver. Pada jendela kerja ini , ada tiga macam
tam!ilan +aitu de%ign )jika ingin tam!ilan &eru!a de%ign we&n+a*, code )jika ingin
menam!ilkan coding* dan %!lit )jika ingin menam!ilkan de%ign dan coden+a*.
ENGATURAN !A"AMAN UTAMA
Pada %aat kita akan mem&uat !ro+ek &er&a%i% we&, !ekerjaan awal +ang tidak &oleh dia&aikan
adalah !engaluran %tandar halaman utama dan %eiuruh kom!onen lain +ang akan di&uat di dalam
halaman !ro+ek !ada we&. Ada &e&era!a hal +ang da!at dikerjakan untuk melakukan !eneaturan
terhada! !ro+ek +ang digunakan. Kom!onen !ro+ek ter%e&ut antara lain adalah wama latar
&elakang, warna tek%, title, identita% halaman dan !erataan tek%.
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
Membuat Title a#a !alaman
0e& $itle da!at diartikan dengan judul. 4ung%i dari judul adalah untuk mem&erikan tanda
!engenal !ada %etia! halaman wae&. <udul akan %elalu ditam!ilkan !ada &agian %tatu% &ar dan
!ada %aat -ile #$Ml dijalankan. /ara mem&uat title adalah :
1. Secara manual dengan menuli%kan &eru!a tag #$ML dengan cara menuli%kann+a !ada
tag =$'$L>? @ang ada !ada &agian =#>AD?
. Pada &agian dokumen &ar, ketik judul halaman !ada kotak title.
Mengatur r$%ertie& !alaman Web
Se&elum kita memulai mende%ain halaman we&, kita haru% mengatur !ro!ert+ halaman kerja
kita. Pro!erti ini akan &er!engaruh terhada! ha%il we& +ang akan di&uat. Kita da!at mengatur
judul halaman, latar &elakang warna dan gam&ar halaman, warna tek% dan link %erta margin
halaman we&. Semua atri&ut ter%e&ut meru!akan atri&ut da%ar +ang !erlu di!erhatikan dari %etia!
halaman we&. 3ntuk menam!ilkan kotak dialog !ro!ertie%, lakukan dengan cara :
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
1. Klik menu modi-+ Page !ro!ertie% atau tekan tom&ol /trl A <
. Akan tam!il kotak dialog !ro!ertie% %e&agai &erikut :
$am!ilan kotak dialog
Page Pro!ertie% ter&agi ke dalam 5 kategori :
A%%earan'e
(agian untuk mengatur jeni% -ont untuk halaman, menentukan %t+le -ont, ukuran -ont,
wama untuk -ont, warna latar &elakang halaman atau menam!ilkan gam&ar untuk latar
&elakang. Selain itu juga da!at menentukan margin halaman.
"in(
(agian ini digunakan untuk menentukan jeni% -ont untuk tek% link, ukuran -ont,
mengu&ah wama untuk tek% link, mengu&ah warna untuk tek% +ang telah dikunjungi,
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
mengu&ah warna untuk tek% rollover, mengu&ah warna untuk tek% link +ang %edang akti-
%erta untuk menentukan !em&erian gari% &awah !ada tek% link.
!ea#ing
(agian untuk menentukan %endiri %t+le +ang digunakan untuk tek% na%kah Anda. .
Title)En'$#ing
(agian ini digunakan untuk mem&erikan judul halaman !ada $itle.
Tra'ing Image
(agian ini digunakan jika mgin menam!ilkan tam!ilan gam&ar %ementara !ada. latar
&elakang.
BEKER*A DENGAN TEKS
Memili+ *eni& ,$nt
Pada Pro!ert+ in%!ector &ar, anda di&erikan -a%ilita% dalam memilih jeni%Bjeni% tek% atau -ont
untuk !enuli%an !ada !em&uatan halaman we& anda. )g&r 1*
Mem-$rmat Te(&.
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
$ek% +ang %udah di%i%i!kanCdiketik da!at di-ormat agar ha%iln+a jauh le&ih &agu% dengan
menggunakan -a%ilita% Pro!ertie% 'n%!ector %e!erti terlihat di &awah ini :
Sedangkan teknik untuk men+i%i!kan tek% ke dalam %e&uah #$ML da!at dilakukan dengan dua
cara, +aitu :
1. Mengetikkan %ecara lang%ung tek% ke dalam dokumen
. Men+alin )co!+ !a%te* dan -ile #$ML atau we&%ite +ang %udah ada,
Memili+ Warna
Pada Dreamweaver, ada &ermacamBmacam dialog &o8, %e!erti juga !ada Pro!ert+ in%!ector ada
menu untuk kotakBkotak !ilihan warna untuk tek%. Anda tinggal memilih warnaBwama %e%uai
dengan keinginan anda. Memilih wama !ada Dreamweaver : Klik %alah %atu kotak wama !ilihan.
(erikut ini kita akan mem&uat tek% %ecara lang%ung dalam dokumen #$ML
1. (ukalah !rogram a!lika%i Dreamweaver 8 dengan Klik D Start B? Program E?
Macromedia E? Dreamweaver 8
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
. Ketikkan tek% di&awah ini dalam dokumen window% :
PFG1FAM K>A#L'A; M3L$'M>D'A SMK ;>1>F' 8 S>MAFA;1
.'S'
Mewujudkan tenaga menengah +ang !ro-e%ional dalam &idang multimedia %e%uai
tuntutan dunia indu%tri dengan eto% kerja +ang tinggi dan memiliki %ika! mandiri
M'S'
1. Mengem&angkan %ika! dan ketram!ilan !e%erta didik dalam keahlian multimedia
. Mengua%ai ketram!ilan dalam !engo!era%ian kom!uter multimedia
". Mengua%ai ketram!ilan dalam !enggunaan !erangkat lunak multimedia
2. Mam!u mengem&angkan !em&uatan multimedia +ang relevan dengan tuntutan
ke&utuhan ma%+arakat
$3<3A;
5. Men+ia!kan tamatan !ro-e%ional +ang memiliki ketram!ilan dalam &idang
multimedia &agi dunia kerja
6. Men+ia!kan tenaga kerja +ang mam!u mengem&angkan diri dan mam!u
&erkom!eti%i dalam dunia kerja multimedia
7. Mengem&angkan ketram!ilan multimedia %eiring !erkem&angan teknologi +ang
ada
8. Men+ia!kan tenaga kerja +ang memiliki %ika! &erakhlak mulia, %ehat, caka!,
kreati-, mandiri, demokrati%, tanggung jawa&, di%i!lin dan jujur
9. Da!at menjadi tenaga teram!il +ang mam!u &erwiramandiri
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
10.#a%iln+a terlihat !ada contoh :
BEKER*A DENGAN TABE"
Membuat Tabel
$a&el meru!akan %atu &agian !enting di dalam !em&uatan we& de%ign. Dreamweaver mem&agi
la+out ta&el menjadi tiga &agian +aitu Standard, >8!anded, dan La+out. 4a%ilita% La+out
digunakan untuk menam!ilkan ta&el dalam kondi%i +ang le&ih &e%ar dari ukuran awaln+a. 3ntuk
menggunakan %alah %atu la+out ter%e&ut akti-kan %alah %atun+a dengan cara klik !ilihan la+out
%etelah itu &uatlah ta&el anda, Kita akan co&a mem&uat ta&el dengan cara %e&agai &erikut:
1. Aktikan terle&ih dahulu mode la+out,
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
. Lalu klik tom&ol Standard %ehingga ikon ta&el akan diakti-kan.
". Setelah itu klik ikon ta&el atau gunakan menu 'n%ert $a&le %ehingga akan ditam!ilkan
kotak dialog ta&el.
Keterangan kotak dialog $a&el:
(agian $a&el SiHe:
Fow%,
&agian +ang digunakan untuk menentukan jumlah &ari% ta&el.
/olumn%,
&agian +ang digunakan untuk menentukan jumlah kolom ta&el.
0idth,
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
&agian +ang digunakan untuk menentukan ukuran le&ar ta&el dan %atuan ukuran +ang akan
di!akai, !i8el atau !ercenta%e.
(order,
&agian +ang digunakan untuk mengatur kete&alan &order atau &ata% ta&el.
/ell Padding,
&agian +ang digunakan untuk mengatur jarak antara i%i %el dengan &ata% te!i %et.
/ell S!acing,
&agian +ang digunakan untuk menentukan jarak antar %el dalam ta&el.
(agian #eader
;one, tan!a menggunakan keterangan tek%.
Le-t, menam!ilkan keterangan tek% !ada kolom !ertama atau !ada &agian %e&elah kiri
$o!, menam!ilkan keterangan tek% !ada &ari% !ertama atau !ada &agian %e&elah ata%.
(oth, menam!ilkan keterangan tek% !ada kolom dan &ari% !ertama.
(agian Acce%%&ilit+
/a!tion, &agian +ang digunakan untuk mem&erikan keterangan judul ta&el.
Align /a!tion, &agian +ang digunakan untuk mengatur !erataan tek%.
Summar+ untuk mem&uat keterangan.
Melanjutkan tuli%an %e&elumn+a mengenai !em&uatan ta&el, kali ini kita akan co&a !raktek.
Se&agai contoh kita &uat ukuran ta&el adalah " 8 ". 'kuti langkah &erikut :
1. Klik icon ta&el dan i%i row% ", column% ", ta&le width :: !ik%el, &order thickne%% 1 dan
header !ilih none
. Saat ini ta&el dikatakan dalam keadaan ter!ilih )%elected*, +ang ditandai dengan adan+a
gari% hitam te&al di %ekeliling ta&el, dan " &uah kotak hitam kecil +ang di%ediakan untuk
re%iHing. Se!erti +ang Anda lihat !ada window G&ject Pro!ertie%, terda!at &e&era!a
!ro!erti ta&el +ang di%e&utkan, antara lain Fow% )jumlah &ari%*. /ol% )jumlah kolom*, 0
)le&ar, width*, # )tinggi, height*, /ellPad )cell !adding*, /ellS!ace )cell %!acing*, Align,
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
(order, (g /olor )&ackground coior*, (rdr /olor )&order color*, (g image )(g image*.
Anda da!at &erek%!erimen dengan mengu&ahBu&ah !ro!ertiB!ro!erti ter%e&ut. /aran+a,
i%ikan nilai )value* &aru, kemudian tekan >nter.
". Setia! !eru&ahan !ada window G&ject Pro!ertie% ini akan dilakukan )a!!lied* terhada!
ke%eluruhan ta&el, karena ta&el dalam keadaan ter!ilih )%elected*. Langkah &erikutn+a
adalah melakukan !en+e%uaian &entuk ta&el menjadi +ang diinginkan.
Ardan Sirodjuddin, S.Pd
Guru SMK Negeri 8 Semarang
2. Setelah anda &i%a %ilahkan mem&uat ta&el lagi dengan &ari% dan kolom +ang &er&eda, dan
&eri nilai !ada cell!adding dan cell%!acing. Selamat menco&a.