في هذه التدوينة سنشرح مزيدا من الأوامر المكونة لقسم body وذلك من خلال الاكواد التالية :
نلاحظ أن كل قسم أو جزء يكون مبدوءا بالعنصر div وبعده مباشرة العنصر b:section وكل قسم قسم div و b:section له معرف يميزه
<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
identifier يحدد بالأمر id . يمكنك أيضا أن تعرف من خلال الفئات class.
وهذه التعريفات والفئات تعتبر مرجعا تحيل عليه عندما تريد تنسيق عنصرdiv بواسطة CSS ، بحيث تحيل على على كل معرف id في أكواد قسم body مثلا في قسم css بواسطة الرمز # اما الفئات class فتحيل عليها في قسم CSS بواسطة نقطة .
مثـــــــــــال :
نجد مثلا العنصر
في قسم الجسم، لكن لتحديد خصائصه من حيت اللون والخط والمقاييس ... فإن هذا يتم في قسم CSS وستجد الإحالة عليه في هذا القسم بالكود التالي :
#main-wrapper وهناك عناصر أخرى تكون مسبوقة بالنقطة وهي الفئات class.
ولفهم المعرفات والفئات أكثر يمكن زيارة الموضوعين التاليين في موقع html.net بالعربية ، وبالإنجليزية ستجد دروسا مفصلة في w3schools.com.
Header هو قطعة widget . لاحظ أن هذا هذا الكود يتضمن العبارة التالية :
maxwidgets='1' showaddelement='no'
فـ maxwidgets=’1’ تعني أن أقصى عدد من القطع يمكن أن تحتوي عليها منطقة الرأس header قطعة واحدة بمعنى انه لا يمكنك أن تضيف أية قطعة أخرى عن طريق " إضافة أداة" أو تحريكها عن طريق السحب والإفلات إلى منطقة الرأس.
أما كود : 'showaddelement='no فيعني زر " "إضافة أداة " في عناصر الصفحة لن يظهر في منطقة الرأس.
في الجزء الأساسي من القالب : main-wrapper سنجد فقط 'showaddelement='no والتي تعني انه لا تستطيع إضافة أداة غير أنه يمكن أن تضيف أداة أعلى أو أسفل منطقة المحتوى عن طريق السحب والإفلات .
وفي العمود الجانبي sidbar-wrapper سنجد الكود التالي : 'prefered=yes'yes وهذا الأمر يعني أنه يمكنك إضافة قطع بقدر ما تشاء عن طريق زر "إضافة أداة " في عناصر الصفحة.
مع التنبيه إلى انه يمكنك دائما نقل القطع إلى حيث تريد عن طريق السحب والإفلات.
ونفس الامر بالنسبة للمنطقة السفلى footer.
#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.
خارج الموضوع تحويل الاكوادإخفاء الابتساماتإخفاء