دورة روابط لتصميم الإستايلات [ جميع الدروس rawabet]

السلام عليكم ورحمة الله وبركاته

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

الدرس مطول ويمكن تواجهه صعوبه لو ماتركز او تطمر نقاط ؟

راح نتعلم كذا شغله بالتصميم

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

بسم الله نبداء

الدرس الاول [ طريقة تصميم ستايل من البداية ]
نفتح برنامج الفتوشوب

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

http://rawabetvb.com/daroos/p1.gif

راح نتعلم شغله حلوه بالفتوشوب تساعدك كثير بترتيب تصميمك

http://rawabetvb.com/daroos/p2.gif

لحظ ان رسمة الملف هذي تجعل جميع عملك مرتب
راح نحتاج لها بحافظه للعمود الاول وحافظه للعمود الثاني
وكذالك للهيدر والفولدر

http://rawabetvb.com/daroos/p3.gif

http://rawabetvb.com/daroos/p4.gif

انتهينا من انشاء الحافظات

نطلق الان بالبداء بالعمود الاول

http://rawabetvb.com/daroos/p5.gif
الي مو عارف يضيف ليرة يعلمنا ونقوله

هنا طريقة الاضافة
http://rawabetvb.com/daroos/xc.gif

الان نقوم برسم عمود بالجانب الايسر او الايمن بالاداة التاليه

http://rawabetvb.com/daroos/p6.gif

http://rawabetvb.com/daroos/p7.gif

قم باختيار اداة تدرج الون كما هو موضح بالصوره
http://rawabetvb.com/daroos/p8.gif

هنا طريقة تدرج الون انت تتحكم بالشغله هذي
http://rawabetvb.com/daroos/p9.gif

بعد كذا على التحديد قم بسح اداة التدرج
http://rawabetvb.com/daroos/p10.gif

بعطي للعمود كذا لمسه عن طريق الشرح بالصوره التاليه
http://rawabetvb.com/daroos/p11.gif

انتهينا الان من العمود
http://rawabetvb.com/daroos/p12.gif

نروح الان وننسخ الحافظه الي باسم العمود التالي

http://rawabetvb.com/daroos/p13.gif

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

http://rawabetvb.com/daroos/p14.gif

هنا شكل الحافظات بعد الانتهاء
http://rawabetvb.com/daroos/p15.gif

نبداء ونضيف ليره مثل ماشرحنا في البدايه عن طريقة اضافة اليره
http://rawabetvb.com/daroos/p16.gif

نرسم مستطيل من طرف العمود للطرف الاخر مثل ماهو موضح بالصوره

http://rawabetvb.com/daroos/p17.gif

وهنا بعد التحسين
http://rawabetvb.com/daroos/p18.gif

نفس الطريقه راح نطبقها على الفولدر
http://rawabetvb.com/daroos/p19.gif

نرسم مستطيل ونضيف له الاضافات الي حابب ان تكون موجوده
http://rawabetvb.com/daroos/p20.gif

كذا انتهينا بالكامل من تصميم الستايل وباقي علينا التقطيع وراح يكون بدرس قادم انشاء الله

منقول

يتبعـــ

أرجو عدم الرد هنا

الدرس الثاني [ طريقة تقطيع الستايل الهيدر+ الاعمدة + الفوتر]

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

نظره سريعه عن الستايل وكيف راح يكون تقطيع



http://www.rawabetvb.com/daroos/t-g/bn-p.gif

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



كيف راح تبداء التقطيع ؟؟

الاجابه : راح نقوم بتقطيع الستايل الى ثلاث خانات

1- الجزء العلوي من الستايل ( الهيدر )2- الجزء الاوسط من الستايل ( الاعمده )3- الجزء السفلي من الستايل (الفوتر )

شوف الصوره قسمتها حسب التوزيع الي ذكرنه

http://www.rawabetvb.com/daroos/t-g/m-1.gif

الهيدر : عدد الصور خمس
زاويه يمين +زاويه يسار + صوره تجميله يمين + صور تجميليه يسار + تمدد

الاعمده :
عمود يمين + عمود يسار

الفوتر:
زاويه يمين +زاويه يسار + صوره تجميله يمين + صور تجميليه يسار + تمدد


نحتاج لمعرفة ما الاداوات الي تساعدنا على التقطيع ...

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

http://www.rawabetvb.com/daroos/t-g/m-2.gif



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

شوف الصوره
http://www.rawabetvb.com/daroos/G-U1.gif

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

