بداية لاااابد منها ... الجزء الثالث

استكمالا للجزء السابق , نكمل ما بداناه من تفصيص لتمبليت الـ minima
توقفنا عند نهاية شرح جزء التعريفات , وكما قلنا هو عبارة عن صندوق من الصناديق التى يحتويها الصندوق الكبير head والذى هو نفسه موجود داخل الصندوق الكبيييييير html

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

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
text-align: center;
}

هذا الجزء يضم الاكواد " او الاوسمة - جمع وسم - ان اردنا الدقة " التى ستحدد لنا شكل الـ body بالتحديد
الاوسمة التى ستحدد لنا كل هذا كما ترى محصورةبين العلامتين { و } وهذا النظام هو المتبع والذى ستلاحظه فى بقية الاكواد .
لكن ماهو الـ body الذى سنحدد شكله ؟

اجزاء المدونة عبارة عن

1- رأس head
2- جزء رئيسى main
3- اطار جانبى , واحد اواكثر sidebar
4- ذيل footer

هذه الاربعة اجزاء موجوده داخل ما يسمى بالـ container , والـ conatainer موجود بدوره داخل الـ body .

نأتى لكل كود وقيمته على حده

margin:0px 0px 0px 0px;

لاحظ الاتى :
1 - الصندوق الخاص بمنطقة الـ body ككل بدايته علامة } ونهايته علامة {
2 - يعقب كل كود مثل كلمة margin علامة نقطتان : ويعقب قيمة الوسم علامة ; لاحظ الفرق فى الشكل .
3 - هذاا لنظام هوالمتبع والذى ستلاحظه فى بقية الصناديق الاخرى الموجوده بمنطقة الرأس head .

ما معنى margin ?
معناها " حد " من جميع الجهات الاربعه , تصور مثلا صورة داخل برواز , البرواز سمكه 3 سنتيمتر , البرواز هو حد الصورة من جميع الجهات , اذن حد الصورة هو 3 سنتى من اعلى و 3 سنتى من اسفل ومن اليمين ومن اليسار .

ما هى قيمة هذا الكود ؟
القيمة المكتوبه هنا هى " صفر " فى الاربع اتجاهات , هذا يعنى انه لن يوجد حد للـ body من اى جهه , وهذه القيمة قابلة للتغيير .

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

margin: 0;

اذا لم تحدد قيمة اى جهة تحسب صفر افتراضيا
او من الممكن ان تجدها مكتوبه بهذا الشكل

margin:0 0 0 0;

او هذا الشكل

margin:0 5 0 3;

هنا ستجد حدا قدره 5 بيكسل باليمين وحدا اخر قدره 3 بيكسل باليسار
وقد تجده بهذا الشكل

margin-left: 5px;
margin-right: 5px;
margin-up: 10px;
margin-bottom: 20px;

هنا تم تحديد مقدار الحد لكل جهة فى سطر منفصل
ملحوظة : يتشابه الوسم margin مع وسم اخر ربما سنتعرض له لاحقا اسمه border

الوسم التالى

color:$textcolor;

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

color:#ffffff;

الوسم التالى

font:x-small Georgia Serif;
نوع الخط

font-size: /**/small;
الكود الخاص بحجم الخط وقيمته small يمكن تغييرها الى larg
او يمكن تغييرها بقيمة محدده مثلا , وهذا افضل

font-size: 1.5em;

لاحظ التعامل مع حجم الخط بوحده em بخلاف الـ px التى هى اختصار لكلمة بيكسيل ويتم التعامل بها فى الصور والحدود وخلافه من الاشياء التى سنتعرف عليها لاحقا .

الوسم التالى

text-align: center;

كود يحدد جهة محاذاة النص فى منطقة الـ body وقيمته center وطبعا يمكن تغييرها الى اليسار left او اليمين right حسب استخدامك .

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



باقى العناوين و " الاوسمة " التى توجد بمنطقة الرأس head سأذكرها تباعا مع مراعاة عدم التكرار :

a:link {	حرف a يعبر عن الروابط , لذلك هذا العنوان هو بداية اكواد تحديد لون الروابط , اللينكات بغض النظر عن المنطقة المحددة
text-decoration:none;	وسم تحديد شكل اللينكات , القيمة none يعنى مش هايكون فيه خطوط تحت اللينكات لو عايز خط غير القيمة الى underline
a:visited {	بداية اكواد تحديد لون اللينكات المزارة
a:hover {	بداية اكواد تحديد شكل ولون اللينك عند وقوف المؤشر عليه
#header-wrapper {	غلاف منطقة الرأس بداية الاكواد الخاصه بمنطقة رأس المدونة
width:660px;	هذا الوسم يحدد العرض , القيمة بتاعته بالبيكسل
border:1px solid $bordercolor;	وسم وظيفته عمل بوردر , او برواز , القيمه هنا 1 بالبيكسل واللون $bordercolor نظام تحديد الجهات هو نفسه النظام المتبع اللى شرحناه فى الوسم margin راجع الشرح بالاعلى
background-position: center;	وسم وظيفتح تحديد جهة المحاذاه للخلفية بمنطقة الرأس
#header h1 {	بداية الاكواد الخاصة بتحديد لون وشكل عنوان المدونة h1
padding:15px 20px .25em;	هذا الوسم مهم جدااااااا : الترجمة الحرفية له " بطانة " لنسميه نحن وسم الازاحه للداخل. لكى تفهمه تخيل ان لديك برواز 30 فى 30 , وعندك صورة 20 فى20 جوه البرواز . هاتعمل للصورة ازاحه من كل الجهات عشان تظبط وضعها داخل البرواز ,هل انت عايزها فى النص بالظبط ؟ ولا فى الكورنر اليمين ؟ وهكذا يبقا الازاحه " او التبطين " هاتحصل للصورة داخل البرواز من جميع الجهات . فى المثال اللى موجود هايحصل الاتى : ازاحة للداخل = " تبطين " 15 بيكسل من الجهة العليا وازاحة للداخل من الجهة اليسرى 20 بيكسل ومن الجهة السفلى واليمنى ازاحة قدرها 0.25em ومن الجهة اليمنى صفر ازاحة افتراضيا بغض النظر عن ماهو الشئ المزاح او المبطن اتمنى ان تفهموا جيدا هذا الوسم المهم جدااااااا
line-height:1.2em;	وسم وظيفته تحديد ارتفاع السطر , بالنسبة لعنوان المدونة او اى شئ اخر قد يقابلك
letter-spacing:.2em;	وسم لتحديد المسافة بين الحروف
#header .description {	بداية الاكواد التى تحدد لون وشكل نص وصف المدونة
max-width:700px;	الحد الاقصى للعرض المتاح لوصف المدونة , ممكن تحدد الطول كمان لو عايز تغير الكلمة الى height بدلا من width
#outer-wrapper { width: 660px;	دى بداية الاكواد اللى هاتحدد شكل برواز المدونة بمعنى : ان عرض المدونة دى ( main + sidebar ) هايساوى 660 بيكسل فلو عايز تخلى المدونة اعرض , ممكن تغير فى القيمة دى
#main-wrapper { width: 410px;	بداية الاكواد الخاصة بمنطقة الـ main ودى المنطقة اللى بتظهر فيها التدوينات مهمة جدا زى منتا شايف بس فيه فرق بين main-wrapper اللى معناها الحرفى " الغلاف " فقط وبين main اللى معناها " الجسم " اللى هو المحتوى الفعلى ده مش بالنسبة للـ main بس انما كمان للـ sidebar ولو عايز تخليها اعرض ممكن تغير القيمة المكتوبة بس لازم تزود قيمة الـ outer-wrapper
float: $startSide;	وسم يحدد مكان التواجد لمنطقة التدوينات القيمة $startside قيمتها محدده فى جزء التعريفات , راجع الجزء الثانى
#sidebar-wrapper {	بداية الاكواد التى ستحدد شكل غلاف الاطارالجانبى , لاحظ ان ده الغلاف وليس الاطار الجانبى الذى سيأتى لاحقا
h2 { line-height: 1.4em; text-transform:uppercase;	بداية الاكواد التى ستحدد شكل العناوين الفرعيه يوجد وسمين الاول يحدد ارتفاع السطر الثانى يحدد هل الحروف هاتكون " كابتال " ولا " سمول " ؟ لو عايزها سمول خلى القيمة lowercase
.sidebar {	بداية الاكواد التى ستحدد شكل المحتوى الفعلى للاطار
.sidebar ul {	بداية الاكواد التى ستحدد شكل اللينكات الليستة الغير مرتبة بمنطقة الاطار اختصار لكلمة unorderd list بمعنى الليستة الغير مرتبة ودى ف حالة لو اضفت مثلا link list او ما شابه
list-style:none;	وسم يحدد ستايل الليستة وقيمته none وتوجد قيم اخرى متاحه لكن للاسف مش هاتقدر تستعملها لانها بتحتاج متصفحات خاصه زى النتسكيب
.sidebar li {	اختصار لـ list links اى اللينكات الموجود باى ليسته , دى بداية الاكواد اللى هاتحددلنا شكلها
.sidebar .widget, .main .widget {	ده تحديد لشكل القطع الموجودة فى منطقة ااطروالمنطقة الرئيسية ايضا القطعة اسمها widget
.main .Blog {	ده المكان اللى بتظهر فيه التدوينات
.profile-img {	صورة البروفايل طبعا
.profile-data {	نص البروفايل
.profile-link {	لينك البروفايل
#footer {	منطقة ذيل المدونة
/** Page structure tweaks for layout editor wireframe */	تركيب وبناء الصفحة layout او صفحة المخطوطات بمعنى ادق
/* Posts	الاكواد القادمة - التى تلى هذا العنوان - تخص منطقة التدوينات اى المنطقة التى تعرض فيها البوستات , بدءا من عنوانها بالاعلى وحتى التعليقات بالاسفل
.post {	منطقة التدوين نفسها
.post h3 {	الاكواد الخاصة بعنوان التدوينة
.post-footer {	الكلام الموجود بذي لكل تدوينة مثل : مرسلة بواسطة فلان الفلانى
.comment-link {	اللينك بتاع التعليقات
.post img {	الاكواد الخاصة بالصورالموجوده - ان وجدت - داخل التدوينات , كيف سيكون شكلها ؟
/* Comments	الاكواد القادمة - التى تلى هذا العنوان - تتعلق بمنطقة التعليقات نفسها
#comments h4 {	عنوان كل تعليق على حده
.deleted-comment {	الاكواد الخاصة بالتعليق المحذوف بواسطة صاحب المدونة
#comments-block .comment-body {	جسم التعليقات الجزء اللى بتظهر فيه التعليقات
#comments-block .comment-footer {	ذيل جزء التعليقات
#comments-block .comment-body p {	حرف p يعنى الخط الموجود فى المنطقة المذكورة قبله وهنا المنطقة هى منطقة جسم جزء التعليقات

دى اهم الاكواد الموجودة ف اى قالب , حوالى 80% منها , لم اشئ ان افصل اكثر من ذلك حتى لا يبدوا الامر اكثر تعقيدا او اكثر سخافة , هناك اكواد تغاضيت عن ذكر وظيفتها ربما لانها ليست ذو وظيفة مهمة تذكر , سأرحب بأى استفسار يسأل عن " كود او وسم " خاص يود صاحبه ان يتعرف على وظيفته .

تلك هى نهاية منطقة الرأس للقالب minima , وضعتها لتكون مرجعا عربيا لمن يريد.

فائدة الموضوع المرجوة :

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

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

الموضوع القادم ان شاء الله شرح بسيط - مش مفصل قوى - لمنطقة الجسم body
وهى الاكواد التى تنحصر بين كلمتى <body> و </body>

اراكم على خير , وارحب باى تعليق او استفسار او تنبيه لخطأ ما قد يوجد بالبوست

اكتب ايميلك هنا