membangun website sederhana dengan dream weaver dan photoshop final
TRANSCRIPT
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 win321.5.3
Membangun Website Sederhana Dengan Dreamweaver dan Photoshop
(Xampp, localhost, Dreamweaver)
PART IIBy Wisdean Eska Maena
Dalam tutorial buku ini, untuk menginstall Apache Server, MySQL dan PHP kita
menggunakan aplikasi yang dikenal dengan XAMPP versi win321.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 win321.5.3
1. Salin atau copy file master Xamppwin321.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.
Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”
Icon Software Xampp
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 merunningkan 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 situsbisnis 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 Popup 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 Popup Menu
Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain yang sejenis adalah adanya tool untuk membuat menu popup 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 popup.
Sebelum membuat popup 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 Popup 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 popup 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 : [email protected]://deanactivity.wordpress.com
Mata Kuliah Multimedia by Wisdean Eska Maena, S.Ds“Membangun Website Sederhana Dengan Dreamweaver dan Photoshop”