Cara Menggunakan Menu Insert & Hyperlink Pada Adobe Dreamweaver

      Sebelum memulai design, di tutorial sebelumnya juga sudah Saya jelaskan mengenai Adobe Dreamweaver dasarnya. Nah, sekarang Saya akan mengajarkan bagaimana cara menggunakan menu insert & hyperlink pada Adobe Dreamweaver. Alangkah baiknya jika Anda membuat folder tersendiri untuk menyimpan semua bahan yang dibutuhkan pada saat mendesign, seperti foto ataupun gambar dan folder tersebut juga akan digunakan untuk menyimpan hasil kerja nantinya.

Step 1 – Buka aplikasi Adobe Dreamweaver – HTML

Step 2 – Buka lembar kerja pertama Anda, pada menu bar pilih Split untuk mendapatkan lembar kerja yang mempunyai 2 bagian seperti dibawah ini

Step 3 - Kalau ingin membuat judul halaman dapat dengan memilih menu Format – Align – Center, untuk menghasilkan tulisan berada di tengah

Step 4- pilih Format – Paragraph – Heading 1 untuk memberi kesan seperti judul (huruf menjadi agak besar)

Step 5 - Anda bisa menulis judul yang diinginkan sesuai dengan tujuan pembuatan website. Disini Saya akan menuliskan judul  “Warna-Warni Dunia" dan dilanjutkan dengan sub judul dibawahnya.

Step 6 – Nah, saatnya kita menggunakan menu Insert - Table, table dapat digunakan nantinya sebagai menu bar dalam website yang sedang dirancang.

Step 7 - Setelah itu akan muncul kotak pilihan seperti dibawah ini, silahkan isi rows yang Anda inginkan, rows untuk kotak tabel kebawah kemudian coloumn untuk kotak tabel kesamping. Pada step ini Saya akan mengisi rowsnya 1 dan coloumnnya 4. Setelah selesai diisi maka klik OK. Isilah kotak-kotak tersebut dengan pilihan menu yang anda inginkan, disini saya membuat menunya dengan 4 kategori yaitu Home, About Us, Gallery, dan Contact Us.

Maka akan menghasilkan tampilan sebagai berikut, dan untuk membesarkan tabel, Anda bisa menarik titik-titik hitam yang berada dipinggir garis kesamping atau sesuai dengan keinginan Anda.

Nah, hasil tabel yang Saya buat hasilnya menjadi seperti ini:

Step 8 – Kita akan mencoba menggunakan hyperlink, maka saatnya kita menyimpan halaman pertama dengan memilik menu File – Save, simpan di folder yang sudah dibuat sebelumnya.

Step 9 – Untuk membuat halaman/lembar kerja kedua atau berikutnya, Pilih menu file - New - HTML, lalu klik Create.

Step 10 – Saatnya Anda mengisi halaman kedua sesuai dengan yang diinginkan, namun jangan lupa halaman tersebut harus sesuai dengan kategori yang ada di menubar yang akan dimunculkan pada website. Misalnya saya akan meberi link pada katagori “About Us”, maka dilembar kedua ini saya akan mengisi beberapa informasi terkait “About Us”.

Step 11 - Jika ingin menambah gambar, silahkan pilih Insert – Image, pilih gambar yang disimpan dalam forder kemudian kelik Ok dan Apply

Step 12 - Setelah dirasa beres, maka halaman kedua dapat disave pada folder yang sama dengan halaman kedua. Pilih File - Save

Step 13 - Saat ini untuk halaman kerja yang kedua tersebut akan dicantumkan kehalaman kerja yang pertama, yang sebelumnya telah Anda buat. Maka kita akan kembali kelembar kerja yang pertama untuk mencantumkan hyperlink, Caranya: Block text “About Us” pada tabel, Pilih menu Insert – Hyperlink.

Step 14 - Akan muncul kotak dialog seperti dibawah ini, silahkan isi kolom Link – Browse, ambil file halaman kedua yang sebelumnya telah disave di folder.

Step 15 - Setelah link ditemukan, silahkan isi title.

Step 16 - Setelah itu maka hasil tulisan “About Us” akan berubah menjadi warna biru dan mengandung link untuk halaman berkaitan

Lakukanlah hal yang sama pada kategori lainnya yang akan Anda buat atau yang akan dijadikan link pada halaman-halaman berikutnya dan jangan lupa untuk di Save.

Step 17 – Untuk memperindah halaman web Anda, silahkan Anda menambah background. Cara menambahkan background yaitu pilih Page Properties yg ada di menu bawah – Appearance (HTML) – Browse, silahkan pilih gambar yang diinginkan pada folder yang telah dibuat, Klik Apply dan OK.

Step 18 - Setelah itu jangan lupa untuk di Save.

Naaaah, saat Anda membuka file yang barusan saja dibuat, tampilannya akan seperti ini:

Saat Anda mengklik bagian "About Us" maka tampilannya akan seperti ini:

SELAMAT MENCOBA!