المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : تركيب صور الستايل ببرنامج الفرنت بيج .. الدرس السابع



خالد القحطاني
12-09-2008, 04:06 AM
بسم الله الرحمن الرحيم
درس تركيب الستايل عن طريق لفرنت بيج ثم تركيبه في المنتدى
اولا نقوم بفتح برنامج الفرنت بيج



http://www.new-style.ws/vb/up/vb-front/1.jpg



بعد فتح الفرنت بيج
نذهب الى الكود


http://www.new-style.ws/vb/up/vb-front/2.jpg



ونقوم بمسح ما بي داخله



http://www.new-style.ws/vb/up/vb-front/3.jpg


ثم نذهب الى التصميم لبداية تصميم الستايل


نقوم الان بنشاء جدول


http://www.new-style.ws/vb/up/vb-front/5.jpg
http://www.new-style.ws/vb/up/vb-front/6.jpg


نضغط كلك يمين على الجدول لضبط الاعدادات



http://www.new-style.ws/vb/up/vb-front/7.jpg




http://www.new-style.ws/vb/up/vb-front/8.jpg



http://www.new-style.ws/vb/up/vb-front/9.jpg



الان نقوم بوضع خلفيه للجدول كامل


http://www.new-style.ws/vb/up/vb-front/10.jpg


http://www.new-style.ws/vb/up/vb-front/11.jpg


نقوم باختيار خلفية الهيدر التي قمنا بتصميمها



http://www.new-style.ws/vb/up/vb-front/12.jpg



http://www.new-style.ws/vb/up/vb-front/13.jpg



http://www.new-style.ws/vb/up/vb-front/14.jpg



ثم نضغط ok



http://www.new-style.ws/vb/up/vb-front/15.jpg


الان نقوم بضغط كلك يمين على الجدول



http://www.new-style.ws/vb/up/vb-front/16.jpg



لكي نقسم الجدول الى خليتين



http://www.new-style.ws/vb/up/vb-front/17.jpg


ثم نضغط ok



http://www.new-style.ws/vb/up/vb-front/18.jpg



نضع الماوس على الخليه التي على اليمين ونقوم بادراج شعار
الموقع



http://www.new-style.ws/vb/up/vb-front/19.jpg


http://www.new-style.ws/vb/up/vb-front/20.jpg



http://www.new-style.ws/vb/up/vb-front/21.jpg



نقوم بشد الجدول الى جهة الشعار حتى لا يتحرك الشعار من موقعه



http://www.new-style.ws/vb/up/vb-front/22.jpg


نضغط دبل كلك على صورة شعار الموقع


http://www.new-style.ws/vb/up/vb-front/26.jpg



text : نكتب الكود التالي




$vboptions[bbtitle]



location: نكتب الكود التالي



$vboptions[forumhome].php$session[sessionurl_q]



الفائدة منهم الكود الاول هو عند وضع الماوس على الشعار يظهر اسم الموقع



http://www.new-style.ws/vb/up/vb-front/27.jpg



الكود الثاني عن ضغط الماوس على الصوره يحول الى الصفحة الرئيسية للمنتدى



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


نذهب الى الكود



http://www.new-style.ws/vb/up/vb-front/23.jpg



ونقوم بتعديل على رابط الصور


http://www.new-style.ws/vb/up/vb-front/24.jpg


http://www.new-style.ws/vb/up/vb-front/25.jpg



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



http://www.new-style.ws/vb/up/vb-front/28.jpg



http://www.new-style.ws/vb/up/vb-front/29.jpg



http://www.new-style.ws/vb/up/vb-front/30.jpg



http://www.new-style.ws/vb/up/vb-front/31.jpg




الان نذهب الى الهيدر الخاص بالستايل الي نبي نركب عليه الصور



http://www.new-style.ws/vb/up/vb-front/32.jpg



نقوم الان بمسح جميع الاكواد بين


<!-- logo -->



<!-- /logo -->



http://www.new-style.ws/vb/up/vb-front/33.jpg


http://www.new-style.ws/vb/up/vb-front/34.jpg


نذهب للفرنت بيج ونقوم بنسخ الكود كامل


http://www.new-style.ws/vb/up/vb-front/35.jpg


ولصقه بين


<!-- logo -->


<!-- /logo -->



http://www.new-style.ws/vb/up/vb-front/36.jpg


ثم نضغط حفظ


