Layout Web Tanpa Tabel Untuk AJAX,membuat layout CSS

February 13, 2008 at 7:31 pm

Layout Web Tanpa Tabel Untuk AJAX

Melanjutkan tutorial ajax yang lalu, tetapi kali bukan fokus pada ajax itu sendiri, tapi bagaimana membuat tampilan user interface buat ajax. Kita tahu sendiri bahwa ajax akan memanipulasi tampilan tanpa merefresh layar, lalu tag HTML apa saja yang bisa digunakan untuk membangun tampilan web berbasis AJAX ? simak terus

Lebih baik lagi jika website anda sudah memenuhi standar XHTML versi berapapun, kalau bisa ya level strict 1.0. Kenapa dengan level ini ? apa saja yang dibutuhkan agar web saya bisa dikatakan strict ? salah satu syarat level strict adalah layout utama tidak boleh menggunakan table, harus menggunakan css untuk mengatur layout. Selain itu harus memiliki DTD yang sesuai dengan level ini. Artikel ini akan membahas bagaimana cara membuat tampilan web tanpa menggunakan table secara cepat dan mudah. Dan tentu saja kita akan menggunakan CSS, bisa dibilang ini adalah css tingat menengah, jika anda masih awam dengan CSS, silahkan baca disini. Nah, ajax lebih baik berjalan pada interface tanpa table, sebagai gantinya yaitu tag DIV. Kenapa harus susah-susah ? karena tag table kurah fleksibel untuk dimanipulasi, dan mungkin juga kebanyakan tag, akhirnya ukuran dokumen menjadi lebih besar, hasil akhirnya web anda menjadi lebih lambat.

Langsung saja pada intinya, siapkan 1 buah file HTML. Script CSS nya akan dijadikan 1 dengan HTML, lebih simple. Berikut ini kode HTML dan CSS nya

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>Desain tanpa table by Bimoweb.com</title>
<style type=”text/css”>
#main{
width:700px;
margin:0 auto;
border:1px solid #808080;
padding:2px;
}
#menu-kiri{
width:130px;
float:left;
border:1px solid #808080;
margin-right:2px;
}
#menu-kanan{
width:130px;
float:left;
border:1px solid #808080;
margin-left:2px;
}
#isi-tengah{
width:430px;
float:left;
border:1px solid #808080;
background-color:#ffa980;
}
#footer{
padding:1px;
margin:1px;
border:1px solid #808080;
text-align:center;
}
#header{
padding:1px;
margin:1px;
border:1px solid #808080;
text-align:center;
height:100px;
background-color:#804040;
}
.clear{
float:none;
clear:both;
}
body{
font-family:tahoma;
font-size:12px;
}
/*—— lanjutan, optional saja kok—-*/
#menu-kiri div, #menu-kanan div{
padding:2px;
margin:2px;
border:1px solid #004000;
background-color:#ffc5a8;
}</style>

</head>
<body>
<div id=”main”>
<div id=”header”>Ini adalah Header</div>
<div id=”menu-kiri”>
<div>Menu1</div>
<div>Menu2</div>
<div>Menu3</div>
<div>Menu4</div>
<div>Menu5</div>
</div>
<div id=”isi-tengah”>ini adalah isi website<br />

ini adalah isi website<br />
ini adalah isi website<br />
ini adalah isi website<br />
ini adalah isi website<br />
ini adalah isi website<br />
</div>

<div id=”menu-kanan”>
<div>Menu1</div>
<div>Menu2</div>
<div>Menu3</div>
<div>Menu4</div>
<div>Menu5</div>
</div>
<div class=”clear”></div>
<div id=”footer”>? 2008 by Bimoweb.com</div>
</div>
</body>
</html>

yang perlu diperhatikan adalah script css berikut

.clear{
float:none;
clear:both;
}

script diatas berguna untuk menyeimbangkan tampilan, coba anda hilangkan script diatas, dan refresh layar anda, maka tampilan akan berubah, dan ini akan membuat anda kesal, karena tampilan bisa berbeda pada masing-masing browser yang berbeda. Pada IE biasanya tampil baik, tidak cacat, tetapi pada mozilla tampilannya akan kacau. Sebagai catatan untuk menguji tampilan, gunakan selalu browser mozilla, kerena render enginenya lebih ketat dibanding IE.

Kelemahan layout tanpa table adalah desain yang dihasilkan relatif lebih sederhana dibandingkan dengan layout lain. Pernah teman saya menilai website yang sangat sederhana, sudah banyak yang menggunakan desain seperti itu, saya bilang itu adalah desain tanpa menggunakan table, dan lihat, dia kebingungan dengan istilah itu, sekarang dia sering tanya soal css sama saya, he he. Tetapi sekarang desain tanpa table sudah lebih berkembang, sudah banyak kreasi yang dihasilkan, contohnya theme wordpress, blogger template, semuanya tanpa menggunakan table, apalagi dengan hadirnya CSS 2.0 yang semakin dikembangkan.

Jika dilihat, untuk membangun tampilan seperti diatas, dengan menggunakan css, hanya membutuhkan beberapa baris kode saja, berbeda dengan layout yang menggunakan table, dibutuhkan banyak baris kode HTML, dan tentu saja akan memperbesar dokumen HTML anda. Ada prinsip bahwa semakin besar ukuran file yang diambil dari server, maka dibutuhkan waktu yang sepadan, ~~kecuali bandwidth 1 ISP anda pakai sendiri~~. Hal ini juga termasuk optimasi web, sehingga aplikasi web anda menjadi lebih cepat.

Jika memiliki pertanyaan tentang desain tanpa table, bisa tanya-tanya di komentar ini, pasti akan saya jawab.

Pihak Terkait

Filed under: Ajax, CSS, Tutorial

Iklan Premium

Jual Cincin Perak
Cincin yang sangat indah ini cocok untuk dipakai oleh pasangan suami istri atau pasangan yang baru tunangan
Harga Rp350.000
Beli Sekarang.

5 Responses to “Layout Web Tanpa Tabel Untuk AJAX”

Membuat table multicolumn dengan div dan css | Tutorial Website, on May 7th, 2008 at 8:17 am Said:

[...] http://bimoweb.com/layout-web-tanpa-tabel-untuk-ajax.html Jangan Lupa Bookmark Yah… Hide [...]
nikson, on July 6th, 2008 at 3:46 pm Said:

Makasih ilmunya mas…
Saya belum ktemu mas konsep css menggantikan frame.
Kalau diframe link cukup sekali saja dibuat..Isi link tampil di tempat yang sama tanpa kehilangan daftar link sebelumnya.
Mohon dibantu mas.. Makasih

[Reply]
dyah, on November 13th, 2008 at 2:19 am Said:

kOk seTelaH Q cOba hasiL akHirnya gaG sama yacH kya yG da d cOntoHnya…

cUman mUncUl tulisaNnya aJa…

Jdi bIngUng nE…

kIra2 aPa yAcH yg saLah..???

[Reply]
adit, on November 13th, 2008 at 5:04 am Said:

help me please

[Reply]
joe, on March 2nd, 2010 at 1:33 am Said:

nda isa gan!
cuman muncul
————————————————————-
Ini adalah Header
Menu1
Menu2
Menu3
Menu4
Menu5
ini adalah isi website
ini adalah isi website
ini adalah isi website
ini adalah isi website
ini adalah isi website
ini adalah isi website
Menu1
Menu2
Menu3
Menu4
Menu5
? 2008 by Bimoweb.com
——————————————————
gini ajah !

[Reply]

Bimo Hery Prabowo