Tutorial Mengedit Halaman HTML dengan Dreamweaver Oleh : Ruth Ema Febrita Pada tutorial sebelumnya, kita sudah berhasil melakukan konversi dari desain website yang kita buat menggunakan Photoshop menjadi file bertipe HTML. Pada tutorial kali ini, kita akan belajar untuk mengedit halaman HTML tersebut sehingga dapat digunakan sebagai template web kita. Saat kita berhasil melakukan konversi dari Photoshop ke HTML, maka pada folder penyimpanan akan muncul sebuah folder yang bernama images dan sebuah file HTML. Folder images akan berisi gambar-gambar hasil slicing dengan Photoshop. Folder ini nantinya akan digunakan untuk menyimpan semua gambar-gambar yang dibutuhkan dalam membangun website kita, sehingga administrasi penyimpanannya dapat lebih teratur. Untuk memulai mengedit halaman web ini, kita buka file HTML kita menggunakan Adobe Dreamweaver, maka akan muncul tampilan sebagai berikut: Kode program yang degenerate secara otomatis menggunakan pola tabel Tampilan program *NB: Gunakan mode Split untuk memudahkan proses edit halaman HTML.
Membuat dan Menggunakan File CSS Buatlah sebuah file CSS yang nantinya akan berfungsi untuk memberikan style pada halaman website kita, caranya adalah: 1. Klik File New CSS 2. Create 3. Simpan dengan nama style.css (atau bisa juga yang lain) dan simpan di folder yang sama dengan tempat penyimpanan halaman HTML. Dalam file CSS yang telah kita buat, kita bisa menambahkan jenis font apa yang akan kita gunakan pada seluruh halaman web yang akan kita gunakan, misalnya dengan menggunakan script berikut:.body{ font-family:verdana, Arial, Helvetica, sans-serif; } Untuk menerapkan file CSS yang telah kita buat, tambahkan script berikut ini di antara tag <head> <link rel="stylesheet" href="style.css" media="screen"/> Setelah itu maka file CSS dapat diterapkan pada halaman web yang akan kita buat. Menambahkan Teks pada Halaman Website Selanjutnya kita akan mencoba untuk menambahkan teks paragraf dalam halaman web kita dengan memanfaatkan background gambar hasil slicing kita dengan Photoshop. Berikut ini adalah langkahlangkah yang harus dilakukan: 1. Tentukan lokasi dalam bagian design, dimana Anda akan meletakkan teks paragraf. Kliklah bagian tersebut. Maka pada bagian kode akan terseleksi secara otomatis script yang menunjukkan bagian yang terpilih. Untuk lebih jelasnya perhatikan gambar berikut.
<td colspan="11"> <img src="images/ecoliving_2_14.png" width="670" height="390" alt=""></td> Script ini menunjukkan bahwa sel yang ditunjuk diisi dengan dengan sebuah gambar bernama ecoliving_2_14 yang berada di folder images. Dalam hal ini, kita tidak dapat langsung menuliskan paragraf di dalamnya, karena akan muncul tampilan sebagai berikut:
Background teks akan berwarna putih dan slicing kita semula akan menjadi pecah. Oleh karena itu, kita akan membuat gambar hasil slice kita menjadi background dari paragraf yang akan kita tulis. Caranya adalah dengan mengedit script yang tadi terseleksi menjadi sebagai berikut: Script Sebelum <td colspan="11" > <img src="images/ecoliving_2_14.png" width="670" height="390" alt="">selamat datang di website kami. Website ini merupakan sebuah website yang menceritakan tentang sebuah... Sesudah </td> <td colspan="11" background="images/ecoliving_2_14.png"> Selamat datang di website kami. Website ini merupakan sebuah website yang menceritakan tentang sebuah...</td>
Dengan demikian, maka tampilan web akan menjadi seperti berikut: Secara otomatis tulisan akan berada di tengah (valign=middle). Untuk mengubah posisi paragraf menjadi di atas, maka tambahkan properti valign di dalam tag <td> dengan nilai top, sehingga scriptnya akan menjadi seperti berikut: <td colspan="11" background="images/ecoliving_2_14.png" valign="top"> Selamat datang di website kami. Website ini merupakan sebuah website yang menceritakan tentang sebuah...</td> Saat gambar hasil slicing telah dijadikan sebagai background dari sebuah sel pada tabel, maka kita juga bisa menambahkan gambar pada halaman tersebut dengan cara menambahkan tag image diantara tag <td> </td>. Sebagai contoh adalah pada script berikut: <td colspan="11" background="images/ecoliving_2_14.png" valign="top"> <p>selamat datang di website kami. Website ini merupakan sebuah website yang menceritakan tentang sebuah...</p><img src="images/ecoliving_2.png"/> </td>
Maka akan menghasilkan tampilan seperti berikut: Menambahkan CSS pada Link Menu Navigasi Untuk membuat sebuah link berubah-ubah ketika mouse didekatkan dan ketika di klik, maka kita perlu menambahkan CSS di dalamnya. Berikut ini adalah langkah-langkah yang bisa dilakukan: 1. Klik area background yang akan dijadikan sebagai background link menu navigasi 2. Copy alamat gambar background tersebut.
alamat background 3. Hapus tag <img> hingga hanya tersisa tag <td></td> 4. Pada halaman style.css, tambahkan beberapa script berikut: Nama link Alamat background Kondisi saat mouse berada di atas link (hover)
5. Kembali pada file HTML anda. Pada bagian <td></td>, modifikasi script, sehingga menjadi seperti berikut: Script Sebelum <td> </td> Sesudah <td class="home"><a href="home.html" class="home"> Home</a></td> Class home merupakan class yang terdapat pada script CSS. Menambahkan Link pada Tombol Menu Navigasi Pada gambar tampilan di atas, desain ini memiliki beberapa menu navigasi, antara lain Home, Subdivisons, Blog, About dan Contact. Menu navigasi ini nantinya akan dijadikan sebagai link untuk menuju ke halaman yang lain. Berikut ini adalah langkahnya: 1. Klik menu yang akan dijadikan sebagai link 2. Edit script nya menjadi sebagai berikut: Sebelum Sesudah Script <td> <img src="images/ecoliving_2_06.png" width="108" height="130" alt=""></td> <td> <a href= home.html ><img src="images/ecoliving_2_06.png" width="108" height="130" alt=""></a></td> Additional Tips Apabila Anda memiliki paragraf yang lebih panjang daripada background, maka tampilan akan pecah seperti pada gambar berikut:
Untuk mengatasinya, Anda dapat melakukan hal berikut: 1. Crop sebagian kecil dari background utama, seperti contoh berikut:
Caranya: klik crop tool pilih area yang diseleksi ENTER Simpan hasil crop tersebut dengan nama back.png dan simpan pada folder images. 2. Edit tag body dengan script sebagai berikut: <body style="background-image:url(images/back.png); backgroundrepeat:repeat-x;"> Script ini berfungsi untuk menjadikan gambar tersebut menjadi background. Repeat-x berfungsi untuk menampilkan gambar background berulang-ulang sampai pada batas screen secara horizontal. Sehingga hasilnya adalah sebagai berikut:
Selamat Mencoba