اضغط هنا لدخول الشات


اضغط هنا لمشاهدة اخر المشاركات الجديدة بالمنتدى


الإهداءات



منتدى الجوال , الماسنجر , برامج , سكرابز , تواقيع , فيس منتدى الجوال , الماسنجر 2012 , برامج 2011 , سكرابز , تواقيع , فيس , ماسنجر 2012 , المسن , برامج مسن , توبيكات رومنسية , توبيكات حب , توبيك مسنجر , تواقيع منتديات , توقيع بنات 1433 , فيس بوك 2012

!~ آخـر 10 مواضيع ~!
شارك الموضوع بالضغط علي زر الفيس بوك

إضافة رد
قديم 01-09-2011, 10:53 PM   #1

 رقم العضوية : 49
 تاريخ التسجيل : 13 - 8 - 2011
 الحالة الاجتماعية : غير محدد
 الجنس : غير محدد
 الدولة : غير محدد
 المشاركات : 55
الاعجابات التي تلقيتها : 0
 عدد النقاط : 10
 تقييم المستوى : sosun is on a distinguished road

sosun غير متواجد حالياً

افتراضي شرح مفصل لعمل ستايل خاص بمنتدك

شرح مفصل لعمل ستايل خاص بمنتدك



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


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

جميع ملفات الإستايل psd في المرفقات
و الستايل كاملا في المرفقات
نبدأ بعون الله
شرح مفصل لعمل ستايل خاص بمنتدك 1.jpg
نختار اللونين المناسبين متا أنا اخترت اللون الأخضر
شرح مفصل لعمل ستايل خاص بمنتدك 2.jpg
تم نختار هده الأداة لتحديد الشكل المطلوب متال الصورة
شرح مفصل لعمل ستايل خاص بمنتدك 3.jpg
ليصير الشكل كما بالصورة
شرح مفصل لعمل ستايل خاص بمنتدك 4.jpg
تم نختار نعمل متل إلي بالصورة
شرح مفصل لعمل ستايل خاص بمنتدك 5.jpg
و نعطيه القيمة 12
شرح مفصل لعمل ستايل خاص بمنتدك 6.jpg
تم نحدد الونين في معيار التدرج اللوني متل إلي بالصورة
شرح مفصل لعمل ستايل خاص بمنتدك 7.jpg
تم نختار أداة التدرج اللوني
شرح مفصل لعمل ستايل خاص بمنتدك 8.jpg
و نحدد من الأعلى إلى الإسفل متل الصورة ليصير شكله متل هكدا
شرح مفصل لعمل ستايل خاص بمنتدك 9.jpg

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



avp ltwg gulg sjhdg ohw flkj];

 




من مواضيعي
0 افضل و السعوديه السبت 12-10-1432\10-9-2011وظائف السعوديه
0 اضمن وظائف الاحد 13-10-1432\11-9-2011- وظائف الاحد1432-2011
0 اضمن وظائف السبت 12-10-2011\10-0-1432- وظائف السبت1432-2011
0 ثلاث خطوات.. تجعل صورتك مرسومه باليد..شرح جعل صورتك مرسومه باليد
0 البوم ازياء زهير مراد-سحرازياء زهير مراد
0 فساتين السهرات ..زهبر مراد..2011-2012-2013- زهير مراد
0 اجمل وافضل تصميم وفساتين وازياء زهير مراد 2011-2012-2013
0 ازياءوفساتين زهير مراد لسنة 2011-2020\ازياء زهير مراد 2012
0 شرح مفصل لعمل ستايل خاص بمنتدك
0 الفيس بوك يعلن عن تصميم يجلب الزوار بشكل اكبر
0 وظائف الكويت ليوم الاثنين7-10-1432\5-9-2011
0 وظائف اهم وافضل الاثنين5-9-2011\ 7-10-1432
0 وظائف السعوديه ليوم الجمعه6-10-1432\4-9-2011


 
رد مع اقتباس مشاركة محذوفة
إضافة رد

الكلمات الدلالية (Tags)
لعمل, مفصل, بمنتدك, خاص, ستايل, شرح

مواضيع مشابهه في منتدى الجوال , الماسنجر , برامج , سكرابز , تواقيع , فيس


أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are معطلة
Pingbacks are متاحة
Refbacks are معطلة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
افضل الافكار للاستفاده من فستان الزفاف -كيفيه الاسنفاده من فستان الزفاف بعد ليلة العمر سماء الأزياء و الأناقة - أزياء عربية -فساتين - اكسسوارت 0 04-10-2011 02:45 PM
اول خطوه لشراء فستان الزفاف - ثبتي هنا - لمعرفت الخطوه الاولى لشراء فستان الزفاف سماء الأزياء و الأناقة - أزياء عربية -فساتين - اكسسوارت 0 04-10-2011 02:31 PM
اول خطوه لشراء فستان الزفاف - ثبتي هنا - لمعرفت الخطوه الاولى لشراء فستان الزفاف سماء الأزياء و الأناقة - أزياء عربية -فساتين - اكسسوارت 0 04-10-2011 02:30 PM
صور ساخنه جدا لمريام فارس بفستان احمر عارى 2011 - فضائح مريام فارس فستان احمر مثير جدا للك ترانيم صور فنانين - صور مشاهير - صور مطربات و الممثلين 0 27-07-2011 05:01 AM
كاسترد بالموز والشوكلاته -ياهيك الكاستر ولابلاش- اسرار البحر منتدى الطبخ - اطباق رئيسية - حلويات - معجنات - عصائر 0 22-04-2011 10:58 PM


الساعة الآن 03:18 AM بتوقيت مسقط


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO 3.6.0 © 2011, Crawlability, Inc.
جميع المشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ... ولا تعبّر بأي شكل من الأشكال عن وجهة نظر المنتدى ][