Erluvi - Web Design

Hari ini hari Jumat, besok hari Sabtu... saatnya untuk... ah Out Of Topic (Kata member KasKus 'OOT' nih). :D

Sudah lama gak ngisi blog nih. Maklum aja deh, lg masa transisi, habis resign dr Content Provider di Surabaya, sekarang kerja di IT Consultant di Jakarta Pusat (ngedeketin nyonya nih :P). Judulnya aneh banget ya... hehehe. Maksudnya pengen niru judul tutorial nya O'Reilly untuk yg basic, pengennya sih kyk gini Tableless Layout - On The Nutshell coba deh translate ke Indonesia asal2an gitu, jadinya kan Tableless Layout - Pada Kulit Kacang... hahahaha... garing...

Okay, saya pengen mengawali dgn sebuah kutipan dari wikipedia:

Clever implementation of tableless design can produce web pages with fewer HTML tags thus reducing page download times. Using external style sheets to position page elements means more mark up language may be cached and further reduce download times for subsequent pages using the same resources.

Kira2 artinya kyk gini neh bos:

Implemetasi tableless design yg baik dapat menghasilkan website dengan lebih sedikit tag HTML yang dapat mengurangi download time. Menggunakan CSS untuk menentukan letak elemen halaman dapat meng-cache lebih banyak Mark-up Language dan mengurangi download time untuk beberapa halaman dengan resource CSS yang sama.

Nah untuk mengawali, asumsikan saya (atau anda) ingin membuat layout sebuah website dengan 4 cell standar, yaitu: Header, Left Menu Bar, Content, dan Footer. Mapping nya kayak di gambar di bawah nih:

Kalo dengan table, cukup create table dengan 2 kolom dan 3 baris, trus baris paling atas dan bawah di-merge (pake Dreamweaver), simple banget, apalagi kalo desain nya export an dari Photoshop atau Fireworks. Tapi coba liat source nya, untuk membuat sebuah cell aja perlu 3 tag: <table><tr><td>, dan hal ini yang dibilang wikipedia tadi membuat download time bertambah.

Sekarang coba kita implementasikan Tableless Layout (spoiler: saya baru belajar dan bisa kemaren nih, jgn bilang siapa2 ye...). Kali ini, saya pengen kasih contoh pake website yg sekarang lg saya garap. Biar kayak demo masaknya Rudi Choiruddin, nih saya kasih liat hasil jadinya dulu.

Kira2 kayak gitu deh ntar jadinya, kalo jelek jgn dicela, kalo bagus jgn ditiru :D. OK, here we go...

1. Pertama-tama, kita buat bagian untuk container. Container ini berfungsi sebagai 'pembungkus' layout yang akan kita buat nanti. Secara fisik dapat diartikan boundary cell terluar layout itu sendiri. Cell ini kita beri tag id='container' untuk memanggil Style ID dari CSS dengan nama #container.

   <div id="container">
   ...........
   </div>
   
   

2. Setelah itu, bikin file CSS baru, trus bikin ID dengan nama 'container'. Ini nanti gunanya untuk menentukan behavior dari kolom container itu sendiri.

   #container {
       margin: 20px auto;
       width: 1000px;
       text-align: left;
       background-color:#FFFFFF;
       background-image:url(../images/bg_horz.jpg);
       background-repeat:repeat-y;
       border: 8px solid #243C7F;
   }

   Dari situ, kita mendapatkan sebuah cell dengan lebar 1000px dgn border selebar 8px. Saya menentukan margin untuk mencegah isi cell berhimpit dengan border.

3. Sekarang waktunya buat bagian isi dari container itu. Masih di dalam cell container, kita buat cell baru dengan id 'header'. Selanjutnya kita define sebuah style ID untuk header, dengan nama 'header'. (Tag untuk membuat cell baru, tidak saya tulis lagi, udah cukup jelas tuh di bagian 1)

   #header {
   width: 1000px;
   text-align: left;
   background-color:#FFFFFF;
   }

   Sama dengan header, kita buat juga cell dengan ID: 'leftbar', 'rightbar', dan 'footer'.
   (Tag untuk membuat cell baru, tidak saya tulis lagi, udah cukup jelas tuh di bagian 1)

   #leftbar {
   float:left;
   margin-left: 20px auto;
   width: 200px;
   text-align: left;
   }

   disini ada parameter float:left, parameter ini berguna untuk menempatkan cell pada sisi kiri container, dan kita buat selebar 200px.

   #rightbar {
   float:right;
   margin-left: 20px auto;
   width: 800px;
   text-align: left;
   }

   Kebalikan dari 'leftbar', style ID 'rightbar' ditujukan untuk cell yang berisi content dari website kita nantinya. Kita posisikan pada bagian kanan container, dengan lebar 800px, didapatkan dari lebar container (1000px) dikurangi lebar menu bar (200px). Disini parameter float memainkan peranan penting, karena tanpa parameter tersebut, cell akan menumpuk satu sama lain, yang merupakan efek dari behavior default dari tag <div>, yang selalu menumpuk dr atas ke bawah.

   #footer {
       background-color:#243C7F;
       clear:both;
       height: 20px;
       vertical-align: top;
   }

   Selanjutnya kita buat cell 'footer' yang sudah menjadi ritual para web developer, untuk menempatkan status copyright pada bagian ini (meski kebanyakan gak bener2 di-copyright-kan, hehehehe). Nah ada satu parameter lagi, yaitu clear: both. Parameter ini berfungsi untuk membuat cell leftbar dan rightbar menjadi transparan (clear), karena biasanya tag <div> dengan parameter float warna background-nya bakal menutupi warna background dibawahnya, dalam hal ini warna background dari cell container, barangkali saja, nantinya kita ingin membuat background image pada 'container', tentunya hal tersebut sangat mengganggu.
   (Tag untuk membuat cell baru, tidak saya tulis lagi, udah cukup jelas tuh di bagian 1)

4. Nah dari sini, kira2 semua hal yang kita butuhkan untuk membuat layout template dengan standar W3 Tableless sudah kita buat semua. Dan hasilnya akan seperti dibawah ini:

   

5. Hasil akhir dari source code HTML nya kira2 seperti ini nih bos:

   <!-- div for the container -->
   <div id="container">
   
       
       <!-- div for the header -->
       <div id="header">
   ...................................
   </div>
       
   
       <!-- div for the left sidebar -->
       <div id="leftbar">
   .................................
       </div>
       
   
       <!-- div for the content -->
       <div id="rightbar">
   ................................
       </div>
       
       <!-- div for the header -->
       <div id="footer">
   ..............................
       </div>    
   
   </div>
   <!-- End of Container -->

6. Cell nya masih tipis2 tuh emang, tapi begitu content yang dibuat dimasukin situ semua, bakalan melar sndiri kok, hasil dari implementasi Tableless Layout saya, bisa dilihat di bagian awal blog saya ini.
7. Tips tambahan, setelah anda selesai membuat layout dgn standar W3Tableless, anda bisa mem-validasi layout anda pada website w3tableless.com. Anda copy-paste URL website anda pada form Verify Your Tableless Site, lalu klik Check. Apabila website anda sudah memenuhi standar W3Tableless, maka akan muncul pesan seperti dibawah ini (pamer dikit, website saya udah 100% tableless... hore...hore...)

Selamat Mencoba yah... kalo mungkin tutorial saya ada yang salah atau kurang, tulis aja di comment, entar saya usahain reply ke e-mail anda.

Practices makes better, Sharing made it perfect