السبت، 31 أكتوبر، 2009

دروس تصميم وتعديل القوالب : تتمة شرح أكواد منطقة الجسم 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 التعليقات:

الدار العربية 8 ديسمبر، 2009 7:03 م  

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

dr_vet 9 ديسمبر، 2009 12:08 ص  

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

௮irO TЧė QυĕĕЙ 16 مايو، 2010 10:30 م  

جزاك الله كل خير

شرح رائع

تحياتى

أمـ,ـيره

غير معرف 16 يوليو، 2013 4:03 م  

بارك الله فيك

إرسال تعليق

أحدث الموضوعات

أحدث التعليقات

عن المدونة

المرشد الأمين إلى عالم التدوين
مدونة تهتم بالتدوين من الناحية التقنية- إنشاء المدونة، ضبط إعدادات المدونة، النشر ، القوالب و طرق تحميلها وتعديلها - ومن الناحية الموضوعية - كيفة الكتابة وتقنياتها، على بلوجر .

الزوار

  © Blogger template 'Ultimatum' by Ourblogtemplates.com 2008

Back to TOP