تصميم قالب مدونة بلوجر ( الدرس الثامن)

شرح أكواد منطقة الجسم Body في قوالب بلوجر

في الدرس السابق تعرفنا على كيفية (ضبط مقاييس القالب)
بالتعرف على كيفية ضبط مقاييس أجزاء قوالب بلوجر المختلفة نكون قد انتهينا من شرح أهم ما يتعلق بقسم CSS، في هذه الحلقة سنشرح البنية الأساسية لأكواد منطقة الجسم، وينبغي أن تعلم أننا بهذا نكود قد دخلنا في أكواد القسم الثالث الذي يلي قسم CSS كما هو مبين في تدوينة سابقة البنية الأساسية لكواد .
واعلم أن هذا القسم هو أهم قسم في أكواد قوالب بلوجر من حيث الوظائف التي يقوم بها، فإذا كان قسم CSS يتحكم في تنسيق ومظهر القالب من خطوط وألوان ومحاذاة النصوص، وخلفيات، ومقاييس ... فإن هذا القسم هو اللب الذي يتحكم في وظائف المدونة .

وفيما يلي سنشرح أكواد منطقة الجسم body، بعد أن نسخناها من قالب المدونة وذلك دون الضغط على زر Expand widget template ، وذلك حتى يكون الكود مختصرا ومحتويا في الآن نفسه على أهم أجزاء الكود التي بمعرفتها ستعطينا فكرة شاملة عن مكونات هذا القسم من أكواد القالب.

<body>

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



<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='Testpage Two (Header)' 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 id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

</b:section>

</div>



<div class='clear'> </div>

</div> 

<div id='footer-wrapper'>

<b:section class='footer' id='footer'>

<b:widget id='Text1' locked='false' title='Blogger Template | Bordr' type='Text'/>

</b:section>

</div>

</div></div> 

</body>

نلاحظ أن منطقة الرأس تندرج أسفلها أقسام أخرى وهي
الرأس header .
المنطقة الرئيسية : Main
العمود الجانبي : Sidebar
المنطقة السفلى : Footer .

فأنت ترى أن كل الأكواد أعلاه مندرجة داخل قسم الجسم body لذلك هي محصورة بين
<body>

</body>
وترى أيضا أن الوسم متبوع بالوسم outer-wrapper ثم wrap2 ودور هذين الأخيرين هو تجميع كل تلك الصناديق والأجزاء والتحكم في خصائصها مجتمعة من مكان واحد، كما تفيد في موضعة الأجزاء أو إضافة أجزاء أخرى كأن تريد أن تضيف عمودا جانبيا آخر، أو أجزاء أخرى كالبانرات الإعلانية مثلا ... وهذا ما سيتضح قريبا.

في الصندوق الأكبر تلاحظ أنه يحتوي بداخله على ثلاثة أجزاء وهي الرأس header- wrapper ومنطقة المحتوى content-wrapper والمنطقة السفلى footer-wrapper ، وهذه الأجزاء تتموضع عموديا أي من أعلى إلى أسفل بنفس الترتيب المذكور أعلاه. وذلك لسبب بسيط هو أنه بهذا الترتيب تظهر في قالب المدونة، الرأس في الأعلى ثم يليه منطقة المحتوى، وفي الأسفل المنطقة السفلى.

وإذا فهمنا هذا الأمر سهل علينا إضافة أي صندوق أو قسم جديد إلى القالب شرط أن يوضع في المكان المناسب بين الصناديق والأجزاء الأخرى ، يكفي أن تلصق كود الصندوق الجديد في المكان الذي تختاره وتختار له اسما جديدا مثلا إذا أردنا أن نضيف قسما نسميه بانر banner-wrapper بحيث ينضاف في تخطيط القالب زر جديد يتيح إضافة اداة أو عنصر جديد إلى القالب . سنستخدم الكود التالي مثلا :

<div id='banner-wrapper'>

<b:section class='banner' id='banner' preferred='yes'>

</b:section>

</div>

وسنفصل في هذا الأمر اكثر فيما يستقبل من الدروس .

وإضافة أي صندوق جديد ستحتاج فيه بالتأكيد إلى ما سبق أن اشرنا إليه في شرح قسم CSS من قوالب بلوجر، حتى تحسن مظهر الإضافة لتناسب الشكل العام القالب .

هكذا نكون قد القينا نظرة عامة على اكواد الصناديق أو الأقسام التي يتكون منها القالب ، غير أنه يجب التنبيه إلى ضرورة عدم الخلط بين هذا القسم ، وبين نفس الاسماء التي ذكرنها أثناء شرح قسم CSS والسبب بسيط ذلك ان أكودا قسم Body تتحكم في وجود أو عدم وجود أجزاء القالب المختلفة ، اما قسم CSS فيتحكم فقط في تنسيق هذه الأجزاء إذا كانت متواجدة أصلا في القالب بوجود اكوادها في قسم الآخر.
وفي الدرس القادم سنفصل في الأكواد المدونة لكل قسم وبالتوفيق.