وتروح تسوي لصق من خلال نفس طريقة القص بس بدل حرف ( X ) نضغط ( V )

وبكذا قدرنا نقطع الستايل

http://www.rawabetvb.com/daroos/t-g/m-3.gif

يجب التركيز المقاسات لو تختلف باكسل واحد راح يخرب شغلك كله

http://www.rawabetvb.com/daroos/t-g/M-4.gif

وهنا شكل الستايل بعد التقطيع
عدد الصور الي تم تقطيعها 12 صوره شاهد المثال

http://www.rawabetvb.com/daroos/t-g/h-yy.gif

الدرس الثالث [ طريقة توزيع الستايل بالفرنت بيج وتركيبه على المنتدى]

الدرس يحتاج منا التركيز حتى مايروح تعبنا في فهم الدروس السابقه فهو الدرس الاهم للوصول للنتيجه وعرض تصميمك على اعضاء منتداك فصلنا الشرح تفصيل طويل حتى نقدر نظهر بنتيجه ونقلل الاسئله في هالموضوع

ماذا نحتاج لنبداء ؟؟

1- برنامج الفرنت بيج

2- برنامج appserv..

حيث أن البرنامج يحتوي على قواعد بيانات MySQL + سيرفر Apache + مترجم php وذلك يختصر الوقت من تنزيل أكثر من برنامج ..ومن خلاله راح نقوم بتركيب منتدى على جهازك

يمكنك تحميل البرنامج من الرابط التالي :-
http://kent.dl.sourceforge.net/sourc...in32-2.4.0.exe

وهنا شرح التركيب
http://www.rawabetvb.com/vb/showthread.php?t=58828

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

نبداء الدرس بعد تجهيز المتطلبات كامله

شكل الستايل بعد التقطيع
عدد الصور الي تم تقطيعها 12 صوره شاهد المثال
الي مايعرف التقطيع يرجع للموضوع التالي
http://www.rawabetvb.com/vb/showthread.php?t=39334

http://www.rawabetvb.com/daroos/t-g/h-yy.gif

نروح نفتح برنامج الفرنت بيج
Microsoft Office FrontPage

تابع معي الصور الشرح غالبيته داخل الصوره

http://www.rawabetvb.com/daroos/style-3/style-2.gif

الان راح يكون لدينا صفحه بيضاء
نتقل بعدها للتصميم مثل ماهو موضح لك بالصوره التالية
http://www.rawabetvb.com/daroos/style-3/style-3.gif

الان نقوم بتحويل الصفحه من اليمين لليسار وذلك لاستخدمنا للغه العربية

http://www.rawabetvb.com/daroos/style-3/style-4.gif

بعد اختيار خصائص الجداول راح يعطينا مربع للخصائص الصفحة

http://www.rawabetvb.com/daroos/style-3/style-5.gif

نوجه الصفحه من اليمين الى اليسار
الان راح نقوم بأنشاء عدد من الجداول الي بيكون توزيع الصور عليها وعدد الجداول المطلوبه هي 9 جداول

http://www.rawabetvb.com/daroos/style-3/style-6.gif

عملية انشاء الجداول سهله ومايحتاج تفصيل فيها كثير
انظر للنتيجه في الصوره التاليه
http://www.rawabetvb.com/daroos/style-3/style-7.gif

نحتاج الان لاخفاء حدود الجداول وتوسيطها داخل الصفحه والطريقه هذي من خلال الضغط على خصائص الجدول

http://www.rawabetvb.com/daroos/style-3/style-8.gif

بيظهر مربع خصائص الجدول كل الي عليك انك تعدل عليه مثل ماهو بالصوره التاليةhttp://www.rawabetvb.com/vb/images/smilies/cool.gif

http://www.rawabetvb.com/daroos/style-3/style-9.gif

شدحيلك معي شوي الدرس هذا يبي شوي صبر لاهميته:)

الان انتهينا من الجداول .. وهذي نتيجة العمل السابق
http://www.rawabetvb.com/vb/images/smilies/redface.gif
http://www.rawabetvb.com/daroos/style-3/style-10.gif

اهااااا....... الان جينا لزبده الدرس وهو توزيع الصور بالفرنت بيج

انا وضعت صوره للصور وهي مقطعه

ملاحظه بسيطه :
التوزيع بيكون ادراج صوره او وضع خلفيه

وسبق وضحنا لكم هذا بالدرس الثاني اذا تذكرون الصوره التاليه:)
http://www.rawabetvb.com/daroos/t-g/bn-p.gif

يعني بيكون توزيع الصور حسب الرسم التوضيح هذا شاهد معي التوزيع

