Erluvi -网络设计

Hari ini hari Jumat， besok hari Sabtu… saatnya untuk…啊在題目(Kata成員KasKus 『OOT』 nih)外面。 ：D

Sudah喇嘛gak ngisi博克nih。 Maklum aja deh， lg masa transisi， habis辭去二蘇拉巴亞， sekarang kerja di IT Consultant二雅加達Pusat (ngedeketin nyonya nih博士内容供应商：P)。 Judulnya aneh banget ya… hehehe。 基本Maksudnya pengen niru judul講解nya O'Reilly untuk的yg， pengennya sih kyk gini Tableless佈局-在堅果殼coba deh翻譯ke印度尼西亞asal2an gitu， jadinya kan Tableless佈局- garing Pada Kulit Kacang…的hahahaha……

好， saya pengen mengawali dgn sebuah kutipan達裡語 wikipedia ：

tableless設計的聰明的實施可能导致與少量HTML的網頁標記因而減少頁下载时间。 使用同樣资源，使用安置外在的样式表頁元素手段也许貯藏語言的更多標記和進一步減少隨後頁的下载时间。

Kira2 artinya kyk gini neh猜錯：

Implemetasi tableless設計yg baik dapat menghasilkan網站dengan lebih sedikit標記HTML楊dapat mengurangi下载时间。 Menggunakan CSS untuk menentukan letak elemen halaman dapat meng貯藏所lebih banyak标记语言丹mengurangi下载时间untuk beberapa halaman dengan資源CSS楊・ sama。

Nah untuk mengawali， asumsikan standar saya (atau anda) ingin membuat佈局sebuah網站dengan 4的細胞， yaitu ： 倒栽跳水，左目录杆，內容，丹步行者。 映射nya皮船二gambar di bawah nih ：

Kalo dengan桌， cukup創造桌dengan 2 kolom丹3 baris，變蒼白atas bawah二合併的丹(pake Dreamweaver)，簡單的banget， apalagi kalo desain nya出口的trus baris達裡語Photoshop atau煙花。 Tapi coba liat來源nya， untuk membuat sebuah細胞aja perlu 3標記： <table><tr><td>，丹hal ini楊dibilang wikipedia tadi membuat下载时间bertambah。

Sekarang coba kita implementasikan Tableless佈局(掠奪者： saya baru belajar丹bisa kemaren nih， jgn bilang siapa2 ye…)。 Kali ini， saya pengen kasih contoh pake網站yg sekarang lg saya garap。 Biar皮船演示masaknya Rudi Choiruddin， nih saya kasih liat hasil jadinya dulu。

Kira2皮船gitu deh ntar jadinya， kalo jelek jgn dicela， kalo bagus jgn ditiru ：D.好，這裡我們去…

1. Pertama-tama， kita buat bagian untuk容器。 容器ini berfungsi sebagai 『pembungkus』佈局楊阿肯人kita buat nanti。 Secara fisik dapat diartikan界限細胞terluar佈局itu sendiri。 細胞ini kita beri標記id='container』 untuk memanggil樣式ID達裡語CSS dengan nama #container。

   <div id= "容器" >
   ...........
   </div>
   
   

2. Setelah itu， bikin文件CSS baru， trus bikin ID dengan nama 『容器』。 Ini nanti gunanya untuk menentukan行為達裡語kolom容器itu sendiri。

   #container {
       邊際： 20px汽車;
       寬度： 1000px;
       文本排列： 左;
       背景顏色：#FFFFFF;
       背景圖像：URL (。/images/bg_horz.jpg);
       背景重複：重複y;
       邊界： 8px堅實#243C7F;
   }

   達裡語situ， kita mendapatkan sebuah細胞dengan lebar 1000px dgn邊界selebar 8px。 Saya menentukan邊際untuk mencegah isi細胞berhimpit dengan邊界。

