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”

 Windows Explorer  Gambar 2.Gambar 1. S. Jendela 1 Instalasi Xampp  Mata Kuliah Multimedia by Wisdean Eska Maena. Windows Explorer  3. Selanjutnya akan terbuka jendela instalasi dan sebaiknya Anda disarankan  untuk memilih bahasa Indonesia (seperti tampak pada Gambar 3) Gambar 3.Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” .

. ntar keburu dingin. Pilihlah lokasi instalasi pada drive C: /program files (sekedar saran). (o ya. ingat kopi panas anda sudah siap tu  untuk dinikmati. Gambar 5. 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.  Perlu   anda   ketahui   bahwa   lokasi   penginstalan   xamp   server   bisa   juga  dilakukan pada drive lain.. Klik tombol                           yang terdapat pada bagian bawah dari jendela  instalasi  Gambar 4.) Mata Kuliah Multimedia by Wisdean Eska Maena. Jendela 3 Instalasi Xampp 6.   Seperti   yang  tampak pada gambar 6 berikut.. S..Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” . Selanjutnya   anda   diminta   untuk  menunggu  beberapa  menit  selama   proses  instalasi   Xampp   Server   berjalan   di   komputer   Anda   selesai.4. Jendela 2 Instalasi Xampp 5.

 untuk semua pertanyaan  yang akan tampil Anda disarankan untuk memilih tombol  Yes. Seperti yang  terdapat pada gambar 7. Jendela 5 Instalasi Xampp Mata Kuliah Multimedia by Wisdean Eska Maena.Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” . gambar 8 dan gambar 9 berikut ini. Sebelum proses instalasi selesai 100 persen akan ada beberapa pertanyaan  yang akan diberikan kepada Anda. Jendela 4 Instalasi Xampp 7. Dan sebaiknya.Gambar 6. Gambar 7. S.

 Jendela 6 Instalasi Xampp Gambar 9. Pertanyaan selanjutnya Anda cukup mengklik tombol  dengan   mouse  atau tombol Enter pada keyboard Anda.Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” . Jendela 7 Instalasi Xampp 8.Gambar 8.  gambar 12 dan gambar 13. Perintah ini berlaku untuk gambar 10. S. Untuk gambar 11 Anda pilih tombol  Mata Kuliah Multimedia by Wisdean Eska Maena.

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

Gambar 14. 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.  Pastikan   bahwa   komputer   Anda   belum   pernah   diinstall   aplikasi  server lain.Gambar 13. Jendela 12 Instalasi Xampp 10. Jendela 11 Instalasi Xampp 9. S. dan yang perlu  Anda perhatikan di sini adalah untuk me­running­kan Apache dan MySql saja.  Sebab. Kini tampak pada monitor Anda jendela Control Panel Xamp.  PENTING. Jika maksud Anda ya. Configurasi Xamp Server telah sukses Anda lakukan dan jendela instalasi  meminta Anda untuk memilih apakah Anda memulai Xampp Control Panel  sekarang juga. Mata Kuliah Multimedia by Wisdean Eska Maena.Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” . maka Anda pilih     .

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

Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” . Mata Kuliah Multimedia by Wisdean Eska Maena. Di sebelah kanan akan tampak beberapa pilihan seperti yang tampak  pada tampilan gambar 17. c. Berikut ini kita akan mulai merancang web perdana Anda dan ikutilah langkah  – langkah berikut ini : a. Pada   bab   ini   kita   hanya   akan   membahas   beberapa   menu   yang  terdapat pada menu phpMyAdmin. Jendela Pilihan Basaha Xampp Server  • Hak   akses. diantaranya : • Pilihan bahasa.   Gambar 17. S.  b. 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.11.   Pada   menu   ini   juga   berisi   tentang   penghapusan  adminsitrator.   berisi   tentang   pembuatan   administrator   dan  pembuatan   password   untuk   login   ke   web   rancangan   Anda  nanti. Pilih   menu   PhpMyadmin   yang   terdapat   pada   sebelah   kiri   jendela  http://localhost/xampp/   atau   menu   yang   berada   dalam   kategori   Tool  sebelah kiri yang berwarna oren.

