الدرس 01

هيكل الموقع

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

---

هيكل الموقع

تضع أغلب المواقع محتوى مواقعها في العديد من الأعمدة (يتم تشكيلها مثل المجلات ومواقع الأخبار) .
يتم استخدام العديد من الأعمدة من خلال وسوم <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>

شاهد المثال

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

القائمة
HTML
CSS
JavaScript

المحتوى هنا