Pada artikel Membuat Website Sederhana Dengan Dreamweaver - Lesson 1 kita telah bersama-sama membuat kerangka dasar dari website yang akan kita buat. Dan pada artikel kali ini kita membuat header, footer dan sidebar untuk website kita ini. Dan tools yang akan kita gunakan juga masih sama yaitu dreamweaver dan tentunya anda juga sudah membuat site untuk projek anda bukan. Jika semuanya sudah mari kita lanjutkan pekerjaan kita hehehe.
Untuk memulai pekerjaan kita, kali ini akan saya mulai dari design header, header sendiri terdapat pada bagian atas halaman website. Biasanya header berisi logo utama dari si website atau perusahaan yang mempunyai website tersebut. Anda bisa mendesain sendiri logo header anda dengan aplikasi pengolah gambar yang anda punya dan yang anda bisa tentunya. Buatlah gambar berukuran 900x300px untuk header anda dan desain sebagus mungkin . Simpan dengan nama "banner.png" setelah itu masukan desain header anda ke dalam folder "project2" yang ada di dalam htdocs. Namun akan lebih baik jika diletakkan didalam sebuah folder khusus gambar. Jadi buat dulu sebuah folder didalam folder "project2" dan beri nama "img".
Folder "img" ini dibuat untuk menyimpan file-file berjenis gambar untuk website kita agar tatanan file di dalam web kita lebih terstruktur dan mudah untuk dimaintenance. Langkah selanjutnya adalah membuat file html baru dan beri nama "header.php". Sementara itu, pada index.html ubah namanya menjadi index.php, kenapa? karena kita akan memasukan koding php di dalam file index kita. Kembali ke header.php, buka code header.php kemudian hapus semua kode/script yang ada. Jika sudah dihapus, kembalikan ke design mode.
Lihat pada sidebar files explorer di dreamweaver, apakah sudah ada folder image yang kita buat tadi? Jika belum klik tombol refresh dan kembali lihat , disana akan muncul tambahan folder "img". Tekan tombol (+) dan muncul "banner.png". Tarik banner.png dari fils explorer ke dalam header.php dan lepaskan, maka akan muncul sebuah gambar di header.php. Simpan header.php dengan cara "CTRL+S". Dengan demikian kita telah selesai membuat header untuk web kita.
Selanjutnya kita akan membuat bagian footer, caranya hampir sama dengan membuat header. buat file baru dan save as footer.php. Buka mode Code dan hapus semua script didalamnya dan kembali ke mode design. Pada mode desain isikan dengan tulisan "Copyrght@2015.Belajar Web Programming" atau buatlah sesuai dengan keinginan anda. Setelah itu simpan file dan kemudian kita akan kembali menggarap halaman index.php.
Buka halaman index.php dan disana kita telah mempunyai tabel dengan kolom bertuliskan header, menu, footer, sidebar dan konten. Blok tulisan header yang ada pada index.php , pada bagian properties pada bagian bawah dreamweaver anda akan menemukan Horz dan Vert, pada bagian combo horz pilih center, ini membuat konten yang ada pada kolom header menjadi ditengah. Lakukan juga pada kolom menu dan footer. Sehungga kodingnya enjadi seperti ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0">
<tr>
<td colspan="2" align="center">Header</td>
</tr>
<tr>
<td colspan="2" align="center">Menu</td>
</tr>
<tr>
<td width="20%">Menu</td>
<td width="80%">konten</td>
</tr>
<tr>
<td colspan="2" align="center">footer</td>
</tr>
</table>
</body>
</html>
Jika sudah, kita akan memasukan header.php dan footer.php ke dalam index php. Caranya :
- Masuk mode design, lalu blog tulisan Header kemudian klik code mode dan akan terlihat script website kita dan secara otomatis tulisan Header yang kita blok pada design mode tadi juga akan terlihat masih diblok pada code mode.
- Hapus "Header" lalu tuliskan script berikut "<?php include('header.php') ?>" , tuliskan saja yang didalam tanda petik(") dan perhatikan penulisannya. Kemudian simpan.
- Lakukan hal yang sama pada "footer" hanya scriptnya sedikit berbeda "<?php include('footer.php') ?>" . Save dan selesai.
Coba perhatikan pada penulisan script header dan footer , bagian yang berbeda adalah nama dari file yang akan kita selipkan pada halaman index. Pada bagian header yang akan kita selipkan adalah header.php sehingga penulisannya <?php include('header.php') ?> dan pada bagian footer kita akan menyelipkan footer,php sehingga ditulis <?php include('footer.php') ?>. Jika sudah maka kode/scriptnya akan menjadi seperti ini.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0">
<tr>
<td colspan="2" align="center"><?php include('header.php') ?></td>
</tr>
<tr>
<td colspan="2" align="center">Menu</td>
</tr>
<tr>
<td width="17%">Menu</td>
<td width="83%">konten</td>
</tr>
<tr>
<td colspan="2" align="center"><?php include('footer.php') ?></td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0">
<tr>
<td colspan="2" align="center"><?php include('header.php') ?></td>
</tr>
<tr>
<td colspan="2" align="center">Menu</td>
</tr>
<tr>
<td width="17%">Menu</td>
<td width="83%">konten</td>
</tr>
<tr>
<td colspan="2" align="center"><?php include('footer.php') ?></td>
</tr>
</table>
</body>
</html>
dan tampilan dalam browser menjadi seperti gambar dibawah ini:
Mantap dah artikelnya
ReplyDeletehttp://oplosanessen.com
kak dari wizard dong
ReplyDeletebertambah ilmu tentang web menggunakan dreamweaver,,,makasih ilmunya,,
ReplyDeletejangan lupa kunjungi website saya : https://nurrizkiana.mahasiswa.atmaluhur.ac.id/
website kampus saya :http://www.atmaluhur.ac.id/