Join Group Facebook!!

product 1

Join us, dengan cara klik tulisan "GABUNG" di bawah ini !!

Download

product 1

Silakan Download yg tersedia Sementara, Gan ! ^_^ vestibulum.

Customizations

product 1

Morbi suscipit, nisl eget porttitor hendrerit, arcu sapien cursus enim, id luctus felis metus urna.

We love Music

Artikel Us ™ !!

Membuat Tabel dan Hyperlink Pada Dreamweaver CS4

teamelite teccan | 23.19 | 0 komentar

Kali ini kita akan belajar dengan mengunakan Adobe Dreamweaver CS4. Sebagai dasar dalam membuat website, kita akan belajar membuat Tabel dan Hyperlink. Penggunaan tabel dalam sebuah website sangat penting, yaitu untuk mengatur tata letak halaman web menjadi lebih teratur dan terorganisir . Sedangkan hyperlink di gunakan untuk menghubungkan antar dokumen. Baiklah mari kita mulai saja membuat tabelnya. Tentunya kalian tidak sabar bukan??he.he.he.
Pertama-tama, install dulu Program Adobe Dreamweaver CS4 pada computer kalian…!! Kalian bisa mendownload lewat internet atau bisa juga minta kepada Bapak/Ibu Guru kalian di sekolah…..
Setelah kalian install, buka Adobe Dreamweaver CS4.
Kemudian tampilan awal jendela Adobe Dreamweaver CS4 akan tampil seperti berikut:
 
Selanjutnya, kalian klik HTML pada bagian Create New untuk membuka lembar kerja baru Dreamweaver CS4.
Kemudian, akan tampil tampilan lembar kerja baru Dreamweaver CS4.



Selanjutnya pada panel Insert ,aktifkan Tab Common > Klik Table , untuk menampikan kotak dialog table.
 
Lalu ubah nilai Propertinya…:
  • Untuk Rows=5 Coloums = 2
  • Sedangkan Width = 750 pixels
  • Dan Border Thickness = 1 pixels
  • Lalu Klik saja OK
Setelah itu, akan tampil tabel dengan 5 baris dan 2 kolom.
Kemudian aktifkan Cell A, caranya klik kotak cellnya.
 Lalu pada Page Propertisenya kalian ubah H Height menjadi 200 dan Vert menjadi Top.
Berikutnya di baris pertama tahan tombol Ctrl dan klik kotak cell A1 dan A2.
 



Selanjutnya, klik Modify > Table > Merge Cells dan kolom akan tergabung dengan sendirinya.
 Gunakan juga cara seperti di atas pada kolom baris 2, 4, dan 5.
Kalau sudah selesai kita menuju ke tahap selanjutnya…. OK….?...
 
Kali ini kita akan membuat Background pada tabel.
Letakkan kursor pada kolom pertama.
Selanjutnya klik Window > Tag Inspector untuk mengaktifkan panel Tag Inspector ,atau tekan F9 pada keyboard.
Tag Inspector akan tampil tepat berada di bawah Panel Insert, kemudian pilih Browser Specific, klik Browse.
 Selanjutnya, akan tampil kotak dialog Select File, kemudian pilih gambar yang kalian inginkan. Kemudian klik OK.
 Setelah itu, kita beri warna pada garis tabel, klik salah satu garis untuk mengaktifkan tabel.
Selanjutnya pada panel Tag Inspector, klik General dan atur bg color menjadi #66FF66.
 Selanjutnya kita akan memberi warna background dalam cell. Caranya, Klik cellnya kemudian ubah bg color pada Properti Inspector,dan tambahkan gambar sesuai kreativitas kalian……….
 Setelah itu tekan Ctrl + S dan simpan dengan nama “table”. Tekan F12 untuk melihat hasilnya pada browser. 
Kemudian kita akan membuat Contoh fungsi Hyperlink yang di gunakan untuk menghubungkan dokumen satu dengan yang lainnya.
Aktifkan Cell baris ke dua kolom , lalu ketik “Home | Gallery | Photos | Contact Us”.
Blok teksnya lalu atur propertinya:
  • Untuk Font ubah menjadi Verdana dengan size 14
  • Kemudian beri nama selector dengan “Menu”.
  • Dan beri warna Merah pada teksnya.
 
Setelah itu, kita buat lembar kerja baru, Tekan Ctrl + N > klik tombol Create pada kotak dialog New Document.
Selanjutnya, ketik teks “Contoh Link….!!!” Lalu atur Propertinya:
  • Kita ubah Font menjadi Comic Sans dengan size 36
  • Beri nama selector “Contoh”
  • Dan berilah warna Merah pada teks
 Lalu, tekan Ctrl + S dan simpan dengan nama Contoh
Selanjutnya, aktifkan kembali tab tabel.
 
Blok teks Home dan klik Tool Hyperlink Pada panel Insert
Pada kotak dialog Hyperlink, klik tombol Browse, tentukan alamatnya yaitu Contoh.html
Kemudian atur target menjadi Selt lalu klik OK.



Jika berhasil, teks akan di beri warna dan di garis bawahi secara otomatis.
Lanjutkan dengan cara yang sama pada teks Gallery, Photos dan Contact Us.
Kemudian, Simpan dan tekan tombol F12 pada keyboard untuk melihat hasilnya pada browser.



Selamat mencoba….!! Semoga Bermanfaat………

Category:

Vk bhardwaj: My name is vikas . I'm administrator of Www.BestTheme.Net.This blog was opened for Demo test .

0 komentar