Tutorial Membuat Efek Behaviors

Berikut saya kembali mencoba untuk berbagi tutorial Adobe Photoshop dan Dreamweaver. Tutorial kali ini sebenernya masih lanjutan dari tutorial sebelumnya yaitu http://ilmudesaingrafis.blogspot.com/2015/04/tutorial-membuat-menu-hover-dengan.html, tutorial ini saya buat untuk matakuliah desain web untuk mahasiswaku jurusan DKV. Tetapi tidak menutup kemungkinan temen2 blogger juga bisa memperlajarinya..langsung saja lihat dan download video tutorialnya...

Tutorial Membuat Menu Hover dengan Photoshop dan Dreamweaver

Sudah lama dengan kesibukan offline, kali ini saya akan mencoba share video tutorial membuat menu hover dengan photoshop dan dreamweaver. Materi ini sebenernya saya tunjukan untuk mahasiswaku pada jurusan DKV (Desain Komunikasi Visual), untuk mempermudah mengingat kembali materi yang saya berikan maka saya buatkan videonya.
Langsung saya untuk melihat video tutorial membuat menu hover dengan photoshop dan dreamweaver, silahkan klik link berukut:

Video Design Website Dengan Dreamweaver

Alhamdulillah setelah menjelajah di internet akhirnya saya menemukan video tutorial yang menurut saya sendiri sangat membantu untuk proses belajar menhajar cara membuat website dengan Dreamweaver, pada video tutorial kali ini menggunakan Macromedia Dreamweaver, tapi jangan kuatir pastinya bisa juga jika menggunakan Adobe Dreamweaver...saya mendapatkan video ini pada seorang yang tentunya sangat baik karena rasa berbaginya sangatlah besar, situs nya videobelajar.com.
ntuk mempermudah kita dalam pengerjaan kita harus membuat website kita dalam suatu site agar filenya tidak berantakan yaitu kita pilih site, manage site kemudian pilih new dan site maka akan muncul tempat untuk kita memberi nama file kita contohnya kita membuatnya dengan nama web lalu klik tombol next kemudian klik tombol browse untuk tempat kita menyimpan file. Untuk menyimpan file tersebut pastikan folder images harus ada di dalam folder web kita, agar kita dapat mengambil file dari folder images kita dengan mudah dan tidak berantakan. Setelah itu pilih select dan next kemudian klik tombol none maka akan muncul di sebelah kiri halaman pada dreamweaver yaitu file-file apa saja yang ada folder web tersebut . Selanjutnya kita pilih file new kemudian kita pilih basic pagenya kita pilih HTML dan klik tombol create maka akan muncul halaman kerja kita.

Pada halaman kerja kita letakkan sebuah table, usahakan kita harus pada halaman common. Dan untuk mengetahui lebar website kita , kita lihat pada potoshop yaitu pilih image kemudian image size maka akan tertera ukuran website kita. Untuk menentukan ukuran website kita di dreamweaver kita harus melihat ukurannya website tersebut di potoshop yaitu pada image size. Untuk menghilangkan jarak daripada kolomnya adalah pada celpad dan celspacenya ukurannya adalah 0.
Oke langsung saja simak dan download videonya, jika temen2 menggunakan IDM bisa langsung di download >>


Materi Belajar kita kali ini, akan membahas bagaimana cara mendesign atau memasukkan design web yang telah anda buat dari photoshop ke dalam dreamweaver. Untuk mempermudah kita dalam pengerjaan kita harus membuat website kita dalam suatu site agar filenya tidak berantakan yaitu kita pilih site, manage site kemudian pilih new dan site maka akan muncul tempat untuk kita memberi nama file kita contohnya kita membuatnya dengan nama web lalu klik tombol next kemudian klik tombol browse untuk tempat kita menyimpan file. Untuk menyimpan file tersebut pastikan folder images harus ada di dalam folder web kita, agar kita dapat mengambil file dari folder images kita dengan mudah dan tidak berantakan. Setelah itu pilih select dan next kemudian klik tombol none maka akan muncul di sebelah kiri halaman pada dreamweaver yaitu file-file apa saja yang ada folder web tersebut . Selanjutnya kita pilih file new kemudian kita pilih basic pagenya kita pilih HTML dan klik tombol create maka akan muncul halaman kerja kita.

