Membuat Hyperlink atau Frameset Pada Dreamweaver CS6

Ditulis oleh - Taufik Ramadhan - 11 = Nov - 2015

Membuat Hyperlink atau Frameset Pada Dreamweaver CS6

1. Buka Dreamweaver pada icon di desktop, atau di directory anda

2. Pada tampilan awal pilih HTML

3. Klik Design pada toolbar

4. Langkah awal buat Halaman BERANDA.

Ubah background color : klik kanan>page properties>pilih background color. Ubah tulisan menjadi rata tengah, caranya klik kanan pilih align>center.anda dapat menyisipkan gambar atau apapun, Kemudian save as dengan nama file “Beranda”.

5. Langkah berikutnya buat html baru dengan nama “Biodata”. Untuk halaman biodata menggunakan tabel. Caranya klik menu insert>tabel. Buat 4 rows dan 2 columns. Klik OK.

6. 6. Kemudian akan muncul tabel seperti dibawah, kemudian Pada kolom pertama isikan atribut Nama, tanggal lahir, alamat dan jenis kelamin.

7. 7. Kemudian sisa kolom yang kosong ubah menjadi text field, gunanya sebagai input data saat web di run. Caranya klik insert-form-text field.Setelah itu hilangkan garis border tabel. Caranya cukup mengganti border dengan angka

8. Sehingga kurang lebih akan didapat seperti gambar dibawah ini.

9. 9. Buat lagi halaman baru untuk halaman login. Buat halaman LOG IN menggunakan tabel 3x3.

Kolom pertama baris ke 1 dan 2 isikan “Username” dan Password” dan Kolom ke-3 baris ke 1 dan 2 ubah menjadi text field. Kemudian pada textfield kolom ke-3 baris ke-2 ubah typenya menjadi password caranya klik 2x textfieldnya lalu di bawah layar ada menu properties, ganti type menjadi password.

10. Kemudian buat tombol button “login” dan “Cancel” pada kolom ke 3-baris ke-3. Caranya klik insert>form>button. Ubah value button di bagian bawah layar. Kemudian save as dengan nama login.

11. Sehingga akan didapat halaman seperti berikut

12. Selanjutnya buat Halaman ABOUT. Halaman about kita isikan dengan logo. Caranya untuk insert gambar adalah dengan klik menu insert > image. Selanjutnya buat logo rata tengah dengan klik kanan pada logo > align >center. Kemudian save as dengan nama file “about”.

13. Selanjutnya buat halaman baru untuk membuat halaman BLOG. Lalu ketik apa saja mengenai anda.

14. Selanjutnya buka halaman baru lagi untuk membuat halaman Gallery. Setelah itu masukan beberapa gambar dengan posisi rata tengah.

15. Langkah terakhir adalah membuat layout blog, yaitu dengan menggunakan Frameset. Caranya adalah klik menu insert > HTML > Frameset > pilih sesuai selera, tetapi disini saya menggunakan Top Nested Left.

16. Lalu buat tampilan seperti gambar ini dengan mengganti background color dan menggunakan table untuk daftar menu blog. Caranya pilih insert > HTML > Frame > Top Nested Left. Buat logo di frame atas, buat label pada frame sebelah kiri, buat terlebih dahulu tabel 6x1 untuk label, dengan border 0, kemudian isi kolom dengan membuat form. Kemudian tulis label yang tadi sudah dibuat, sehingga seperti berikut.

17. Lalu buat Hyperlink pada masing-masing menu. Guna hyperlink yaitu untuk jika salah satu menu di klik akan keluar halaman menu yang di inginkan. Contoh jika menu biodata di klik maka akan muncul halaman biodata. Cara memakai hyperlink yaitu contohnya kita blok menu beranda > klik hyperlink pada menu bar > klik icon hyperlink> pilih web yang akan di hubungkan dan klik target main frame. Ulangi langkah seperti tadi untuk menu blog, biodata, login, blog, dan gallery.