[4] دورة تصميم استايل vCard3 و تركيبه بالكامل .. تنسيق الاستايل CSS

[abohmam]

بسم الله الرحمن الرحيم

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

السلام عليكم و رحمة الله و بركاته

أهلاً و سهلاً بكم في الحلقة الرابعة على التوالي من دورة تصميم استايل في كارد النسخة 3 ،،،


* روابط دروس الدورة:

تصميم واجهة موقع أو استايل للمنتدى (http://www.abc4web.net/vb/showthread.php?t=2291)
تحميل اسكربت vCard3 (http://www.abc4web.net/vb/showthread.php?t=2290)
الدرس الأول (http://www.abc4web.net/vb/showthread.php?t=2289)
الدرس الثاني (http://www.abc4web.net/vb/showthread.php?t=2288)
الدرس الثالث (http://www.abc4web.net/vb/showthread.php?t=2287)
الدرس الرابع (http://www.abc4web.net/vb/showthread.php?t=2285)
:bar:


باسم الله نبدأ :

في هذه الحلقة سوف نتطرق لشرح كيفية التعديل على ألوان الصفحات و أحجام الخطوط بالتعديل على CSS و هي اختصار لـ Cascading Style Sheet ... و أهم شيء معرفة أنه لتغيير اللون يجب معرفة الكود الخاص به مثل :

#FF0000 = اللون الأحمر
#00FF00 = اللون الأخضر
#0000FF = اللون الأزرق

و يمثلون RGB Colors و هي :
Red = R
Green = G
Blue = B
طبعاً على التوالي فلاحظ إذا وضعنا حرف F مرتين من اليسار و الباقي صفر أي أنه تعبئة اللون أحمر فقط و حرف F يعني Fill أو تعبئة ... هذه بداية لمعرفة كيفية اختيار الألوان و ما إلى ذلك ،،،

و بالنسبة للخطوط فكتابة 8pt لا تعني 8px فالبكسل أصغر من النقطة
px = بكسل Pixel
pt = نقطة Point

بعض من خيارات و خصائص CSS التي يجب معرفتها :

[1] font-size = حجم الخط بالبكسل أو النقطة مثل 8pt - 8px
تكتب كالتالي :


[2] font-weight = عرض الخط مثل bold عريض أو normal عادي
تكتب كالتالي :


[3] font-family = نوع الخط مثل Tahoma أو Arial
تكتب كالتالي :


[4] background-color = لون الخلفية مثل #FFFFFF و هو اللون الأبيض
تكتب كالتالي :


[5] background-image = صورة للخلفية
تكتب كالتالي :


[6] border = حجم الحدود للجدول و تكتب إما بالبكسل 50px أو بالنسبة المئوية 50% و solid تعني متكامل و dotted تعني منقط
تكتب كالتالي :


[7] text-decoration = زخرفة الخط إما underline تحته خط أو italic مائل أو none لاشيء
تكتب كالتالي :


[8] text-align = محاذاة الخط إما بالوسط center أو لليسار left أو لليمين right
تكتب كالتالي :


مثال شامل لما تم ذكره :



و body تعني المحتوى بالكامل و خصائص المحتوى كالتالي :

font-family نوع الخط : Tahoma
font-size حجم الخط : 11px
color لون الخط : أسود
background-color لون الخلفية : أبيض
text-align المحاذاة : بالوسط

و ما إلى ذلك من خصائص كثيرة و لكن هذا ما يهمنا مبدئياً لمعرفة كيفية التعديل على خيارات تنسيق الاستايل ،،،

نأتي الآن للتعديل على القالب الخاص بخيارات CSS لتنسيق الاستايل بالألوان المناسبة و الخطوط الملائمة ... نقوم الآن بالدخول إلى لوحة تحكم الإدارة vCard Administrator Section و نقوم بتحرير القالب التالي :

page_header_include

و كيفية تحرير القالب تم ذكرها في الحلقة السابقة ... نأتي الآن للبدأ بتعديل كل خاصية و خيار في القالب :

في البداية قم باستبدال الكود الموجود بداخل المرفق page_header_include.txt بالكود الموجود بداخل القالب و ستجد أن كل خاصية مرقمة و سيتم شرح كل خاصية و مهمتها كما في التالي :

/* CSS1 */

الشرح : تعديل خصائص الروابط في الاستايل و تستطيع تعديل خاصية الزخرفة و كتابة underline بدلاً من none ليصبح تحت الروابط خط

/* CSS2 */

الشرح : تعديل خصائص وضع المؤشر على الرابط فعند وضع المؤشر يتغير اللون مثلاً أو زخرفة الخط و ما إلى ذلك

/* CSS3 */

الشرح : تعديل خصائص المحتوى بالكامل و خلفية الصفحة و ما إلى ذلك

/* CSS4 */

الشرح : تعديل خصائص الجداول كما هو مبين في الصور التالية :

http://www.abc4web.net/vb/imgcache/7591.abc4web.gif

http://www.abc4web.net/vb/imgcache/7594.abc4web.gif

http://www.abc4web.net/vb/imgcache/7596.abc4web.gif

/* CSS5 */

الشرح : المدخلات في البحث مثلاً و الاختيارات المتعددة باختيار نقطة للخيار و تعبئة الفورم و الاختيارات بوضع علامة صح بجانب الخيار المطلوب كما في الصورة التالية :

http://www.abc4web.net/vb/imgcache/7598.abc4web.gif

/* CSS6 */

الشرح : تعديل خصائص الأزرار كما في الصورة :

http://www.abc4web.net/vb/imgcache/7599.abc4web.gif

/* CSS7 */

الشرح : حدود الصورة و الافتراضي هو صفر و تستطيع أن تجعلها 1 بكسل أو أكثر

/* CSS8 */

الشرح : تعديل حدود الجداول مثل تغيير اللون و شكل الإطار منقط مثلاً و الخلفية الداخلية للجدول و الأفضل أن تترك باللون الأبيض كما هي

/* CSS9 */

الشرح : تعديل خصائص جدول و ألوان و خطوط الروابط العلوية و السفلية كما في الصورة :

http://www.abc4web.net/vb/imgcache/7600.abc4web.gif

/* CSS10 */

الشرح : تعديل ألوان الروابط في الأعلى و الأسفل أيضاً كما في الصورة و الخاصية السابقة

/* CSS11 */

الشرح : تعديل جدول الترحيب بالزائر و مدخلاته كما في الصورة التالية :

http://www.abc4web.net/vb/imgcache/7601.abc4web.gif

/* CSS12 */

الشرح : تعديل لون و خصائص الحقوق Copyright في الأسفل

/* CSS13 */

الشرح : تعديل خصائص الخلية المبينة بالصورة :

http://www.abc4web.net/vb/imgcache/7602.abc4web.gif

/* CSS14 */

الشرح : تعديل خصائص الخلية المبينة بالصورة :

http://www.abc4web.net/vb/imgcache/7603.abc4web.gif

http://www.abc4web.net/vb/imgcache/7604.abc4web.gif

/* CSS15 */

الشرح : تعديل خصائص الخلية المبينة بالصورة :

http://www.abc4web.net/vb/imgcache/7605.abc4web.gif

/* CSS16 */

الشرح : لتغيير خلفية و خط و لون الأقسام الفرعية كما في الصورة :

http://www.abc4web.net/vb/imgcache/7606.abc4web.gif

/* CSS17 */

الشرح : لتعديل لون و نوع خط الروابط للخاصية السابقة

/* CSS18 */

الشرح : لتغيير خلفية و خط و لون الأقسام الرئيسية كما في الصور التالية :

http://www.abc4web.net/vb/imgcache/7607.abc4web.gif

http://www.abc4web.net/vb/imgcache/7608.abc4web.gif

/* CSS19 */

الشرح : لتعديل لون و نوع خط الروابط للخاصية السابقة

/* CSS20 */

الشرح : لتغيير لون الخلفية و الخطوط و أنواعها لما تحت الأقسام كما في الصور التالية :

http://www.abc4web.net/vb/imgcache/7609.abc4web.gif

http://www.abc4web.net/vb/imgcache/7610.abc4web.gif

http://www.abc4web.net/vb/imgcache/7611.abc4web.gif

/* CSS21 */

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

http://www.abc4web.net/vb/imgcache/7612.abc4web.gif

http://www.abc4web.net/vb/imgcache/7613.abc4web.gif

http://www.abc4web.net/vb/imgcache/7614.abc4web.gif

http://www.abc4web.net/vb/imgcache/7615.abc4web.gif

/* CSS22 */

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

http://www.abc4web.net/vb/imgcache/7616.abc4web.gif

/* CSS23 */

الشرح : لتغيير اللون للحدود و الخلفية و المناطق المحددة في الصورة التالية :

http://www.abc4web.net/vb/imgcache/7617.abc4web.gif

/* CSS24 */

الشرح : لتغيير لون الخط و حدود الجدوال و الخلفية لأرقام الصفحات كما في الصورة التالية :

http://www.abc4web.net/vb/imgcache/7618.abc4web.gif

/* CSS25 */

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

/* CSS26 */

الشرح : لتغيير لون الخط و حدود الجدوال و الخلفية للصفحة التي نقوم بتصفحها حالياً كما هو مبين في الصورة :

http://www.abc4web.net/vb/imgcache/7619.abc4web.gif

/* CSS27 */

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

/* CSS28 */

الشرح : لتغيير لون شريط التمرير Scrollbar كما في الصورة التالية :

http://www.abc4web.net/vb/imgcache/7620.abc4web.gif

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

منقـ(مع أجمل تحية للكاتب)ـول

[مغترب]

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية . :abc_139:

[أبو يوسف]

جزاك الله خيرا اخي ابو همام

موفق بإذن الله ... لك مني أجمل تحية . :abc_022:

[أبو صخر]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[سالي الفلسطينية]

موفق بإذن الله ... لك مني أجمل تحية .

[الهمام]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[abohmam]

جزاكم الله خيرا على مروركم العطر وتواصلكم الجاد

بالتوفيق