Hmmm...emang sih pada awalnya sempat kepikiran kayak gitu.
Lha gimana nggak, wong liat deret script-nya aja udah bikin puyeng bin mbulet. Apalagi kalo ngerjainnya??
Nah, kira-kira seperti itulah pikiran sesat saya pada saat awal mula mempelajari pemrograman Web beberapa waktu yang lalu (Don't Try This at Home!!! (>_<) )
Lhadala...lha kok ternyata, semakin lama dipelajari, si yang namanya pemrograman berbasis web ini lumayan menyenangkan. Yaaaa....meskipun bisa dibilang sayya yang punya blog ini juga "belum" (bukan berarti nggak = semoga 'ndang' bisa =D )dapat dikatakan ahli juga. He..He...
Okeh...kembali ke laptop.
Jadi, pada artikel kali ini, saya akan mencoba sedikit membahas tentang pembuatan desain layout dengan menggunakan CSS, ato Cascading Style Sheet.
CSS ini sendiri merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.
Ceritanya, pada jaman bahula dulu..sebelum CSS menjadi standar untuk mendesain halaman web seperti sekarang, halaman web di desain menggunakan tag <table>. Jadi kayak dibuat dulu desainnya, dalam format .psd atau jpeg, lalu di slice atau di potong-potong (bukan mutilasi) menjadi bagian–bagian terpisah. Setelah itu dibuat tabel dengan ukuran yang sesuai, lalu desain tadi di “tempel” pada tabel sebagai image yang melekat pada tabel, atau sebagai background. Kelemahan dari cara seperti ini adalah, halaman web menjadi berat karena kolom – kolom penyusun table <tr> dan <td> diberi tambahan atribut image source. Side effect dari hal ini adalah halaman web menjadi padat dan tidak SEO friendly
Nah...sehingga jadilah cara selip-menyelip tabel saat ini dihindari untuk digunakan lagi, dan sebagai gantinya adalalah menggunakan division.
Oke, utuk tahap pertama..maka kita buat lebih dahulu desain layout halaman web-nya seperti di bawah ini.
Nah, dari kerangka itu selebihnya kita bisa mengutak-atiknya untuk mencipatakan halaman web yang kita inginkan. Bisa ditambahkan foto, slogan, motto, atau apalah sesuai keinginan Anda, tentunya agar tampilan web ini kelihatan lebih menarik.
Contoh hasilnya, adalah seperti pada gambar di bawah ini.
Nah...ternyata meskipun masih merupakan layout sederhana, tapi hasilnya cukup menggembirakan, bukan??? (setidaknya bagi saya yang baru belajar web. He..He..)
Untuk source code secara lengkapnya, dapat diunduh disini.
Yupz...selamat mencoba, dan semoga bermanfaat...(n_n)
No comments:
Post a Comment