ثم نذهب الى المنتدى نقوم بعمل تحديث لكي نرى عملنا



http://www.new-style.ws/vb/up/vb-front/37.jpg


الفوتر


نفس طريقة الهيدر لكن تختلف في الاخر في مكان وضع الكود



نفتح الفرنت بيج كخطوات الهيدر



http://www.new-style.ws/vb/up/vb-front/1.jpg



بعد فتح الفرنت بيج


نذهب الى الكود


http://www.new-style.ws/vb/up/vb-front/2.jpg


ونقوم بمسح ما بي داخله


http://www.new-style.ws/vb/up/vb-front/3.jpg


ثم نذهب الى التصميم لبداية تصميم الفوتر


نقوم الان بنشاء جدول


http://www.new-style.ws/vb/up/vb-front/5.jpg



http://www.new-style.ws/vb/up/vb-front/6.jpg



نضغط كلك يمين على الجدول لضبط الاعدادات


http://www.new-style.ws/vb/up/vb-front/7.jpg




http://www.new-style.ws/vb/up/vb-front/8.jpg



http://www.new-style.ws/vb/up/vb-front/9.jpg


الان نقوم بوضع خلفيه للجدول كامل


http://www.new-style.ws/vb/up/vb-front/10.jpg



http://www.new-style.ws/vb/up/vb-front/11.jpg


نقوم باختيار خلفية الفوتر التي قمنا بتصميمها


http://www.new-style.ws/vb/up/vb-front/39.jpg


http://www.new-style.ws/vb/up/vb-front/40.jpg


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


http://www.new-style.ws/vb/up/vb-front/41.jpg



http://www.new-style.ws/vb/up/vb-front/17.jpg


نضع الماوس على يسار الجدول لكي نضيف حقوق التصميم




http://www.new-style.ws/vb/up/vb-front/42.jpg



http://www.new-style.ws/vb/up/vb-front/43.jpg



http://www.new-style.ws/vb/up/vb-front/44.jpg


نقوم بسحب حد الجدول الى اليسار


http://www.new-style.ws/vb/up/vb-front/46.jpg



ثم نضغط كلك يمين على الصوره كي نضع رابط الحقوق وعند الضغط
عليه
يحول على موقعك


http://www.new-style.ws/vb/up/vb-front/45.jpg


http://www.new-style.ws/vb/up/vb-front/47.jpg


http://www.new-style.ws/vb/up/vb-front/48.jpg


الان نقوم بضغط على ok


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



http://www.new-style.ws/vb/up/vb-front/24.jpg




http://www.new-style.ws/vb/up/vb-front/25.jpg



الان نذهب الى لوحة التحكم
الي تمبلت الفوتر



http://www.new-style.ws/vb/up/vb-front/49.jpg


ونقوم بلصق الكود اخر الفوتر
بعد كلمة




//-->
</******>



http://www.new-style.ws/vb/up/vb-front/50.jpg



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



http://www.new-style.ws/vb/up/vb-front/51.jpg



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

شمس الدين
12-10-2008, 07:02 AM
تسلم ع لاشرح اخى خالد وربنا يصبرنى على حكاية الفرونت بيج ده واعرف اجيبه

كويتي
12-13-2008, 11:09 AM
مواضيع رائعه

وشرووح ارووع


الف شكر عزيزي new style

R i C K i
01-15-2009, 12:16 PM
قمة، بارك الله فيك

мє∂ ρσкσяα
02-08-2009, 04:34 PM
بيض الله وجهك
تسلم يا غالي

بارك الله فيك

الاوهام
02-17-2009, 03:29 PM
تسلم يمينك .. والله ان في بعض النقاط ما كنت اعرفه ...
ما شاءالله عليك ...
الله يزيدك ..

kol7aga
03-04-2009, 03:06 PM
لا سحر ولا شعوذة
:d:d:d:d:d
بصراحة عشرة على عشرة
تسلم ايديك يا اخى

SAIF90
03-04-2009, 07:00 PM
مشكوووووووووووووووووووررر ررررررررررررررر

Sanhaji Rida
11-12-2009, 12:54 AM
الله أكبر
بارك الله فيك أخي
والله عمل رائع

وقود الابداع
11-23-2009, 12:14 PM
جميل جدا
لكن ياليت تجمع جميع الدروس في ملف واحد او موضوع مواحد وان حصل يثبت يكون افضل

دوخني راسي وانا ابحث عن الدروس

جزاكم الله خير