Modul

Dreamweaver
#opotoiki

presented by : Danastri Rizqi Nabilah

for : R R Gratsia Kancanamaya

Dibuat dalam rangka permohonan maaf @anamoelya pada @ayaayako karena tidak
bisa menemani proses belajar Dreamweaver pada hari Minggu, tanggal 14 Februari 2010.

Untuk mempermudah, modul ini dibuat dengan berpedomankan contoh web yang
telah diberikan sebelumnya.

Dikarenakan @anamoelya bukanlah seorang guru, mohon maaf bila terdapat

kekurangan dalam penyajian dan penyampaiannya.

Terimakasih. Semoga bisa bermanfaat dan semoga sukses.

 Contents
Sudah dirancang khusus agar tidak merepotkan, jadi sudah ada link dan tinggal klik ;)

Pengenalan Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Web © anamoelya *narsis mode ON :P

a) Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
b) nonanamoelya . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
c) Home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
d) Prologue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
e) Shout Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
f) Hall of Art . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
g) Entertainment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
h) You & Me . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2
updated : Monday, 15th February 2010
 Pengenalan Dreamweaver
1) Yang pertama dilakuin—udah jelas—buka software Dreamweaver.
2) Begitu tampilan awal ini keluar, pilih HTML yang ada di opsi Create New.

3) Next, terlihat ‘ruang kerja’ Dreamweaver yang masih ‘perawan’.

2 3

3
updated : Monday, 15th February 2010
 Nama + fungsi dari bagian-bagian ‘ruang kerja’ Dreamweaver:

1. Document Window : ‘kanvas’ user, jadi di sini lah semua yg dibuat akan terlihat.

2. Insert Bar : namanya aja udah ‘insert’, jelas untuk nyisipin macem-macem objek.

* mnurutq,tampilan begitu g pewe; Tampilan Insert Bar bisa diganti pake cara klik Common > Show as Tabs

 Common : objek standard, ex: flash, gambar, tabel, dll.

 Layout : objek yg berhubungan langsung sama layout, ex: tabel, frame, dll.
 Forms : *tau form,kan?semacem formulir digital,jadi isinya objek yang pembuat form&elemen form
 Text : text means teks means tulisan means . . . *orang jg udah ngerti,jdi g usah dkasih tw lgi
 HTML : *jatahnya org expert nih,soalnya isinya ex: tag HTML, tabel, script, dll.
 Application : *jatahnya org expert nih,soalnya isinya objek dinamis
 Flash elements : *tau Flash,kan?jadi isinya ya jelas objek Flash
 Favorites : ur favorites :3

3. Document Toolbar : fungsinya untuk ganti format tampilan Document Window.

a b c d e f g h i j k
a. Document window dengan tampilan kode.
b. Document window dengan tampilan kode dan desain.
c. Document window dengan tampilan desain.
d. Penamaan judul document web.
e. Pengecekan kesalahan pada document web.
f. Pengecekan kesalahan pada document web.
g. Proses upload dan download file.
h. Melihat hasil pada browser (shortcut : F12).
i. Refresh.
j. Mengatur pilihan tampilan ‘ruang kerja’.
k. *agak lebih expert dari materiku waktu kelas 2 dulu, jadi mungkin ini untuk Mengatur tampilan ‘kanvas’.

4. Panel Group : kumpulan panel-panel yang saling berhubungan dalam satu web yang
sedang dibuat.

5. Tag Selector : untuk menampilkan hirarki tag *asli,jangan tanya aq maksudny apa,aq jg g ngerti soalny
cuma liat modulny pak hersus yang sedang aktif di design view.

6. Property Inspector : udah jelas dari namanya, ini fungsinya buat utak-utik properties objek
atau teks *and believe me,it’s totally entertaining!

4
updated : Monday, 15th February 2010
 7. Site Panel : untuk ngatur file + folder yang membentuk situs web yang dibuat.

4) Sebelum bikin web, mesti bikin situsnya dulu. Caranya :

a. klik Site > Manage Sites

b. Setelah muncul kotak dialog, klik New > Site

c. Next, ikuti aja instruksi gambar :

5
updated : Monday, 15th February 2010
PENTING!! Harus dipastikan bahwa waktu mengedit web, Site yang kita pakai adalah Site milik kita
sendiri, bukan milik orang lain!

6
updated : Monday, 15th February 2010
 Web ©anamoelya
“Pembuatan web yang direka-ulang”

a) Index
Bentuk jadinya kan begini, nih :

Cara buatnya? Sumpah gampang! Serius lho,ehe. More or less 5menit jadi ;D

7
updated : Monday, 15th February 2010
1st Klik Page Properties. Pada dialog box ‘Page Properties’, klik opsi pada Background Color. Lalu OK.

2nd Ubah judul page. Ubah orientasi teks menjadi di tengah.

