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.