http://www.rawabetvb.com/daroos/style-3/style-11.gif

طريقة ادارج الصوره يكون من خلال اداة الادارج الموضحه لكم هنا

http://www.rawabetvb.com/daroos/style-3/style-12.gif

بيكون توزيعنا للصور حسب الشرح الي بالصوره التاليه ونسميها الصورة (توزيع المرحله الاولى)
راح ندرج زوايا الهيدر والفوتر باستخدام ادراج صورة

http://www.rawabetvb.com/daroos/style-3/style-13.gif

بيصبح لدي بهذا الشكل

http://www.rawabetvb.com/daroos/style-3/style-14.gif

الان نجي لوضع الاعمده والتمدد الخاص بالهيدر والفوتر
وهذي الطريقه باستخدام خصائص الخليه
نضع الماوس داخل خلية التمدد الي موضحينا لكم في التوزيع الي باسم ( توزيع المرحله الاولى )

http://www.rawabetvb.com/daroos/style-3/style-15.gif

بيفتح لنا مربع خصائص الخليه

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

http://www.rawabetvb.com/daroos/style-3/style-16.gif

في الاخير بيكون عندي النتيجه بهذا الشكل

http://www.rawabetvb.com/daroos/style-3/style-17.gif

الان من الخليه الي في منتصف التوزيع قم بشد الاطراف يمين ويسار

http://www.rawabetvb.com/daroos/style-3/style-18.gif

في الاخير بيكون الشكل التالي
http://www.rawabetvb.com/daroos/style-3/style-19.gif

يبقى عندي توزيع الصور التجميليه وهي اربع صور وراح نوزعها على النحو التالي

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

شاهد التوزيع للصور التجميليه بهذا الرسم التخطيطي الي كان بالدرس الثاني

http://www.rawabetvb.com/daroos/t-g/bn-p.gif

الصور التجميليه راح نضيفها هالمره باستخدام ادراج صوره

http://www.rawabetvb.com/daroos/style-3/style-12.gif

نقوم بتقسيم خلية التمدد للهيدر والفوتر الى ثلاث خلايا اضافيه قبل ادارج الصور التجميليه

طريقة التقسيم بيكون وضع المؤشر في وسط الهيدر وضغط الماوس يمين وختيار تقسيم الخلايا
http://www.rawabetvb.com/daroos/style-3/style-20.gif
بيفتح مربع صغير نقوم تحويله الى ثلاثه
http://www.rawabetvb.com/daroos/style-3/style-21.gif

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

ونفس الي سويته على الهيدر تطبقه على الفوتر

وبكذا يكون هذه نتيجة العمل

http://www.rawabetvb.com/daroos/style-3/style-22.gif

باقي علينا الان تعديل توجيه محاذاة الصور
وهذي طريقه سهله راح نستخدم فيها اداة المحاذاة

اضغط على الزاويه اليمين للهيدر ضغطه وحده وراح تحدد معك
http://www.rawabetvb.com/daroos/style-3/style-25.gif

قم بتوجيه المحاذه للجه اليمين باستخدام اداة المحاذه
http://www.rawabetvb.com/daroos/style-3/style-23.gif

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

يبقى عندي الجهة اليسار للهيدر والفوتر نطبق عليها الطريقة باستخدام اداة المحاذة لليسار

http://www.rawabetvb.com/daroos/style-3/style-24.gif

بعد الانتهاء من المحاذاة للصور بيكون فيه فراغات بين كل صور
http://www.rawabetvb.com/daroos/style-3/style-26.gif

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

بيفتح لنا مربع

http://www.rawabetvb.com/daroos/style-3/style-27.gif

طبق هذه العمليه لجميع الصور الي سويت لها محاذه

وبكذا يكون انتهيت من التوزيع بالفرنت بيج وهذي نتيجة التطبيق
http://www.rawabetvb.com/daroos/style-3/style-28.gif

وش باقي نقول واصل شوي خل اعضائك يفرحون بتصميمك مابقى غير القليل

الان ننقل التصميم للهيدر طبعاً بعد رفع ملف الصور لمجلد المنتدى

قبل التركيب يتطلب منا التعديل على مسار في الفرنت بيج نتقل الى تعليمات برمجية
http://www.rawabetvb.com/daroos/style-3/style-29.gif

بيفتح لنا الاكود البرمجيه للستايل
http://www.rawabetvb.com/daroos/style-3/style-30.gif

