Mohannad
07-02-2007, 02:49 PM
بسم الله الرحمن الرحيم
دورة كاملة تصميم ستايل منتدى إلى حين إكماله
و أتمنى الدعاء لي و لوالدي
Adobe Photoshop إصدار 7 و ما فوق
Microsoft Office FrontPage 2003 لنتمكن من تركيب المنتدى
أقسام الدرس :
أخد فكرة على كيفية التصميم
معرفة كيفية التقطيع و تحديد نقط التمدد
كيفية توزيع صور الستايل في برنامج الفرونت بيح
كيفية تركيبه على المنتدى
معرفية طريقية تلوين أجزاء الإستايل
طرقة تأطير بعض القوالب
تغيير إسم الستايل
إستخراج ملف XMLو نتمنى الدعاء لي و لوادي
جميع ملفات الإستايل psd في المرفقات
و الستايل كاملا في المرفقات
نبدأ بعون الله
http://www.massira-net.biz/cour_style/1.jpg
نختار اللونين المناسبين متا أنا اخترت اللون الأخضر
http://www.massira-net.biz/cour_style/2.jpg
تم نختار هده الأداة لتحديد الشكل المطلوب متال الصورة
http://www.massira-net.biz/cour_style/3.jpg
ليصير الشكل كما بالصورة
http://www.massira-net.biz/cour_style/4.jpg
تم نختار نعمل متل إلي بالصورة
http://www.massira-net.biz/cour_style/5.jpg
و نعطيه القيمة 12
http://www.massira-net.biz/cour_style/6.jpg
تم نحدد الونين في معيار التدرج اللوني متل إلي بالصورة
http://www.massira-net.biz/cour_style/7.jpg
تم نختار أداة التدرج اللوني
http://www.massira-net.biz/cour_style/8.jpg
و نحدد من الأعلى إلى الإسفل متل الصورة ليصير شكله متل هكدا
http://www.massira-net.biz/cour_style/9.jpg
تم ندهب لضف له حدود باللون الأسود و نعمل متل الصورة
http://www.massira-net.biz/cour_style/10.jpg
و نعطي نفس القيم متل الصورة
http://www.massira-net.biz/cour_style/11.jpg
تم نصيق لير جديد و يكون تحت اللير الأول الدي به الهيدر متل هكدا
http://www.massira-net.biz/cour_style/12.jpg
تم نحدد المكان الدي بالصورة فارغ و نلونه بالتدرج متل الصورة
http://www.massira-net.biz/cour_style/13.jpg
و نختار اللونين المناسبين أنا إخترت هدان اللونين الرمادي و الأبيض
http://www.massira-net.biz/cour_style/14.jpg
تم ضع التدرج من الأعلى إلى الأسفل من العملية الأولى للهيدر
http://www.massira-net.biz/cour_style/15.jpg
الأن سنطبق نفس المراحل التي طبقناها على الهيدر
نحدد بهده الأداة
http://www.massira-net.biz/cour_style/3.jpg
متل هكدا
http://www.massira-net.biz/cour_style/16.jpg
تم نعمل هده المرحلة
http://www.massira-net.biz/cour_style/5.jpg
و نعطيه القيمة 5
http://www.massira-net.biz/cour_style/17.jpg
تم نختار شكل سهم لنضعه في الفوتر ليكون زر -- أعلى الصفحة --
http://www.massira-net.biz/cour_style/18.jpg
الأن نختار الشكل المناسب
http://www.massira-net.biz/cour_style/19.jpg
تم نعمل هده الخاصيى ليصبح هتل هدا الشكل
http://www.massira-net.biz/cour_style/20.jpg
و نرى الأن كيف أصبح الستايل كاملا
http://www.massira-net.biz/cour_style/21.gif
الأن بعد الإنتهاء من تصميم الهيدر و الفوتر سنبدأ في تصميم لتأطير القوالب متال فالب ناف بار
نفتح صفحة جديدة فرغة بقياس 400/400
تم تحدد متل هدا التحديد
http://www.massira-net.biz/cour_style/21.jpg
تم نعمل هده متل هكدا
http://www.massira-net.biz/cour_style/5.jpg
و نعطيه القيمة 10
http://www.massira-net.biz/cour_style/22.jpg
تم نحدد الجزء السفلي مع الضغط على زر ALT في نفس الوقت لكي نزيله هكدا
http://www.massira-net.biz/cour_style/23.jpg
ليصير هكدا
http://www.massira-net.biz/cour_style/24.jpg
تم نملؤه بالتدرج اللون الدي عملناه في الأول أي اللونين الأخضر ليصير هكدا
تم نحدد في وسطه الشكل التالي
http://www.massira-net.biz/cour_style/25.jpg
نفعل متل الصورة
http://www.massira-net.biz/cour_style/5.jpg
و نعطيه القيمة 8
http://www.massira-net.biz/cour_style/26.jpg
تم نضغط بالزر الأيمن للماوس متل الصورة لنفصل الجزء المحدد عن الأخر
http://www.massira-net.biz/cour_style/27.jpg
تم نلون الجزء الدي تم المحدد باللون الرمادي
الأن نبدأ بالجزء السفلي
http://www.massira-net.biz/cour_style/28.jpg
نفعل متل الصورة
http://www.massira-net.biz/cour_style/5.jpg
و نعطيه القيمة 4
http://www.massira-net.biz/cour_style/29.jpg
تم نحدد الجزء العلوي مع الضغظ على زر ALT لحدفه متل الصورة
http://www.massira-net.biz/cour_style/30.jpg
تم نحدد الشكل متل الأول
http://www.massira-net.biz/cour_style/31.jpg
تم نضغط بالزر الأيمن للماوس متل الصورة لنفصل الجزء المحدد عن الأخر
http://www.massira-net.biz/cour_style/27.jpg
و نلونه باللون الرمادي
ليصير الشكل متل هكدا
http://www.massira-net.biz/cour_style/34.jpg
الأن نأتي لمرحلة تقطيع الإستايل بعد ما تم تصميمه
نختار هده الأداة التي سنقطع بها الإيستايل
http://www.massira-net.biz/cour_style/35.jpg
و نقطع الإستايل متل هكدا
http://www.massira-net.biz/cour_style/36.jpg
سندهب لكي نخرج العمل مقطع كما حددنا له
بالضغط على الأزرار التالية دفعة واحدة
ALT+SHIFT+CTRL+S
الأن بعط حفظ الملف مقطع
هده هي الملفات التي تم تقطيعها
http://www.massira-net.biz/cour_style/38.jpg
الأن سنفتح برنامج الفرونت بيج
http://www.massira-net.biz/cour_style/37.jpg
سنحدف الكود الموجود بمنطقة البرمجة أيcode
http://www.massira-net.biz/cour_style/39.jpg
تم ندهب لخصائص الصفحة متل الصورة
http://www.massira-net.biz/cour_style/40.jpg
و نحدد إتجاه الصفحة
http://www.massira-net.biz/cour_style/41.jpg
تم ندرج تلات جداول
http://www.massira-net.biz/cour_style/42.jpg
و نضغط على الزر الأيمن للماوس لنحدد خصائص الجدول
http://www.massira-net.biz/cour_style/43.jpg
و نغير هده القيم متل الصورة
http://www.massira-net.biz/cour_style/44.jpg
الأن سنقيم الجدول الأول أي الهيدر إلى تلات خانات
بالضغط على الجدول الأول الدي نريد أن نقسمه يالزر الأيمن
http://www.massira-net.biz/cour_style/45.jpg
و نختار الرقم 3
http://www.massira-net.biz/cour_style/46.jpg
و كدالك الجدول الأخير أي الفوتر
ليصبح هكدا
http://www.massira-net.biz/cour_style/47.jpg
الأن أصبح مبين لنا أماكن الصور و كدالك أماكن النقط المتمددة
الأن نبدأ بإدراج الصور و أرجو أن تركزو في هده الرحلة لأننا سنحتاج هده العمليات في مراحل قادمة بدون أن نعيد نفس الشرح
الأن سندرج خلفية في الرقم 2 متل الصورة
http://www.massira-net.biz/cour_style/48.jpg
سنحدد الصورة المناسبة
http://www.massira-net.biz/cour_style/49.jpg
سنحدد الصورة المناسبة
http://www.massira-net.biz/cour_style/50.jpg
نحدد نقطة التمدد
الأن سندرج الصور في أماكنها
http://www.massira-net.biz/cour_style/51.jpg
سنحدد الصور المحددة
http://www.massira-net.biz/cour_style/52.jpg
و نضع إسم المنتدى كدالك
http://www.massira-net.biz/cour_style/53.jpg
ليصير شكل الهيدر هكدا
http://www.massira-net.biz/cour_style/54.jpg
الأن سنعمل متل هده المراحل على جدول الفوتر
http://www.massira-net.biz/cour_style/55.jpg
سنحدد الجدول كاملا و نضع فيه خلفية كما بالصورة
http://www.massira-net.biz/cour_style/45.jpg
تم نختار الصورة المناسبة
http://www.massira-net.biz/cour_style/56.jpg
و نضيف الصورة لبصير هكدا
http://www.massira-net.biz/cour_style/57.jpg
الأن سنعمل على وضع الروابط في الصورة
الرئيسية : index.php
لوحة التحكم : usercp.php
البحت : search.php
قائمة الأعضاء : memberlist.php
التعليمات : faq.php
التقويم : calendar.php
الأن طريقة إدراجها برابط في الصورة و الجزء المحدد
نضغط على شرط الخيارات بالزر الأيمن للماوس و نختار images كما بالصورة
http://www.massira-net.biz/cour_style/58.jpg
ليظهر لنا هدا الشريط
http://www.massira-net.biz/cour_style/59.jpg
و نحدد الصورة المراد وضع الرابط بزجء منها أو كلها تم نختار المربع الملون في الصورة باللون الورديو نحدد المنطقة التي نريد أن نضع بها رابط
http://www.massira-net.biz/cour_style/60.jpg
سنحدد في الصورة بالمربع كلمة الرئيسية فقط
http://www.massira-net.biz/cour_style/61.jpg
و عند التحديد سيضهر لك جدول تدرج فيه الرابط الدس يرد و سنستعمل الروابط التي دكرتها مسبقا
http://www.massira-net.biz/cour_style/62.jpg
تم نضغط على ok و إن أدنا إضافة تعليق عند مرور الماوس على الرابط يضهر تعليق فوق الرابط
تم نكتب العبارة التي نريد
http://www.massira-net.biz/cour_style/63.jpg
الأن سنضع الرابط في المتلت الدي يوجد بالفوتر و نضع الرابط كما هو مبين بالصورة top#
http://www.massira-net.biz/cour_style/64.jpg
الأن مرحلة تحديد الفوتر و الهيدر من خلال كود HTML سنضع الماوس في الجدول الدي بالوسط أي مكان تواجد المنتدى كما دكرت سابقا
http://www.massira-net.biz/cour_style/65.jpg
ليكون متل هكدا
http://www.massira-net.biz/cour_style/66.jpg
تم نتدهب لمنطقة الكود
http://www.massira-net.biz/cour_style/67.jpg
الكود المحدد يمتل الهيدر
http://www.massira-net.biz/cour_style/68.jpg
الكود المحدد يمتل الفوتر
http://www.massira-net.biz/cour_style/69.jpg
الأن سندخل للوحة تحكم المنتدى
http://www.massira-net.biz/cour_style/70.jpg
و نتبع المراحل التي بالصور
http://www.massira-net.biz/cour_style/71.jpg
و نضغط ok على الإستايل الإفتراضي
http://www.massira-net.biz/cour_style/72.jpg
الأن هده هي الحقول التي سنلصق بها كود الهيدر و الفوتر
http://www.massira-net.biz/cour_style/73.jpg
الأن سنعود للفرونت بيج لننسخ الكود الدي حددناه للهيدر و نلصقه بمكان الهيدر بلوحة التحكم
http://www.massira-net.biz/cour_style/74.jpg
الأن لاحظ كيف سألصق الكود
http://www.massira-net.biz/cour_style/75.jpg
أما الأن بالنسبة للفوتر فسنلصق الكود في في الأسفل
ننسخ هدا الكود الخاص بالفوتر من الفرونت بيج و نلصقه في الحقل الخاص به في لوحة التحكم
http://www.massira-net.biz/cour_style/77.jpg
كما بالصورة
http://www.massira-net.biz/cour_style/76.jpg
و نحفظ التعديل بالضغط على حفظ
http://www.massira-net.biz/cour_style/78.jpg
الأن سندهب لنرى كيف أصبح الإستايل بالمنتدى
http://www.massira-net.biz/cour_style/79.jpg
الأن نلاحظ وجود فراغ كما هو مبين بالصورة
http://www.massira-net.biz/cour_style/80.jpg
هده طرقة إزالته
http://www.massira-net.biz/cour_style/81.jpg
و نغير في هدا الحق القيم التالية
http://www.massira-net.biz/cour_style/82.jpg
لتصبح هكدا بعد التعديل
http://www.massira-net.biz/cour_style/83.jpg
و نحفظ العمل الأن و ندهب لنرى هل أزيل هدا العيب من الستايل
نلاحظ انه لم يبقى و الحمد لله
http://www.massira-net.biz/cour_style/84.jpg
الأن سنعمل على حدف الجزء الدي يربط الروابط الخاصة بصور الستايل لتصبه عامة و يمكن تركيبه على أي مساحة
سندهب للهيدر متلا و نفعل كما هو مبين في الصورة
http://www.massira-net.biz/cour_style/85.jpg
تم نحفظ العمل
الأن و بحمد الله سنشرع في تلوين الستايل ليتناسق مع أوان التصميم
سنبدأ بالمتغير الأول خلفية المنتدى
http://www.massira-net.biz/cour_style/86.jpg
هي الأن باللون الرمادي و يجب أن تصبح بلون المتصميم أي اللون الأبيض
http://www.massira-net.biz/cour_style/87.jpg
الأن سنغير اللون الرمادي إلى الأبيض و نحفظ العمل و نى الأن كيف أصبح
http://www.massira-net.biz/cour_style/88.jpg
أصبه باللون الدي حددناه
هدا المتغير التالت يستحسن عدم تعديل أي شيء به
http://www.massira-net.biz/cour_style/90.jpg
المتغير الرابع حدود الجدول
http://www.massira-net.biz/cour_style/91.jpg
المسؤول عن حدود الجدول كما هو مبين بالصورة
http://www.massira-net.biz/cour_style/92.jpg
الأن بعد أن بعدل عليه نختار اللون المناسب بواسطة لفوتوشوب أنا إختر الون الخارجي اللون الأسون و الداخلي الأخضر
http://www.massira-net.biz/cour_style/93.jpg
ليصبح الأن هكدا
http://www.massira-net.biz/cour_style/94.jpg
الأن المتغير الخاص بالأقسام الرئيسية
http://www.massira-net.biz/cour_style/95.jpg
يجب أن نختار صورة تناسب لون الستايل لتكون خلفية وهذا شكلها بالمنتدى
http://www.massira-net.biz/cour_style/96.jpg
ولدك ينحتاج هدا الكود
#5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left
و يجب تصميم صورة بحجم يقارب 40/20 و أنا إخترته هده
http://www.massira-net.biz/cour_style/1.gif
سندرج مجلد في مكان الستايل بإسم الدي تريد و أنا تركته ببإسم الدي يكون في الستايل الإفتراضي هو الدي سنضع فيه الصورة المطلوبة أي هده الصورة http://www.massira-net.biz/cour_style/1.gif
كما بالصورة
http://www.massira-net.biz/cour_style/97.jpg
http://www.massira-net.biz/cour_style/98.jpg
ليصبح الرابط كما يلي
#93D04A url(massira-net.net/gradients/1.gif) repeat-x top left
ليصبح شكل المتغير بعد التعديل هكدا
http://www.massira-net.biz/cour_style/99.jpg
نحفظ العمل و نرجع للمنتدى و نرى التغيير
http://www.massira-net.biz/cour_style/100.jpg
الآن المتغير السادس رأس الجدول
http://www.massira-net.biz/cour_style/101.jpg
هدا مكانه بالمنتدى
http://www.massira-net.biz/cour_style/102.jpg
الأن سنجري تعديل على المتغير ليتم تناسق الألوان
إخترت هده الصورة http://www.massira-net.biz/cour_style/2.gif و نعمل متل ما عملنا على المتغير الخامس
http://www.massira-net.biz/cour_style/103.jpg
الأن نحفظ العمل و نروح للمنتدى لنرى التغيير
http://www.massira-net.biz/cour_style/104.jpg
الأن نروح للمتغير السابع نهاية الجدول
http://www.massira-net.biz/cour_style/105.jpg
هدا هو مكانه بالمنتدى
http://www.massira-net.biz/cour_style/106.jpg
الأن نعدل على المتغير على حسب ألوان الستايل
http://www.massira-net.biz/cour_style/107.jpg
الأن سيصبح بعد حفظ التعديل على المتغير هكدا
http://www.massira-net.biz/cour_style/108.jpg
الأن المتغير التامن لون التوزيع الأول
http://www.massira-net.biz/cour_style/109.jpg
و هدا مكانه بالمنتدى
http://www.massira-net.biz/cour_style/111.jpg
و هدا المتغير التاسع له علاقة بلون التوزيع التاني
http://www.massira-net.biz/cour_style/110.jpg
و هدا مكانه بالمنتدى
http://www.massira-net.biz/cour_style/112.jpg
الأن بعد التعديل عليهم أصبحت الألوان متناسقة كما بالصورة
http://www.massira-net.biz/cour_style/113.jpg
الأن المتغير العاشر وهو مخصص لتغير خلفية ولون صندوق المشاركات المطور WYSIWYG Editor
http://www.massira-net.biz/cour_style/114.jpg
بعد التغيير باللون الأبيض أصبح هكدا
http://www.massira-net.biz/cour_style/115.jpg
المتغير الحادي عشر و هو متخصص بحقول الكتابة متال حقل البحت و الرد السريع
http://www.massira-net.biz/cour_style/116.jpg
هدا متال على مكان التغيير
http://www.massira-net.biz/cour_style/117.jpg
الأن المتغير التاني عشر المتخصص بلون خط الأزرار و الخلفية كدالك
http://www.massira-net.biz/cour_style/118.jpg
و كمتال على مكانها
http://www.massira-net.biz/cour_style/119.jpg
الان المتغير التالت عشر الخاص بالقوائم http://www.massira-net.biz/cour_style/120.jpg
و هدا متال عليها
http://www.massira-net.biz/cour_style/121.jpg
المتغير الرابع عشر المتحكم في لون الوقت
http://www.massira-net.biz/cour_style/122.jpg
و هنا مكان تواجده
http://www.massira-net.biz/cour_style/123.jpg
المتغير الخامس عشر المتحكم في لون محيط اللوحة
http://www.massira-net.biz/cour_style/124.jpg
و هنا مكان تواجده
http://www.massira-net.biz/cour_style/125.jpg
المتغير السادس عشر المتحكم في لون اللوحة
http://www.massira-net.biz/cour_style/126.jpg
و هنا مكان تواجده
http://www.massira-net.biz/cour_style/127.jpg
المتغير السابع عشر المتحكم في لون Legend
http://www.massira-net.biz/cour_style/128.jpg
و هنا مكان تواجده العبارات الملونة في الصورة
http://www.massira-net.biz/cour_style/129.jpg
المتغير التامن عشر المتحكم في لون القوائم المنبتقة
http://www.massira-net.biz/cour_style/130.jpg
و هنا مكان تواجده
http://www.massira-net.biz/cour_style/131.jpg
الأن بعد تعديل هده المتغيرات نروح للمنتدى و نرى كيف أصبحت ألوانه
http://www.massira-net.biz/cour_style/132.jpg
الأن نروح لنتمم المتغيرات المتبقية
المتغير التاسع عشر المتحكم في لون جسم القوائم المنبتقة
http://www.massira-net.biz/cour_style/133.jpg
و هو لون الحدود الداخلي و الخارجي كما عملنا في المتغير الرابع حدود الجدول
المتغير العشرين المتحكم في خيارات لون قائمة الإنبتاق
http://www.massira-net.biz/cour_style/134.jpg
المتحكم في لون القائمة
المتغير الواحد و العشرين المتحكم في لون سطوع القائمة
http://www.massira-net.biz/cour_style/135.jpg
لاحظو كيف تم توزيع الألوان بين المتغيرين العشرين و الواحد و العشرين
ليصبح شكل القائمة كما في الصورة
http://www.massira-net.biz/cour_style/136.jpg
الأن نروح للمتغر الخاص بقائمة الإنتقال السريع
http://www.massira-net.biz/cour_style/137.jpg
ليصبح بهدا الشكل المتناسق
http://www.massira-net.biz/cour_style/138.jpg
الأن بعد أن إنتهينا من تلوين أجزاء الستايل
الأن نروح لبرنامج الفوتوشوب لنقطع أجزاء الصور التجميلية لبعض القوالب
نقطعه متل هكدا
http://www.massira-net.biz/cour_style/139.jpg
الأن نروح للوحة التحكم و نضغط على البحت في القوالب
http://www.massira-net.biz/cour_style/140.jpg
تم تكتب إسم القالب الدي نريد البحت عنه
سنبدأ بتأطير قالب navbar
http://www.massira-net.biz/cour_style/141.jpg
نضغط عليه الان لننسخ الكود الخاص بالقالب لنلصقه في برنامج الفرونت بيج
http://www.massira-net.biz/cour_style/142.jpg
نحدد الكود كاملا تم ننسخه
http://www.massira-net.biz/cour_style/143.jpg
و نلصقه في برنامج الفرونت بيج
الأن نضع الماوس في مكان الخط الأحمر
http://www.massira-net.biz/cour_style/144.jpg
تم ندرج جدول من تلات خانات
http://www.massira-net.biz/cour_style/145.jpg
نضغط على الماوس بالزر الأيمن
http://www.massira-net.biz/cour_style/48.jpg
نضع متل هده القيم
http://www.massira-net.biz/cour_style/44.jpg
تم نعطي للجدول خصائصه ليصبح غير مرئي و نملئه بالصور في الأماكن المناسبة
نضع الماوس في مكان الخط الأحمر
http://www.massira-net.biz/cour_style/146.jpg
تم ندرج جدول من تلات خانات
http://www.massira-net.biz/cour_style/145.jpg
تم نملئه بالصور كما فعلنا للجدول العلوي ليصبح هكدا
http://www.massira-net.biz/cour_style/147.jpg
الأن نزيل الروابط المتعلقة بالجهاز لتصبح الصور تعمل على جميع المساحات نروح لمنطقة الكود و نحدد الجزء الدي نريد حدفهو نضغط على الزرين CTRL+F لتظهر لنا هده النافدة متل التي بالصورة و تم نطبق متلها و نضغط زر إستبدال الكل
http://www.massira-net.biz/cour_style/148.jpg
تم نروح للوحة التحكم و نعد لصقه بعد حدف الكود السابق تم نحفظ العمل و نروح للمنتدى ليصير شكل الناف بار كما ترى بالصورة
http://www.massira-net.biz/cour_style/149.jpg
الأن سنبحت عن قالب FORUMHOME لنأطره متل الناف بار
http://www.massira-net.biz/cour_style/150.jpg
الأن عند نسخنا الكود FORUMHOME سنلصقه في الفرونت بيج
تم نضع الماوس في مكان الخط الأحمر
http://www.massira-net.biz/cour_style/151.jpg
تم ندرج جدول تلاتي
http://www.massira-net.biz/cour_style/145.jpg
تم نعطيه خصائص الجدول كما فعلنا بالناف بار
و نملئه بالصور المناسبة
تم نضع الماوس في مكان الخط الأحمر و نعمل متل الجدول العلوي
http://www.massira-net.biz/cour_style/152.jpg
تم ننسخ الكود الدي في الفرونت بيج ونلصقه في القالب الخاص FORUMHOME تم نحفض العمل و نروح للمنتدى لنرى التغيير الحاصل
http://www.massira-net.biz/cour_style/153.jpg
الأن نروح للقالب FORUMDISPLAY و ننسخ الكود المجود به تم نلصقه بالفرونت بيج و نبدأ التأطير كما عملنا على القالبين السابقين
http://www.massira-net.biz/cour_style/154.jpg
كما بالصورة بعد لصق الكود بضع الماوس في مكان الخط الأحمر
http://www.massira-net.biz/cour_style/155.jpg
و ندرج جدولا متل السابق و بملئه بالصور
تم نضع الماوس في مكان الخط مرة أخرى لنضع الجدول السفلي
http://www.massira-net.biz/cour_style/156.jpg
الأن بعد ملئ الجدولين بالصور ندرج جدولين لأخرين يعني جدول سفلي و علوي و سأريكم مكانهما
هنا الجدول الأول
http://www.massira-net.biz/cour_style/157.jpg
و هنا الجدول التاني
و هدا مكانه القالب في المنتدى بعد التغيير
http://www.massira-net.biz/cour_style/159.jpg
الأن بعد الأنتهاء من إعطائكم فكرة على كيفية تأطير بعض القوالب
سنتعرف الأن على طريقة تغير إسم الستايل نفعل متل الصورة
http://www.massira-net.biz/cour_style/160.jpg
نمتب الإسم الدي نريده تم نحفط العمل
http://www.massira-net.biz/cour_style/161.jpg
الأن طرقة تحميل ملف XML ليصبح الستايل جاهزل لتركيبه على أي منتدى نفعل متل الصورة
http://www.massira-net.biz/cour_style/162.jpg
تم يضهر لنا هدا الجدول لإختيار الستايل الدي تريد تحميل ملف XML الخاص به
http://www.massira-net.biz/cour_style/163.jpg
تم نضغط تنزيل و نحدد مكان وضع الملف
http://www.massira-net.biz/cour_style/164.jpg
الحمد لله لقم انتهينا الآن
دورة كاملة تصميم ستايل منتدى إلى حين إكماله
و أتمنى الدعاء لي و لوالدي
Adobe Photoshop إصدار 7 و ما فوق
Microsoft Office FrontPage 2003 لنتمكن من تركيب المنتدى
أقسام الدرس :
أخد فكرة على كيفية التصميم
معرفة كيفية التقطيع و تحديد نقط التمدد
كيفية توزيع صور الستايل في برنامج الفرونت بيح
كيفية تركيبه على المنتدى
معرفية طريقية تلوين أجزاء الإستايل
طرقة تأطير بعض القوالب
تغيير إسم الستايل
إستخراج ملف XMLو نتمنى الدعاء لي و لوادي
جميع ملفات الإستايل psd في المرفقات
و الستايل كاملا في المرفقات
نبدأ بعون الله
http://www.massira-net.biz/cour_style/1.jpg
نختار اللونين المناسبين متا أنا اخترت اللون الأخضر
http://www.massira-net.biz/cour_style/2.jpg
تم نختار هده الأداة لتحديد الشكل المطلوب متال الصورة
http://www.massira-net.biz/cour_style/3.jpg
ليصير الشكل كما بالصورة
http://www.massira-net.biz/cour_style/4.jpg
تم نختار نعمل متل إلي بالصورة
http://www.massira-net.biz/cour_style/5.jpg
و نعطيه القيمة 12
http://www.massira-net.biz/cour_style/6.jpg
تم نحدد الونين في معيار التدرج اللوني متل إلي بالصورة
http://www.massira-net.biz/cour_style/7.jpg
تم نختار أداة التدرج اللوني
http://www.massira-net.biz/cour_style/8.jpg
و نحدد من الأعلى إلى الإسفل متل الصورة ليصير شكله متل هكدا
http://www.massira-net.biz/cour_style/9.jpg
تم ندهب لضف له حدود باللون الأسود و نعمل متل الصورة
http://www.massira-net.biz/cour_style/10.jpg
و نعطي نفس القيم متل الصورة
http://www.massira-net.biz/cour_style/11.jpg
تم نصيق لير جديد و يكون تحت اللير الأول الدي به الهيدر متل هكدا
http://www.massira-net.biz/cour_style/12.jpg
تم نحدد المكان الدي بالصورة فارغ و نلونه بالتدرج متل الصورة
http://www.massira-net.biz/cour_style/13.jpg
و نختار اللونين المناسبين أنا إخترت هدان اللونين الرمادي و الأبيض
http://www.massira-net.biz/cour_style/14.jpg
تم ضع التدرج من الأعلى إلى الأسفل من العملية الأولى للهيدر
http://www.massira-net.biz/cour_style/15.jpg
الأن سنطبق نفس المراحل التي طبقناها على الهيدر
نحدد بهده الأداة
http://www.massira-net.biz/cour_style/3.jpg
متل هكدا
http://www.massira-net.biz/cour_style/16.jpg
تم نعمل هده المرحلة
http://www.massira-net.biz/cour_style/5.jpg
و نعطيه القيمة 5
http://www.massira-net.biz/cour_style/17.jpg
تم نختار شكل سهم لنضعه في الفوتر ليكون زر -- أعلى الصفحة --
http://www.massira-net.biz/cour_style/18.jpg
الأن نختار الشكل المناسب
http://www.massira-net.biz/cour_style/19.jpg
تم نعمل هده الخاصيى ليصبح هتل هدا الشكل
http://www.massira-net.biz/cour_style/20.jpg
و نرى الأن كيف أصبح الستايل كاملا
http://www.massira-net.biz/cour_style/21.gif
الأن بعد الإنتهاء من تصميم الهيدر و الفوتر سنبدأ في تصميم لتأطير القوالب متال فالب ناف بار
نفتح صفحة جديدة فرغة بقياس 400/400
تم تحدد متل هدا التحديد
http://www.massira-net.biz/cour_style/21.jpg
تم نعمل هده متل هكدا
http://www.massira-net.biz/cour_style/5.jpg
و نعطيه القيمة 10
http://www.massira-net.biz/cour_style/22.jpg
تم نحدد الجزء السفلي مع الضغط على زر ALT في نفس الوقت لكي نزيله هكدا
http://www.massira-net.biz/cour_style/23.jpg
ليصير هكدا
http://www.massira-net.biz/cour_style/24.jpg
تم نملؤه بالتدرج اللون الدي عملناه في الأول أي اللونين الأخضر ليصير هكدا
تم نحدد في وسطه الشكل التالي
http://www.massira-net.biz/cour_style/25.jpg
نفعل متل الصورة
http://www.massira-net.biz/cour_style/5.jpg
و نعطيه القيمة 8
http://www.massira-net.biz/cour_style/26.jpg
تم نضغط بالزر الأيمن للماوس متل الصورة لنفصل الجزء المحدد عن الأخر
http://www.massira-net.biz/cour_style/27.jpg
تم نلون الجزء الدي تم المحدد باللون الرمادي
الأن نبدأ بالجزء السفلي
http://www.massira-net.biz/cour_style/28.jpg
نفعل متل الصورة
http://www.massira-net.biz/cour_style/5.jpg
و نعطيه القيمة 4
http://www.massira-net.biz/cour_style/29.jpg
تم نحدد الجزء العلوي مع الضغظ على زر ALT لحدفه متل الصورة
http://www.massira-net.biz/cour_style/30.jpg
تم نحدد الشكل متل الأول
http://www.massira-net.biz/cour_style/31.jpg
تم نضغط بالزر الأيمن للماوس متل الصورة لنفصل الجزء المحدد عن الأخر
http://www.massira-net.biz/cour_style/27.jpg
و نلونه باللون الرمادي
ليصير الشكل متل هكدا
http://www.massira-net.biz/cour_style/34.jpg
الأن نأتي لمرحلة تقطيع الإستايل بعد ما تم تصميمه
نختار هده الأداة التي سنقطع بها الإيستايل
http://www.massira-net.biz/cour_style/35.jpg
و نقطع الإستايل متل هكدا
http://www.massira-net.biz/cour_style/36.jpg
سندهب لكي نخرج العمل مقطع كما حددنا له
بالضغط على الأزرار التالية دفعة واحدة
ALT+SHIFT+CTRL+S
الأن بعط حفظ الملف مقطع
هده هي الملفات التي تم تقطيعها
http://www.massira-net.biz/cour_style/38.jpg
الأن سنفتح برنامج الفرونت بيج
http://www.massira-net.biz/cour_style/37.jpg
سنحدف الكود الموجود بمنطقة البرمجة أيcode
http://www.massira-net.biz/cour_style/39.jpg
تم ندهب لخصائص الصفحة متل الصورة
http://www.massira-net.biz/cour_style/40.jpg
و نحدد إتجاه الصفحة
http://www.massira-net.biz/cour_style/41.jpg
تم ندرج تلات جداول
http://www.massira-net.biz/cour_style/42.jpg
و نضغط على الزر الأيمن للماوس لنحدد خصائص الجدول
http://www.massira-net.biz/cour_style/43.jpg
و نغير هده القيم متل الصورة
http://www.massira-net.biz/cour_style/44.jpg
الأن سنقيم الجدول الأول أي الهيدر إلى تلات خانات
بالضغط على الجدول الأول الدي نريد أن نقسمه يالزر الأيمن
http://www.massira-net.biz/cour_style/45.jpg
و نختار الرقم 3
http://www.massira-net.biz/cour_style/46.jpg
و كدالك الجدول الأخير أي الفوتر
ليصبح هكدا
http://www.massira-net.biz/cour_style/47.jpg
الأن أصبح مبين لنا أماكن الصور و كدالك أماكن النقط المتمددة
الأن نبدأ بإدراج الصور و أرجو أن تركزو في هده الرحلة لأننا سنحتاج هده العمليات في مراحل قادمة بدون أن نعيد نفس الشرح
الأن سندرج خلفية في الرقم 2 متل الصورة
http://www.massira-net.biz/cour_style/48.jpg
سنحدد الصورة المناسبة
http://www.massira-net.biz/cour_style/49.jpg
سنحدد الصورة المناسبة
http://www.massira-net.biz/cour_style/50.jpg
نحدد نقطة التمدد
الأن سندرج الصور في أماكنها
http://www.massira-net.biz/cour_style/51.jpg
سنحدد الصور المحددة
http://www.massira-net.biz/cour_style/52.jpg
و نضع إسم المنتدى كدالك
http://www.massira-net.biz/cour_style/53.jpg
ليصير شكل الهيدر هكدا
http://www.massira-net.biz/cour_style/54.jpg
الأن سنعمل متل هده المراحل على جدول الفوتر
http://www.massira-net.biz/cour_style/55.jpg
سنحدد الجدول كاملا و نضع فيه خلفية كما بالصورة
http://www.massira-net.biz/cour_style/45.jpg
تم نختار الصورة المناسبة
http://www.massira-net.biz/cour_style/56.jpg
و نضيف الصورة لبصير هكدا
http://www.massira-net.biz/cour_style/57.jpg
الأن سنعمل على وضع الروابط في الصورة
الرئيسية : index.php
لوحة التحكم : usercp.php
البحت : search.php
قائمة الأعضاء : memberlist.php
التعليمات : faq.php
التقويم : calendar.php
الأن طريقة إدراجها برابط في الصورة و الجزء المحدد
نضغط على شرط الخيارات بالزر الأيمن للماوس و نختار images كما بالصورة
http://www.massira-net.biz/cour_style/58.jpg
ليظهر لنا هدا الشريط
http://www.massira-net.biz/cour_style/59.jpg
و نحدد الصورة المراد وضع الرابط بزجء منها أو كلها تم نختار المربع الملون في الصورة باللون الورديو نحدد المنطقة التي نريد أن نضع بها رابط
http://www.massira-net.biz/cour_style/60.jpg
سنحدد في الصورة بالمربع كلمة الرئيسية فقط
http://www.massira-net.biz/cour_style/61.jpg
و عند التحديد سيضهر لك جدول تدرج فيه الرابط الدس يرد و سنستعمل الروابط التي دكرتها مسبقا
http://www.massira-net.biz/cour_style/62.jpg
تم نضغط على ok و إن أدنا إضافة تعليق عند مرور الماوس على الرابط يضهر تعليق فوق الرابط
تم نكتب العبارة التي نريد
http://www.massira-net.biz/cour_style/63.jpg
الأن سنضع الرابط في المتلت الدي يوجد بالفوتر و نضع الرابط كما هو مبين بالصورة top#
http://www.massira-net.biz/cour_style/64.jpg
الأن مرحلة تحديد الفوتر و الهيدر من خلال كود HTML سنضع الماوس في الجدول الدي بالوسط أي مكان تواجد المنتدى كما دكرت سابقا
http://www.massira-net.biz/cour_style/65.jpg
ليكون متل هكدا
http://www.massira-net.biz/cour_style/66.jpg
تم نتدهب لمنطقة الكود
http://www.massira-net.biz/cour_style/67.jpg
الكود المحدد يمتل الهيدر
http://www.massira-net.biz/cour_style/68.jpg
الكود المحدد يمتل الفوتر
http://www.massira-net.biz/cour_style/69.jpg
الأن سندخل للوحة تحكم المنتدى
http://www.massira-net.biz/cour_style/70.jpg
و نتبع المراحل التي بالصور
http://www.massira-net.biz/cour_style/71.jpg
و نضغط ok على الإستايل الإفتراضي
http://www.massira-net.biz/cour_style/72.jpg
الأن هده هي الحقول التي سنلصق بها كود الهيدر و الفوتر
http://www.massira-net.biz/cour_style/73.jpg
الأن سنعود للفرونت بيج لننسخ الكود الدي حددناه للهيدر و نلصقه بمكان الهيدر بلوحة التحكم
http://www.massira-net.biz/cour_style/74.jpg
الأن لاحظ كيف سألصق الكود
http://www.massira-net.biz/cour_style/75.jpg
أما الأن بالنسبة للفوتر فسنلصق الكود في في الأسفل
ننسخ هدا الكود الخاص بالفوتر من الفرونت بيج و نلصقه في الحقل الخاص به في لوحة التحكم
http://www.massira-net.biz/cour_style/77.jpg
كما بالصورة
http://www.massira-net.biz/cour_style/76.jpg
و نحفظ التعديل بالضغط على حفظ
http://www.massira-net.biz/cour_style/78.jpg
الأن سندهب لنرى كيف أصبح الإستايل بالمنتدى
http://www.massira-net.biz/cour_style/79.jpg
الأن نلاحظ وجود فراغ كما هو مبين بالصورة
http://www.massira-net.biz/cour_style/80.jpg
هده طرقة إزالته
http://www.massira-net.biz/cour_style/81.jpg
و نغير في هدا الحق القيم التالية
http://www.massira-net.biz/cour_style/82.jpg
لتصبح هكدا بعد التعديل
http://www.massira-net.biz/cour_style/83.jpg
و نحفظ العمل الأن و ندهب لنرى هل أزيل هدا العيب من الستايل
نلاحظ انه لم يبقى و الحمد لله
http://www.massira-net.biz/cour_style/84.jpg
الأن سنعمل على حدف الجزء الدي يربط الروابط الخاصة بصور الستايل لتصبه عامة و يمكن تركيبه على أي مساحة
سندهب للهيدر متلا و نفعل كما هو مبين في الصورة
http://www.massira-net.biz/cour_style/85.jpg
تم نحفظ العمل
الأن و بحمد الله سنشرع في تلوين الستايل ليتناسق مع أوان التصميم
سنبدأ بالمتغير الأول خلفية المنتدى
http://www.massira-net.biz/cour_style/86.jpg
هي الأن باللون الرمادي و يجب أن تصبح بلون المتصميم أي اللون الأبيض
http://www.massira-net.biz/cour_style/87.jpg
الأن سنغير اللون الرمادي إلى الأبيض و نحفظ العمل و نى الأن كيف أصبح
http://www.massira-net.biz/cour_style/88.jpg
أصبه باللون الدي حددناه
هدا المتغير التالت يستحسن عدم تعديل أي شيء به
http://www.massira-net.biz/cour_style/90.jpg
المتغير الرابع حدود الجدول
http://www.massira-net.biz/cour_style/91.jpg
المسؤول عن حدود الجدول كما هو مبين بالصورة
http://www.massira-net.biz/cour_style/92.jpg
الأن بعد أن بعدل عليه نختار اللون المناسب بواسطة لفوتوشوب أنا إختر الون الخارجي اللون الأسون و الداخلي الأخضر
http://www.massira-net.biz/cour_style/93.jpg
ليصبح الأن هكدا
http://www.massira-net.biz/cour_style/94.jpg
الأن المتغير الخاص بالأقسام الرئيسية
http://www.massira-net.biz/cour_style/95.jpg
يجب أن نختار صورة تناسب لون الستايل لتكون خلفية وهذا شكلها بالمنتدى
http://www.massira-net.biz/cour_style/96.jpg
ولدك ينحتاج هدا الكود
#5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left
و يجب تصميم صورة بحجم يقارب 40/20 و أنا إخترته هده
http://www.massira-net.biz/cour_style/1.gif
سندرج مجلد في مكان الستايل بإسم الدي تريد و أنا تركته ببإسم الدي يكون في الستايل الإفتراضي هو الدي سنضع فيه الصورة المطلوبة أي هده الصورة http://www.massira-net.biz/cour_style/1.gif
كما بالصورة
http://www.massira-net.biz/cour_style/97.jpg
http://www.massira-net.biz/cour_style/98.jpg
ليصبح الرابط كما يلي
#93D04A url(massira-net.net/gradients/1.gif) repeat-x top left
ليصبح شكل المتغير بعد التعديل هكدا
http://www.massira-net.biz/cour_style/99.jpg
نحفظ العمل و نرجع للمنتدى و نرى التغيير
http://www.massira-net.biz/cour_style/100.jpg
الآن المتغير السادس رأس الجدول
http://www.massira-net.biz/cour_style/101.jpg
هدا مكانه بالمنتدى
http://www.massira-net.biz/cour_style/102.jpg
الأن سنجري تعديل على المتغير ليتم تناسق الألوان
إخترت هده الصورة http://www.massira-net.biz/cour_style/2.gif و نعمل متل ما عملنا على المتغير الخامس
http://www.massira-net.biz/cour_style/103.jpg
الأن نحفظ العمل و نروح للمنتدى لنرى التغيير
http://www.massira-net.biz/cour_style/104.jpg
الأن نروح للمتغير السابع نهاية الجدول
http://www.massira-net.biz/cour_style/105.jpg
هدا هو مكانه بالمنتدى
http://www.massira-net.biz/cour_style/106.jpg
الأن نعدل على المتغير على حسب ألوان الستايل
http://www.massira-net.biz/cour_style/107.jpg
الأن سيصبح بعد حفظ التعديل على المتغير هكدا
http://www.massira-net.biz/cour_style/108.jpg
الأن المتغير التامن لون التوزيع الأول
http://www.massira-net.biz/cour_style/109.jpg
و هدا مكانه بالمنتدى
http://www.massira-net.biz/cour_style/111.jpg
و هدا المتغير التاسع له علاقة بلون التوزيع التاني
http://www.massira-net.biz/cour_style/110.jpg
و هدا مكانه بالمنتدى
http://www.massira-net.biz/cour_style/112.jpg
الأن بعد التعديل عليهم أصبحت الألوان متناسقة كما بالصورة
http://www.massira-net.biz/cour_style/113.jpg
الأن المتغير العاشر وهو مخصص لتغير خلفية ولون صندوق المشاركات المطور WYSIWYG Editor
http://www.massira-net.biz/cour_style/114.jpg
بعد التغيير باللون الأبيض أصبح هكدا
http://www.massira-net.biz/cour_style/115.jpg
المتغير الحادي عشر و هو متخصص بحقول الكتابة متال حقل البحت و الرد السريع
http://www.massira-net.biz/cour_style/116.jpg
هدا متال على مكان التغيير
http://www.massira-net.biz/cour_style/117.jpg
الأن المتغير التاني عشر المتخصص بلون خط الأزرار و الخلفية كدالك
http://www.massira-net.biz/cour_style/118.jpg
و كمتال على مكانها
http://www.massira-net.biz/cour_style/119.jpg
الان المتغير التالت عشر الخاص بالقوائم http://www.massira-net.biz/cour_style/120.jpg
و هدا متال عليها
http://www.massira-net.biz/cour_style/121.jpg
المتغير الرابع عشر المتحكم في لون الوقت
http://www.massira-net.biz/cour_style/122.jpg
و هنا مكان تواجده
http://www.massira-net.biz/cour_style/123.jpg
المتغير الخامس عشر المتحكم في لون محيط اللوحة
http://www.massira-net.biz/cour_style/124.jpg
و هنا مكان تواجده
http://www.massira-net.biz/cour_style/125.jpg
المتغير السادس عشر المتحكم في لون اللوحة
http://www.massira-net.biz/cour_style/126.jpg
و هنا مكان تواجده
http://www.massira-net.biz/cour_style/127.jpg
المتغير السابع عشر المتحكم في لون Legend
http://www.massira-net.biz/cour_style/128.jpg
و هنا مكان تواجده العبارات الملونة في الصورة
http://www.massira-net.biz/cour_style/129.jpg
المتغير التامن عشر المتحكم في لون القوائم المنبتقة
http://www.massira-net.biz/cour_style/130.jpg
و هنا مكان تواجده
http://www.massira-net.biz/cour_style/131.jpg
الأن بعد تعديل هده المتغيرات نروح للمنتدى و نرى كيف أصبحت ألوانه
http://www.massira-net.biz/cour_style/132.jpg
الأن نروح لنتمم المتغيرات المتبقية
المتغير التاسع عشر المتحكم في لون جسم القوائم المنبتقة
http://www.massira-net.biz/cour_style/133.jpg
و هو لون الحدود الداخلي و الخارجي كما عملنا في المتغير الرابع حدود الجدول
المتغير العشرين المتحكم في خيارات لون قائمة الإنبتاق
http://www.massira-net.biz/cour_style/134.jpg
المتحكم في لون القائمة
المتغير الواحد و العشرين المتحكم في لون سطوع القائمة
http://www.massira-net.biz/cour_style/135.jpg
لاحظو كيف تم توزيع الألوان بين المتغيرين العشرين و الواحد و العشرين
ليصبح شكل القائمة كما في الصورة
http://www.massira-net.biz/cour_style/136.jpg
الأن نروح للمتغر الخاص بقائمة الإنتقال السريع
http://www.massira-net.biz/cour_style/137.jpg
ليصبح بهدا الشكل المتناسق
http://www.massira-net.biz/cour_style/138.jpg
الأن بعد أن إنتهينا من تلوين أجزاء الستايل
الأن نروح لبرنامج الفوتوشوب لنقطع أجزاء الصور التجميلية لبعض القوالب
نقطعه متل هكدا
http://www.massira-net.biz/cour_style/139.jpg
الأن نروح للوحة التحكم و نضغط على البحت في القوالب
http://www.massira-net.biz/cour_style/140.jpg
تم تكتب إسم القالب الدي نريد البحت عنه
سنبدأ بتأطير قالب navbar
http://www.massira-net.biz/cour_style/141.jpg
نضغط عليه الان لننسخ الكود الخاص بالقالب لنلصقه في برنامج الفرونت بيج
http://www.massira-net.biz/cour_style/142.jpg
نحدد الكود كاملا تم ننسخه
http://www.massira-net.biz/cour_style/143.jpg
و نلصقه في برنامج الفرونت بيج
الأن نضع الماوس في مكان الخط الأحمر
http://www.massira-net.biz/cour_style/144.jpg
تم ندرج جدول من تلات خانات
http://www.massira-net.biz/cour_style/145.jpg
نضغط على الماوس بالزر الأيمن
http://www.massira-net.biz/cour_style/48.jpg
نضع متل هده القيم
http://www.massira-net.biz/cour_style/44.jpg
تم نعطي للجدول خصائصه ليصبح غير مرئي و نملئه بالصور في الأماكن المناسبة
نضع الماوس في مكان الخط الأحمر
http://www.massira-net.biz/cour_style/146.jpg
تم ندرج جدول من تلات خانات
http://www.massira-net.biz/cour_style/145.jpg
تم نملئه بالصور كما فعلنا للجدول العلوي ليصبح هكدا
http://www.massira-net.biz/cour_style/147.jpg
الأن نزيل الروابط المتعلقة بالجهاز لتصبح الصور تعمل على جميع المساحات نروح لمنطقة الكود و نحدد الجزء الدي نريد حدفهو نضغط على الزرين CTRL+F لتظهر لنا هده النافدة متل التي بالصورة و تم نطبق متلها و نضغط زر إستبدال الكل
http://www.massira-net.biz/cour_style/148.jpg
تم نروح للوحة التحكم و نعد لصقه بعد حدف الكود السابق تم نحفظ العمل و نروح للمنتدى ليصير شكل الناف بار كما ترى بالصورة
http://www.massira-net.biz/cour_style/149.jpg
الأن سنبحت عن قالب FORUMHOME لنأطره متل الناف بار
http://www.massira-net.biz/cour_style/150.jpg
الأن عند نسخنا الكود FORUMHOME سنلصقه في الفرونت بيج
تم نضع الماوس في مكان الخط الأحمر
http://www.massira-net.biz/cour_style/151.jpg
تم ندرج جدول تلاتي
http://www.massira-net.biz/cour_style/145.jpg
تم نعطيه خصائص الجدول كما فعلنا بالناف بار
و نملئه بالصور المناسبة
تم نضع الماوس في مكان الخط الأحمر و نعمل متل الجدول العلوي
http://www.massira-net.biz/cour_style/152.jpg
تم ننسخ الكود الدي في الفرونت بيج ونلصقه في القالب الخاص FORUMHOME تم نحفض العمل و نروح للمنتدى لنرى التغيير الحاصل
http://www.massira-net.biz/cour_style/153.jpg
الأن نروح للقالب FORUMDISPLAY و ننسخ الكود المجود به تم نلصقه بالفرونت بيج و نبدأ التأطير كما عملنا على القالبين السابقين
http://www.massira-net.biz/cour_style/154.jpg
كما بالصورة بعد لصق الكود بضع الماوس في مكان الخط الأحمر
http://www.massira-net.biz/cour_style/155.jpg
و ندرج جدولا متل السابق و بملئه بالصور
تم نضع الماوس في مكان الخط مرة أخرى لنضع الجدول السفلي
http://www.massira-net.biz/cour_style/156.jpg
الأن بعد ملئ الجدولين بالصور ندرج جدولين لأخرين يعني جدول سفلي و علوي و سأريكم مكانهما
هنا الجدول الأول
http://www.massira-net.biz/cour_style/157.jpg
و هنا الجدول التاني
و هدا مكانه القالب في المنتدى بعد التغيير
http://www.massira-net.biz/cour_style/159.jpg
الأن بعد الأنتهاء من إعطائكم فكرة على كيفية تأطير بعض القوالب
سنتعرف الأن على طريقة تغير إسم الستايل نفعل متل الصورة
http://www.massira-net.biz/cour_style/160.jpg
نمتب الإسم الدي نريده تم نحفط العمل
http://www.massira-net.biz/cour_style/161.jpg
الأن طرقة تحميل ملف XML ليصبح الستايل جاهزل لتركيبه على أي منتدى نفعل متل الصورة
http://www.massira-net.biz/cour_style/162.jpg
تم يضهر لنا هدا الجدول لإختيار الستايل الدي تريد تحميل ملف XML الخاص به
http://www.massira-net.biz/cour_style/163.jpg
تم نضغط تنزيل و نحدد مكان وضع الملف
http://www.massira-net.biz/cour_style/164.jpg
الحمد لله لقم انتهينا الآن