| الدرس الآخير | . إعدادت الاستايل .

[فاصله]

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


نختم اليوم دورة التحدي بأخر دروسها ...بإذن الله ..


اضافة خلفية تجميليه للإستايل الغير متمدد ..

نفتح عمل جديد العرض 1400

الطول 800

نفتح صورة ستايلنا ونسحب لون الخلفية ..ونلون فيها العمل الجديد

ونطلع الشبكه البيانيه – كنترول + ط –

ونحط ستايلنا في الوسط عشان نضيف الاشياء التجميليه في الخلفية في جوانبها

مثل كذا ..

ونصمم على لير الخلفيه .. الشكل اللي نبيه ..

وبعدين نحذف صورة الاستايل .. ونحفظ الخلفيه ..

بصيغة gif باسم باللغه الانجليزيه في مجلد ستايلنا

نذهب الى لوحة تحكم الاداره >>> الستايلات والقوالب >> التحكم بالاستايلات >>> ستايلنا > اذهب ..

ننسخ هذا الكود ونلصقه

# 887D86 url(TT/T1.gif) repeat-y fixed center top

لون الخلفية - اسم المجلد – اسم الصورة – صيغة الصورة

نغير بس اللي ذكرته كل واحد منكم يحط الاسم الصحيح ..الموجود عنده

نتابع الصورة

ثم حفظ ونعاين شكل المنتدى ...

بتكون الخلفية ثابته





...............................





إعدادات الستايل CSs

لوحة تحكم الاداره >> الاستايلات والقوالب >>> التحكم بالاستايلات >> ستايلنا >> إذهب ..

...

من هنا نغير المقاسات والالوان .

نفس الصورة ..

- طبعا الالوان حسب المناسب لستايلكم -

خلفية المنتدى/Body
حجم الخط : 10pt
نوع الخط :tahoma, arial, helvetica,verdana

..

.....

لون التوزيع الاول : الافضليه للابيض وتدرجاته . ( ألوان فاتحه )

يكون خلفية الردود وخلفية للمنتدى في الواجهه .

لون التوزيع الثاني : من الوان الاستايل الفاتحه

تكون خلفية لبيانات العضو في المواضيع وخلفية لاخر مشاركة وعدد المشاركات في الواجهه .

صندوق الرد :

نفس لون التوزيع الاول ..

...

الباقي تطبيقه كما في الصور التاليه :

مع مراعاة ألوان مناسبه للإستايل + اضافة الخط المناسب + والمقاس المناسب

طريقة عرض الموضوع ..

لوحة تحكم الاداره >>> خيارات المنتدى >>>> اعدادات اللغه – الستايل








لازالة الخطوط من تحت الروابط ..
نستخدم هذا الكود ..

a:link
 {
   text-decoration: none;
   }
   a:visited {
   text-decoration: none;
   }
   a:hover { 
  text-decoration: none;
   }
   a:active { 
  text-decoration: none; 
  }

[فاصله]

الخطوط والمقاسات المستخدمه في كل من :
خيار سطوع القوائم المنبثقة/
شكل الخط :bold
حجم الخط : 12pt
نوع الخط :tahoma, arial, helvetica,verdana

....

<td>, <th>, <p>, <li> (التخصيص في هذا الستايل)


شكل الخط : bold
حجم الخط : 12pt
نوع الخط :arial,verdana,helvetica,sans-serif








الأقسام الرئيسية/Category Strips

شكل الخط : bold
حجم الخط : 8pt
نوع الخط : tahoma, arial, helvetica,verdana



رأس الجدول/Table Header (التخصيص في هذا الستايل)

شكل الخط : bold
حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana



نهاية الجدول/Table Footer (التخصيص في هذا الستايل)

حجم الخط : 8pt
نوع الخط : tahoma, arial, helvetica,verdana



لون التوزيع الأول/First Alternating Color (التخصيص في هذا الستايل)

شكل الخط : bold
حجم الخط : 16px
نوع الخط : arial, helvetica,verdana