نحتاج لتعديل بسيط لمسار الصور كلها فيصبح لدينا بهذا الشكل
http://www.rawabetvb.com/daroos/style-3/style-31.gif

الان انتقل ليقونة التصميم وضع مؤشر الماوس في الوسط وختر اداة المحاذة
http://www.rawabetvb.com/daroos/style-3/style-32.gif

نتقل للتعليمات البرمجية
ونلاحظ هذا الشرح المهم لتقسيم الكود البرمجي لجزئين راح ننقل الجزء الاعلاء لنضعه داخل الهيدر بالمنتدى والجزء الاسفل للفوتر ركز في طريقة التقسيم هذه

http://www.rawabetvb.com/daroos/style-3/style-33.gif

الان نقوم بالدخول لوحة التحكم الخاصه لمنتداك

وتبع الصور
http://www.rawabetvb.com/daroos/style-3/style-34.gif

بعدها تفتح لنا صفحة التحكم بالستايلات
http://www.rawabetvb.com/daroos/style-3/style-35.gif

http://www.rawabetvb.com/daroos/style-3/style-37.gif

الان هنا يتم وضع كود الفرنت بيج للجزئين الي قمنا بتوزيعهم

في قالب header
ابحث عن <!-- logo -->
راح تحصلها في البدايه وفي المنتصف انسخ الكود الموجود بينها وقم بازالته ..
http://www.rawabetvb.com/daroos/style-3/style-38.gif

نرجع للفرنت بيج وننسخ الجزء العلوي
ونلصقه مكان الكود الي قمنا بمسحه بين <!-- logo -->
http://www.rawabetvb.com/daroos/style-3/style-36.gif

ناخذ كود الجزء الثاني السفلي من الفرنت بيج
http://www.rawabetvb.com/daroos/style-3/style-40.gif

ننزل تحت لـــ footer

في أخر القالب نلصق الكود الي جزئنه بالفرنت بيج
http://www.rawabetvb.com/daroos/style-3/style-39.gif

ننزل تحت ونسوي حفظ
وروح وشوف المنتدى سوى تحديث
فيه بعض المسات البسيطه الي لازم نعملها
بتلاحظ وجود فراغات في اطراف الستايل
http://www.rawabetvb.com/daroos/style-3/style-41.gif

طريقة الازالة سهله
نروح للستايل وتعديل
http://www.rawabetvb.com/daroos/style-3/style-42.gif

وضع خواص css المحدده بالمربع الاحمر الى الرقم صفر
http://www.rawabetvb.com/daroos/style-3/style-43.gif

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

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


نبداء العمل


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


http://www.rawabetvb.com/vb/attachme...1&d=1246736920


نقوم بتصميم اطارات حسب ذوقك انا قمت بالعمل التالي

الي يبي يحمل الستايل هذا هو مجاني من هنا
http://www.rawabetvb.com/vb/showthread.php?t=89052


http://www.rawabetvb.com/vb/attachme...1&d=1246737156


قم بتقطيع الستايل باستخدام التول


http://www.rawabetvb.com/vb/attachme...1&d=1246737243



عمل تقطيع للاطار بشكل منتظم ومتساوي



http://www.rawabetvb.com/vb/attachme...1&d=1246737420




وعمل حفظ للعمل Save for Web


راح يفتح معك مربع التقطيع وحفظ العمل على هيئة صفحة html مع مجلد الصور مقطعه حسب التقطيع الي وضحنها بالخطوه الاولى


http://www.rawabetvb.com/vb/attachme...1&d=1246737073




بعد الحفظ راح يكون عندنا صفحة html ومجلد خاص بها images


http://www.rawabetvb.com/vb/attachme...1&d=1246737931



نفتح مجلد الصور وهذا هو اهم شي نحتاجه



http://www.rawabetvb.com/vb/attachme...1&d=1246738274




الان نبداء بعمل التطاير لجميع القوالب


ملاحظه : الي يعرف توزيع الستايل الهيدر والفوتر راح يكون العمل سهل عليه لان نفس طريقة توزيع الهيدر والفوتر راح تستخدم لعمل توزيع الاطارات على الفرنت بيج


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


http://www.rawabetvb.com/vb/showthread.php?t=58837


اعادة بسيطه للعمل


ماذا نحتاج لنبداء ؟؟



1- برنامج الفرنت بيج
http://www.rawabetvb.com/daroos/style-3/style-1.gif
نروح نفتح برنامج الفرنت بيج
Microsoft Office FrontPage



تابع معي الصور الشرح غالبيته داخل الصوره




