Template PSD: cara temenku

Penasaran aja.. temen bikin template dari PSD caranya kok bukan di slice.. Tetapi langsung bikin! Apa karena dia udah masternya?? atau jangan-jangan ada cara yang lebih baik. Tapi perlu di akui temen gw ini udah masternya.. Bagaimana dengan gw.. yah bagian yang memperbaiki

biasanya gw kl liat dari youtube, biasanya di slice.. Tapi namanya template dari orang khan bentuknya itu  kadang kacau. jadi di slice malah bikin pusing?!?

Sebenarnya cara yang akhirnya gw temukan adalah.. slice yang posisinya di atas, tengah dan bawah. Lalu di slice lagi.. Namun kalau di slice hasilnya malah jadi Table! padahal khan pengennya dinamis (pake div)

jadi bisa dibilang cara ribet temen gw itu bener donk!?

Template : menata tampilan

Sebenarnya saya tidak bisa mengatakan tutorial sebelumnya jelas. Pada dasarnya style masing-masing orang berbeda. Cara sebelumnya buat beberapa orang kurang sesuai karena terlihat boros dan banyak sekali perulangan.

Padahal perulangan yang bagus adalah perulangan bagian yang minor bukan yang major. Dimaksud bagian yang major adalah bagian seperti body, header, mid, footer dan bagian dibawahnya.

Melihat dari artikel sebelumnya, kita melihat bahwa terjadi perulangan dibagian mainbody. Seharusnya mainbody hanya 1 bukan 3!!

Ada alasan sendiri kenapa bentuknya seperti sebelumnya (banyak div). Hal itu untuk mempermudah programer (dalam contoh ini CI) dalam membagi-bagi scriptnya dalam bentuk dan bagian yang terperinci.

Membangun template sederhana (DIV)

Sebelum masuk ke DIV, mari ingat pada script terdahulu

HEADER
Menu	Content web
Footer

disini kita melihat struktur dari DIV
apabila kita ingin membuat menjadi bentuk div, minimal yang akan kita buat seperti ini

<div class='mainbody'>

<div class='header'></div header>

</div>

<div class='mainbody'>

<div class='mid'>

<div class='midleft'></div><div class='midright'></div>

</div mid>

</div>

<div class='mainbody'>

<div class='footer'></div footer>

</div>

kira-kira hasilnya seperti dibawah:

Membangun template sederhana (table)

Di buku lama, untuk membuat sebuah template kita memulai dari table.Table adalah salah satu tag sederhana yang harus kita ketahui terlebih dahulu. Tetapi dalam prosesnya penggunaan table sangat tidak di anjurkan dalam membuat template.

Untuk mudahnya mari membuat template sederhana dengan script sebagai berikut:

<table width="100%" border="1" bgcolor="lightblue">
<tr><td colspan=2>HEADER&nbsp;</td></tr>
<tr><td width=30%>Menu&nbsp;</td><td width=70%>Content web&nbsp;</td></tr>
<tr><td colspan=2>Footer&nbsp;</td></tr>
</table>

---

Hasil:

HEADER
Menu	Content web
Footer

Bila diperhatikan, table di atas masih terdapat lowong di antara sisinya. Untuk menghilangkan kita dapat memanfaatkan cellspasing dan cellpadding