Pada halaman kerja kita letakkan sebuah table, usahakan kita harus pada halaman common. Dan untuk mengetahui lebar website kita , kita lihat pada potoshop yaitu pilih image kemudian image size maka akan tertera ukuran website kita. Untuk menentukan ukuran website kita di dreamweaver kita harus melihat ukurannya website tersebut di potoshop yaitu pada image size. Untuk menghilangkan jarak daripada kolomnya adalah pada celpad dan celspacenya ukurannya adalah 0.

Cara meletakkan design web kita ke dalam dreamweaver yaitu dengan cara klik tombol common lalu kita pilih image untuk memasukkan image yang sudah kita slicing. Untuk memasukkan image right bar kita harus tentukan hoizontalnya left sedangkan vertikalnya adalah top kemudian masukkan image di bagian right barnya. Untuk menambahkan baris dan kolom kita cukup mengklik bagian table lalu kita tentukan rows dan columsnya.

Untuk menghilangkan batas pada baris atau menyatukan baris dan kolom kita cukup mengklik kanan table dan pilih marge cells. Untuk membuat jarak kita rubah menjadi left pada bagian horizontalnya. Selanjutnya pada pembatas image yaitu misalnya titik-titik, untuk memasukkannya ke dreamweaver kita cukup dengan klik kanan lalu pilih table kemudian pilih insert rows.
Untuk download videonya, jika temen2 menggunakan IDM bisa langsung di download >>

Membuat Spray Menu Bar

1. Buka program Dreamweaver CS3 > Sebelum memulai membuat spray menu bar, simpanlah dahulu filenya dan namai dengan file name spraymenubar.html
2. Pilih menu > Insert > Layout Object > Spray Menu Bar > sehingga muncul jendela Spray menu bar > misalnya pilih yang Horizontal > Ok.


3. Setelah klik Ok, maka akan muncul pada lembar kerja seperti bentuk menu spray, Aturlah teks menu spray pada properties ( text item1 diganti dengan Home ), kemudian lakukanlah perubahan sesuai kebutuhan Anda.


4. Jika sudah selesai simpan kembali dengan menekan Ctrl+S atau File > save. Kemudian jalankan aplikasi dengan menekan F12 pada keyboard. >> Selamat mencoba

DOWNLOAD

Membuat Pilihan Check Box

1. Buka Program Dreamweaver CS > Pilih menu Forms >check box ( Sebelumnya tuliskan Keterangan dahulu diatasnya misalnya : :Jenis Kelamin )


2. Tambahkan satu pilihan check box lagi dengan lebel Perempuan


3. Jalankan Aplikasi dengan menekan f12 pada keyboard ( Untuk menjalankan sebelumnya file harus disimpan terlebih dahulu ) >> Selamat Mencoba!!!!

Membuat Menu Login

1. Untuk membuat menu login sebelumnya persiapkan membuat table dahulu caranya Insert > table > aturlah seperti pada gambar dibawah ini kemudian OK


2. Gabungkan baris dan kolom pertama dengan cara blok/drag baris dan kolom pertama > Klik kanan > Table > Merge Cells. Kemudian tuliskan “Member Login”.


3. Pada baris ke 2 dan ke 3 kolom pertama tuliskan Login dan Password


4. Pada baris ke2 kolom ke 2 buat form text field dengan cara pilih Insert > Forms > Text Field


5. Pada baris ke3 kolom ke 3 buat form text field dengan cara pilih Insert > Forms > Text Field. Dan pada panel properties atur typenya Password.


6. Kemudian gabungkan kolom dan baris terakhir, caranya sama seperti langkah ke2 tetapi kali ini diberi button caranya Insert > Forms > button > Ok.

