[الدرس الثاني] دورة تعريب قوالب بلوجر (الأوامر الخاصة بالتعريب)

نشر بتاريخ :- 02-01-2014

₪ معرفة الخصائص المهمة التي سنستخدمها قبل البدء في التعريب :

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

1- الخاصية Font-family :

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

تسمح CSS لحسن الحظ بتحديد قائمة خطوط بديلة ، لذا فإن استخدام الخاصية Font-family لتحديد أي خط (أو قائمة خطوط مفصولة بفواصل) كما في المثال التالي :

Font-family: Arial, Tahoma, Traditional Arabic ;

أي أن قيمة الخاصية هي أحد أسماء الخطوط أو أكثر مفصولة بفواصل .

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

Georgia -Times New Roman – Arial - Arial Black - Courier New
Verdana - Trebuchet MS - Comic sans MS – Impact - Webdings

• تجميع كافة الخصائص ضمن الخاصية Font :

أحياناً تجد في بعض القوالب كلمة font لوحدها بدون كلمة family ، السبب ؟
إن تجميع عدة خصائص لكل عنصر قد يصبح إطالة وتكراراً لا ضرورة له ، وبالتالي فإن مؤلفي CSS وضعوا الخاصية المختصرة التي تجمع كافة الخصائص المتعلقة بالخط في قاعدة واحدة وفي سطر واحد ! . مثال لخصائص غير مجمعة :

والآن ستكون مجمَّعة في سطر واحد ، ولكن عند استخدام الخاصية font كإختصار لعدد من خصائص الخط مثل الأمثلة في الأعلى ، فإن ترتيب ظهور قيم الخاصية يكون مهماً جداً . تبين قواعد تحديد الخط التالية الإستخدام الصحيح للخاصية font :

Font: italic bold 19px/14px Arial, Tahoma ;

يمكن أن تتضمن القاعدة قيماً من أجل كل الخصائص أو لمجموعة جزئية منها مثل ذكر حجم الخط وسماكته، ولكنها يجب أن تتضمن font-size و font-family بهذ الترتيب كآخر خاصيتين في القائمة كما تشاهد وضعتهما باللون الأحمر كي تلاحظ أنهما آخر القائمة . يؤدي حذفهما أو وضعهما بترتيب خاطئ إلى أن تكون القاعدة غير صحيحة . فالمثال التالي غير صحيح :

Font: Arial, Tahoma ;

س : لماذا المثال السابق خاطئ ؟

لأنه كما قلنا يجب أن يكون بهذا الترتيب :

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

لذا بعد أن تتحق متطلبات القاعدة font-size و font-family وتكون موجودة ، فمن الممكن أن تتضمن القاعدة أيضاً الخصائص الإختيارية لتنسيقات الخطوط مثل : Font-style و Font-weight و Line-height ، كما في الثال :

Font: bold 19px/14px Arial, Tahoma ;

๐ لاحظ بالألوان :

الأخضر : سماكة الخط لو كنت تريده سميك وهو قيمة تابع للخاصية Font-weight .

الأزرق : هو المسافات بين السطور حتى لا تكون متلاصقة أسفل بعض لكي يتمكن القراء من قراءة السطور دون أن يتوهوا بينها ، ولاحظ أنه فصل بين الأزرق وهو قيمة للخاصية Line-height وبين حجم الخط 14px بشرطة مائلة ( / ) .

عندما بدأت التعريب كنت عندما أرى 19px/14px كنت أعتقد معناها حجم الخط على كسر ! أي أن الخط سيكون متمدد من الأعلى أكثر من الأسفل ! لم أكن أعلم أنه يعني خاصيتان مختلفتان ! فكنت أقوم بمسح الرقم الأول للأسف دون أن أعلم مقصده ، لذا شرحته بالتفصيل كي لا تقعوا في الخطأ كما فعلت .

لذا فإن الخاصية font لوحدها تضمن لك وخصوصاً لمن لا يحفظون سوى القيم لأنهم ربما حفظوها لإستخدامهم برنامج أوفيس وورد أو من خلال الكتابة في المدونات في صندوق التحرير للرسائل فهذه الأوامر تتكرر معنا وبالتالي نحفظها :

ولكن الخاصية لا نحفظها وتكون جديدة علينا لذا فنحن هنا اختصرنا الأمر ولا داعي لحفظ الخاصية لكل قيمة مع الإختصار font كل شيء أصبح سهلاً .

2 – الخاصية Text-align :

وهي تستخدم للمحاذة الأفقية للنص ، أي أننا نستخدمها لجعل النص يتجه نحو اليمين في اللغة العربية ، والقيم المستخدمه فيه هي :

- Left (يسار) من أجل اللغات التي تقرأ من اليسار إلى اليمين .
- Right ( يمين ) من أجل اللغات التي تقرأ من اليمين إلى اليسار ( كاللغة العربية )
- Center ( وسط ) تستخدم لتنسيق الخطوط عادة سواء في العناوين الرئيسية والقوائم الجانبية .

مثال لتغيير اتجاه النص في الهيدر ( عنوان المدونة ) :

#header {
Text-align: right ;
}

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

3 – الخاصية Float (التعويم) :

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

صورة أخرى للقائمة العلوية قبل كانت في جهة اليسار، ثم أصبحت في جهة اليمين :

تستخدم الخاصية float على عنصر ما ( القائمة الجانبية أو القائمة العلوية أو الصور .. إلخ ) لتعويمه إلى اليسار أو اليمين أي تغيير مكانه بمعنى أصح ، وأيضاً يستخدم من أجل إلتفاف النص حول الصور .

القيم المستخدمة فيه هي :

