حصريا دورة كاملة لكيفية تصميم ستايل منتدى من البداية

و نتمنى الدعاء لي و لوادي

جميع ملفات الإستايل psd في المرفقات
و الستايل كاملا في المرفقات
نبدأ بعون الله

نختار اللونين المناسبين متا أنا اخترت اللون الأخضر

تم نختار هده الأداة لتحديد الشكل المطلوب متال الصورة

ليصير الشكل كما بالصورة

تم نختار نعمل متل إلي بالصورة

و نعطيه القيمة 12

تم نحدد الونين في معيار التدرج اللوني متل إلي بالصورة

تم نختار أداة التدرج اللوني

و نحدد من الأعلى إلى الإسفل متل الصورة ليصير شكله متل هكدا


تم ندهب لضف له حدود باللون الأسود و نعمل متل الصورة

و نعطي نفس القيم متل الصورة

تم نصيق لير جديد و يكون تحت اللير الأول الدي به الهيدر متل هكدا

تم نحدد المكان الدي بالصورة فارغ و نلونه بالتدرج متل الصورة

و نختار اللونين المناسبين أنا إخترت هدان اللونين الرمادي و الأبيض

تم ضع التدرج من الأعلى إلى الأسفل من العملية الأولى للهيدر

الأن سنطبق نفس المراحل التي طبقناها على الهيدر
نحدد بهده الأداة

متل هكدا

تم نعمل هده المرحلة

و نعطيه القيمة 5

تم نختار شكل سهم لنضعه في الفوتر ليكون زر -- أعلى الصفحة --

الأن نختار الشكل المناسب

تم نعمل هده الخاصيى ليصبح هتل هدا الشكل

و نرى الأن كيف أصبح الستايل كاملا

الأن بعد الإنتهاء من تصميم الهيدر و الفوتر سنبدأ في تصميم لتأطير القوالب متال فالب ناف بار
نفتح صفحة جديدة فرغة بقياس 400/400
تم تحدد متل هدا التحديد

تم نعمل هده متل هكدا

و نعطيه القيمة 10

تم نحدد الجزء السفلي مع الضغط على زر ALT في نفس الوقت لكي نزيله هكدا

ليصير هكدا

تم نملؤه بالتدرج اللون الدي عملناه في الأول أي اللونين الأخضر ليصير هكدا
تم نحدد في وسطه الشكل التالي

نفعل متل الصورة

و نعطيه القيمة 8

تم نضغط بالزر الأيمن للماوس متل الصورة لنفصل الجزء المحدد عن الأخر

تم نلون الجزء الدي تم المحدد باللون الرمادي
الأن نبدأ بالجزء السفلي

نفعل متل الصورة

و نعطيه القيمة 4

تم نحدد الجزء العلوي مع الضغظ على زر ALT لحدفه متل الصورة

تم نحدد الشكل متل الأول

تم نضغط بالزر الأيمن للماوس متل الصورة لنفصل الجزء المحدد عن الأخر

و نلونه باللون الرمادي
ليصير الشكل متل هكدا

الأن نأتي لمرحلة تقطيع الإستايل بعد ما تم تصميمه
نختار هده الأداة التي سنقطع بها الإيستايل

و نقطع الإستايل متل هكدا

سندهب لكي نخرج العمل مقطع كما حددنا له
بالضغط على الأزرار التالية دفعة واحدة
ALT+SHIFT+CTRL+S
الأن بعط حفظ الملف مقطع
هده هي الملفات التي تم تقطيعها

الأن سنفتح برنامج الفرونت بيج

سنحدف الكود الموجود بمنطقة البرمجة أيcode

تم ندهب لخصائص الصفحة متل الصورة

و نحدد إتجاه الصفحة

تم ندرج تلات جداول

و نضغط على الزر الأيمن للماوس لنحدد خصائص الجدول

و نغير هده القيم متل الصورة

الأن سنقيم الجدول الأول أي الهيدر إلى تلات خانات
بالضغط على الجدول الأول الدي نريد أن نقسمه يالزر الأيمن

و نختار الرقم 3

و كدالك الجدول الأخير أي الفوتر
ليصبح هكدا

الأن أصبح مبين لنا أماكن الصور و كدالك أماكن النقط المتمددة
الأن نبدأ بإدراج الصور و أرجو أن تركزو في هده الرحلة لأننا سنحتاج هده العمليات في مراحل قادمة بدون أن نعيد نفس الشرح
الأن سندرج خلفية في الرقم 2 متل الصورة