7. Jalankan aplikasi dengan menekan tombol f12 pada keyboard dan jangan lupa sebelumnya simpan file dahulu. Selamat mencoba!!!!

DOWNLOAD

Membuat Link Teks

Untuk membuat link teks, yang Anda perlukan pertama adalah membuat sebuah teks. Nah sekarang kita akan mulai mempelajari membuat link perhalaman dengan teks.
1. Buatlah 2 buah file yang bernama link1.htm dan link2.htm, kemudian masukan teks sebagai contoh dibawah ini.


2. Aktifkan link1, blok atau drag teks “Klik disini untuk menuju Halaman ke2”


3. Langkah selanjutnya pada panel properties pilih browse for file( cari file link2.htm dimana Anda simpan, dan sebaiknya file htm tadi terdapat pada satu folder ) > pilih file link2.htm > OK dan simpan file ( file > save )


4. Pindah ke file link2.htm > blog kata “Klik disini untuk menuju halaman ke1” > pada panel properties pilih browse for file pilih file link1.htm > Ok dan simpan file.


5. Jalankan Aplikasi dengan menekan f12 pada keyboard. Selamat mencoba

DOWNLOAD

Membuat Background Image

1. Buka program Dreamweaver CS3 > pada Properties > Pilih Page Properties ( jika belum terdapat panel properties caranya pilih window > Properties)

2. Setelah Anda klik properties maka akan muncul jendela properties >

3. Setelah Anda klik Ok maka tampilan Background akan tampil gambar yang tadi Anda Browse.


Perhatian!!
Apabila Anda mempunyai gambar yang kecil, misalnya ukuran 300 x 240 pixel, Anda tidak dapat membuat image atau gambar tersebut ditampilkan secara tunggal karena selalu akan dilakukan repeat oleh program secara otomatis. Kadang-kadang hal ini juga sangat menguntungkan, akan tetapi seringkali juga merugikan, untuk mengatur penggunaan background dengan sempurna, Anda dapat menggunakan style CSS.


DOWNLOAD

Membuat Radio Button

1. Buka Program Adobe Dreamweaver CS3 > Pilih Insert > Form > Radio Grup


2. Setelah Anda Klik icon Radio Grup maka akan muncul jendela Radio Grup

Keterangan :
Name : Nama dari radio button yang sedang dibuat
Radio buttons : Tanda Plus ( untuk menambah jumlah label ), Tanda Minus ( untuk menghapus atau mengurangi label ), Tanda panah keatas ( untuk memindah posisi lebel yang aktif ke atas ), Tanda Panah Kebawah ( untuk memindah posisi label yang aktif ke bawah )
Lay out using : Untuk menentukan layout label menggunakan line breaks atau table

3. Jika setingan sudah Anda atur sesuai kebutuhan makan klik OK.
4. Simpan file kemudian Jalankan Aplikasi dengan menekan f12 pada keyboard. SELAMAT MENCOBA
DOWNLOAD

Membuat Flash Button

1. Pilih Insert > Media > Flash Button. Jika Anda belum menyimpan dokumen yang dibuat maka akan muncul peringatan untuk menyimpan dokumen tersebut.


2. Setelah dokumen tersimpan ulangi langkah pertama maka akan muncul jendela Insert Flash Button, aturlah sesuai kebutuhan isi content yang Anda buat.

Keterangan :
Sample : Contoh desain button
Style : Nama dari bentuk button
Button Text : Nama pada button yang di munculkan
Font : Jenis teks yang digunakan
Link : Alamat link halaman yang dituju
Target : Jenis target link button yang digunakan
Bg color : background dari button
Save as : Tempat dan nama dimana button itu disimpan dalam komputer Anda

3. Jika Selesai mengatur flash button tekan Ok.


DOWNLOAD

Membuat RollOver Image

1. Pilih Menu > Insert > Image Object > RollOver Image


