السلام عليكم و رحمة الله و بركاته
أهلاً و سهلاً بكم في الحلقة الرابعة على التوالي من دورة تصميم استايل style في كارد النسخة 3 ،،،
* الحلقات السابقة :
[1] الحلقة الأولى .. تصميم الاستايل style و زخرفته
[2] الحلقة الثانية .. تقطيع الاستايل style
[3] الحلقة الثالثة .. إنشاء الجداول و تركيب installها في السكربت
باسم الله نبدأ :
في هذه الحلقة سوف نتطرق لشرح طريقة كيفية التعديل على ألوان الصفحات و أحجام الخطوط بالتعديل على
CSS و هي اختصار لـ
Cascading Style Sheet ... و أهم شيء معرفة أنه لتغيير اللون يجب معرفة الكود code الخاص به مثل :
#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
تكتب كالتالي :
اقتباس
font-size: 8pt
[2] font-weight = عرض الخط مثل
bold عريض أو
normal عادي
تكتب كالتالي :
اقتباس
font-weight: bold
[3] font-family = نوع الخط مثل
Tahoma أو
Arial
تكتب كالتالي :
اقتباس
font-family: Tahoma
[4] background-color = لون الخلفية مثل
#FFFFFF و هو اللون الأبيض
تكتب كالتالي :
اقتباس
background-color: #FFFFFF
[5] background-image = صورة للخلفية
تكتب كالتالي :
اقتباس
background-image:url(allulu/image1.gif)
[6] border = حجم الحدود للجدول و تكتب إما بالبكسل
50px أو بالنسبة المئوية
50% و
solid تعني متكامل و
dotted تعني منقط
تكتب كالتالي :
اقتباس
border: 50px solid
[7] text-decoration = زخرفة الخط إما
underline تحته خط أو
italic مائل أو
none لاشيء
تكتب كالتالي :
اقتباس
text-decoration: underline
[8] text-align = محاذاة الخط إما بالوسط
center أو لليسار
left أو لليمين
right
تكتب كالتالي :
اقتباس
text-align: center
مثال شامل لما تم ذكره :
اقتباس
body {font-family: Tahoma; font-size: 11px; color: #000000; background-color:#FFFFFF; text-align:center;}
و
body تعني المحتوى بالكامل و خصائص المحتوى كالتالي :
font-family نوع الخط : Tahoma
font-size حجم الخط : 11px
color لون الخط : أسود
background-color لون الخلفية : أبيض
text-align المحاذاة : بالوسط
و ما إلى ذلك من خصائص كثيرة و لكن هذا ما يهمنا مبدئياً لمعرفة كيفية التعديل على خيارات تنسيق الاستايل style ،،،
نأتي الآن للتعديل على القالب template الخاص بخيارات
CSS لتنسيق الاستايل style بالألوان المناسبة و الخطوط الملائمة ... نقوم الآن بالدخول إلى لوحة تحكم الإدارة vCard Administrator Section و نقوم بتحرير القالب template التالي :
page_header_include
و كيفية تحرير القالب template تم ذكرها في الحلقة السابقة ... نأتي الآن للبدأ بتعديل كل خاصية و خيار في القالب template :
في البداية قم باستبدال الكود code الموجود بداخل المرفق
page_header_include.txt بالكود code الموجود بداخل القالب template و ستجد أن كل خاصية مرقمة و سيتم شرح طريقة كل خاصية و مهمتها كما في التالي :
/* CSS1 */
الشرح طريقة : تعديل خصائص الروابط في الاستايل style و تستطيع تعديل خاصية الزخرفة و كتابة underline بدلاً من none ليصبح تحت الروابط خط
/* CSS2 */
الشرح طريقة : تعديل خصائص وضع المؤشر على الرابط فعند وضع المؤشر يتغير اللون مثلاً أو زخرفة الخط و ما إلى ذلك
/* CSS3 */
الشرح طريقة : تعديل خصائص المحتوى بالكامل و خلفية الصفحة و ما إلى ذلك
/* CSS4 */
الشرح طريقة : تعديل خصائص الجداول كما هو مبين في الصور التالية :
/* CSS5 */
الشرح طريقة : المدخلات في البحث مثلاً و الاختيارات المتعددة باختيار نقطة للخيار و تعبئة الفورم و الاختيارات بوضع علامة صح بجانب الخيار المطلوب كما في الصورة التالية :
/* CSS6 */
الشرح طريقة : تعديل خصائص الأزرار كما في الصورة :
/* CSS7 */
الشرح طريقة : حدود الصورة و الافتراضي هو صفر و تستطيع أن تجعلها 1 بكسل أو أكثر
/* CSS8 */
الشرح طريقة : تعديل حدود الجداول مثل تغيير اللون و شكل الإطار منقط مثلاً و الخلفية الداخلية للجدول و الأفضل أن تترك باللون الأبيض كما هي
/* CSS9 */
الشرح طريقة : تعديل خصائص جدول و ألوان و خطوط الروابط العلوية و السفلية كما في الصورة :
/* CSS10 */
الشرح طريقة : تعديل ألوان الروابط في الأعلى و الأسفل أيضاً كما في الصورة و الخاصية السابقة
/* CSS11 */
الشرح طريقة : تعديل جدول الترحيب بالزائر و مدخلاته كما في الصورة التالية :
/* CSS12 */
الشرح طريقة : تعديل لون و خصائص الحقوق
Copyright في الأسفل
/* CSS13 */
الشرح طريقة : تعديل خصائص الخلية المبينة بالصورة :
/* CSS14 */
الشرح طريقة : تعديل خصائص الخلية المبينة بالصورة :
/* CSS15 */
الشرح طريقة : تعديل خصائص الخلية المبينة بالصورة :
/* CSS16 */
الشرح طريقة : لتغيير خلفية و خط و لون الأقسام الفرعية كما في الصورة :
/* CSS17 */
الشرح طريقة : لتعديل لون و نوع خط الروابط للخاصية السابقة
/* CSS18 */
الشرح طريقة : لتغيير خلفية و خط و لون الأقسام الرئيسية كما في الصور التالية :
/* CSS19 */
الشرح طريقة : لتعديل لون و نوع خط الروابط للخاصية السابقة
/* CSS20 */
الشرح طريقة : لتغيير لون الخلفية و الخطوط و أنواعها لما تحت الأقسام كما في الصور التالية :
/* CSS21 */
الشرح طريقة : لتغيير لون الخلفية و الخطوط و أنواعها و حدود الجداول للخلايا و المناطق المبينة في الصور التالية :
/* CSS22 */
الشرح طريقة : لتغيير لون الخلفية و الخطوط و أنواعها و حدود الجداول للخلايا و المناطق المبينة في الصورة التالية :
/* CSS23 */
الشرح طريقة : لتغيير اللون للحدود و الخلفية و المناطق المحددة في الصورة التالية :
/* CSS24 */
الشرح طريقة : لتغيير لون الخط و حدود الجدوال و الخلفية لأرقام الصفحات كما في الصورة التالية :
/* CSS25 */
الشرح طريقة : نفس الخاصية التي قبلها و بنفس لون الخلفية و لكن لو يكون أغمق شوي و هذا للصفحات المتعددة من بعد الأولى
/* CSS26 */
الشرح طريقة : لتغيير لون الخط و حدود الجدوال و الخلفية للصفحة التي نقوم بتصفحها حالياً كما هو مبين في الصورة :
/* CSS27 */
الشرح طريقة : لتغيير ألوان الروابط للخواص الثلاثة السابقة و هو عند اختيار رقم صفحة ما إذا كان هناك تعدد للصفحات
/* CSS28 */
الشرح طريقة : لتغيير لون شريط التمرير
Scrollbar كما في الصورة التالية :
و بالنهاية قم بحفظ القالب template بالضغط على زر تحديث update و ستلاحظ التناسق بالألوان مع استايل styleك بإذن الله .. أتمنى للجميع التوفيق بإذن الله و إن كان هناك نقطة غير واضحة فالموضوع مفتوح للجميع بالاستفسارات و شكراً لكم على متابعتكم و السلام عليكم
[4] ط¯ظˆط±ط© طھطµظ…ظٹظ… ط§ط³طھط§ظٹظ„ vCard3 ظˆ طھط±ظƒظٹط¨ظ‡ ط¨ط§ظ„ظƒط§ظ…ظ„ .. طھظ†ط³ظٹظ‚ ط§ظ„ط§ط³طھط§ظٹظ„ CSS
page_header_include.txt (4.8 كيلوبايت, عدد مرات المشاهدة 223 مرة) [/TR]
رد مع اقتباس
