من الجدير بالذكر ان درسنا اليوم عن دورة تصميم المواقع بلغة html و css ولابد ان نعرف ان العناصر المطلوبة منا لتصميم اي صفحة ويب هي :
Block
وهي التي تظهر على السطر لوحدها وذلك مثل العناوين والفقرات.Inline
وهو مايمكن لعناصر أخرى الظهور بجانبها وذلك مثل الصور.Boxes
1وهي تلك العناصر التي يمكن من خلالها احتواء بعض العناصر الاخرى على سبيل المثال يمكن وضع صورة وفقرة نصية داخل نفس الصندوقالتحكم في توجيه العناصر
التوجيه العادي
لايمكن استخدام اي قاعدة وبذلك يكون المتصفح هو من يقوم باتباع ذلك التوجيه كما يجب
وهو ترتيب العناصر بدون اي تغيير
التوجيه النسبي
لابد من استخدام تلك القاعدة التالية:
يمكن التحكم في نسبة العنصر والذي يوجد هذا العنصر بداخله
على سبيل المثال فقرة 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;
}
يمكنك استخدام التعويم كذلك لتقوم بانشاء مربعات بجانب بعضها البعض
يمكن استعمال قاعدة
كود 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
ولقد تم إضافة عناصر جديدة لتقوم بتنظيم محتوى الصفحة معHTML 5 ويذكر انها:
- header وهو ذلك الجزء العلوي والذي يحتوي في الاغلب على الشعار ويليه القائمة nav
- main ويعد ذلك الجزء الرئيسي حيث يوجد به محتوى الصفحة
- article وهي المواضيع
- section وهو عبارة عن جزء من المحتوى
- aside وهو ذلك الجزء الجانبي
- footer ويعني الجزء السفلي
