Tutorial Mengedit Halaman HTML dengan Dreamweaver Mengedit Halaman HTML dengan Dreamweaver Oleh :...
11
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 be- lajar 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 nan- tinya akan digunakan untuk menyimpan semua gambar-gambar yang dibutuhkan dalam memba- ngun 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: *NB: Gunakan mode Split untuk memudahkan proses edit halaman HTML. Kode program yang degenerate secara otomatis menggunakan pola tabel Tampilan program
-
Upload
dinhkhuong -
Category
Documents
-
view
233 -
download
1
Transcript of Tutorial Mengedit Halaman HTML dengan Dreamweaver Mengedit Halaman HTML dengan Dreamweaver Oleh :...
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 be-
lajar 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 nan-
tinya akan digunakan untuk menyimpan semua gambar-gambar yang dibutuhkan dalam memba-
ngun 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:
*NB: Gunakan mode Split untuk memudahkan proses edit halaman HTML.
Kode program yang
degenerate secara
otomatis menggunakan
pola tabel
Tampilan program
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:
Untuk menerapkan file CSS yang telah kita buat, tambahkan script berikut ini di antara tag
<head>
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 langkah-
langkah 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.
.body{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
<link rel="stylesheet" href="style.css" media="screen"/>
Script ini menunjukkan bahwa sel yang ditunjuk diisi dengan dengan sebuah gambar ber-
nama 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:
<td colspan="11">
<img src="images/ecoliving_2_14.png" width="670" height="390"
alt=""></td>
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 para-
graf yang akan kita tulis. Caranya adalah dengan mengedit script yang tadi terseleksi men-
jadi 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......
</td>
Sesudah <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:
Saat gambar hasil slicing telah dijadikan sebagai background dari sebuah sel pada ta-
bel, maka kita juga bisa menambahkan gambar pada halaman tersebut dengan cara menam-
bahkan tag image diantara tag <td> </td>. Sebagai contoh adalah pada script 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>
<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.
3. Hapus tag <img> hingga hanya tersisa tag <td></td>
4. Pada halaman style.css, tambahkan beberapa script berikut:
background
alamat
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:
Script
Sebelum <td>
<img src="images/ecoliving_2_06.png" width="108" height="130"
alt=""></td>
Sesudah <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:
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:
<body style="background-image:url(images/back.png); background-
repeat:repeat-x;">
Selamat Mencoba
