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

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

شاطر | 
 

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

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

♣ مشَارَڪاتْي » : 1962
♣ التسِجيلٌ » : 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-
انتقل الى:  
جميع الحقوق محفوظة  لـمنتديات كولا ماكس
 Powered by Aseer Al Domoo3 ®colamax.ahlamontada.com
حقوق الطبع والنشر©2013 - 2014
جميع المواضيع والمشاركات المكتوبة تعبر عن وجهة نظر صاحبها .. ولا تعَبر بأي شكل من الأشكال عن وجهة نظر إدارة منتديات كولا ماكس .
سحابة الكلمات الدلالية