سنحدد الصورة المناسبة

سنحدد الصورة المناسبة

نحدد نقطة التمدد
الأن سندرج الصور في أماكنها

سنحدد الصور المحددة

و نضع إسم المنتدى كدالك

ليصير شكل الهيدر هكدا

الأن سنعمل متل هده المراحل على جدول الفوتر

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

تم نختار الصورة المناسبة

و نضيف الصورة لبصير هكدا

الأن سنعمل على وضع الروابط في الصورة
الرئيسية : index.php
لوحة التحكم : usercp.php
البحت : search.php
قائمة الأعضاء : memberlist.php
التعليمات : faq.php
التقويم : calendar.php
الأن طريقة إدراجها برابط في الصورة و الجزء المحدد
نضغط على شرط الخيارات بالزر الأيمن للماوس و نختار images كما بالصورة

ليظهر لنا هدا الشريط

و نحدد الصورة المراد وضع الرابط بزجء منها أو كلها تم نختار المربع الملون في الصورة باللون الورديو نحدد المنطقة التي نريد أن نضع بها رابط

سنحدد في الصورة بالمربع كلمة الرئيسية فقط

و عند التحديد سيضهر لك جدول تدرج فيه الرابط الدس يرد و سنستعمل الروابط التي دكرتها مسبقا

تم نضغط على ok و إن أدنا إضافة تعليق عند مرور الماوس على الرابط يضهر تعليق فوق الرابط
تم نكتب العبارة التي نريد

الأن سنضع الرابط في المتلت الدي يوجد بالفوتر و نضع الرابط كما هو مبين بالصورة top#

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

ليكون متل هكدا

تم نتدهب لمنطقة الكود

الكود المحدد يمتل الهيدر

الكود المحدد يمتل الفوتر

الأن سندخل للوحة تحكم المنتدى

و نتبع المراحل التي بالصور

و نضغط ok على الإستايل الإفتراضي

الأن هده هي الحقول التي سنلصق بها كود الهيدر و الفوتر

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

الأن لاحظ كيف سألصق الكود

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

كما بالصورة

و نحفظ التعديل بالضغط على حفظ

الأن سندهب لنرى كيف أصبح الإستايل بالمنتدى

الأن نلاحظ وجود فراغ كما هو مبين بالصورة

هده طرقة إزالته

و نغير في هدا الحق القيم التالية

لتصبح هكدا بعد التعديل

و نحفظ العمل الأن و ندهب لنرى هل أزيل هدا العيب من الستايل
نلاحظ انه لم يبقى و الحمد لله

الأن سنعمل على حدف الجزء الدي يربط الروابط الخاصة بصور الستايل لتصبه عامة و يمكن تركيبه على أي مساحة
سندهب للهيدر متلا و نفعل كما هو مبين في الصورة

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

هي الأن باللون الرمادي و يجب أن تصبح بلون المتصميم أي اللون الأبيض

الأن سنغير اللون الرمادي إلى الأبيض و نحفظ العمل و نى الأن كيف أصبح

أصبه باللون الدي حددناه
هدا المتغير التالت يستحسن عدم تعديل أي شيء به

المتغير الرابع حدود الجدول

المسؤول عن حدود الجدول كما هو مبين بالصورة

الأن بعد أن بعدل عليه نختار اللون المناسب بواسطة لفوتوشوب أنا إختر الون الخارجي اللون الأسون و الداخلي الأخضر

ليصبح الأن هكدا

الأن المتغير الخاص بالأقسام الرئيسية

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

ولدك ينحتاج هدا الكود
#5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left
و يجب تصميم صورة بحجم يقارب 40/20 و أنا إخترته هده

سندرج مجلد في مكان الستايل بإسم الدي تريد و أنا تركته ببإسم الدي يكون في الستايل الإفتراضي هو الدي سنضع فيه الصورة المطلوبة أي هده الصورة
كما بالصورة


ليصبح الرابط كما يلي
#93D04A url(massira-net.net/gradients/1.gif) repeat-x top left
ليصبح شكل المتغير بعد التعديل هكدا

نحفظ العمل و نرجع للمنتدى و نرى التغيير

الآن المتغير السادس رأس الجدول

هدا مكانه بالمنتدى