لون التوزيع الثاني/Second Alternating Color (التخصيص في هذا الستايل)

شكل الخط : bold
حجم الخط : 16px
نوع الخط : arial, helvetica,verdana



محرر WYSIWYG (يجب أن يكون عادةً متماثل مع 'لون التوزيع الأول

شكل الخط : Bold
حجم الخط : 12pt
نوع الخط : arial,verdana,helvetica,sans-serif



خلفية الكتابة/Input Fields (التخصيص في هذا الستايل)

شكل الخط : bold
حجم الخط : 11px
نوع الخط : Tahoma,Arial



الأزرار/Buttons (التخصيص في هذا الستايل)

حجم الخط : 12px
نوع الخط : Tahoma,Verdana,Arial,Helvetica,sans-serif



قوائم <select> (التخصيص في هذا الستايل)

حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana



الخط الصغير (التخصيص في هذا الستايل)

حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana



لون الوقت (التخصيص في هذا الستايل)

حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana



نص شريط العنوان/Navbar t ext (التخصيص في هذا الستايل)

شكل الخط : bold
حجم الخط :11px
نوع الخط :tahoma, arial, helvetica,verdana



الخط المبرز /Highlighted

شكل الخط : bold









<legend> (التخصيص في هذا الستايل)

حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana



التحكم بالقوائم المنبثقة/Popup Menu Controls (التخصيص في هذا الستايل)

شكل الخط :bold
حجم الخط:11px
نوع الخط :tahoma, arial, helvetica,verdana





خيار صف قائمة الإنبثاق/Popup Menu Option Row (التخصيص في هذا الستايل)
حجم الخط : 8pt
نوع الخط : tahoma, arial, helvetica,verdanaf

للأمانه التعبئه مقتبسه ..

[فاصله]

تصميم أيقونات الاستايل ..

نمشي خطوة بخطوة :

1 |نذهب الى هذا المسار .

c >> AppServ >> www >>vb >> images

المجلدات الموجوده نسوي لها تحديد الكل ونسخ ..

ونلصقها في مجلد المنتدى تبعنا مثلي

2 | الايقونات اللي بنصممها

مجلد (buttons ) : أزرار المنتدى - اضافة رد – تعديل – حذف ...الخ .

من مجلد (misc ) مختصه بالصفحة الرئيسيه – المتواجدين – الاسهم – يوم الميلاد

من مجلد (rating ) : نجوم التقييم

من جلد (statusicon) – حالة المواضيع حالة الاتصال.

.....

بسم الله نبدأ

تابعوا الصورة وطبقوا عليها الباقي ..

الطريقة :

ناخذ مقاس الايقونة بالضغط على كنترول – ش

ثم كنترول – ؤ

ثم فتح عمل جديد ..بيطلع مقاسها تلقائي ..

ونصمم الشكل اللي يعجبنا او نغير اللون فقط على حسب اللي حابينه

ونحفظها طبعا بنفس اسم الايقونه اللي أخذنها بالانقلش

ضروري جدا ...

تعديلي للأيقونات على الملفات :

طريقة تركيب الايقونات :

نغير اسم المسار من كلمة ايمج الى اسم مجلد ستايلنا ..

نتابع الصورة :

ثم حفظ

ونعاين شكل المنتدى ..

- صيغة الصور لازم تكون gif

اذا طلع مكان الصور إكس او ماطلعت فالغلط عندكم في اسم الصور أو إسم المجلد ..

أيقونات يمكن تستفيدون منها

ملف statusicon

http://www.4shared.com/file/14248274...tatusicon.html

http://www.4shared.com/file/142482951/d4029580/statusicon_1.html

فك الضغط ثم نسخ ولصقها في مجلدها الخاص مع الاستبدال ..

أيقونات مختلفه للمجلدات ..

http://www.alraidiah.org/up/up/33311996220120330.rar





......

[فاصله]

اضافة الهاكات والمنتجات
تلاقونها في ملف نسخة المنتدى ..
لوحة تحكم الادارة >> المنتجات والاضافات >> التحكم بالمنتجات ..

طبعا آي اضافة بتلاقيها تلقائي في منتدانا ..
شريط اهداء - او هاك أخر عشر مشاركات الخ ...

...............


تصميم وتركيب البنرات ..

فتح الفوتوشوب وتصميم البنرات بنفس ستايل المنتدى ... باي حجم منآسب للبنر ..

ثم نحفظها بإسم باللغه الانجليزيه ... في مجلد الاستايل ...

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

وننتقل الى صفحة التصميم ... ونضيف جدول صفوفه على حسب المرغوب فيه ..

مثلا أنا حطيت 3 في 1

نضغط في نفس الجدول رايت كلك >> خصائص الجدول.. ونطبق التالي ::

يكون شكله كذا ..

نحط الماوس في الخلية الاولى .. ونضغط أيقونة الصورة ونسوي إدراج للبنر ..ونكمل الباقي نفس الشي ..

بعد اضافة البنر ننتقل الى تعليمات برمجيه ونحذف الزوائد

استبدال للكل ..

ننسخ الكود كامل .. ونذهب الى لوحة تحكم الاداره >> الاستايلات والقوالب >> التحكم بالاستايلات >> ستايلنا

اذهب ..

نلصق الكود في نهاية قالب الهيدر ثم حفظ ..

لزيادة المسافه بين الهيدر والبنرات نضيف .. قبل اضافة كود البنرات

<br>

<br>

******

حفظ الاستايل وتصدير الاستايل ..

ونذهب الى لوحة تحكم الاداره >> الاستايلات والقوالب >> التحكم بالاستايلات >> تحميل >> اذهب

ننسخ مجلدنا من

C /Appserv/www/vb

ونلصقه على سطح المكتب مع الملف اللي حملناه – الاستايل ..

ونحطهم في ملف مضغوط ( لازم يكونون مع بعض )

وبكذا يكون جاهز تسليمه للزبون - اذا حبينا يكون هذا منطلق للتجاره -

معاينته على منتدى وهمي .

لو بنجرب أي ستايل في منتدانا الوهمي .. نفك الضغط عنه – طبعا فيه ملف الاكس مل + مجلد الصور-

ننسخ مجلد الصور ونلصقه في هالمسار

C /Appserv/www/vb

ونذهب الى لوحة تحكم الاداره >> الاستايلات والقوالب >> رفع تحميل الاستايل >>

[فاصله]

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

بكذا نكون انتهينا من تصميم وتركيب ستايل غير متمدد ..
تقريبا قلت كل شي عندي وبإذن الله ما أكون نسيت شيء .. ولا غلطت في شي ..
سآمحوني على القصور ... بصراحه أول مره أسوي دورة ..
من بدايتها مريت بظروف الله أعلم فيها وكنت بوقفها بس الله كآتب إنها تتكمل وتنتهي ..
والحمدلله .. خلصنآ ...

- الواجب -
أبي أشوف المنتدى كامل
بعد الاضافات والاعدادات

إنتظروني الاسبوع القادم بإذن الله بتكريم المميزين

[srab]

يا مال العافيه

متى اخر مهله لتطبيق هذا الدرس

انا ناويه الثلاثاء اسلمك الجمل بما حمل

لان هاليومين مافيه مجال ابد

[فاصله]

آي وقت تبين يآروحي .. مافيه مهله معينه ..

[srab]

يا مال العافيه

الثلاثاء ان شاء الله اختم كل شي

كوني بالقرب

مااستغني عنك

[فاصله]

بانتظارك ...........

[goree]

::.


يسعدك ربي تيتشرتنآ الجميلة

تسلمييييييين يآ بعدي عالدرس الحلو والدورة المميزة

ابشرك خلصت كل شيء امس بس ماحصلت وقت انزله


وبأنزله لك بإذن الله بعد شوي




::.