دروس تصميم وتعديل القوالب : تتمة شرح أكواد منطقة الجسم body. ج(9)

في هذه التدوينة سنشرح مزيدا من الأوامر المكونة لقسم body وذلك من خلال الاكواد التالية :


<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Title' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='Blogger Template | JournalBlue' type='Text'/>
</b:section>
</div>

</div></div> <!-- end outer-wrapper -->

</body>

1
نلاحظ أن كل قسم أو جزء يكون مبدوءا بالعنصر div وبعده مباشرة العنصر b:section وكل قسم قسم div و b:section له معرف يميزه

identifier يحدد بالأمر id . يمكنك أيضا أن تعرف من خلال الفئات class.
وهذه التعريفات والفئات تعتبر مرجعا تحيل عليه عندما تريد تنسيق عنصرdiv بواسطة CSS ، بحيث تحيل على على كل معرف id في أكواد قسم body مثلا في قسم css بواسطة الرمز # اما الفئات class فتحيل عليها في قسم CSS بواسطة نقطة .

مثـــــــــــال :
نجد مثلا العنصر
في قسم الجسم، لكن لتحديد خصائصه من حيت اللون والخط والمقاييس ... فإن هذا يتم في قسم CSS وستجد الإحالة عليه في هذا القسم بالكود التالي :
#main-wrapper وهناك عناصر أخرى تكون مسبوقة بالنقطة وهي الفئات class.

ولفهم المعرفات والفئات أكثر يمكن زيارة الموضوعين التاليين في موقع html.net بالعربية ، وبالإنجليزية ستجد دروسا مفصلة في w3schools.com.

2
كل عنصر يقع ضمن b:section يعتبر قطعة widget وهو الذي يسمى عنصر الصفحة page element . مثلا:

Header هو قطعة widget . لاحظ أن هذا هذا الكود يتضمن العبارة التالية :
maxwidgets='1' showaddelement='no'

فـ maxwidgets=’1’ تعني أن أقصى عدد من القطع يمكن أن تحتوي عليها منطقة الرأس header قطعة واحدة بمعنى انه لا يمكنك أن تضيف أية قطعة أخرى عن طريق " إضافة أداة" أو تحريكها عن طريق السحب والإفلات إلى منطقة الرأس.
أما كود : 'showaddelement='no فيعني زر " "إضافة أداة " في عناصر الصفحة لن يظهر في منطقة الرأس.

في الجزء الأساسي من القالب : main-wrapper سنجد فقط 'showaddelement='no والتي تعني انه لا تستطيع إضافة أداة غير أنه يمكن أن تضيف أداة أعلى أو أسفل منطقة المحتوى عن طريق السحب والإفلات .

وفي العمود الجانبي sidbar-wrapper سنجد الكود التالي : 'prefered=yes'yes وهذا الأمر يعني أنه يمكنك إضافة قطع بقدر ما تشاء عن طريق زر "إضافة أداة " في عناصر الصفحة.
مع التنبيه إلى انه يمكنك دائما نقل القطع إلى حيث تريد عن طريق السحب والإفلات.

ونفس الامر بالنسبة للمنطقة السفلى footer.


إرسال تعليق

4 تعليقات

  1. جزاك الله خيرا علي هذة المعلومات القيمة

    ردحذف
  2. جزاكم الله خيرا وبجد انا تقريبا قرأت اكثر من ثلاث ارباع المدونة وبجد انا مستنى باقى السلسلة دى

    ردحذف
  3. جزاك الله كل خير

    شرح رائع

    تحياتى

    أمـ,ـيره

    ردحذف
  4. بارك الله فيك

    ردحذف