Membuat Tabel dan Hyperlink Pada Dreamweaver CS4

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………

Posted in: Web desaing