Pada pilihan Nama Pengguna Anda ketikkan “admin” 4. Pada   menu   Hak   Istimewa   (Privileges)   Global   klik   “Pilih  Semua” 7. lalu copy ke dalam  folder C:\xampp\htdocs. Selanjutnya buka browser ketik http://localhost/latihan02 yang   terdapat   pada   bagian   kiri  Mata Kuliah Multimedia by Wisdean Eska Maena. S.  Ganti nama folder menjadi “latihan02” dan html nya menjadi index. Lalu   klik   tombol  bawah dari menu. Pada pilihan Kata Sandi Anda isi kata sandi (disarankan  nama   anda   saja)   dan   ulangi   kata   yang   sama   pada  teksbox Ketik Ulang 6. Pada   pilihan  Host  anda   pilih   lokal   dan   otomatis   pada  teksbox Anda  akan tertulis “localhost” 5.html Sekarang  template sudah bisa di publikasikan menggunakan server localhost.  3. Klik menu  2.Adapun   cara   pembuatan   hak   akses   yang   baru.   langkah   –  langkahnya adalah sebagai berikut : 1. 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.Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” . Selanjutnya   anda   akan   dibawa   ke   menu   yang   berisi  tentang informasi login.

 padahal dengan software tersebut kita  akan lebih mudah dan lebih praktis dibandingkan harus membuat kode html. Mata Kuliah Multimedia by Wisdean Eska Maena.Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” . S. Ketika dokumen Adobe Photoshop tersimpan dalam bentuk web maka secara  otomatis akan membuat tag html sendiri sehingga tidak perlu bersusah payah  mengetik kode html.Tahap Pembuatan Website Dengan menggunakan Tamplate Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan  Adobe Photoshop dalam merancang web. Anda dapat membuktikan sendiri seperti nampak pada gambar  berikut.

 klik image di bagian bawah teks New Product. 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. Setelah file terbuka. Mengubah Objek menjadi Background Tidak semua gambar (image) yang pada web yang telah kita buat diganti. maka Anda dapat menambahkan menu  pull down agar tampilan website lebih menarik. S. Sebagai  contoh.Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” . Anda juga dapat membuat tombol  dalam bentuk mouse over. dan lain sebagainya.html menggunakan Macromedia Dreamweaver. Jika  image tersebut berfungsi sebagai tombol. Mata Kuliah Multimedia by Wisdean Eska Maena.1. tentukan terlebih dahulu image mana saja yang akan di jadikan  latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Pada bagian ini. bukalah file index.

 gambar. Oleh karena nama file yang baru saja dihapus adalah  index_26.gif pada kolom Bg.  bukan merupakan background. maupun gambar. Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar  belakang (background). animasi. Memasukkan Objek  Objek yang dimaksud dapat berupa animasi.gif maka gunakan file tersebut sebagai latar belakang.gif. maupun teks. tertulis Src = images/index_26. 2. Hal itu berarti kita tidak  dapat memasukan teks di atas gambar tersebut karena objek tersebut adalah image. Dalam  Macromedia Dreamweaver proses memasukkan objek sangat mudah karena sudah  Mata Kuliah Multimedia by Wisdean Eska Maena. Tekan Del untuk menghapusnya. Ketikkan images/index_26. Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar  belakang agar kita dapat memasukkan objek berupa teks.Pada bagian Properties. S.Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” .

 Untuk melakukan hal itu. Berikut ini akan membahas masalah teknik memasukkan objek berupa  teks. Anda bisa memasukkan image di antara teks tersebut. Ketikkan beberapa kalimat yang berisi berita. Letakkan kursor pada tempat yang akan ditambahkan teks.Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” . S.disediakan tool yang sangat lengkap.  pertama kali letakkan kursor di awal paragraf kemudian pilih menu Insert > Image. Pada penel Properties. kemudian aturlah format teks tersebut  seperti nampak pada gambar berikut. Mata Kuliah Multimedia by Wisdean Eska Maena. Anda tinggal memilih objek apa yang akan  dimasukkan. aturlah beberapa spesifikasi seperti nampak pada gambar  berikut.

 Namun posisinya masih kurang sempurna karena susunan teks  terdorong oleh gambar tersebut. Service. dan Jumping Menu  secara mudah. pada panel  Properties pilih Left untuk Align. Product. maka akan terlihat objek tersebut berada di  depan paragraf. Agar tampilan lebih rapi. Apabila berhasil memasukkan gambar. Mata Kuliah Multimedia by Wisdean Eska Maena. Sebaiknya menggunakan tombol menu yang  umum.Pilih file gambar yang akan dimasukkan dalam dokumen tersebut. Anda tidak bersusah payah menuliskan script yang panjang dalam  bahasa Javascript karena telah disediakan tool yang sangat mudah dan fleksibel. Anda dapat mengatur posisi gambar sehingga seluruh teks  akan berada di sebelah kanan gambar.Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” . S. kita membuat Pop­up Menu. dan Contact Us Dalam Macromedia Dreamweaver. seperti: Home.     MEMBUAT LINK DAN NAVIGASI Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika  mencari informasi yang dibutuhkan. Untuk melakukan hal tersebut.

 yaitu menyimpan dengan nama lain (contoh: Save As  > acer. HP. Anda harus membuat beberapa file dengan bentuk interface yang  sama seperti halaman utama. klik tombol Add (tanda plus) untuk  membuka menu. Sebelum membuat pop­up menu terlebih dulu harus menyiapkan nama file sebagai  link. Anda telah memiliki beberapa file sebagai link yang  dimaksud. tidak perlu  bingung karena disediakan panel Behavior untuk mempermudah dalam pembuatan  menu pop­up. S. Dengan demikian. Pertama kali. aktifkan terlebih dulu dengan cara memilih  menu Window > Behaviors. klik menu PC.Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” . 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. Sebagai contoh: ketika user memilih menu PC maka yang akan muncul adalah  pilihan nama computer seperti Acer. Pada panel Behaviors (berada di sebelah kanan). BenQ. Mata Kuliah Multimedia by Wisdean Eska Maena. dan lain sebagainya. Bagi mereka yang masih awan dengan bahasa Java.html). Diasumsikan. Jika panel Behaviors belum muncul. Dan ketika  user memilih salah satu opsi (missal: Acer) maka akan terhubung ke file tersebut.1.

