Professional Documents
Culture Documents
Untuk memulai desain web, buatlah rencana desain web dengan membuat layout web
tersebut dahulu. Pada latihan ini, kami membuat rencana desain web sebagai berikut :
Implementasi Layout pada Tabel Dreamweaver
Setelah kita menentukan sketsa layout web yang akan kita buat, selanjutnya layout dapat
dibuat dengan bantuan table.
1. Klik menu insert > table akan tampil kotak dialognya. Isikan pada
• Rows : 4
• Columns : 3
• Table width : 790 pixels
• Border thickness : 0
• Cell padding : 0
• Cell spacing : 0
2. Jika sudah sesuai, tekan OK, akan tampak di layar monitor table dengan 4 baris
(rows ) dan 3 kolom ( columns ).
3. Agar web kita tampak dilayar berada tepat ditengah-tengah, pilih pada properties
nya bagian Align : Center ( Lihat Gambar )
Pada tahapan ini kita sudah berhasil membuat table sesuai layout yang di inginkan.
Untuk selanjutnya kita lakukan manipulasi table sesuai layout yang ada sebagai berikut :
1. Tabel baris pertama dibiarkan apa adanya karena nantinya masing- masing kolom
1, kolom 2 dan 3 akan di isi images web yang akan dibuat header. Images yang
akan dipakai sebagai header sebaiknya diletakkan pada folder
c:\xampp\hatdocs\images. Hal ini dimaksudkan untuk mempermudah manajemen
file pada web apabila file dan gambar sudah sangat banyak.
2. Blok semua kolo m pada baris kedua menggunakan mouse dengan cara klik mouse
tanpa dilepas pada table yang akan dimanipulasi baris dan kolomnya, lalu klik
menu Modify > Table > Merge Cells, selanjutnya kolom-kolom pada baris kedua
akan menyatu menjadi satu kolom saja. Lihat Gambar.
3. Kemudian pada baris ketiga kita memerlukan modifikasi dua kolom, maka
bloklah kolom ke 2 dan ke 3 dengan klik tekan dan jangan dilepas sampai di
kolom ke 3 baru dilepas, kemudian klik menu Modify > Table > Merge Cells.
4. Terakhir, pada baris keempat, kita juga hanya memerlukan 1 kolom saja seperti
pada baris kedua, maka caranya sama dengan langkah ke 2.
Penjelasan :
• Columns adalah banyaknya kotak horizontal
• Rows banyaknya kotak secara vertikal
• Cells Spacing jarak antara satu sel dengan sel lainnya.
• Cell Padding jarak anatara tepi sel dengan obyek yang ada di dalamnya.
• Border Thickness: Garis pinggir dari table ( baik baris maupun kolom )
Baris ketiga mempunyai dua kolom, pada kolom 1 akan ditempati link- link atau
tombol yang berfungsi untuk navigasi pada website yang kita buat.
Sebelum navigasi dibuat, sebaiknya buat daftar tombol navigasi pada web yang akan
kita buat. Misalnya :
1. Home – file : index.html
2. About me – file : about.html
3. Contact us – file : contact.html
4. My Family – file : family.html
5. My Friend – file : friend.html
Navigasi yang akan dibuat ini bisa dituliskan pada kertas catatan atau dokumen teks
supaya nantinya mudah di copy paste saat membuat navigasi.
• Rows : 5,
• Columns: 1,
• Table Width: 100 pixels,
• Border : 0,
• Cell padding : 0 dan
• Cell spacing : 0.
Catatan : file harus disimpan terlebih dahulu dan diberi nama index.html kalau tidak,
tombol navigasi belum bisa dibuat.
4. Pada table yang baru kita buat, letakkan kursos pada baris pertama, lalu klik menu
Insert > Interactive Image > Flash button akan tampil kotak dialognya.
Pilih pada Style : ( pilih sesuai keinginan ),
Button text : Home
klik OK untuk mengakhiri (Lihat Gambar)
5. Masukan ke empat tombol lainnya satu persatu caranya sama dengan langkah 3.
Kita hanya mengubah pada bagian Button teks dan Link nya saja.
Buat Background menu dengan warna Hijau Tua.
Content Untuk Kolom Utama
Konten utama merupakan menu home yang tampil pada saat web pertama kali di akses.
Cara membuatnya adalah sebagai berikut :
1. Letakkan kursos pada kolom kedua di baris ketiga, lalu pada properties pilih
bagian Vert : Top. Kemudian, tekan tombol Ship+Enter di Keyboard untuk
pindah baris. Tuliskan teks SELAMAT DATANG DI WEBSITE KAMI.
2. Untuk selanjutnya tekan tombol Enter pada keyboard.
3. Klik Menu Insert > Image akan tampil kotak dialognya, carilah gambar gadis.gif.
Hasilnya terlihat pada gambar dibawah ini
4. Tulislah teks informasi secukupnya di sebelah kanan gambar.
5. Agar teks tidak berada di bawah gambar, lakukan teknik sebagai berikut :
Pilih gambar tersebut dan atur propertiesnya isikan pada :
> H Space : 20
> Align : Left.
Teks informasi akan berpindah ke sebelah kanan gambar ( tepat berdamp ingan
dengan gambar ). Lihat Gambar :
Keterangan :
Space : Untuk menambah area kosong di sekeliling gambar V.
Space untuk menambah area kosong di atas dan di bawah gambar.
H Space untuk menambah area kosong di samping kanan dan kiri gambar.
Align : Untuk menentukan perataan antara gambar dan teks. Misalnya Align : Left (
perataan kiri ), gambar tepat berada di sebelah kiri teks.
Bagian Footer
Bagian footer terletak baris keempat, yang akan kita isikan tulisan misalnya
Copyright © Tahun 2009 By Ucha Design. Cara membuat nya sebagai berikut :
1. Letakkan kursor pada baris keempat, lalu pilih properties nya dengan warna BG
#000000. ( Warna Hitam)
2. Letakkan teks Copyright © Tahun 2009 By Ucha Design lalu blok tulisan tersebut
dan pilih properties untuk warna putih kode #FFFFFF, font, ukuran ya ng sesuai
dengan keinginan kita dapat dilihat pada properties.
3. Untuk memasukkan karekater copyright di Dreamwaver, klik menu Insert >
HTML > Special Character > Copyright.
Footer
Title website
• Sebelum menjalankan web dilocal pastikan file sudah tersimpan dengan nama
index.html. Sebab penamaan tersebut sudah didefiniskan pada Apache Server
yang tidak akan mengakses langsung apabila diberi nama selain index.html.
• Jalankan web browser dengan perintah http://localhost/(namafolderanda) maka
web anda harus tampil di monitor, selama tidak ada kesalahan pada pendefinisan
situs, dan penamaan file.
Catatan : nama file dianjurkan dibuat dengan huruf kecil semua untuk mempermudah
penulisan kembali dan hal ini sangat berpengaruh apabila suatu saat web kita letakkan di
server linux yang kebanyakan dipakai oleh server hosting internet .
Membuat Halamam About Me, Contact Us, dan lain- lain, ikuti prosedur sebagai berikut:
1. Masih pada halaman utama ( file: index.html ) simpan file tersebut dengan nama
baru Save As: about.html ( lihat daftar menu tombol navigasi).
2. Pada saat ini halaman baru berada pada file : about.html. Kontent untuk kolom ke
dua baris ke tiga diganti isinya sesuai rubrik About Me. Isikan foto penunjang
disesuaikan dan diganti sesuai keinginan dan selanjutnya disimpan kembali.( File
> Save )
3. Prosedur yang sama juga berlaku untuk halaman- halaman lainnya yaitu
contact.html, family.html, friend.html.
Simpan dengan
nama lain
misalnya :
about.html
Selamat mencoba…..