http://www.rawabetvb.com/daroos/style-3/style-2.gif



الان راح يكون لدينا صفحه بيضاء
نتقل بعدها للتصميم مثل ماهو موضح لك بالصوره التالية
http://www.rawabetvb.com/daroos/style-3/style-3.gif



الان نقوم بتحويل الصفحه من اليمين لليسار وذلك لاستخدمنا للغه العربية



http://www.rawabetvb.com/daroos/style-3/style-4.gif




بعد اختيار خصائص الجداول راح يعطينا مربع للخصائص الصفحة



http://www.rawabetvb.com/daroos/style-3/style-5.gif



نوجه الصفحه من اليمين الى اليسار
الان راح نقوم بأنشاء عدد من الجداول الي بيكون توزيع الصور عليها وعدد الجداول المطلوبه هي 9 جداول




http://www.rawabetvb.com/daroos/style-3/style-6.gif



عملية انشاء الجداول سهله ومايحتاج تفصيل فيها كثير
انظر للنتيجه في الصوره التاليه
http://www.rawabetvb.com/daroos/style-3/style-7.gif



نحتاج الان لاخفاء حدود الجداول وتوسيطها داخل الصفحه والطريقه هذي من خلال الضغط على خصائص الجدول



http://www.rawabetvb.com/daroos/style-3/style-8.gif



بيظهر مربع خصائص الجدول كل الي عليك انك تعدل عليه مثل ماهو بالصوره التاليةhttp://www.rawabetvb.com/vb/images/smilies/cool.gif



http://www.rawabetvb.com/daroos/style-3/style-9.gif




شدحيلك معي شوي الدرس هذا يبي شوي صبر لاهميته:)

الان انتهينا من الجداول .. وهذي نتيجة العمل السابق
http://www.rawabetvb.com/vb/images/smilies/redface.gif
http://www.rawabetvb.com/daroos/style-3/style-10.gif




اهااااا....... الان جينا لزبده الدرس وهو توزيع الصور بالفرنت بيج



انا وضعت صوره للصور وهي مقطعه



ملاحظه بسيطه :
التوزيع بيكون ادراج صوره او وضع خلفيه



وسبق وضحنا لكم هذا بالدرس الثاني اذا تذكرون الصوره التاليه:)
http://www.rawabetvb.com/daroos/t-g/bn-p.gif



يعني بيكون توزيع الصور حسب الرسم التوضيح هذا شاهد معي التوزيع



http://www.rawabetvb.com/daroos/style-3/style-11.gif



طريقة ادارج الصوره يكون من خلال اداة الادارج الموضحه لكم هنا



http://www.rawabetvb.com/daroos/style-3/style-12.gif



بيكون توزيعنا للصور حسب الشرح الي بالصوره التاليه ونسميها الصورة (توزيع المرحله الاولى)
راح ندرج زوايا الهيدر والفوتر باستخدام ادراج صورة



http://www.rawabetvb.com/daroos/style-3/style-13.gif



بيصبح لدي بهذا الشكل


http://www.rawabetvb.com/vb/attachme...1&d=1246738721


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



قبل التركيب يتطلب منا التعديل على مسار في الفرنت بيج نتقل الى تعليمات برمجية


http://www.rawabetvb.com/daroos/style-3/style-29.gif


بيفتح لنا الاكود البرمجيه للستايل
http://www.rawabetvb.com/daroos/style-3/style-30.gif


نحتاج لتعديل بسيط لمسار الصور كلها فيصبح لدينا بهذا الشكل
http://www.rawabetvb.com/daroos/style-3/style-31.gif


الان انتقل ليقونة التصميم وضع مؤشر الماوس في الوسط وختر اداة المحاذة
http://www.rawabetvb.com/daroos/style-3/style-32.gif


خلاص الان كل الي علينا هو فقط التعديل على القوالب كامله وهذا الشرح تطبيقه مره وحده فقط

الدرس الخامس تطاير قالب
FORUMHOME +
FORUMDISPLAY

اتمنا منك تكون عارف طريقة الشرح الرابع

نبداء العمل

تطاير القالب في الرئيسية يحتاج تعديل على ثلاث قوالب
FORUMHOME
forumhome_forumbit_level1_nopost
forumhome_forumbit_level2_post

افتح قالب FORUMHOME

وبحث عن

PHP Code:

---

