Sigit Purnomo

Blog Archives


Membangun Layout Website dengan Mudah dan Cepat menggunakan CSS Framework Bagian #1

Posted: April 7th 2009

Salah satu tahap yang memakan waktu lama pada saat membangun sebuah website adalah ketika membuat desain visual website (mockup) dan mengkonversi desain visual tersebut ke dalam CSS dan XHTML. Seringkali ketika seorang desainer web melakukan proses pembuatan desain visual website menggunakan perangkat lunak pengolahan gambar seperti PhotoShop, Firework maupun lainnya, terkadang konsep grid dilupakan. Hal ini akan membuat proses konversi desain visual tersebut ke dalam CSS dan XHTML menjadi lama dan merepotkan. Alternatif solusi dari permasalahan di atas, salah satunya adalah dengan menggunakan CSS framework. CSS framework mampu mempercepat proses pembuatan desain visual website dan juga konversi desain visual website tersebut ke dalam CSS dan XHTML. Hal ini dikarenakan sudah ada panduan yang disediakan oleh CSS framework, baik ketika melakukan proses pembuatan desain visual maupun ketika mengkonversi desain visual tersebut ke dalam CSS dan XHTML. Beberapa contoh dari CSS framework misalnya 960 Grid System dan Blueprint CSS. 960 Grid System … Read more


Tutorial Konversi Visual Design Bagian Header ke CSS dan XHTML

Posted: October 27th 2007

Saya belum expert di bidang ini tetapi melalui tulisan ini saya akan mencoba menyampaikan tutorial mengenai bagaimana melakukan konversi dari visual design situs web/weblog ke dalam bentuk CSS dan XHTML (Web Standard) atau sering disebut juga dengan istilah XHTMLizer. Tutorial ini saya susun berdasarkan apa yang saya lakukan pada saat membuat theme “the dark side” untuk weblog ini. Fokus bagian pertama dari tutorial ini adalah bagian header dari visual design. Berdasarkan gambar di atas (kalau kurang jelas lihat header weblog), dapat dilihat bahwa header dari visual design terdiri atas beberapa elemen, yaitu menu, vector image, weblog title, box about me, search form dan bloginfo. Elemen-elemen ini berguna untuk menentukan struktur CSS maupun XHTML-nya. Langkah pertama yang kita lakukan dalam tutorial ini adalah membuat CSS-nya terlebih dahulu. Headerwrap Bagian ini adalah wrapper untuk seluruh elemen yang ada di dalam header. Pada bagian ini kita mengatur margin dan padding-nya ke 0px (biasanya … Read more



© 2019 Universitas Atma Jaya Yogyakarta
css.php