تصميم المواقع ب html و css: الهيكل Layout
في هذا الدرس من دورة تصميم المواقع سنرى العناصر المكونة لصفحة ويب كاملة وكيفية تنظيمها والتحكم في أمكنة ظهورها. لفهم جيد لهذا الدرس شاهد الفيديو المرفق في نهاية الموضوع.
العناصر المطونة لصفحة ويب تنقسم لثلاثة أنواع:
Block
تظهر على السطر لوحدها مثل العناوين والفقرات..
Inline
يمكن لعناصر أخرة الظهور بجانبها مثل الصور..
Boxes
هي عناصر يمكن من خلالها احتواء عناصر أخرى. مثلا يمكن وضع صورة وفقرة نصية داخل نفس ال box.
يتم استعمال القاعدة التالية:
التحكم يتم نسبة للعنصر الذي يوجد هذا العنصر داخله. مثلا فقرة p داخل صندوق div. بعد ذلك تختار قيم التحكم للأعلى و اليمين أو اليسار...
هذه القاعدة تسمح بتوجيه العنصر لأي مكان داخل الصفحة. يعني أن العنصر لا يهتم بالعناصر الأخرى بل يذهب لأي مكان دون الأخذ بعين الإعتبار بقية العناصر ومكانها.
الجزء يبقى ثابتا في مكانه عند النزول لأضفل الصفحة.
عند استعمال القواعد أعلاه، تتداخل العناصر فيما بينها. لذلك يجب اختيار الاجزاء التي لها الأولوية في الظهور لفوق.
وضعنا z-index للعنوان مما يعني نه سيظهر فوق الفقرة.
يتم استخدام قاعدة Float لتوجيه العناصر لليمين أو اليسار. لا تنسى أن العناصر الأخرى تأخذ مكان العنصر الذي تم تعويمه.
العناصر المطونة لصفحة ويب تنقسم لثلاثة أنواع:
Block
تظهر على السطر لوحدها مثل العناوين والفقرات..
Inline
يمكن لعناصر أخرة الظهور بجانبها مثل الصور..
Boxes
هي عناصر يمكن من خلالها احتواء عناصر أخرى. مثلا يمكن وضع صورة وفقرة نصية داخل نفس ال box.
التحكم في توجيه العناصر
التوجيه العادي
لا يتم استخدام اية قاعدة بحيث يكون المتصفح هو الذي يقوم باتباع التوجيه كما هو. أي ترتيب العناصر دون اي تغيير.التوجيه النسبي
يتم استعمال القاعدة التالية:
التحكم يتم نسبة للعنصر الذي يوجد هذا العنصر داخله. مثلا فقرة p داخل صندوق div. بعد ذلك تختار قيم التحكم للأعلى و اليمين أو اليسار...
p.example {
position: relative;
top: 10px;
left: 100px;}
التوجيه المطلق
هذه القاعدة تسمح بتوجيه العنصر لأي مكان داخل الصفحة. يعني أن العنصر لا يهتم بالعناصر الأخرى بل يذهب لأي مكان دون الأخذ بعين الإعتبار بقية العناصر ومكانها.
p.example {
position: absolute;
top: 10px;
left: 100px;}
التوجيه الثابت
الجزء يبقى ثابتا في مكانه عند النزول لأضفل الصفحة.
.example {
position: fixed
}
التحكم في التداخل
عند استعمال القواعد أعلاه، تتداخل العناصر فيما بينها. لذلك يجب اختيار الاجزاء التي لها الأولوية في الظهور لفوق.
وضعنا z-index للعنوان مما يعني نه سيظهر فوق الفقرة.
h1 {
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 10px;
width: 100%;
background-color: #efefef;
z-index: 10;}
p {
position: relative;
top: 70px;
left: 70px;}
التعويم
يتم استخدام قاعدة Float لتوجيه العناصر لليمين أو اليسار. لا تنسى أن العناصر الأخرى تأخذ مكان العنصر الذي تم تعويمه.
img{
float: right:
}
إذا كنت لا تريد للعناصر الأخرى أن تحيط بالعنصر المعوم، يمكنك استعمال قاعدة الإخلاء Clear
هنا الصورة لن تقبل بوجود اي عنصر آخر على يسارها:
img{
float: right:
clear: left;
}
استعمال التعويم لإنشاء مربعات متراصة
يمكن استعمال قاعدة float لإنشاء مجموعة مربعات تصطف بجانب بعضها البعض:
كود css:
.column, .column2, .column3 {
width: 300px;
float: left;
margin: 10px;}
كود html:
<h1>The Evolution of the Bicycle</h1>
<div class="column1">
<h3>نص نص</h3> ...
</div>
<div class="column2">
<h3>نص نص</h3> ...
</div>
<div class="column3">
<h3>مص مص</h3> ...
</div>
لكن لا ينصح باستعمال الطريقة أعلاه، لأن inline-block تعمل أحسن وسنرى كيف ذلك في الفيديو.
هيكل الصفحة باستعمال HTML5
تمت إضافة عناصر جديدة لتنظيم محتوى صفحة مع النسخة رقم 5 من ال HTML نذكر نها:
- header الجزء العلوي وتحتوي غالبا على الشعار logo ثم القائمة nav
- main: الجزء الرئيسي حيث محتوى الصفحة
- article المواضيع
- section جزء من المحتوى
- aside الجزء الجانبي
- footer الجزء السفلي
شاهد الفيديو التالي لمعرفة طريقة تطبيق كل هذه القواعد:
لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله