منتدى استراحات زايد - الدرس الثالث : توزيع الصور على الفرونت بيج وتركيبهم بالمنتدى (منتديات ساكسونيا)

http://i88.servimg.com/u/f88/11/38/54/84/59366410.gif

هذا الدرس هو : درس توزيع الهيدر والفوتر على الفرونت بيج وتركيبهم بالمنتدى

الاول للى معندوش الفرونت بيج يحمله من هنا
http://www.vbsacsonia.com/vb/showthread.php?t=216
بعد التحميل

نفتح الفرونت بيج
http://up.2sw2r.com/upfiles/e7596056.jpg

بعد فتح الفرونت بيج نذهب الى كود
http://www.new-style.ws/vb/up/vb-front/2.jpg

ونقوم بمسح ما بداخله
http://up.2sw2r.com/upfiles/lyZ55227.jpg
نذهب الى كلمة Design (تصميم) عشان نبدأ بعمل الاستايل

ونعمل جدولـ زى الصورة
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://up.2sw2r.com/upfiles/Y9q96056.jpg

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

نقوم باختيار خلفية الهيدر
http://up.2sw2r.com/upfiles/5Nk97257.jpg

ثم نضغط ok

ثم نأتى عند الجدول ونضغط كليك يمين ونعمل مثل الصورة
http://up.2sw2r.com/upfiles/DSV97480.jpg

لكى نقسم الجدول لثلاث خليات
http://up.2sw2r.com/upfiles/I4S52022.jpg

ثم نضع الماوس على الخلية التى على اليمين ونقوم بادراج شعار الهيدر الذى على اليمين
http://up.2sw2r.com/upfiles/Lfw52491.jpg
http://up.2sw2r.com/upfiles/MTn52647.jpg

وسوف يكون شكلها هكذا
http://up.2sw2r.com/upfiles/Otu52764.jpg

نقوم بشد الجدول الى جهة الشعار حتى لا يتحرك الشعار من موقعه
http://up.2sw2r.com/upfiles/Ugl53242.jpg

الان نقوم بالتوجه الى code

ونعدل ع الاكواد عن طريق مسح هذا الامتداد ليتعرف الاستايل على الصور ويظهر
مثل الصورة

http://www.vbsacsonia.com/vb/images/.../wol_error.gifهذه الصورة بحجم اخر انقر هنا لعرض الصورة بالشكل الصحيح ابعاد الصورة هي 922x432 الابعاد 53KB.
http://up.2sw2r.com/upfiles/Ohs54150.jpg

ونفعل هذه الحركة ايضا فى الكود اللى فوق
زى الصورة

http://www.vbsacsonia.com/vb/images/.../wol_error.gifهذه الصورة بحجم اخر انقر هنا لعرض الصورة بالشكل الصحيح ابعاد الصورة هي 924x400.
http://up.2sw2r.com/upfiles/V9r54304.jpg

وبعدها نذهب للوحة التحكمـ ثم الاستايلات والقوالب

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

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

http://up.2sw2r.com/upfiles/RwY54449.jpg

http://www.vbsacsonia.com/vb/images/.../wol_error.gifهذه الصورة بحجم اخر انقر هنا لعرض الصورة بالشكل الصحيح ابعاد الصورة هي 709x117 الابعاد 42KB.
http://www.new-style.ws/vb/up/vb-front/31.jpg

ثم فى خانة الـheader

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

ونمسح ما بداخل

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

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

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

http://www.vbsacsonia.com/vb/images/.../wol_error.gifهذه الصورة بحجم اخر انقر هنا لعرض الصورة بالشكل الصحيح ابعاد الصورة هي 878x246 الابعاد 125KB.
http://up.2sw2r.com/upfiles/Thp54659.jpg

ولصقة بين

http://up.2sw2r.com/upfiles/FlO54906.jpg

كده نكون خلصنا ... وضع كود الهيدر

ونأتى الان للفوتر

نفس طريقة الهيدر ولكن تختلف بأشياء بسيطه

......

نفتح الفرونت بيج من الأول

http://up.2sw2r.com/upfiles/e7596056.jpg

بعدها نذهب الى Code
http://www.new-style.ws/vb/up/vb-front/2.jpg

ونمسح ما بداخله
http://up.2sw2r.com/upfiles/lyZ55227.jpg
نذهب الى كلمة Design (تصميم) عشان نبدأ بعمل الاستايل

ونعمل جدولـ زى الصورة
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://up.2sw2r.com/upfiles/Y9q96056.jpg

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

نقوم باختيار خلفية الفوتر
http://up.2sw2r.com/upfiles/BM855412.jpg

ثم نضغط ok

ثم نأتى عند الجدول ونضغط كليك يمين ونعمل مثل الصورة
http://up.2sw2r.com/upfiles/DSV97480.jpg

لكى نقسم الجدول لخليتين
http://www.new-style.ws/vb/up/vb-front/17.jpg

نضع الماوس على يمين الجدول
وندرج الصورة
http://up.2sw2r.com/upfiles/4VV74921.jpg

http://up.2sw2r.com/upfiles/WvW75164.jpg

بعدهها نقوم بشد الجدول الى اليمين حتى لا يتحرك الجزء اليمين من موقعه
http://up.2sw2r.com/upfiles/d4576759.jpg

الان نذهب الى Code

ونعدل على الأكواد مثل الهيدر

وهذا الناتجـ بعد المسح مثل الهيدر

http://www.vbsacsonia.com/vb/images/.../wol_error.gifهذه الصورة بحجم اخر انقر هنا لعرض الصورة بالشكل الصحيح ابعاد الصورة هي 878x176 الابعاد 111KB.
http://up.2sw2r.com/upfiles/2VR77118.jpg

الان نذهب الى footer بلوحة التحكم

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

ونقوم بلصق كود الفوتر الذى بالفرونت بيج بعد كلمة
//-->

بأخر الكود

ثم نقوم بالضغط على
حفظ

________________________

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

لتحميل البرنامج
http://www.mediafire.com/download.php?1a03kwdjnoz

ونكتب بيانات المنتدى فوق بالاف تى بى

http://www.vbsacsonia.com/vb/images/.../wol_error.gifهذه الصورة بحجم اخر انقر هنا لعرض الصورة بالشكل الصحيح ابعاد الصورة هي 1152x98 الابعاد 79KB.
http://up.2sw2r.com/upfiles/oZx78142.jpg

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

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

http://www.vbsacsonia.com/vb/images/.../wol_error.gifهذه الصورة بحجم اخر انقر هنا لعرض الصورة بالشكل الصحيح ابعاد الصورة هي 980x496 الابعاد 121KB.
http://up.2sw2r.com/upfiles/AkN78458.jpg

وننتظر الرفع للاخر .. وبكده نكون خلصنا .. وتقدر تشوف الهيدر والفوتر شغالين فى المنتدى
...

الدرس القادم : تعديل ألوان الاستايل