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

[align=center]السلام عليكم ورحمة الله وبركاته






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

لازم يكون لدينا البرامج التالية

Adobe Photoshop إصدار 7 و ما فوق
EasyPHP لنتمكن من تتبيت المنتدى على جهازنا الخاص
Microsoft Office FrontPage 2003 لنتمكن من تركيب المنتدى
أولا سنفتح برنامج EasyPHP لنتمكن من تتبيت المنتدى لكن قبل دلك يجب تحميل البرنامج EasyPHP

من هنــــــــنا

بعد تثبيت برنامج EasyPHP
يجب أن يكون مثل هكذا

ننقر فوق صورة

نعمل مثل إلى بالصورة

بعد دالك تظهر لنا هذه الصفحة

نضغط على add مثل إلي بالصورة بعد دالك تظهر لنا هده الصفحة

بعد دالك نضغط ok
لتحميل النسخة 3.4.5 حمل من هنا
بعد دالك نذهب لملف النسخة و نبحث عن ملف config لنعدل فيه ما يلي

مثل إلي بالصورة

و بعد دالك تأتي مرحة تتبيت المنتدى

ندهب لمكان وضع العنوان بالمتصفح و نحذف
هذا العنوان http://127.0.0.1/home/index.php?to=add_alias_1

ونضع مكانه
http://127.0.0.1/vb/install/install.php
لنبدأ في تثبيت المنتدى

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

بعد دالك نضيف لير جديد

و نختار الألوان المناسبة لنا مثل هكذا

نعدل معيار التدرج اللوني بما يناسبنا

وبعد نبدأ بالتصميم

و بعد ذالك نعطيه هدا النمط لإضافة رينه على التصميم


وبعد دالك

و بعد

ليصبح مثل هكذا

مع بعض المحسنات أصبح بهذا الشكل

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


وستقسمه على هدا الشكل

بعد دالك

سنجدهم في ملف بعد أن نحذف الصور الغير المرغوب بها و الاحتفاظ بهذه الصور المتبقية
و أخيرا انتهت عملية التقطيع
الأن جاء دور برنامج Microsoft Office FrontPage 2003
نفتح البرنامج وندخل منطقة تحرير الكود ونمسح جميع المتحويات متل إلي بالصورة

تم نرجع لمنطقة تحرير التصميم و نظغط بالزر الأيمن على الخلفية

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

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

تم ندخل لخصائص الجدول

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

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

ليصير هكذا

تم نبذأ يملئه بالصور

و لنضع نقطة التمدد نفعل متل الي بالصورة

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


ليصبح الشكل هكذا

[center]تم نجر جميع حدود الجدول إلى بعضها ليتم تناسق الهيدر ويصبح هكذا


ونعمل مثل دالك على الفوتر

ونضع نقطة التمدد




وبعد دالك نقسم جدول الأعمدة على لتلاتة

عمود أيمن


عمود أيسر


هنا المنتدى

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

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

و الجزء السفلي

بعد دالك ندهب إلى لوحة تحكم المنتدى

وعندها نروح لضبط الإستايلات



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

تم نحفظ العمل بالذهاب إلى

ونروح لنرى المنتدى فنجده مثل هكذا

في الدرس اللاحق إن شاء الله درس تلوين المتغيرات لتناسق ألوان الستايل
و درس حدف الروابط ليصبح الستايل عام
و درس تكوين ملف xml