الدرس الثالث [ طريقة توزيع الستايل بالفرنت بيج وتركيبه على المنتدى]
الدرس يحتاج منا التركيز حتى مايروح تعبنا في فهم الدروس السابقه فهو الدرس الاهم للوصول للنتيجه وعرض تصميمك على اعضاء منتداك فصلنا الشرح تفصيل طويل حتى نقدر نظهر بنتيجه ونقلل الاسئله في هالموضوع
ماذا نحتاج لنبداء ؟؟
1- برنامج الفرنت بيج
2- برنامج appserv..
حيث أن البرنامج يحتوي على قواعد بيانات MySQL + سيرفر Apache + مترجم php وذلك يختصر الوقت من تنزيل أكثر من برنامج ..ومن خلاله راح نقوم بتركيب منتدى على جهازك
وطريقة تركيب منتدى اتوقع الجميع هنا يعرفها
اذا حابين الشرح موجود بقسم الشروحات
نبداء الدرس بعد تجهيز المتطلبات كامله
نروح نفتح برنامج الفرنت بيج
Microsoft Office FrontPage
تابع معي الصور الشرح غالبيته داخل الصوره
الان نقوم بتحويل الصفحه من اليمين لليسار وذلك لاستخدمنا للغه العربية
بعد اختيار خصائص الجداول راح يعطينا مربع للخصائص الصفحة
نوجه الصفحه من اليمين الى اليسار
الان راح نقوم بأنشاء عدد من الجداول الي بيكون توزيع الصور عليها وعدد الجداول المطلوبه هي 9 جداول
نحتاج الان لاخفاء حدود الجداول وتوسيطها داخل الصفحه والطريقه هذي من خلال الضغط على خصائص الجدول
شدحيلك معي شوي الدرس هذا يبي شوي صبر لاهميته:)
اهااااا....... الان جينا لزبده الدرس وهو توزيع الصور بالفرنت بيج
انا وضعت صوره للصور وهي مقطعه
ملاحظه بسيطه :
التوزيع بيكون ادراج صوره او وضع خلفيه
يعني بيكون توزيع الصور حسب الرسم التوضيح هذا شاهد معي التوزيع
طريقة ادارج الصوره يكون من خلال اداة الادارج الموضحه لكم هنا
بيكون توزيعنا للصور حسب الشرح الي بالصوره التاليه ونسميها الصورة (توزيع المرحله الاولى)
راح ندرج زوايا الهيدر والفوتر باستخدام ادراج صورة
بيصبح لدي بهذا الشكل
الان نجي لوضع الاعمده والتمدد الخاص بالهيدر والفوتر
وهذي الطريقه باستخدام خصائص الخليه
نضع الماوس داخل خلية التمدد الي موضحينا لكم في التوزيع الي باسم ( توزيع المرحله الاولى )
بيفتح لنا مربع خصائص الخليه
نقوم بادراج صورة التمدد للهيدر ونطبق الطريقه على تمدد الفوتر وعلى العمود الايمن والايسر
في الاخير بيكون عندي النتيجه بهذا الشكل
الان من الخليه الي في منتصف التوزيع قم بشد الاطراف يمين ويسار
يبقى عندي توزيع الصور التجميليه وهي اربع صور وراح نوزعها على النحو التالي
الهيدر بيكون صوره تجميليه يمين وصوره تجميليه يسار
الفوتر بيكون صوره تجميليه يمين وصوره تجميليه يسار
شاهد التوزيع للصور التجميليه بهذا الرسم التخطيطي الي كان بالدرس الثاني
الصور التجميليه راح نضيفها هالمره باستخدام ادراج صوره
نقوم بتقسيم خلية التمدد للهيدر والفوتر الى ثلاث خلايا اضافيه قبل ادارج الصور التجميليه
بكذا قسمنا الخليه الى ثلاث خلايا في الهيدر الان نقوم بادراج الصور التجميليه يمين ويسار ونترك المنتصف للتمدد
ونفس الي سويته على الهيدر تطبقه على الفوتر
وبكذا يكون هذه نتيجة العمل
باقي علينا الان تعديل توجيه محاذاة الصور
وهذي طريقه سهله راح نستخدم فيها اداة المحاذاة
طبق هذه العمليه للصوره التجميليه بالهيدر الي باليمين وبعدها انتقل للفوتر ونفس العمليه للجهة اليمن طبق عليها هذه الطريقه
يبقى عندي الجهة اليسار للهيدر والفوتر نطبق عليها الطريقة باستخدام اداة المحاذة لليسار
للتخلص منها عليك الضغط على كل صوره ضغطتين متتاليتين او اذا يدك مو خفيفه على الماوس اضغط على الصوره ضغطه وحده وختر خصائص الصوره
بيفتح لنا مربع
طبق هذه العمليه لجميع الصور الي سويت لها محاذه
وش باقي نقول واصل شوي خل اعضائك يفرحون بتصميمك مابقى غير القليل
الان ننقل التصميم للهيدر طبعاً بعد رفع ملف الصور لمجلد المنتدى
نتقل للتعليمات البرمجية
ونلاحظ هذا الشرح المهم لتقسيم الكود البرمجي لجزئين راح ننقل الجزء الاعلاء لنضعه داخل الهيدر بالمنتدى والجزء الاسفل للفوتر ركز في طريقة التقسيم هذه
الان نقوم بالدخول لوحة التحكم الخاصه لمنتداك
الان هنا يتم وضع كود الفرنت بيج للجزئين الي قمنا بتوزيعهم
ننزل تحت لـــ footer
اعمل حفظ
مبروك الان احنا كملنا درس تصميم ستايل