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

[فوفو6]

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


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


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


2- برنامج appserv..


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


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


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


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


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


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


بيظهر مربع خصائص الجدول كل الي عليك انك تعدل عليه مثل ماهو بالصوره التالية:cool:


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



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


الان انتهينا من الجداول .. وهذي نتيجة العمل السابق
:o
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


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

[Next dream]

زش هاذا الابداع



يعطيك الف الف عافيه