<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
    <if condition="$show['guest']">
    <!-- guest welcome message -->
    <tr>
        <td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
    </tr>
    <tr>
        <td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">
            <phrase 1="faq.php?$session[sessionurl]" 2="register.php?$session[sessionurl]">$vbphrase[first_visit_message]</phrase>
        </td>
    </tr>
    <!-- / guest welcome message -->
    </if>
    <tr align="center">
      <td class="thead">&nbsp;</td>
      <td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
      <td class="thead" width="175">$vbphrase[last_post]</td>
      <td class="thead">$vbphrase[threads]</td>
      <td class="thead">$vbphrase[posts]</td>
      <if condition="$vboptions['showmoderatorcolumn']">
      <td class="thead">$vbphrase[moderator]</td>
      </if>
    </tr>
</thead>
$forumbits
<tbody>
    <tr>
        <td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
            <a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a>
            &nbsp; &nbsp;
            <a href="showgroups.php?$session[sessionurl]">$vbphrase[view_forum_leaders]</a>
        </strong></div></td>
    </tr>
</tbody>
</table>
<!-- /main --> 


---

استبدله بالتالي

PHP Code:

---

<!-- guest welcome message -->
<if condition="$show['guest']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
</tr>
<tr>
<td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">
<phrase 1="faq.php?$session[sessionurl]" 2="register.php?$session[sessionurl]">$vbphrase[first_visit_message]</phrase>
</td>
</tr>
</thead>
</table>
</if>
<!-- / guest welcome message -->
<!-- main -->
$forumbits
<!-- /main --> 


---

وحفظ القالب

افتح قالب forumhome_forumbit_level1_nopost

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

[RIGHT]

PHP Code:

---

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center"> 


---

PHP Code:

---


[RIGHT]<tbody>
<tr>
<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
</tr>
</tbody>
<if condition="$childforumbits">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
<tr align="center">
<td class="thead" width="35">&nbsp;</td>
<td class="thead" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="200">$vbphrase[last_post]</td>
<td class="thead" width="65">$vbphrase[threads]</td>
<td class="thead" width="65">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead" width="120">$vbphrase[moderator]</td>
</if>
</tr>
$childforumbits
</tbody>
</if>
</table>
[/RIGHT] 


---

اعمل حفظ

افتح قالب forumhome_forumbit_level2_post

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

PHP Code:

---

<tr align="center"> 


---

PHP Code:

---


[RIGHT]<td class="alt2" width="35"><img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif" alt="" border="0" /></td>
<td class="alt1Active" align="$stylevar[left]" id="f$forum[forumid]">
<div>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a>
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
</div>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
<td class="alt2" width="200" nowrap="nowrap">$forum[lastpostinfo]</td>
<td class="alt1" width="65">$forum[threadcount]</td>
<td class="alt2" width="65">$forum[replycount]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="alt1" width="120"><div class="smallfont">$forum[moderators]&nbsp;</div></td>
</if>
</tr>
$childforumbits
[/RIGHT] 


---

وعمل حفظ

الان يهمني التركيز

راح نرجع الان بالذاكره لقالب التطاير الي احنا صلحنها في الدرس الرابع

http://www.rawabetvb.com/vb/showthread.php?p=623040#post623040

http://www.rawabetvb.com/vb/attachme...1&d=1246738721

اتوقع كلنا عرفنا القصد من كود التطاير

ابيك الان تفتح قالب forumhome_forumbit_level1_nopost

ونسخ كل شي فيه وضعه وسط قالب التطاير

وهنا توضيح بالصوره

http://www.rawabetvb.com/vb/attachme...1&d=1256768812

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

وعمل حفظ

يتبع... لنفس الدرس

يبقى علي ارجع لقالب FORUMHOME

وابحث عن

[RIGHT]

PHP Code:

---

<!-- what's going on box --> 


---

PHP Code:

---


[RIGHT]<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
 <tr>
  <td class="tcat" colspan="2">$vbphrase[whats_going_on]</td>
 </tr>
</thead>
$template_hook[forumhome_wgo_pos1]
<if condition="$show['loggedinusers']">
<!-- logged-in users -->
<tbody>
 <tr>
  <td class="thead" colspan="2">
   <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>
   <a href="online.php$session[sessionurl_q]">$vbphrase[currently_active_users]</a>: $totalonline (<phrase 1="$numberregistered" 2="$numberguest">$vbphrase[x_members_and_y_guests]</phrase>)
  </td>
 </tr>
</tbody>
<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]">
 <tr>
  <td class="alt2"><a href="online.php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/whos_online.gif" alt="$vbphrase[view_whos_online]" border="0" /></a></td>
  <td class="alt1" width="100%">
   <div class="smallfont">
    <div style="white-space: nowrap"><phrase 1="$recordusers" 2="$recorddate" 3="$recordtime">$vbphrase[most_users_ever_online_was_x_y_at_z]</phrase></div>
    <div>$activeusers</div>
   </div>
  </td>
 </tr>
