در سلسله آموزشهای طراحی سایت آنلاینر به کدنویسی بصورت tablebase پرداختیم.
در این مقاله قصد معرفی طراحی بدون جداول (table less) را داریم.
DIV:
کدنویسی بصورت TABLEBASE معایب زیادی داشت که طراحان وب رغبت زیادی به استفاده از آن از خود نشان نمیدهد. همانطور که گفتیم این تنها روش برای تعیین موقعیت عوامل صفحه وب نیست. روش دیگر برای این کار استفاده از تگ DIV در صفحه وب میباشد. تگ DIV چون صفات و خصوصیات خود را از CSS دریافت میکند انعطاف بسیار بالایی نسبت به جداول دارد که همین ویژگی آن را از جداول متمایز میکند.
نمونه زیر نحوه عملکرد یک تگ DIV را نشان میدهد.
[html]
<html>
<head>
<style>
.box{
width:100px;
height:100px;
}
</style>
</head>
<body>
< div class="box">
متن تست
</div>
</body>
</html>
[/html]
در مثال بالا میبینید که برای درج یک باکس در صفحه وب تنها کافیست که یک تگ DIV را باز کرده و سپس آنرا ببندید.
تمام معایبی که در آموزش قبل از جداول صحبت کردیم در این روش برطرف شده است.
بعنوان مثال اگر تگی را به اشتباه باز کرده و یا ببندید پیدا کردن این عیب به نسبت راحت تر از عیب یابی در جداول است.
میخواهیم مثالی که در آموزش قبل با جدول طراحی کردیم را در این مثال بر اساس DIV پیاده کنیم تا انعطاف ذیری این روش برای شما بیشتر ملموس شود.
| Row1, Cell 1 | Row1, Cell 2 | Free Column | ||
| Row2, Cell 1 | Row2, Cell 2 | |||
| Cell 1 | Cell 2 | Cell 3 | Cell 4 | |
| Free Row | ||||
کدهای CSS
[html]
.myGrid {
direction:ltr;
width:300px;
height:100px;
}
.myGrid .column {
float:left;
width:99px; /* 100px – 1px border-right */
border-right:1px solid #CCC;
}
.myGrid .column:first-child {
width:98px; /* 100px – 1px border-right/left */
border-left:1px solid #CCC;
}
.myGrid .column .mediumCell {
height:24px; /* 25px – 1px border-bottom */
border-bottom:1px solid #CCC;
line-height: 24px;
}
.myGrid .column .mediumCell:first-child {
height:23px; /* 25px – 1px border-bottom/top */
border-top:1px solid #CCC;
line-height: 23px;
}
.myGrid .column .mediumCell div {
float:left;
width:49px; /* 50px – 1px border-left of .mediumCell */
height:24px; /* 25px – 1px border-bottom of previous .mediumCell */
line-height: 24px;
}
.myGrid .column .mediumCell div:first-child {
width:48px; /* 50px – 1px border-left/right of .mediumCell */
border-right:1px solid #CCC;
}
.myGrid .column.tall {
height:73px; /* 75px – 1px border-bottom/top */
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
line-height: 73px;
}
.myGrid .wide {
width:298px; /* 300px – 1px border-left/right */
height:24px; /* 25px – 1px border-bottom */
line-height: 24px;
float:left;
clear:left;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
}
[/html]
کدهای HTML
[html]
<div class="myGrid">
<div class="column">
<div class="mediumCell">Row1, Cell 1</div>
<div class="mediumCell">Row2, Cell 1</div>
<div class="mediumCell">
<div>Cell 1</div>
<div>Cell 2</div>
</div>
</div>
<div class="column">
<div class="mediumCell">Row1, Cell 1</div>
<div class="mediumCell">Row2, Cell 1</div>
<div class="mediumCell">
<div>Cell 1</div>
<div>Cell 2</div>
</div>
</div>
<div class="column tall">Free Column</div>
<div class="wide">Free Row</div>
</div>
[/html]
میبینید که چون برای ایجاد باکس ها و موقعیت ها از DIV و CSS استفاده میکنیم ویژگی های بسیار زیادی در دسترس خواهد بود.
و نکته آخر : طراحی صفحه وب بر اساس جدول نه تنها کمکی به شما نخواهد کرد بلکه قدرت انعطاف شما را محدود و سرعت بارگزاری سایت شما را کاهش خواهد داد.
در آموزش بعد به کار با جدول ها در html میپردازیم.
با آنلاینر همراه شوید …
