Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



7. MEMBERI STYLE DI BAHAGIAN CONTENT
December 29, 2009
Posted by: Fauzie


Bahagian header sudah kita selesaikan. Sekarang mari kita memberi stail di bahagian content pula.

Jika anda perhatikan contoh yang telah saya buat, bahagian content mempunyai background image. Seperti image header, kita akan menggunakan image yang telah saya upload di Photobucket.



Cari kod ini, kod CSS untuk bahagian content:

#content {
background: green;
}

Padam atau delete perkataan "background: green;" gantikan dengan kod-kod yang berwarna maroon seperti yang ditunjukkan di bawah ini:

#content {
padding: 10px 10px;
clear: both;
background: url(http://i425.photobucket.com/albums/pp331/fauzi6009/
g11line20.gif) repeat fixed; border-top: 1px solid #999;
}


Klik Preview dan Save Template. Content kita telah mempunyai image di bahagian latarbelakangnya.

Sekarang kita sampai di bahagian yang mana saya kira memberi sedikit cabaran untuk membuatnya--memasukkan 'isi' dalam bahagian content ini.

Dalam contoh design, saya telah meletakkan lokasi (nama tempat), address email, url blog dan sebagainya. Disamping itu saya juga telah memasukkan image-image. Seperti sebelum ini, semua image hendaklah diupload di Photobucket untuk mendapatkan url. Untuk latihan ini anda copy dan paste dahulu kod-kod yang diberi dan menukar nama lokasi, address email dan url blog kemudian.

Sila pastikan anda copy dan paste kod dengan betul kerana tanda-tanda seperti ";", ">", atau "/" boleh menyebabkan kod tidak berfungsi.

Sila cari kod seperti di bawah ini. Kemudian delete/padam perkataan "Content". Di bawahnya copy & paste kod-kod berwarna maroon.


<div id='content'>
<table>
<tr>
<td class='f'>location</td>
<td class='v'>
<div class='adr'>
<span class='locality' rel='me'><img border='0' hspace='10' src='http://i425.photobucket.com/albums/pp331/fauzi6009/company.png'/>Pasir Gudang</span>,
<span class='region'>Johor</span>
<div class='country-name' rel='me'><img border='0' hspace='10' src='http://i425.photobucket.com/albums/pp331/fauzi6009/company.png'/>Malaysia</div>
</div>
</td>
</tr>
<tr class='spacer'>
<td class='f'/>
<td class='v'/>
</tr>

<tr>
<td class='f'>email</td>
<td class='v'><a class='email' href='mailto:mfm6009@gmail.com' rel='me'><img border='0' hspace='10' src='http://i425.photobucket.com/albums/pp331/fauzi6009/emailme.gif'/>mfm6009@gmail.com</a></td>
</tr>

<tr>
<td class='f'>streamyx</td>
<td class='v'><a class='streamyx' href='mailto:mfauzie_@streamyx.com' rel='me'><img border='0' hspace='10' src='http://i425.photobucket.com/albums/pp331/fauzi6009/emailme.gif'/>mfauzie_@streamyx.com</a></td>
</tr>

<tr class='spacer'>
<td class='f'/>
<td class='v'/>
</tr>

<tr>
<td class='f'>blog</td>
<td class='v'><a class='url im offline' href='http://tip-buat-blog.blogspot.com' id='blog' rel='me'><img border='0' hspace='10' src='http://i425.photobucket.com/albums/pp331/fauzi6009/bloggericon.png'/>jom kita blog</a></td>
</tr>

<tr class='spacer'>
<td class='f'/>
<td class='v'/>
</tr>

<tr>
<td class='f'>skype</td>
<td class='v'><a class='url im offline' href='http://www.skype.com/' id='skype' rel='me'><img border='0' hspace='10' src='http://i425.photobucket.com/albums/pp331/fauzi6009/skype.png'/>fauzi6009</a></td>
</tr>

<tr>
<td class='f'>facebook</td>
<td class='v'><a class='url sn' href='http://tip-buat-blog.blogspot.com/' id='facebook' rel='me'><img border='0' hspace='10' src='http://i425.photobucket.com/albums/pp331/fauzi6009/facebook.png'/>fauzi6009</a></td>
</tr>

<tr>
<td class='f'>twitter</td>
<td class='v'><a class='url sn' href='http://twitter.com/' id='twitter' rel='me'><img border='0' hspace='10' src='http://i425.photobucket.com/albums/pp331/fauzi6009/twitter.png'/>twitter.com</a></td>
</tr>

<tr>
<td class='f'>flickr</td>
<td class='v'><a class='url sn' href='http://www.flickr.com/' id='flickr' rel='me'><img border='0' hspace='10' src='http://i425.photobucket.com/albums/pp331/fauzi6009/flickr.png'/>photo sharing</a></td>
</tr>

<tr>
<td class='f'>delicious</td>
<td class='v'><a class='url sn' href='http://delicious.com/' id='delicious' rel='me'><img border='0' hspace='10' src='http://i425.photobucket.com/albums/pp331/fauzi6009/delicious.png'/>book mark</a></td>
</tr>
</table>

</div>

Klik Preview. Jika ok dan anda dapat melihat template, sila klik Save Template. Apa yang dilihat mungkin tidak berapa cantik. Anda tidak perlu risau kerana banyak lagi styling tambahan yang perlu dibuat. Untuk mencantikkan "isi" yang yang buat tadi, kita akan beri "CSS rule" atau kod-kod baru.

Cari kod ini:

#footer {
background: orange;
height: 66px;
}


Di bahagian bawahnya, letakkan kod-kod berwarna maroon seperti yang ditunjukkan ini:

#footer {
background: orange;
height: 66px;
}
td.f {
width: 75px;
padding-right: 5px;
vertical-align: top;
text-align: right;
font-weight: bold;
color: #fff;
}
td.v {
vertical-align: top;
color: #fff;
}
tr.spacer {
height: 10px;
font-size: 0px;
}
a, a:visited {
color: #fff;
text-decoration: none;
}
a:hover {
color: lime;
text-decoration: none;
}


Klik Preview dan jika tiada apa-apa masaalah klik Save Template.