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

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

اليوم راح نشرح:

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

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

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

يمكنك تحميل البرنامج من الرابط التالي :-
https://p-shop.yoo7.com/montada-f54/topic-t332.htm#1246

2- برنامج appserv..

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

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

اذا حابين الشرح موجود بقسم الشروحات

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

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 708x245.

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

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 599x510.

الان راح يكون لدينا صفحه بيضاء
نتقل بعدها للتصميم مثل ماهو موضح لك بالصوره التالية
هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 602x477.

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 600x471.

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 575x437.

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 596x249.

عملية انشاء الجداول سهله ومايحتاج تفصيل فيها كثير
انظر للنتيجه في الصوره التاليه
هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 608x227.

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 598x450.

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

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

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 581x97.

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

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

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

وسبق وضحنا لكم هذا بالدرس الثاني اذا تذكرون الصوره التاليه
هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 777x550.

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 617x562.

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

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 581x97.

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 792x478.

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 691x397.

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

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

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 777x476.

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 770x189.

في الاخير بيكون الشكل التالي
هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 965x485.

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

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

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 777x550.

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

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

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

بيفتح مربع صغير نقوم تحويله الى ثلاثه

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

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

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 951x441.

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

اضغط على الزاويه اليمين للهيدر ضغطه وحده وراح تحدد معك

قم بتوجيه المحاذه للجه اليمين باستخدام اداة المحاذه

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

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

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

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

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 571x422.

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

وبكذا يكون انتهيت من التوزيع بالفرنت بيج وهذي نتيجة التطبيق
هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 860x466.

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

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

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

بيفتح لنا الاكود البرمجيه للستايل
هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 831x362.

نحتاج لتعديل بسيط لمسار الصور كلها فيصبح لدينا بهذا الشكل
هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 813x446.

الان انتقل ليقونة التصميم وضع مؤشر الماوس في الوسط وختر اداة المحاذة
هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 882x567.

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 853x503.

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

وتبع الصور

بعدها تفتح لنا صفحة التحكم بالستايلات
هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 651x309.

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 643x483.

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

في قالب header
ابحث عن
راح تحصلها في البدايه وفي المنتصف انسخ الكود الموجود بينها وقم بازالته ..
هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 644x280.

نرجع للفرنت بيج وننسخ الجزء العلوي
ونلصقه مكان الكود الي قمنا بمسحه بين
هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 853x273.

ناخذ كود الجزء الثاني السفلي من الفرنت بيج
هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 853x230.

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

في أخر القالب نلصق الكود الي جزئنه بالفرنت بيج
هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 615x143.

ننزل تحت ونسوي حفظ
وروح وشوف المنتدى سوى تحديث
فيه بعض المسات البسيطه الي لازم نعملها
بتلاحظ وجود فراغات في اطراف الستايل

طريقة الازالة سهله
نروح للستايل وتعديل
هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 630x196.

وضع خواص css المحدده بالمربع الاحمر الى الرقم صفر
هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 630x196.

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

[b]انتظروا الدرس القادم

[center]الموضوع منقول للامانة من روابط في بي

ولكن اي مشاكل في التطبيق نستقبلها هنا

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

[/b][/center]

Admin عدد المساهمات : 1265 النقاط : 2072

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