8
updated : Monday, 15th February 2010
3rd Masukkan gambar dan atur ukurannya agar fit.

4th Ubah secuil bagian dari gambar menjadi ‘tombol’.

9
updated : Monday, 15th February 2010
 Jika tujuan dari ‘tombol’ tersebut belum dibuat, jangan lakukan langkah berikut :

Supaya ‘tombol’ yang dibuat itu mengarah ke suatu file / web page / situs lain, Hotspot itu harus
punya link. Cara membuat linknya adalah dengan menge-drag ikon target ke arah file / web page
yang diinginkan yang sudah ditampilkan pada panel. *anak panah hitam yg digambar itu bukan bagian dri keterangan
kalimat,tpi efek dri menge-drag ikon yg tadi

10
updated : Monday, 15th February 2010
 Kalau sudah punya link, Hotspot itu harus punya target. Target itu maksudnya, tempat dimana web
page / file / situs lain yang dilink tersebut ditampilkan. Jenis-jenis target, nih:

 _parent : muncul full di window tempat link itu berada

 _blank : muncul di window baru
 _self : muncul di frame / window tempat link itu berada *soal frame,nanti ada penjelasannya lagi
 _top : muncul full di window tempat link itu berada dan menutup semua frame

5th Save it! Klik File > Save All. Versiq, web page ini aq save pake nama index.

PENTING!!! Klo nge-save file yang baru dibuat, selalu klik Save All. Kenapa? Karena ini
memperkecil kemungkinan human error dalam manajemen web.

G KALAH PENTING!!! Selalu save web page paling depan / paling awal dari suatu web dg nama
index. Kenapa? Karena udah jadi aturan tak tertulis pembuatan web & ini juga diharuskan oleh Pak
Heri.

b) nonanamoelya

Penasaran kenapa sub-bab ini judulnya nonanamoelya & bukan pake nama web page seperti sub-
bab yang lain? Karena yg bakalan qta buat di sub-bab ini adalah kerangka dari semua web page.
Biar simple, perhatiin tabel ini, deh:

11
updated : Monday, 15th February 2010
 Head

Left {content} Right

Secara garis besar, seperti itu lah kerangka standard sebuah web ( FrameSet). Terdiri dari:

 topFrame (yang biasa diberi nama Head)

 leftFrame (yang biasa diberi nama Left)
 rightFrame (yang biasa diberi nama Right)
 mainFrame (yang biasa diberi nama tergantung dari isinya)

Sederhananya, klo waktu bikin index tadi, qta kan bikin satu web page yang tampilannya full se-
window, nah mulai dari sini kita bikin web page tapi tampilannya g full se-window, tapi cuma
ditampilin di mainFrame ( {content} ).

Kelihatannya ribet ya? Memang awalnya g segampang bikin index, tapi ‘frame2an’ ini nantinya
justru bikin qta lebih gampang bikin web.

Di sub-bab ini, qta lebih fokus untuk bikin ‘kerangka’nya. Yuk, dimulai :)

1st ‘kanvas’ yang ‘hitam perawan’ ini qta ‘cacah’ jadi 4 frame (sesuai kerangka standard).

Pertama, kita buat dulu topFrame-nya :

12
updated : Monday, 15th February 2010
 Kedua, kita buat leftFrame-nya :

13
updated : Monday, 15th February 2010
 Ketiga, kita buat rightFrame-nya :

14
updated : Monday, 15th February 2010
 Keempat, frame yg warnanya putih diubah jadi item pake Page Properties.

Kelima, biar aman, di-save dulu. Cara nge-save-nya juga ada lho :

Klik File > Save All, lalu keluar option seperti ini :

15
updated : Monday, 15th February 2010
 Di situ tertulis ‘UntitledFrameset-3’, kan. Itu maksudnya, yang akan qta save ini adalah keseluruhan
dari 4 frame itu *rangkaian frame itu disebut frameset, jadi qta namain sesuai nama web qta karena frameset
inilah kerangka dasar web qta. Versiq, aq kasih nama nonanamoelya.

Begitu qta klik Save, nanti bakal muncul lagi option sejenis :

16
updated : Monday, 15th February 2010
 Beda sama yg tadi (tertulis ‘UntitledFrameset-3’), yg ini tertulis ‘UntitledFrame-9’. Ini maksudnya,
yang akan qta save kali ini cuma salah satu frame dari 4 frame yg tadi udah qta buat. Tapi frame
yg mana,nih? Perhatiin garis arsir yang ngelilingin frame, deh. Frame yg kelilingnya diarsir itu
berarti frame itulah yang akan di-save. Versiq, aq kasih nama right.

Setelah ngeklik Save, akan muncul option :

