2010

Wisdean Eska Maena, S.Ds
MULTIMEDIA

[ Membangun Website Sederhana Dengan 
Dreamweaver dan Photoshop(Xampp, 

localhost, Dreamweaver) ]
 Dalam tutorial buku ini, untuk menginstall Apache Server, MySQL dan PHP kita 
menggunakan  aplikasi yang dikenal dengan XAMPP versi win32­1.5.3
 Membangun Website Sederhana Dengan 
Dreamweaver dan Photoshop
(Xampp, localhost, Dreamweaver)
PART II
By Wisdean Eska Maena

Dalam   tutorial   buku   ini,   untuk   menginstall   Apache   Server,   MySQL   dan   PHP   kita 
menggunakan  aplikasi yang dikenal dengan XAMPP versi win32­1.5.3.
Silahkan   anda   ikuti   panduan   berikut   ini   .  (Pastikan   bahwa   Anda   dalam   keadaan  
rileks dan fokus, jangan lupa siapkan secangkir kopi panas di hadapan Anda)

Tahap instalasi Xampp versi win32­1.5.3 
1. Salin  atau  copy file master  Xampp­win32­1.5.3  dihardisk Anda  (disarankan 
pada drive D:/ atau drive C:/)
Tampak pada gambar 1 di bawah ini software Xampp Server berada pada 
drive E:/ dan pada direktory / folder “Membangun Website Sederhana dengan  
Dw dan PS”
2. Kemudian klik ganda (dua kali dan cepat) atau klik kanan dan lalu pilih open,  
seperti tampak pada gambar 2 di bawah ini.

Icon Software Xampp

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
 Gambar 1. Windows Explorer 

Gambar 2. Windows Explorer 

3. Selanjutnya akan terbuka jendela instalasi dan sebaiknya Anda disarankan 
untuk memilih bahasa Indonesia (seperti tampak pada Gambar 3)

Gambar 3. Jendela 1 Instalasi Xampp 

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
4. Klik tombol                           yang terdapat pada bagian bawah dari jendela 
instalasi 

Gambar 4. Jendela 2 Instalasi Xampp
5. Pilihlah lokasi instalasi pada drive C: /program files (sekedar saran). 
Perlu   anda   ketahui   bahwa   lokasi   penginstalan   xamp   server   bisa   juga 
dilakukan pada drive lain, contohnya pada drive D:
Setelah Anda memastikan lokasi penginstalan Xampp maka klik tombol 
Yang terdapat pada bagian bawah kanan dari gambar 5 di bawah ini.

Gambar 5. Jendela 3 Instalasi Xampp
6. Selanjutnya   anda   diminta   untuk  menunggu  beberapa  menit  selama   proses 
instalasi   Xampp   Server   berjalan   di   komputer   Anda   selesai.   Seperti   yang 
tampak pada gambar 6 berikut. (o ya, ingat kopi panas anda sudah siap tu 
untuk dinikmati, ntar keburu dingin.....)

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
 Gambar 6. Jendela 4 Instalasi Xampp

7. Sebelum proses instalasi selesai 100 persen akan ada beberapa pertanyaan 
yang akan diberikan kepada Anda. Dan sebaiknya, untuk semua pertanyaan 
yang akan tampil Anda disarankan untuk memilih tombol  Yes. Seperti yang 
terdapat pada gambar 7, gambar 8 dan gambar 9 berikut ini.

Gambar 7. Jendela 5 Instalasi Xampp

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
 Gambar 8. Jendela 6 Instalasi Xampp

Gambar 9. Jendela 7 Instalasi Xampp
8. Pertanyaan selanjutnya Anda cukup mengklik tombol  dengan   mouse 
atau tombol Enter pada keyboard Anda. Perintah ini berlaku untuk gambar 10, 
gambar 12 dan gambar 13. Untuk gambar 11 Anda pilih tombol 

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
 Gambar 10. Jendela 8 Instalasi Xampp

Gambar 11. Jendela 9 Instalasi Xampp

Gambar 12. Jendela 10 Instalasi Xampp

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
 Gambar 13. Jendela 11 Instalasi Xampp

9. Configurasi Xamp Server telah sukses Anda lakukan dan jendela instalasi 
meminta Anda untuk memilih apakah Anda memulai Xampp Control Panel 
sekarang juga. Jika maksud Anda ya, maka Anda pilih  .
  

Gambar 14. Jendela 12 Instalasi Xampp
10. Kini tampak pada monitor Anda jendela Control Panel Xamp, dan yang perlu 
Anda perhatikan di sini adalah untuk me­running­kan Apache dan MySql saja. 
PENTING,  Pastikan   bahwa   komputer   Anda   belum   pernah   diinstall   aplikasi 
server lain.  Sebab, bila  komputer Anda   terinstall  dua   aplikasi  server maka  
Xampp   Server   yang   baru   saja   install   tidak   akan   bisa   berjalan   disebabkan 
terjadianya tabrakan antara dua aplikasi server.

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
 Gambar 15. Jendela Control Panel Xampp
