+ + + + +
Share/Save/Bookmark

2009-09-10

بداية لااابد منها ... الجزء الرابع والأخير



اكمالا لما بدأناه فى
الجزء الأول
الجزء الثالث

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

بنما كانت وظيفة جزء ( الرأس head ) هو تحديد شكل كل مافى المدونة , لونه وحجمه ولون الخلفيه و طوله وعرضه , الخ الخ الخ .

دعنى اعرض صورتين مهمتين
الاولى تعبر عن شكل المدونة الذى يظهر لك وللزائرين , هذا هو الشكل العام لاى مدونة , ولاى موقع ان اردت الدقة لكن دعنا نتحدث عن البلوجر فقط افضل
لاحظ ان كل جزء له لونه المميز , تذكر هذا اللون جيدا لاننا سنتحتاج الى المطابقة بين الصورة الاولى والثانية .



اضغط على الصورة لتراها بالحجم الطبيعى



الصورة الثانية بها توضيح لمنظر القالب = ( صندوق الأكواد ) الجزء الاعلى هو جزء ( الراس ) والجزء الاسفل هو جزء ( الجسم ) , لاحظ انه يوجد مطابقة فى الالوان بين الجزئين , وبين الصورة الثانية كلها والصورة الاولى بالاعلى .

ماعدا الكلام الموجود داخل المربعات بجزء الجسم , وهو

<b:section id="The Section id">
<b:widget id="The Widget id">
</b:widget>
</b:section>



هو ملون فقط للايضاح



اضغط على الصورة لتراها بحجمها الطبيعى


اضغط على الصورة لتراها بالحجم الطبيعى



بعض الاختصارات

1- كلمة div اختصار لكلمة divition بمعنى انشاء قسم جديد يسمى كذا , واسم هذا القسم او العنوان هو الـ id وهو مميز لكل قسم .

2- كلمة section معناها " قسم " ايضا , لكن قسم فرعى داحل القسم الاكبر منه divition , ولكل section الـ id الخاص به ايضا .

3- كلمة class معناها الفئة , وبها ستجد اسم الجزء للتعريف به , مثله مثل الـ id مع بعض الاختلاف , دعك من هذا الاختلاف الان .

4- كلمة widget معناها القطعة التى توجد داخل كل section , هذه القطع هى التى نراها بالمدونة, مثل قطعة البروفايل وقطعة الارشيف وقطعة الساعه مثلا , الخ الخ الخ .
لكل قطعة id مميز لها حسب نوع القطعة , او الاداه التى اخترتها , فلو اخترت الاداه html/java script من صفحة الادوات ستنشأ قطعة جديده فى قالب المدونة لها id اسمه html , ومرقمة برقم معين لو كان هناك اكثر من اداه من نفس النوع , مثلا html1 , html2 , html3 وهكذا .
ولو اخترت اداه نصيه text ستنشأ قطعة جديده الـ id لها اسمه text1 و text2 و text3 وهكذا فى حالة وجود اكر من قطعة نصية .


لذلك , لو مللت من قالبك القديم واردت تشغيل قالب جديد , سيخبرك البلوجر ان بعض القطع سوف تعرض للحذف , لان القالب الجديد لا يحتوى على الاكواد الخاصة بالقطع الموجوده فى القالب القديم .
ينبغى عليك عندها ان تزود القالب الجديد بتلك الاكواد فى المكان المناسب , حتى لا تحذف تلك القطع وتضطر الى انشاءها مرة اخرى .


كل قطعة تكون بهذا الشكل

<b:widget id='The Widget id' locked='false' title='Title of the widget' type='Type of the widget'/>



ولا تحتاج الى كود اغلاق فى الغالب

اما الـ section فلابد له من كود اغلاق بهذا الشكل

<section> < > < > </section>



وكذلك الـ div يحتاج الى اغلاق بهذا الشكل

<div> < > < > </div>



ترتيب اجزاء المدونة فى جزء ( الجسم ) يتبع نظام " التعشيش nesting " الذى تحدثنا عنه سابقا .

بمعنى : من الطبيعى ان الاطار الجانبى sidebar واقع داخل الـ body , لذلك يجب وضع اكواد الاطار الجانبى كلها من بدايتها <div id='sidebar'> وحتى نهايتها </div> داخل جزءالـ body , وليس قبله او بعده مثلا.

مثال اخر , ذيل المدونة هو اااخر شئ تجده فى المدونة بالاسفل , فمن الطبيعى ان تكون اكواد الذيل من اولها <div id='footer'> وحتى اخرها </div> واقعة بالجزء الاسفل من جزء الـ body وقبل نهايته مباشرة بكلمة </body> .

اتمنى ان تكون الصور بالاعلى مفيده وتغنى قليلا عن مزيد من التفاصيل . ده كان الجزء الاخير



الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا

10 اضف تعليق , التعليقات:

m_sat said...

عاشت الايادي عزيزي
wael

دروس مفيدة و مميزة

و الى المزيد من الابداع ان شاء الله



مع
اجمل تحية

steelbeauty said...

thx

goodblog

راكان عارف said...

ما يميز دروسك أخي أنها وااااااااااااااااااااضحة جدا ما شاء الله عليك.. طرح متميز ومواضيع تستحق مئات الردود.

بارك الله فيك.

Xorte Kurd said...

شكرالك يااخي الكريم على هذه المعلومات القيمة الله يوفقك

وجـف القـلم .. said...

دروس جميله.. جزاك الله خير

tariq said...

ماشاء الله ماشاء الله الله يعطيك العافية كفيت ووفيت اكثر من هذا لااظن
تستحق بالفعل كلمة دكتور البلوغات
شكرا على دروسك المفيدة جدا جدا جدا

أبوالمعالى فائق said...

حقيقى موقع رائع

fnoontshkilia said...

بارك الله فيك

بالفعل أستاذ كبير في كل حاجة ..

واصل تألقك في سماء الإبداع يامبدع..

فارس اللواء said...

ممتاز اخي بارك الله فيك

شاهين 1 said...

اشكرك جدا عل المجهود
لدي سؤال اتمنى ان تساعدني
هو انني عند تصنيف مواضيع مدونتي في منطقة الراس او حتى الكتابه في منطقة الراس تظهر بشكل عمودي وانا اريد ان تظهر بشكل افقي وقد جرب ان استخدم الكود الخاص بذلك والمشروح في موضوع الازرار ولكن لم يتغير الاتجاه

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

اضف تعليقك هنا

اضغط على عنوان البوست لتظهر التعليقات