17
updated : Monday, 15th February 2010
 Kali ini yang muncul tulisannya ‘Untitled-1’ & yg diarsir adalah frame yg di tengah. Ini maksudnya,
yg di-save adalah isi / frame utama dri frameset itu. Karena ini masih awal dari pembuatan web,
jadi frame ini qta kasih nama home.

Setelah ngeklik Save, yang muncul adalah option yg mirip sama option untuk nge-save rightFrame:

18
updated : Monday, 15th February 2010
 19
updated : Monday, 15th February 2010
 Frameset-nya udah jadi! :D

20
updated : Monday, 15th February 2010
 2nd Qta bikin Headnya. *klo udah capek, istirahat dulu, lho 

1st Buat judul yg segede gaban itu dulu. Steps-nya persis sama 1 st - 3rd step buat bikin Index karena
intinya kan cuma kasih judul+masukin gambar. Walau sebenernya g dikasih judul pun g masalah,
kan cuma frame.

2nd Nah, di gambar atas itu kan ada 6 buttons, biar rapi pake tabel. Segampang bikin tabel di Ms. Excel
sama Ms. Words kok. G usah diajarin gpp, dong. Ehe :)

Klo dicoba di browser, merhatiin g klo button-nya bisa berubah tampilan begitu kursor mouse lewat?
Cara bikinnya gampang,kok. Kira-kira 1button 1menit lah ;)

Pertama klik ‘insert image’ > Rollover Image

21
updated : Monday, 15th February 2010
 Trus keluar dialog box. Udah user friendly tuh. Tinggal kasih nama, cari gambar pertama, cari
gambar kedua, sama tentuin link-nya. Then OK.

Button-nya udah 80% jadi tuh, sekarang tinggal gimana—caranya—supaya—klo—qta—klik—

button-nya,—nongol—web page—yang—qta—pengen—tapi—nongolnya—bukan—di window—tapi
—di frame. Caranya, tinggal kita atur target-nya. Pilih mainFrame karena qta mau apa yg diklik ntar
nongol di frame utama.

Udah? Ye ude gitu doank, kelar dah 1button.

3rd Tinggal diulang caranya ke semua gambar and voila! It’s done! ‘Kepala’nya udah jadi, deh :D

22
updated : Monday, 15th February 2010
c) Home
The magic of frameset *lebay bgt ini mah o.O, jadi qta g perlu susah2 bikin home. Karena tampilan home
versiq ini sederhana banget, jadi bikinnya cuma bentar.

Bikinnya cuma tinggal ngetik, trus sebagian tulisan dijadiin link. Sebagian tulisan itu tinggal diblok,
lalu atur link + targetnya ke mainFrame. Udah, deh :D

23
updated : Monday, 15th February 2010
d) Prologue

Tampilan Prologue pada satu full window.

Tampilan Prologue pada mainFrame dalam frameset anamoelya.

Masih dengan ‘keajaiban’ frameset, betapa tak lama dan tak susahnya membuat prologue. Yap,
persis sesederhana gambar yang atas (tampilan Prologue pada satu full window).

24
updated : Monday, 15th February 2010
 1st ‘kanvas’ yang masih ‘hitam perawan’ dibagi jadi 2 frame sama besar. Versiq, frameset-nya
diberi nama Prologue.

Versiq, frame ini diberi Versiq, frame ini diberi

nama ‘Prologue_head’ nama ‘Prologue_contain’

2nd Prologue_head diedit jadi ber-background hitam, trus dikasih gambar judul.

3rd Prologue_contain cuma diisi tulisan.

25
updated : Monday, 15th February 2010
e) Shout Out

Tampilan Shout Out pada satu full window.

Tampilan Shout Out pada mainFrame dalam frameset anamoelya.

26
updated : Monday, 15th February 2010
 1st Persis sama 1st step pembuatan Prologue, tapi nama frameset versiq Shoutout.

Versiq, frame ini diberi Versiq, frame ini diberi

nama ‘Shoutout_head’ nama ‘Shoutout_contain’

2nd Untuk sementara, frameset Shoutout ditinggal dulu. Buat ‘kanvas hitam perawan’ baru dan isi
dengan teks. Versiq, diberi nama dengan format Shoutout_[judul].

27
updated : Monday, 15th February 2010
 Web page ini nantinya akan jadi tampilan pada Shoutout_contain:

3rd Hampir seperti 2nd step pembuatan Prologue, jadi frame sebelah kiri dikasih gambar judul +
Jump Menu. Tinggal ikuti instruksi gambar aja.

28
updated : Monday, 15th February 2010
 29
updated : Monday, 15th February 2010
 Dan seterusnya nyampe semua file udah ke-link di Jump Menu *kebanyakan,jdi males :P

4th Done :D

30
updated : Monday, 15th February 2010
f) Hall of Art

31
updated : Monday, 15th February 2010