Setelah mengklik pilihan tersebut. maka akan muncul kotak dialog Show Pop­up  Menu yang masih kosong. S. Kemudian masukkan alamat URL pada kolom Link. Selanjutnya pada kolom Target. Pada Tab Contents.Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” . pilih _parent.Selanjutnya pilih Show Pop up Menu. Kemudian  lakukan hal sama seperti pada tahap 6. masukkan nama menu pada kolom Text (misal: Acer). Mata Kuliah Multimedia by Wisdean Eska Maena. Untuk membuat menu yang baru. klik tanda plus (+) di bagian atas.

Setelah selesai klik OK. tinggi dan warna border kotak pop up  menu. klik tombol F12. Lalu tentukan pula  warna teks dan warna cell ketika mouse berada di atas teks. Untuk melihat hasilnya. Tentukan jenis dan ukuran font yang digunakan.Selanjutnya. buatlah pop­up menu pada tombol lain. Untuk mengasah keterampilan Anda.Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” . Klik Tab Position untuk menentukan posisi pop up menu. klik Tab Appearance untuk mengatur warna teks dan latar belakang  pop up menu.   Mata Kuliah Multimedia by Wisdean Eska Maena. S. Klik Tab Advanced untuk menentukan lebar.

Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” . Kemudian  geser Slider Hue maupun Saturation sesuai kebutuhan.  simpan dokumen tersebut dengan cara menekan Ctrl+S. aktifkan pilihan Colorize. Yang harus  Anda lakukan pertama kali adalah menyediakan dua buah gambar yang ukurannya  sama tapi warnanya berbeda. Setelah selesai klik OK. Buatlah duplikasi gambar tombol yang telah ada. Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. S. Mata Kuliah Multimedia by Wisdean Eska Maena. Membuat Rollover Image Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop up Menu  juga menyediakan tool untuk membuat Rollover Image sebagai tombol. Pilih  menu Image > Adjustment > Hue/Saturation. Setelah muncul kotak dialog Hue/Saturation. 2.

Sekarang kembali ke Macromedia Dreamweaver. berilah nama gambar pada  kolom Image name kemudian tentukan gambar asli pada kolom Original Image. Masukkan teks alternat pada kolom Alt. lalu tentukan nama file sebagai link ketika  tombol tersebut di klik. Setelah muncul kotak dialog Insert Rollover Image. Selanjutnya pilih menu  Insert > Image Objects > Rollover Image. Klik gambar About Us. tekan tombol F12. S. Untuk Desain Layout anda Bisa Mengedit nya di Adobe Photoshop. Tentukan pula file untuk  gambar rollover pada kolom Rollover Image. klik tombol Browse.  Untuk mempermudah pencarian file. dengan catatan  nama image nya tidak boleh di ubah.com http://deanactivity. Untuk melihat hasilnya. Selamat Berwebsite Ria….: )  NB: untuk link about dan selanjutnya tinggal di buat lagi layout baru dengan cara  copy paste dan save nama “about.com Mata Kuliah Multimedia by Wisdean Eska Maena. Hapuslah objek tersebut dengan cara menekan tombol Del.html” Tanya jawab : dean_animasi@yahoo.Ds “Membangun Website Sederhana Dengan Dreamweaver dan Photoshop” .wordpress.

Sign up to vote on this title
UsefulNot useful