April 7th, 2005
Wah, banyak sekali respon yang saya dapat dari tutorial-tutorial kemarin. Dan seperti janji saya, untuk meneruskan, bagaimana membuat layout dengan 2 kolom yang sama tinggi. Hasil dari tutorial ini bisa dilihat disini.
Betul seperti yang dikomentari mas Priyadi, bahwa kita perlu bantuan sebuah gambar yang nantinya akan diulang-ulang menggunakan kata kunci repeat.
Mari kita mulai.
Pertama, tentukan lebar layout yang akan dibuat. Untuk lebar yang ideal, adalah 700 pixel, atau bisa kurang dari itu. Tentukan warna background layout dan sidebar, untuk mempermudahnya, gunakan software Color Schemer.
Kedua, buka Adobe Photoshop anda, dan buat image baru, dengan lebar 700 pixel dengan lebar cukup 200 pixel saja. Untuk lebih jelasnya, bisa dilihat pada gambar dibawah ini
Ketiga, rubah satuan yang ada di photosop menjadi pixel. Klik Menu Edit -> Prefences -> Units & Rulers. Pada frame Units, ganti Ruler menjadi pixel, kemudian klik OK. Perhatikan menu toolbox, pilih “Rectangular Marquee Tool” untuk menyeleksi bagian sidebar. Perhatikan jendela info, buat seleksi sehingga bagian lebar menjadi 230 pixel, dan tinggi 200 pixel.
Keempat, beri warna pada bagian sidebar. Pada toolbox, klik gambar kaleng cat, atau tekan huruf G, Paint Bucket Tool. Kode warna yang saya gunakan adalah #EFEFDE. Hasilnya, bisa dilihat pada gambar dibawah ini.
Keempat, ambi saja secuil. Caranya, pada toolbox, tahan pada tombol kotak bergaris putus-putus, akan muncul bagian tersembunyi seperti gambar dibawah ini.
Pilih Single row, dan klik sembarang pada kanvas. Akan terlihat garis putus-putus yang berkedap-kedip. Tekan tombol Ctrl+C yang berarti copy, kemudian buat file baru, klik menu File -> New, dan langsung saja klik OK. Akan keluar kanvas baru yang panjang, teruskan dengan menekan tombol Ctrl+V yang berarti paste.
Kelima, simpan file tersebut berekstensi gif. Saya sendiri memberi nama back.gif. Dari sini, kita sudah berhasil membuat gambar yang nantinya akan dibutuhkan dalam penggunaan layout.
Buat halaman HTML, lakukan seperti dibawah ini
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “xhtml11.dtd”>
<html>
<head>
<title>Ini judulnya, cuma test doang kok!</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”author” content=”siape aje” />
<meta name=”description” content=”ape aje” />
<meta name=”keyword” content=”ape, ye” />
<link rel=”stylesheet” type=”text/css” href=”lagi.css” />
</head>
<body>
<div id=”kotakbesar”>
<div id=”header”>
tutorial dot kom
</div>
<div id=”sidebar”>
<p>ini bagian sidebarnya, bagian samping, juga bisa dijadikan tempat menu.</p>
<p>ini cuma kata kata yang bisa membuat sidebar terlihat lebih tinggi. ha ha ha</p>
</div>
<div id=”content”>
nah, ini isi-nya, juga bisa disebut konten, atau apalah namanya, ya terserah anda.
</div>
<div id=”bottom”>
HasilBelajarDariDidats.net<br />
Tutorial oleh: didats<br />
This page is valid XHTML and CSS
</div>
</div>
</body>
</html>
Kemudian, kita buat file CSS persis dengan tutorial sebelumnya. Tapi untuk kali ini saya menamakannya “lagi.css”.
body {
text-align:center;
background:#8A8A43;
font-family:Verdana,Sans-serif;
font-size:11px;
margin:0px;
}#kotakbesar {
width:700px;
text-align:left;
margin:0px auto;
background:#FFF url(“back.gif”);
}
#header {
height:80px;
padding-top:20px;
background:#D3D3A5;
font-family:Georgia,Tahoma,Verdana,Sans-serif;
font-size:25px;
padding-left:10px;
}#sidebar {
float:left;
width:230px;
padding:5px;
line-height:20px;
}
#content {
width:430px;
float:right;
line-height:20px;
}
#bottom {
clear:both;
background:#C5C588;
padding:5px;
}
Yang perlu diperhatikan adalah pada file CSS #kotakbesar. Disana tertulis seperti ini:
background:#FFF url(“back.gif”);
Penggunaan kode heksa desimal #FFF adalah memberi warna background putih pada kotakbesar. Diikuti dengan url(“back.gif”) yang berarti kotak besar akan dipenuhi dengan gambar back.gif yang kita buat tadi. Penggunaan warna putih, berguna untuk user yang tidak meload gambar saat browsing, agar kotakbesar tidak transparan nantinya.
Sampai disini dulu tutorialnya, kalau ada yang kurang efisien, atau ada cara yang lebih mudah, saya terima usulnya. Dan sebelumnya, saya ucapkan terima kasih. Wah, 3 buah posting terakhir saya semuanya tentang tutorial, kalau begini terus, bisa-bisa saya diprotes majalah komputeraktif nih. :P *lirik mba okky dan om kere*
11 Responses
upload hasil jadinya juga dong :D
btw, kalau sidebar dan content di float ke kiri dan ke kanan, trus isi sidebar lebih panjang daripada content, dan yang akan diberi background tambahan itu adalah sidebar, bukannya jadi ngga keliatan masalahnya ya? (masalah: engga keliatan sama tinggi)
http://www.mhs.cs.ui.ac.id/~iman20/ngetes/duakolom3.html
apakah masalah yang lo maksud itu seperti itu?
sayang gak ada file contohnya dats.ato mungkin lebih bagus hasilnya juga diupload dats biar enak liatnya
iang:
maksudnya apa ya, ndak ngerti.. *bingung*
yg gw liat, layout yang kamu sertakan, bagian content ndak di float, tapi hanya dibuat margin.
trus gimana maksudnyah? *maap, masih ndak mudeng*
tutorial PHP…!!!! huehehe..
didats:
hehe.. berarti yang kita omongin emang aga2 gak nyambung :D
gw cuma mo ngeliatin masalah yg gw hadapi kalau mau bikin layout dua kolom begini.. misalnya bagian yg di samping itu mau dikasih background, tapi backgroundnya kepotong cuma setinggi isinya aja..
nahh.. supaya si background terlihat sampe bawah, containernya aja yang dikasih background berupa gambar..
hmm, css layouting is full of manipulation, hihihi
tambahan:
makanya mas pri juga bilang kalau di layout yang lo bikin ini, ngga perlu pake background yg direpeat vertikal :D karenaa.. yaaa.. backgroundnya itu sama warnanya
iang:
oh… maksudnya itu toh… background bisa ditaruh di kotakbesar, juga bisa di content. tergantung kebiasaan aja… :D
ya, layout ini memang ndak perlu background pada sidebar, karena memang ndak cocok, bawahnya landai, lagipula, memang ndak cocok.. :D
senangnya bisa bikin desain, gw mah bisanya cuma pantengin cssvault.com aja sambil ngiler dikit :P~
Iya nih nunggu hasil jadinya
Biar LOOK and SEE and LEARN :)