</tbody>
<!-- end logged-in users -->
</if>
$template_hook[forumhome_wgo_pos2]
<tbody>
 <tr>
  <td class="thead" colspan="2">
   <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_stats')"><img id="collapseimg_forumhome_stats" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_stats].gif" alt="" border="0" /></a>
   <phrase 1="$vboptions[bbtitle]">$vbphrase[x_statistics]</phrase>
  </td>
 </tr>
</tbody>
<tbody id="collapseobj_forumhome_stats" style="$vbcollapse[collapseobj_forumhome_stats]">
 <tr>
  <td class="alt2"><img src="$stylevar[imgdir_misc]/stats.gif" alt="<phrase 1="$vboptions[bbtitle]">$vbphrase[x_statistics]</phrase>" border="0" /></td>
  <td class="alt1" width="100%">
  <div class="smallfont">
   <div>
    $vbphrase[threads]: $totalthreads*
    $vbphrase[posts]: $totalposts*
    $vbphrase[members]: $numbermembers<if condition="$show['activemembers']">*
     <span title="<phrase 1="$vboptions[activememberdays]">$vbphrase[within_the_last_x_days]</phrase>">$vbphrase[active_members]: $activemembers</span>
    </if>
   </div>
   <div><phrase 1="member.php?$session[sessionurl]u=$newuserid" 2="$newusername">$vbphrase[welcome_to_our_newest_member_x]</phrase></div>
   $template_hook[forumhome_wgo_stats]
  </div>
  </td>
 </tr>
</tbody>
$template_hook[forumhome_wgo_pos3]
<if condition="$show['birthdays']">
<!-- today's birthdays -->
<tbody>
 <tr>
  <td class="thead" colspan="2">
   <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_birthdays')"><img id="collapseimg_forumhome_birthdays" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_birthdays].gif" alt="" border="0" /></a>
   $vbphrase[todays_birthdays]
  </td>
 </tr>
</tbody>
<tbody id="collapseobj_forumhome_birthdays" style="$vbcollapse[collapseobj_forumhome_birthdays]">
 <tr>
  <td class="alt2"><a href="calendar.php?$session[sessionurl]do=getday&amp;day=$today&amp;sb=1"><img src="$stylevar[imgdir_misc]/birthday.gif" alt="$vbphrase[view_birthdays]" border="0" /></a></td>
  <td class="alt1" width="100%"><div class="smallfont">$birthdays</div></td>
 </tr>
</tbody>
<!-- end today's birthdays -->
</if>
$template_hook[forumhome_wgo_pos4]
<if condition="$show['upcomingevents']">
<tbody>
 <tr>
  <td class="thead" colspan="2">
   <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_events')"><img id="collapseimg_forumhome_events" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_events].gif" alt="" border="0" /></a>
   <if condition="$show['todaysevents']">$vbphrase[todays_events]<else /><phrase 1="$vboptions[showevents]">$vbphrase[upcoming_events_for_the_next_x_days]</phrase></if>
  </td>
 </tr>
</tbody>
<tbody id="collapseobj_forumhome_events" style="$vbcollapse[collapseobj_forumhome_events]">
 <tr>
  <td class="alt2"><a href="calendar.php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/calendar.gif" alt="$vbphrase[calendar]" border="0" /></a></td>
  <td class="alt1" width="100%"><div class="smallfont">$upcomingevents</div></td>
 </tr>
</tbody>
</if>
$template_hook[forumhome_wgo_pos5]
</table>
<br />
<!-- end what's going on box -->

[/RIGHT][/RIGHT][/RIGHT] 


---

وهنا مثال للقالب انسخه وترك الصفحه لاتسكرها لان راح نرجع القالب بعد وضعه بكود التطاير

http://www.rawabetvb.com/vb/attachme...1&d=1256769830

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

http://www.rawabetvb.com/vb/attachme...1&d=1256769320

رجعه لقالب FORUMHOME

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

درس جميل ومفيد في جعل تصميمك للستايل من الدرجه الاحترافيه abshb

مثال على الدرس

http://www.rawabetvb.com/vb/attachme...1&d=1238453203

http://www.rawabetvb.com/vb/attachme...1&d=1238453203
http://www.rawabetvb.com/vb/attachme...1&d=1238453203

افتح برنامج الفتوشوب
وفتح عمل جديد بمقاس تصميم الستايل
ارسم مستطيل للهيدر وزود المساحه الخارجيه للمستطيل مثل ماهو موضح بالصوره

http://www.rawabetvb.com/daroos/alanhne-r/1.gif

الان قم باختيار أداة البن تول
http://www.rawabetvb.com/daroos/alanhne-r/2.gif

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

http://www.rawabetvb.com/daroos/alanhne-r/3.gif

الان ركز شوي معي هنا الصعوبه

الان حان دور التحكم في النقاط بالماوس حاول تقوم بسح النقاط للاسفل والتوازن بعمل الانحنائات

http://www.rawabetvb.com/daroos/alanhne-r/4.gif

بعد ما ضبط معي الشكل للانحنائات وصار مناسب مع التصميم اقوم الان بنسخ الطبقه لثلاث طبقات تابع شرح الصوره
http://www.rawabetvb.com/daroos/alanhne-r/5.gif

بيكون لدينا الطبقات بالشكل التالي

http://www.rawabetvb.com/daroos/alanhne-r/6.gif

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

http://www.rawabetvb.com/daroos/alanhne-r/7.gif

وبنفس الطريقه حاول تغير في الانحنائات للطبقه الاخيره

http://www.rawabetvb.com/daroos/alanhne-r/8.gif

وبنفس الطريقه للطبقه العلويه نقوم باختيار السهم الي بالكيبورد للاعلاء وسحبها لفوق

http://www.rawabetvb.com/daroos/alanhne-r/9.gif

حول الطبقات الى
Rasterize Layer

http://www.rawabetvb.com/daroos/alanhne-r/10.gif

الان من ادوات ليرى ستايل قم بتدعيل المنحنيات بوضع حدود وغيره من المسات الي في اداة اليرى ستايل

http://www.rawabetvb.com/daroos/alanhne-r/11.gif

في النهائيه بيكون عندي هيدر جميل طبعاً راح اعطيكم جزاء من العمل

http://www.rawabetvb.com/daroos/alanhne-r/FG-TYUU1.jpg

باقي نشوف تطبيقاتكم على الدرس

منقول للفائدة

wooooooooooooooooooooooooow
i'l be Right Back !

وآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآ آآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآ آآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآ آآآآآآآآآآآآآآآو >> شحب صوتي


الله يبزكـ ويردكـ ويبزكـ ويردكـ <<< وييييييييييينكـ من زمآآآآآآآآن يا زلمة <قلب سـوري هع

يا حلووو وربي ما قدررر عقللي يستوعب ها العطآآآآآء اقل شي أقول جزآكـ الله الجنة ..:)
والعشاء علي ..في حدة بس لين تجي من الريآض .. او لين اجي الى عندكـ :)

يا خوي وش اقوووووووووووووووووووووووووووووووووووووووووووووووو ووووووووووووووووول >تخوني العبارات
الموهيم ذي تبآهـ بسوية ..< وسوي لي توقيع مش في كل موضوع نتراشاكـ

مجهود خرافي أخي الصامد
لكن مين قال مبتدئين!!!
أنا الظاهر تحت الصفر:34:
بارك الله فيك
تسلم

اوووووووووووه صعبة ~ يبغى لهــآ شغل كثير ودقة ..
بدري علي ..:)
يعطيك العاآآفية ..:: الصامــد ::..



~|[..:40:..]|~

جميل جداً..

جزيل الشكر لك اخي الصـامد

مش صعب بس اهم شي يتوفر التالي:
* الرغبة
* الوقت (أهم شي)
* منتدى محلي على (localhost)
* فوتوشوب
* فورنت بيج
توفر هذه الأشياء أهم حاجة.

أكرر الشكر لك أخي الصـامد على جهودك المبذوله.. وأتمنى للجميع التوفيق

والله حسيته صعب

بجد يعني يبغاله وقت كثير

جزاك الله الجنه اخي الصامد جهد رائع وتشكر عليه

بس توقعت اقدر اطبق واعتقد مافي أمل

الللللللللللللللللللللللللللللللللهههههههههههههههه ههههههههههههههههههههههههههههههههههههه
مـــــــــــــــــا هذا الكنــــــــــــــــــــز الرأئع
مجهود كبير جدا لا أدري ماذا تستحق عليه فهذا إضافه كبيرة للملتقى وأشباع لرغبة عشاق التصميم والاستايلات


ممنووووووووووووووووووووووووووووووووووووووووووووووو وووننننننننننننن لك