3. Sekarang waktunya buat bagian isi達裡語容器itu。 Masih di dalam細胞容器， kita buat細胞baru dengan id 『倒栽跳水』。 Selanjutnya kita定义了sebuah樣式ID untuk倒栽跳水， dengan nama 『倒栽跳水』。 (標記untuk membuat細胞baru， tidak saya tulis lagi， udah cukup jelas tuh二bagian 1)

   #header {
   寬度： 1000px;
   文本排列： 左;
   背景顏色：#FFFFFF;
   }

   Sama dengan倒栽跳水， kita buat juga細胞dengan ID ： 『leftbar』， 『rightbar』，丹『步行者』。
   (標記untuk membuat細胞baru， tidak saya tulis lagi， udah cukup jelas tuh二bagian 1)

   #leftbar {
   浮游物：左;
   邊際左： 20px汽車;
   寬度： 200px;
   文本排列： 左;
   }

   disini ada參量浮游物：左邊，參量ini berguna untuk menempatkan細胞pada sisi kiri容器，丹kita buat selebar 200px。

   #rightbar {
   浮游物：权利;
   邊際左： 20px汽車;
   寬度： 800px;
   文本排列： 左;
   }

   『leftbar』 Kebalikan的達裡語，樣式ID 『rightbar』 ditujukan untuk細胞楊berisi內容達裡語網站kita nantinya。 Kita posisikan pada bagian kanan容器， dengan lebar 800px， didapatkan達裡語lebar容器(1000px) dikurangi lebar目录杆(200px)。 Disini參量浮游物memainkan peranan penting， karena tanpa參量tersebut，細胞阿肯人menumpuk satu sama說謊，楊merupakan efek達裡語行為缺省達裡語標記<div>，楊selalu menumpuk atas ke博士bawah。

   #footer {
       背景顏色：#243C7F;
       明白：兩個;
       高度： 20px;
       垂直排列： 上面;
   }

   Selanjutnya kita buat細胞『步行者』楊sudah menjadi禮節巴拉网络开发商， untuk menempatkan狀態版權pada bagian ini (meski kebanyakan gak bener2二版權kan， hehehehe)。 Nah ada satu參量lagi， yaitu明白： 兩個。 參量ini berfungsi untuk membuat細胞leftbar丹rightbar menjadi transparan (清楚)， karena biasanya標記<div> dengan參量浮游物warna背景nya bakal menutupi warna背景dibawahnya， dalam hal ini warna背景達裡語細胞容器， barangkali saja， nantinya kita ingin membuat背景图象pada 『容器』， tentunya hal tersebut sangat mengganggu。
   (標記untuk membuat細胞baru， tidak saya tulis lagi， udah cukup jelas tuh二bagian 1)

4. Nah達裡語sini， kira2 semua hal楊kita butuhkan untuk membuat佈局模板dengan standar W3 Tableless sudah kita buat semua。 丹hasilnya阿肯人seperti dibawah ini ：

   

5. Hasil akhir達裡語原始代码HTML nya kira2 seperti ini nih猜錯：

   <! -- 容器的div -->
   <div id= "容器" >
   
       
       <! -- 倒栽跳水的div -->
       <div id= "倒栽跳水" >
   ...................................
   </div>
       
   
       <! -- 左側杆的div -->
       " leftbar " <div的id= >
   .................................
       </div>
       
   
       <! -- 內容的div -->
       " rightbar " <div的id= >
   ................................
       </div>
       
       <! -- 倒栽跳水的div -->
       <div id= "步行者" >
   ..............................
       </div>    
   
   </div>
   <! -- 容器的末端 -->

6. 細胞nya masih tipis2 tuh emang， tapi begitu內容楊dibuat dimasukin situ semua， bakalan melar sndiri kok， hasil達裡語implementasi Tableless佈局saya， bisa dilihat二bagian awal博克saya ini。
7. 打翻tambahan， setelah anda selesai membuat佈局dgn standar W3Tableless， anda bisa mem-validasi佈局anda pada網站 w3tableless.com。 Anda拷貝漿糊URL網站anda pada形式核實您的Tableless站點， lalu klik檢查。 Apabila網站anda sudah memenuhi standar W3Tableless， maka阿肯人muncul pesan seperti dibawah ini (pamer dikit，網站saya udah 100% tableless… hore… hore…)

Selamat Mencoba yah… kalo mungkin講解saya ada楊salah atau kurang， tulis aja二評論， entar saya usahain回復ke電子郵件anda。

實踐做更好，分享做它完善