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

• Adobe Photoshop إصدار 7 و ما فوق
• Microsoft Office FrontPage 2003 لنتمكن من تركيب المنتدى
  
  و نحدد القياس التالي

أقسام الدرس :

1. أخد فكرة على كيفية التصميم
2. معرفة كيفية التقطيع و تحديد نقط التمدد
3. كيفية توزيع صور الستايل في برنامج الفرونت بيح
4. كيفية تركيبه على المنتدى
5. معرفية طريقية تلوين أجزاء الإستايل
6. طرقة تأطير بعض القوالب
7. تغيير إسم الستايل
8. إستخراج ملف XML

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

نبدأ بعون الله

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

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

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

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

و نعطيه القيمة 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 على الإستايل الإفتراضي

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