هيكل الموقع

By


يعتبر هيكل الموقع ضروري جداً لإظهار موقعك بشكل جيد ولهذا قم بتصميم هيكل موقعك بحذر .



هيكل الموقع


تضع أغلب المواقع محتوى مواقعها في العديد من الأعمدة (يتم تشكيلها مثل المجلات ومواقع الأخبار) .
يتم استخدام العديد من الأعمدة من خلال وسوم <table> أو <div> ولكن يجب إضافة بعض تصاميم CSS لتحديد مكان العمود وخلفيته وألوانه التي تظهر في صفحة الويب .



هيكل الموقع – استخدام الجداول tables


أسهل طريقة لإنشاء أعمدة لتقسيم صفحة الويب هي استخدام وسم <table>
في المثال يظهر لنا جدول يحتوي على 3 أسطر و 2 أعمدة , تم تمديد العمود الأول والأخير من خلال استخدام اللاحقة colspan

مثال
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr><tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr><tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2011 W3Schools.com</td>
</tr>
</table>


المثال



العنوان الرئيسي للموقع


القائمة
HTML
CSS
JavaScript		محتوى الموقع هنا
جميع الحقوق محفوظة © المعهد العربي للبرمجة



ملاحظة : على الرغم من أن الجداول جميلة عند تشكيل هيكل صفحة الويب إلا أن الجداول صممت لإضافة بيانات مجدولة فقط وليست في تصميم الموقع .


هيكل الموقع – استخدام وسم <div>


ان عناصر div تستخدم لدمج عناصر HTML وجعلهم في مجموعة واحدة
في المثال التالي نستخدم 5 عناصر div لإنشاء هيكل أعمدة للموقع وإظهار نفس النتيجة السابقة عند استخدام الجداول

<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">العنوان الرئيسي للموقع</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>القائمة</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
المحتوى هنا</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
جميع الحقوق محفوظة © المعهد العربي للبرمجة
</div>
</div>


شاهد المثال




المحتوى هنا





نصائح مفيدة

الميزة الهامة عند استخدام CSS في ملف تصميم خارجي ستتمكن من تعديل هيكل موقعك بسهولة كبيرة كما يمكنك تعديل هيكل جميع صفحات موقعك من خلال ملف واحد فقط .
لدراسة لغة CSS يمكنك الذهاب الى قسم دورة CSS
بسبب أن استخدام الهيكل عند التصميم من البداية صعب جداً لهذا كخوة أولى يمكنك اختيار "قالب" جاهز , يمكنك البحث في جوجل للحصول على قالب معين كما يمكنك التعديل عليها حسب ماتريد .

ليست هناك تعليقات:

إرسال تعليق