الأن سنجري تعديل على المتغير ليتم تناسق الألوان
إخترت هده الصورة و نعمل متل ما عملنا على المتغير الخامس

الأن نحفظ العمل و نروح للمنتدى لنرى التغيير

الأن نروح للمتغير السابع نهاية الجدول

هدا هو مكانه بالمنتدى

الأن نعدل على المتغير على حسب ألوان الستايل

الأن سيصبح بعد حفظ التعديل على المتغير هكدا

الأن المتغير التامن لون التوزيع الأول

و هدا مكانه بالمنتدى

و هدا المتغير التاسع له علاقة بلون التوزيع التاني

و هدا مكانه بالمنتدى

الأن بعد التعديل عليهم أصبحت الألوان متناسقة كما بالصورة

الأن المتغير العاشر وهو مخصص لتغير خلفية ولون صندوق المشاركات المطور WYSIWYG Editor

بعد التغيير باللون الأبيض أصبح هكدا

المتغير الحادي عشر و هو متخصص بحقول الكتابة متال حقل البحت و الرد السريع

هدا متال على مكان التغيير

الأن المتغير التاني عشر المتخصص بلون خط الأزرار و الخلفية كدالك

و كمتال على مكانها

الان المتغير التالت عشر الخاص بالقوائم
و هدا متال عليها

المتغير الرابع عشر المتحكم في لون الوقت

و هنا مكان تواجده

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

و هنا مكان تواجده

المتغير السادس عشر المتحكم في لون اللوحة

و هنا مكان تواجده

المتغير السابع عشر المتحكم في لون Legend

و هنا مكان تواجده العبارات الملونة في الصورة

المتغير التامن عشر المتحكم في لون القوائم المنبتقة

و هنا مكان تواجده

الأن بعد تعديل هده المتغيرات نروح للمنتدى و نرى كيف أصبحت ألوانه

الأن نروح لنتمم المتغيرات المتبقية
المتغير التاسع عشر المتحكم في لون جسم القوائم المنبتقة

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

المتحكم في لون القائمة
المتغير الواحد و العشرين المتحكم في لون سطوع القائمة

لاحظو كيف تم توزيع الألوان بين المتغيرين العشرين و الواحد و العشرين
ليصبح شكل القائمة كما في الصورة

الأن نروح للمتغر الخاص بقائمة الإنتقال السريع

ليصبح بهدا الشكل المتناسق

الأن بعد أن إنتهينا من تلوين أجزاء الستايل
الأن نروح لبرنامج الفوتوشوب لنقطع أجزاء الصور التجميلية لبعض القوالب
نقطعه متل هكدا

الأن نروح للوحة التحكم و نضغط على البحت في القوالب

تم تكتب إسم القالب الدي نريد البحت عنه
سنبدأ بتأطير قالب navbar

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

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

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

تم ندرج جدول من تلات خانات

نضغط على الماوس بالزر الأيمن

نضع متل هده القيم

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

تم ندرج جدول من تلات خانات

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

الأن نزيل الروابط المتعلقة بالجهاز لتصبح الصور تعمل على جميع المساحات نروح لمنطقة الكود و نحدد الجزء الدي نريد حدفهو نضغط على الزرين CTRL+F لتظهر لنا هده النافدة متل التي بالصورة و تم نطبق متلها و نضغط زر إستبدال الكل

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

الأن سنبحت عن قالب FORUMHOME لنأطره متل الناف بار

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

تم ندرج جدول تلاتي

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

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

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

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

و ندرج جدولا متل السابق و بملئه بالصور
تم نضع الماوس في مكان الخط مرة أخرى لنضع الجدول السفلي

الأن بعد ملئ الجدولين بالصور ندرج جدولين لأخرين يعني جدول سفلي و علوي و سأريكم مكانهما
هنا الجدول الأول

و هنا الجدول التاني
و هدا مكانه القالب في المنتدى بعد التغيير

الأن بعد الأنتهاء من إعطائكم فكرة على كيفية تأطير بعض القوالب
سنتعرف الأن على طريقة تغير إسم الستايل نفعل متل الصورة

نمتب الإسم الدي نريده تم نحفط العمل

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

تم يضهر لنا هدا الجدول لإختيار الستايل الدي تريد تحميل ملف XML الخاص به

تم نضغط تنزيل و نحدد مكان وضع الملف

الحمد لله لقم انتهينا الآن