Keterangan :
Image Name : Buat keterangan nama dari gambar ( agar mudah dimengerti letak gambar tersebut )
Original Image : Gambar Awal Sebelum disentuh Kursor
RollOver Image : Gambar Setelah disentuh oleh kursor
Alternate text : Keterangan Teks gambar saat disentuh
When clicked, go to URL : Link ke halamanweb dimana jika gambar di klik
Browse : Button untuk mengambil gambar pada Komputer Anda

2. Setelah Semua pengaturan selesai > Klik OK.
3. Jalankan browser dengan menekan tombol f12 pada keyboard >>>Selamat mencoba
DOWNLOAD

Membuat Tabel

Dalam pembutana web kita tidak terlepas dari namanya Tabel karena, tabel merupakan salah satu unsur yang sangat penting dalam pembuatan web. Untuk membuat dan memodifikasi tabel caranya sebagai berikut :
1. Pilih menu Insert > Table > Sehingga muncul jendela Tabel > tentukan jumlah kolom dan baris sesuai keingina Anda, misalnya seperti contoh:

Rows Jumlah baris
Columns Jumlah kolom
Width Lebar tabel yang bisa dinyatakan dalam persen maupun dalam pixel
Border Ukuran border tabel

2. Untuk mewarnai background kolom atau baris , caranya letakan kursor pada kolom atau baris yang akan diberi background warna kemudian pada panel properties pilih warna pada bg color.

DOWNLOAD

Membuat Halaman Web

1. Pilih Menu File > New . Kemudian Pilih Modify > Page Properties aturlah sesuai nama web yang akan Anda namai contoh :




2. Pilih OK jika Anda sudah selesai mengatur page properties nya.
3. Simpan dahulu agar file yang Anda buat aman.

DOWNLOAD

Mendefinisikan Local Site

1. Buka program Dreamweaver > Site > New Site > Sehingga akan muncul jendela Site Definitions
2. Pada bagian Site Name, tuliskan nama web Anda. Misalnya ilmudesain. Sedangkan Local Root Folder adalah folder tempat Anda akan menyimpan semua file untuk web yang Anda buat…Klik Browse untuk memulai penyimpanan


3. Jika semua sudah di atur seperti diatas kemudian tekan OK. Dan Anda sudah memulai membuat sebuah halam web baru….selamat mencoba!!!!!!!
DOWNLOAD

Cara Membuat Navigasi

Kita akan membuat sebuah navigasi sederhana pada yang latihan ini misalnya link dari home > Profile > Contact
1. Buka program Dreamweaver ( bisa menggunakan Macromedia dan Adobe )
2. Tulislah Home, Profile dan Contact ( Align: Left, Font Size:12 ) serta dibawahnya juga ditulis Home ( Align: Center, Font size: 36).


3. Kemudian simpan ( File> Save) dengan nama file : home.html ( Di usahakan diletakan pada 1 folder )


4. Buatlah file baru ( tujuannya untuk membuat halaman profile ) dengan cara pilih file > new > pilih html > create > sehingga muncul halaman baru.


5. Tulislah Home, Profile dan Contact ( Align: Left, Font Size:12 ) serta dibawahnya juga ditulis Profile ( Align: Center, Font size: 36).


6. Pilih file > save > tulis file namenya profile.html


7. File > New > untuk membuat halaman contact caranya sama seperti langkah 5 dan 6, tetapi untuk tulisan ( font size: 36 ) diganti dengan Contact. Kemudian save dengan nama contact.html
8. Langkah berikutnya yaitu membuat link. Kembali ke halaman home > blok tulisan home > pada panel propertis klik link > pilih home.html


9. Sehingga akan muncul link:home.html > dan pilih target:_self.( link untuk home sudah selesai ) lakukanlah pada Profile dan Contact caranya sama seperti cara 1-8.


10. Jika semua link sudah dibuat > untuk menjalankan ke browser tekan f12 pada keyboard sehingga akan tampil ke jendela browser.