Untuk menjalankan aplikasi Xampp Server, Anda klik 
paling atas atau yang sejajar  dengan baris Apache.
Otomatis Anda akan di bawah ke layar Microsoft Internet Explorer dan pada 
alamat / address secara otomotis tertulis  http://localhost/xampp/.    Seperti 
yang tampak pada gambar   berikut ini.

Gambar 16. Jendela http://localhost/xampp/

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
 11. Berikut ini kita akan mulai merancang web perdana Anda dan ikutilah langkah 
– langkah berikut ini :
a. Pilih   menu   PhpMyadmin   yang   terdapat   pada   sebelah   kiri   jendela 
http://localhost/xampp/   atau   menu   yang   berada   dalam   kategori   Tool 
sebelah kiri yang berwarna oren. 
b. Di sebelah kanan akan tampak beberapa pilihan seperti yang tampak 
pada tampilan gambar 17.
c. Pada   bab   ini   kita   hanya   akan   membahas   beberapa   menu   yang 
terdapat pada menu phpMyAdmin, diantaranya :
• Pilihan bahasa, Anda dianjurkan untuk memilih Bahasa Indonesia.
Untuk   sebagian   jenis   bahasa   yang   telah   tersedia   pada   aplikasi 
Xampp Server dapat anda lihat pada gambar di bawah ini.

 
Gambar 17. Jendela Pilihan Basaha Xampp Server 

• Hak   akses,   berisi   tentang   pembuatan   administrator   dan 

pembuatan   password   untuk   login   ke   web   rancangan   Anda 
nanti.   Pada   menu   ini   juga   berisi   tentang   penghapusan 
adminsitrator.

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
 Adapun   cara   pembuatan   hak   akses   yang   baru,   langkah   – 
langkahnya adalah sebagai berikut :
1. Klik menu 
2. Selanjutnya   anda   akan   dibawa   ke   menu   yang   berisi 
tentang informasi login, 
3. Pada pilihan Nama Pengguna Anda ketikkan “admin”
4. Pada   pilihan  Host  anda   pilih   lokal   dan   otomatis   pada 
teksbox Anda  akan tertulis “localhost”
5. Pada pilihan Kata Sandi Anda isi kata sandi (disarankan 
nama   anda   saja)   dan   ulangi   kata   yang   sama   pada 
teksbox Ketik Ulang
6. Pada   menu   Hak   Istimewa   (Privileges)   Global   klik   “Pilih 
Semua”
7. Lalu   klik   tombol  yang   terdapat   pada   bagian   kiri 
bawah dari menu.
Tahap Sinkronisasi Website dengan Localhost

Sebelum masuk pada tahap tamplate anda harus mengcopy file tamplate satu folder 
ke dalam folder htdocs (C:\xampp\htdocs)
Langkah Pertama cari folder situs­bisnis dari template modul, lalu copy ke dalam 
folder C:\xampp\htdocs. 
Ganti nama folder menjadi “latihan02” dan html nya menjadi index.html Sekarang 
template sudah bisa di publikasikan menggunakan server localhost.
Selanjutnya buka browser ketik http://localhost/latihan02

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
Tahap Pembuatan Website Dengan menggunakan Tamplate

Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan 
Adobe Photoshop dalam merancang web, padahal dengan software tersebut kita 
akan lebih mudah dan lebih praktis dibandingkan harus membuat kode html.

Ketika dokumen Adobe Photoshop tersimpan dalam bentuk web maka secara 
otomatis akan membuat tag html sendiri sehingga tidak perlu bersusah payah 
mengetik kode html. Anda dapat membuktikan sendiri seperti nampak pada gambar 
berikut.

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
1. Mengubah Objek menjadi Background

Tidak semua gambar (image) yang pada web yang telah kita buat diganti. Jika 
image tersebut berfungsi sebagai tombol, maka Anda dapat menambahkan menu 
pull down agar tampilan website lebih menarik. Anda juga dapat membuat tombol 
dalam bentuk mouse over, dan lain sebagainya.

Pada bagian ini, kita akan mencoba membahas tentang teknik penggantian objek 
gambar menjadi latar belakang (backgrdound) agar kita dapat memasukkan 
beberapa komponen di dalamnya (teks maupun grafik).

Pertama kali, bukalah file index.html menggunakan Macromedia Dreamweaver.

Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan di jadikan 
latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai 
contoh, klik image di bagian bawah teks New Product.

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
Pada bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak 
dapat memasukan teks di atas gambar tersebut karena objek tersebut adalah image, 
bukan merupakan background. Tekan Del untuk menghapusnya.

Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar 
belakang (background). Oleh karena nama file yang baru saja dihapus adalah 
index_26.gif maka gunakan file tersebut sebagai latar belakang.

