گروه آموزش طراحی سایت ۱۲ خرداد ۱۳۹۲ بدون نظر 1046 بازدید

در سلسله آموزشهای طراحی سایت آنلاینر به کدنویسی بصورت tablebase پرداختیم.

در این مقاله قصد معرفی طراحی بدون جداول (table less)   را داریم.

DIV:

کدنویسی بصورت TABLEBASE معایب زیادی داشت که طراحان وب رغبت زیادی به استفاده از آن از خود نشان نمیدهد. همانطور که گفتیم این تنها روش برای تعیین موقعیت عوامل صفحه وب نیست. روش دیگر برای این کار استفاده از تگ DIV در صفحه وب میباشد. تگ DIV چون صفات و خصوصیات خود را از CSS  دریافت میکند انعطاف بسیار بالایی نسبت به جداول دارد که همین ویژگی آن را از جداول متمایز میکند.

نمونه زیر نحوه عملکرد یک تگ DIV  را نشان میدهد.

<html>
<head>
<style>
.box{
width:100px;
height:100px;
}
</style>
</head>
<body>
< div class="box">
متن تست
</div>
</body>
</html>

در مثال بالا میبینید که برای درج یک باکس در صفحه وب تنها کافیست که یک تگ DIV را باز کرده و سپس آنرا ببندید.
تمام معایبی که در آموزش قبل از جداول صحبت کردیم در این روش برطرف شده است.
بعنوان مثال اگر تگی را به اشتباه باز کرده و یا ببندید پیدا کردن این عیب به نسبت راحت تر از عیب یابی در جداول است.
میخواهیم مثالی که در آموزش قبل با جدول طراحی کردیم را در این مثال بر اساس DIV پیاده کنیم تا انعطاف ذیری این روش برای شما بیشتر ملموس شود.

Row1, Cell 1Row1, Cell 2Free Column
Row2, Cell 1Row2, Cell 2
Cell 1Cell 2Cell 3Cell 4
Free Row

کدهای CSS


.myGrid {
direction:ltr;
width:300px;
height:100px;
}

.myGrid .column {
float:left;
width:99px; /* ۱۰۰px - ۱px border-right */
border-right:1px solid #CCC;
}
.myGrid .column:first-child {
width:98px; /* ۱۰۰px - ۱px border-right/left */
border-left:1px solid #CCC;
}

.myGrid .column .mediumCell {
height:24px; /* ۲۵px - ۱px border-bottom */
border-bottom:1px solid #CCC;
line-height: ۲۴px;
}
.myGrid .column .mediumCell:first-child {
height:23px; /* ۲۵px - ۱px border-bottom/top */
border-top:1px solid #CCC;
line-height: ۲۳px;
}

.myGrid .column .mediumCell div {
float:left;
width:49px; /* ۵۰px - ۱px border-left of .mediumCell */
height:24px; /* ۲۵px - ۱px border-bottom of previous .mediumCell */
line-height: ۲۴px;
}
.myGrid .column .mediumCell div:first-child {
width:48px; /* ۵۰px - ۱px border-left/right of .mediumCell */
border-right:1px solid #CCC;
}

.myGrid .column.tall {
height:73px; /* ۷۵px - ۱px border-bottom/top */
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
line-height: ۷۳px;
}

.myGrid .wide {
width:298px; /* ۳۰۰px - ۱px border-left/right */
height:24px; /* ۲۵px - ۱px border-bottom */
line-height: ۲۴px;
float:left;
clear:left;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
}

کدهای HTML


<div class="myGrid">
<div class="column">
<div class="mediumCell">Row1, Cell ۱</div>
<div class="mediumCell">Row2, Cell ۱</div>
<div class="mediumCell">
<div>Cell ۱</div>
<div>Cell ۲</div>
</div>
</div>
<div class="column">
<div class="mediumCell">Row1, Cell ۱</div>
<div class="mediumCell">Row2, Cell ۱</div>
<div class="mediumCell">
<div>Cell ۱</div>
<div>Cell ۲</div>
</div>
</div>
<div class="column tall">Free Column</div>
<div class="wide">Free Row</div>
</div>

میبینید که چون برای ایجاد باکس ها و موقعیت ها از DIV و CSS استفاده میکنیم ویژگی های بسیار زیادی در دسترس خواهد بود.

و نکته آخر : طراحی صفحه وب بر اساس جدول نه تنها کمکی به شما نخواهد کرد بلکه قدرت انعطاف شما را محدود و سرعت بارگزاری سایت شما را کاهش خواهد داد.

در آموزش بعد به کار با جدول ها در html میپردازیم.

با آنلاینر همراه شوید …

دیدگاه ها بسته شده اند.