- Left ( يسار ) .
- Right (يمين ) .
- None ( لا شيء ) .

4 – الخاصية margin ( الهوامش ) :

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

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

.sidebar ul {
Margin-left: 30px ;
}

يمكن استخدام الخصائص :

margin-top ( هامش علوي )
و
margin-right (هامش من جهة اليمين )

و
margin-bottom ( هامش سفلي )
و
Margin-left (هامش من جهة اليسار ؛ كما في المثال الذي في الصورة السابقة)

لتحديد هامش من طرف واحد على العنصر . ويمكن تحديد الهامش بأية وحدة طول مقبولة (px أو النسبة المئوية % ) ، وُيسمح بإستخدام القيم السالبة .. كيف ؟ وما معنى القيم السالبة ؟

الصورة توضح أكثر :

مثال لقائمة علوية بعيدة جداً عن حافة القالب ونريد تقريبها قليلاً نحو الحافة .. ماذا نفعل ؟

القيمة السالبة أي وضع إشارة سالب ( - ) أي ننقص المسافة من أي عنصر بهدف تقريبه من مكان ما ، عندما نصل لدرس تنسيق الهوامش ستتضح الأمثلة أكثر ..

وقد تجد في بعض القوالب عند الهوامش margin القيمة auto وتعني إعداد قيم الهامشين من اليمين واليسار بحيث يتيح للمستعرض لديك بملء مقدار الهامش الضروري حتى يلائم أو يملأ الكتلة التي تحتويه ..

• الخاصية المختزلة margin :

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

عند وضع أربعة قيم وهي :top و right و bottom و left ، سيتم تطبيق القيم على طول حواف العنصر بترتيب موافق لإتجاه دوران عقارب الساعة ؛ كما هو موضح هنا (يستخدم البعض وسيلة التذكير
" TRouBLe " لتذكر الترتيب الصحيح وهو top (أعلى) و right (يمين) و bottom (أسفل) و left (يسار) ) .

ولكني أفضل مشاهدة هذه الصورة التي تذكرني بالساعة لكي أحفظ الإتجاهات بالترتيب الصحيح فهذا أسهل بالنسبة لي :

وأحياناً ترى في القوالب قيمتين فقط أو ثلاث قيم مع الخاصية المختزلة margin ! مثل :

Margin: 5px 9px ;

لاحظ الرقم الأول 5 والذي يرمز للهامش العلوي top كما شرحنا سابقاً ، و الرقم الثاني 9 يرمز للهامش في الجهة اليمنى ! لاحظ أنه هناك قيمتان غيره موجوده وهي bottom و left ! مذا يحدث في هذه الحالة ؟

في هذه الحالة الجهة العلوية (top) ستعطي الجهة السفلية (bottom) نفس القيمة (5) ، والجهة اليمنى (right) ستعطي الجهة اليسرى (left) قيمتها (9) ، أي أن الجاران المتقابلان افتراضياً كما شرحنا في صورة الشبكة فوق فهما ملزمان أن يسلف أحدهما الآخر قيمته يصبح :

Margin: 5px 9px 5px 9px ;

هل علي أن اخبرك ماذا سيحدث لو كانت هناك قيمة واحدة فقط ؟ حسناً ، سيتم تكرارها من أجل الجوانب الأربعة . يتم في المثال التالي تطبيق هوامش بعرض 20px من كافة جوانب العنصر :

Margin: 20px ;

تصبح هكذا :

Margin: 20px 20px 20px 20px ;

أرأيت ! بدل أن اكتب 20px أربع مرات لأربع اتجاهات اختصرناها وأصبحت تؤدي نفس الدور على جميع الجهات ..

5 – خاصية الحشو padding :

حتى لا أطيل عليكم وأكرر نفس الكلام ، بإختصار شاهد هذه الصورة التي حركنا الأيقونة فيه لتكون بعيده عن حافة القالب بخاصية margin : تذكرتها !

لاحظ أن الأمر marign هو يقوم تحريك العنصر أي تحريك الشكل الخارجي وهو الأيقونة الزرقاء :

أما الأمر padding فهو يحرك الجزء الداخلي من الأيقونة وهو كلمة (قبل) و (بعد) وتذكر أنه من اسمها حشو أي تحرك المحشو وهو النص الذي بداخل عنصر ما !

وطريقة كتابتها هي نفسها مثل margin تذكر عقارب الساعة عندما تستخدمها أيضاً :

Padding-right: 12px ;

Padding-left: 4px ;

ويمكن اختصارها بخاصية مختزلة كما شرحنا في margin :

Padding: 4px ;
أو
Padding: 4px 5px 7px 2px ;

وأشدد على استخدام الخاصية padding في التعريب لأنه عند نقل النص بإستخدام text-align: right;
ستكون النصوص ملتصقة كثيره بحافة القالب ويصبح منظرها مزعج للقارئ .

حسناً ! اهنئك أخي / أختي - الكريم /هـ ، فقد انهيت أهم درس في التعريب وهي التعرف على أهم أدوات التعريب لذا ارجو منك أن تقرأه مرتين فقط فهذا كافي برأيي لكي تبدأ التطبيق في الدرس القادم ...

في أمان الله

شبكة ديفي نت التطويرية

اهلا وسهلا بكم في شبكتنا

المواضيع الأخيرة

[الدرس الثاني] دورة تعريب قوالب بلوجر (الأوامر الخاصة بالتعريب)

[الدرس الثاني] دورة تعريب قوالب بلوجر (الأوامر الخاصة بالتعريب)

الردود

دعم احلى منتدى

التصميم والجرافيكس

مدونات بلوجر

روابط مهمة