Ketikkan images/index_26.gif pada kolom Bg.

Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar 
belakang agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.

2. Memasukkan Objek 

Objek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam 
Macromedia Dreamweaver proses memasukkan objek sangat mudah karena sudah 

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
disediakan tool yang sangat lengkap. Anda tinggal memilih objek apa yang akan 
dimasukkan. Berikut ini akan membahas masalah teknik memasukkan objek berupa 
teks.

Letakkan kursor pada tempat yang akan ditambahkan teks.

Pada penel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar 
berikut.

Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut 
seperti nampak pada gambar berikut.

Anda bisa memasukkan image di antara teks tersebut. Untuk melakukan hal itu, 
pertama kali letakkan kursor di awal paragraf kemudian pilih menu Insert > Image.

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
Pilih file gambar yang akan dimasukkan dalam dokumen tersebut.

Apabila berhasil memasukkan gambar, maka akan terlihat objek tersebut berada di 
depan paragraf. Namun posisinya masih kurang sempurna karena susunan teks 
terdorong oleh gambar tersebut.

Agar tampilan lebih rapi, Anda dapat mengatur posisi gambar sehingga seluruh teks 
akan berada di sebelah kanan gambar. Untuk melakukan hal tersebut, pada panel 
Properties pilih Left untuk Align.

MEMBUAT LINK DAN NAVIGASI

Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika 
mencari informasi yang dibutuhkan. Sebaiknya menggunakan tombol menu yang 
umum, seperti: Home, Product, Service, dan Contact Us

Dalam Macromedia Dreamweaver, kita membuat Pop­up Menu, dan Jumping Menu 
secara mudah. Anda tidak bersusah payah menuliskan script yang panjang dalam 
bahasa Javascript karena telah disediakan tool yang sangat mudah dan fleksibel.

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
1. Membuat Pop­up Menu

Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain 
yang sejenis adalah adanya tool untuk membuat menu pop­up yang dibuat dengan 
bahasa Java. Bagi mereka yang masih awan dengan bahasa Java, tidak perlu 
bingung karena disediakan panel Behavior untuk mempermudah dalam pembuatan 
menu pop­up.

Sebelum membuat pop­up menu terlebih dulu harus menyiapkan nama file sebagai 
link. Sebagai contoh: ketika user memilih menu PC maka yang akan muncul adalah 
pilihan nama computer seperti Acer, HP, BenQ, dan lain sebagainya. Dan ketika 
user memilih salah satu opsi (missal: Acer) maka akan terhubung ke file tersebut.

Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang 
sama seperti halaman utama, yaitu menyimpan dengan nama lain (contoh: Save As 
> acer.html). Diasumsikan, Anda telah memiliki beberapa file sebagai link yang 
dimaksud.

Pertama kali, klik menu PC.

Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih 
menu Window > Behaviors.

Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk 
membuka menu.

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
Selanjutnya pilih Show Pop up Menu.

Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop­up 
Menu yang masih kosong.

Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).

Kemudian masukkan alamat URL pada kolom Link.

Selanjutnya pada kolom Target, pilih _parent.

Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian 
lakukan hal sama seperti pada tahap 6.

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar belakang 
pop up menu. Tentukan jenis dan ukuran font yang digunakan. Lalu tentukan pula 
warna teks dan warna cell ketika mouse berada di atas teks.

Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up 
menu.

Klik Tab Position untuk menentukan posisi pop up menu.

Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.

Untuk mengasah keterampilan Anda, buatlah pop­up menu pada tombol lain.

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
 2. Membuat Rollover Image

Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop up Menu 
juga menyediakan tool untuk membuat Rollover Image sebagai tombol. Yang harus 
Anda lakukan pertama kali adalah menyediakan dua buah gambar yang ukurannya 
sama tapi warnanya berbeda.

Buatlah duplikasi gambar tombol yang telah ada.

Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih 
menu Image > Adjustment > Hue/Saturation.

Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian 
geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, 
simpan dokumen tersebut dengan cara menekan Ctrl+S.

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.

Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu 
Insert > Image Objects > Rollover Image.

Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada 
kolom Image name kemudian tentukan gambar asli pada kolom Original Image. 
Untuk mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk 
gambar rollover pada kolom Rollover Image.

Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika 
tombol tersebut di klik.

Untuk melihat hasilnya, tekan tombol F12.

Untuk Desain Layout anda Bisa Mengedit nya di Adobe Photoshop, dengan catatan 
nama image nya tidak boleh di ubah.

Selamat Berwebsite Ria….: ) 

NB: untuk link about dan selanjutnya tinggal di buat lagi layout baru dengan cara 
copy paste dan save nama “about.html”

Tanya jawab : dean_animasi@yahoo.com
http://deanactivity.wordpress.com

Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds
“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”