<div id="footer"></div>
Sekarang kita akan mengatur CSS untuk footer. Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Jika anda perhatikan semua susunan kode yang kita buat di file index.php tadi akan menjadi seperti ini :
Pada Design View, klik di dalam konten website anda kemudian ketikkan kata sambutan atau judul konten anda. Untuk Merubah format judul konten anda caranya blok judul konten anda kemudian pada panel property => menu format pilih Heading 1.
Untuk memberikan link pada judul konten caranya blok judul konten anda, kemudian pada panel properti isikan link yang akan dituju, jika belum ada isikan dengan # saja.
Di bawah judul anda bisa isikan gambar, tetapi sebelumnya pastikan gambar anda tempatnya dalam folder images, caranya Insert = > Image => pilih file gambar anda => klik ok. Untuk mengatur gambar anda silahkan atur pada panel property. Kali ini aku memakai gambar yang aku comot dari google dan lebarnya 600 pixel.
Di bawah gambar atau disamping gambar anda bisa memasukkan teks sesuka anda yang berhubungan dengan konten atau website anda. Atau anda ingin measukkan penggalan dari halaman profile anda, itu terserah anda.
Setelah toturial membuat website di dreamweaver ini kita akan memecah file index.php, kenapa perlu di pecah? ya jawabannya agar nantinya kita mudah dalam mengedit file-file tersebut.
Semoga Bermanfaat ;')
- Selector Type : Advanced (Ids, pseudo-class selectors)
- Selector : #footer
- Define in : style.css
Background:
- Background image : klik browse pilih footer.jpg dalam folder images
- Repeat : no-repeat
Block:
- Text align : Center
Box :
- Width : 860 pixel
- Float : Left
- Height : 80 pixel
- Pada bagian padding centang same for all, isikan 20 pixel
- Pada bagian margin centang same for all isikan 0 pixel
Jika anda perhatikan semua susunan kode yang kita buat di file index.php tadi 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>Websiteku</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a>
<p>Deskripsi website anda disini</p>
</div>
<div id="navigasi">
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<td><a href="index.php">Home</a></td>
<td><a href="#">Profile</a></td>
<td><a href="#">Gallery</a></td>
<td><a href="#">Contact</a></td>
</tr>
</table>
</div>
<div id="conten-wrapper">
<div id="conten"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Websiteku</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a>
<p>Deskripsi website anda disini</p>
</div>
<div id="navigasi">
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<td><a href="index.php">Home</a></td>
<td><a href="#">Profile</a></td>
<td><a href="#">Gallery</a></td>
<td><a href="#">Contact</a></td>
</tr>
</table>
</div>
<div id="conten-wrapper">
<div id="conten"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
Pada Design View, klik di dalam konten website anda kemudian ketikkan kata sambutan atau judul konten anda. Untuk Merubah format judul konten anda caranya blok judul konten anda kemudian pada panel property => menu format pilih Heading 1.
Untuk memberikan link pada judul konten caranya blok judul konten anda, kemudian pada panel properti isikan link yang akan dituju, jika belum ada isikan dengan # saja.
Di bawah judul anda bisa isikan gambar, tetapi sebelumnya pastikan gambar anda tempatnya dalam folder images, caranya Insert = > Image => pilih file gambar anda => klik ok. Untuk mengatur gambar anda silahkan atur pada panel property. Kali ini aku memakai gambar yang aku comot dari google dan lebarnya 600 pixel.
Di bawah gambar atau disamping gambar anda bisa memasukkan teks sesuka anda yang berhubungan dengan konten atau website anda. Atau anda ingin measukkan penggalan dari halaman profile anda, itu terserah anda.
Setelah toturial membuat website di dreamweaver ini kita akan memecah file index.php, kenapa perlu di pecah? ya jawabannya agar nantinya kita mudah dalam mengedit file-file tersebut.
Semoga Bermanfaat ;')
0 Komentar untuk " Membuat Footer di Website "