كولا ماكس ||سودانية الملامح .. عالمية الروئة ®


سودانية الملامح .. عالمية الروئة ®
 
الرئيسيةالرئيسية  اليوميةاليومية  س .و .جس .و .ج  بحـثبحـث  قائمة الاعضاءقائمة الاعضاء  المجموعاتالمجموعات  التسجيلالتسجيل  دخولدخول  

شاطر | 
 

 الدرس 01 – الهيكل

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
أبو نادر
Admin
Admin


♣ مشَارَڪاتْي » : 1944
♣ التسِجيلٌ » : 29/11/2012

مُساهمةموضوع: الدرس 01 – الهيكل   الأربعاء نوفمبر 30, 2016 8:55 pm


هيكل الموقع

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

هيكل الموقع

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



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

هيكل الموقع – استخدام وسم <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
بسبب أن استخدام الهيكل عند التصميم من البداية صعب جداً لهذا كخوة أولى يمكنك اختيار “قالب” جاهز , يمكنك البحث في جوجل للحصول على قالب معين كما يمكنك التعديل عليها حسب ماتريد .
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://colamax.ahlamontada.com
 
الدرس 01 – الهيكل
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
كولا ماكس ||سودانية الملامح .. عالمية الروئة ® :: اقسام تطوير المواقع والمنتديات :: قسم لغات البرمجة :: الدروس المتقدمة HTML-
انتقل الى: