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.
Sunday, February 26, 2006
Saturday, February 25, 2006
20th Century Boys 6:05 PM
"Mankind would not have made the new age, encountering the crisis at the end of last century, that almost wiped them out...if it weren't for "them" In 1969, "they" who were still in their youth, created a symbol. In 1997, as footsteps of the coming disaster slowly starts to show out, the symbol revives. This is a story about several boys, that save the world." Must read manga!!!! great story and plot.
Monday, February 06, 2006
Sunday, February 05, 2006
Saturday, February 04, 2006
TV Tour 11:43 AM
hasil tour g di beberapa situs TV nasional, iseng iseng browsing gara gara gak ada kerjaan bgt, dan ini pendapat g :
jd kalo ada yg tersinggung g so sorry (wew ada rima nya).
g disini ga b'maksud buat sok pintar kasi kritik sana sini, g jg masi belajar ko (noob bgt nih di dunia desain).
CMIIW
- Trans TV , terlalu banyak yg gerak gerak, bikin mata g kemana mana. dan d'oh.... itu Cut Tari nya ko di stretching stretching gitu sih, makin lebar deh bibirnya (seksi bo')
- TPI, masi underconstruction.logo barunya....makjang....susa berkata kata...dan itu tipo yg joget joget....dangdut bgt geto lohhh (abg bgt geto loh....>_<). bukan televisi PENDIDIKAN indonesia lagi keknya, tp televisi PENDANGDUTAN indonesia
- Indosiar warnanya rame betul,ungu...oren....biru...pink....ijo......coba d lu pindah dari link news ke programme ato ke link link yg lain, seperti berada di dua alam yg berbeda >_<
- RCTI not bad...not bad.....(halaman depannya doang)....sama dgn kasus indosiar..g terasa sedikit melompat ke 2 alam dari home ke link link yg lain. sedikit glitches antara header, isi ama footer di halaman home nya.
- SCTV humm.....well.....nice.....tp tipo nya masi kicil kicil dan bad loading...lama bukanya...
- Lativi another underconstruction
- ANTV whoahh....mata g langsung kaget, warnanya gejreng...jreng...jreng...tiponya kicil kicil....susye bacanya. harus......periksa.......mata......segera.......
- GlobalTV hanya mata g ato memang image nya yg burem burem.....dan d'oh ini teh nickelodeon indonesia?
- MetroTV well....bagus sih....tp ko oldschool bgt, g jd kek ngeliat situs yg udah 5 tahun ga di updet updet.
- TV7 overall....nice, cm masi ada sedikit glitches (g make firefox, ga tau kalo di ie)
jd kalo ada yg tersinggung g so sorry (wew ada rima nya).
g disini ga b'maksud buat sok pintar kasi kritik sana sini, g jg masi belajar ko (noob bgt nih di dunia desain).
CMIIW
Friday, February 03, 2006
Jazz poetry 11:36 AM
Jazz in the morning
makes your mood swing
Jazz in the day
makes it sway
Jazz in the night
makes you feel allright
makes your mood swing
Jazz in the day
makes it sway
Jazz in the night
makes you feel allright
