my first tutorial ever !!!
Behind the scene :
awalnya g pengen bikin tutorial css mulai dari dasar sampai advance (bertahap), tapi setelah dipikir pikir tutorial yg kaya gitu udah banyak. Tinggal google terus masukin keywords "css tutorial" keluar deh bejibun. Jadi disini g langsung studi kasus aja.
The tutorials :
yak!!! langsung aja, kita mo bikin yg kek gini . Cara g bikinnya :
1.Layouting make software image editing (terserah mo make apa, g make photoshop).
buat new document ukuran 800 x 600 px terus kasi guide kanan kiri 50 px. see screenshot.
2. Buat layer baru, terus dengan menggunakan rectangular marquee tool (M) buatlah seleksi di dalam guide tadi. Fill foreground(alt+backspace)dgn warna kesukaan lo (mine #99cc33). see screenshot.
3. Klik 2 kali di layer baru tadi untuk menampilkan Layer style window, terus masukkan settingan berikut. Walla!!! layoutnya dah jadi.
4. Terus dengan make crop tool (C) bikin croppingan dengan height sekitar 5 px. see screenshot.
5. File>Save For Web (Alt+Shift+Ctrl+S). pake settingan ini. Save dengan nama file wrapper.png.
6. HTML part. Buat file css dgn nama style.css dan masukkan kode berikut:
/* CSS Document */
html { margin: 0 auto; }
body {
text-align: center;
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
background:url(images/wrapper.png) repeat-y;
width: 800px;
text-align: left;
}
7. Buat file html dengan nama index.html, masukkan kode berikut:
<!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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title of page</title>
<style type="text/css" media="all">
@import "style.css";
<style>
</head>
<body>
<div id="wrapper">
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</body>
</html>
8. Save dan coba preview di browser.
Untuk sementara tutorialnya cm sebatas wrappernya doang, kapan2 mungkin g bikin yg full mulai dari layout, wrapper, header sampai contentnya. Ini contoh jadi nya yg sudah lengkap dgn header dan content nya.
skip to main |
skip to sidebar
Illustrations + Personal Playground
Blog Archive
About Me
- paipai
- Hello :), name's Dhani but you can call me Pai,i'm a freelance graphic designer and illustrator
Copyright © 2009 www.dantearaujo.net. Designed by Dante Araujo.
4 comments:
pai....tuhan bilang
"lo gak perlu bilang-bilang kalo lo nyari gw. lo baru mikir mau nyari gw aja gw udah di samping lo. masalahnya adalah, apakah lo berusaha keras buat melihat gw yang ada di samping lo..."
apakah saya menggurui?
heheh
ahahahah ga menggurui sama sekali ko...I'm on a journey to find God....ehehhe udah kaya nabi Musa aja
wah.. first tutorial nih :D
eh dhan, emang untungnya apa sih pake image yang ekstensinya .png?
lebih baguskah dari .jpeg?
wah g baru liat komen yg ini, sorry2..
overall png emang lebih bagus dari jpeg sayangnya png cm bisa ke pake pd browser2 baru, yg lama2 ga bisa
Post a Comment