شركة كافيه هوست تسعد بالرد عليك ولا تنسي +++
الأن سنفتح برنامج الفرونت بيج
سنحدف الكود الموجود بمنطقة البرمجة أيcode
اضغط هنا لمشاهدة الصورة كاملة.
من اسفل الفرونت بيج اضغط على كلمة تصميم عشان تبدى الشغل
او بالانجليزي Desgin
ثم ندهب لخصائص الصفحة مثل الصورة
page properies
و نحدد إتجاه الصفحة
من اليمين الى اليسار
Right-to-left
اضغط هنا لمشاهدة الصورة كاملة.
طيب روح الى ايقونه الجداول واختر 9 جداول
راح تنزل في الفرونت بيج بهذا الشكل
اضغط هنا لمشاهدة الصورة كاملة.
و نضغط على الزر الأيمن للماوس لنحدد خصائص الجدول
و نغير هده القيم متل الصورة
او بالعربي
اضغط هنا لمشاهدة الصورة كاملة.
ليصبح بهذا الشكل
اضغط هنا لمشاهدة الصورة كاملة.
الان لاحظوا هالصوره وركزوا فيها
اضغط هنا لمشاهدة الصورة كاملة.
عندنا اربعه زوايا = ادراج صوره نستخدم هذي الاداه
عندنا اربعه اوساط = نضع لها خلفيه بواسطه الضغط على الوسط بطرف الماوس الايمن ومن ثم نختار الصوره من كلمة استعراض
====================
الصوره هذي ترجمه لما سيحصل في الجدول
اضغط هنا لمشاهدة الصورة كاملة.
اللحين نبدى ندرج اربع زوايا عن طريق هذي الصوره
والنتيجه
اضغط هنا لمشاهدة الصورة كاملة.
خلصنا الاربع زوايا
اللحين نروح نحط صور الاوساط
اللي يتذكر انا وش قلت من شوي
قلت نحط للاوساط خلفيات باستخدام الماوس الايمن ونختار خصائص الخلفيه
تعالوا نجرب الوسط العلوي ونضع الماوس عليه ونحط له خلفيه
اختار استعراض
اضغط هنا لمشاهدة الصورة كاملة.
خلصنا الاربع زوايا
اللحين نروح نحط صور الاوساط
اللي يتذكر انا وش قلت من شوي
قلت نحط للاوساط خلفيات باستخدام الماوس الايمن ونختار خصائص الخلفيه
تعالوا نجرب الوسط العلوي ونضع الماوس عليه ونحط له خلفيه
اختار استعراض
اضغط هنا لمشاهدة الصورة كاملة.
راح تجيك الصور واختار اللي يفترض يكون خلفيه ثم فتح
نحدد نقطة التمدد
إنقر هنا لتصغير الصورة
ثم موافق
هذي الخلفيه وصلت واحلى ترحيب
اضغط هنا لمشاهدة الصورة كاملة.
طيب خلصنا اربع زوايا صح!
وخلصنا وسط علوي
باقي وسط سفلي + وسط جانبي ايمن + وسط جانبي ايسر
نضع كل خلفيه للوسط اللي يفترض تكون فيه
نشوف النهايه وشلون تطلع
اضغط هنا لمشاهدة الصورة كاملة.
شد الاطراف يامال العافيه
اضغط هنا لمشاهدة الصورة كاملة.
وانشدت الاطراف
ركز معاي اللحين لاهنت
اللحين بتضغط بطرف الماوس الايمن وراح تختار
التقسيــــــــــم عارفين ليه
لوضع الصور التجميليه
اللي حطيتها من شوي
وللتذكير نشوفها اللحين (فيه صور مكتوب تحتها تجميليه)
اضغط هنا لمشاهدة الصورة كاملة.
نكمل عشان مانتلخبط
وش قلت من شوي نختار التقسيم ونختار منه 3 اعمده
قسمنا الخليه الى ثلاثه اقسام
اضغط هنا لمشاهدة الصورة كاملة.
طبعاً اللي راح ينطبق على الهيدر .. راح ينطبق على الفوتر من حيث التقسيم الى 3 اعمده
اللحين ندرج الصور التجميليه في الهيدر بواسطه هذه الاداره
شوف كيف راح تصير معانا
اضغط هنا لمشاهدة الصورة كاملة.
ونقسم الفوتر (بالماوس الايمن نختار تقسيم)
نختار 3 اعمده
اللحين ندرج الصور التجميليه في الفوتر بواسطه هذه الاداره
هاه انتيهنا والا مانتيهنا
باقي ايش؟
باقي المحاذاه للصور التجميليه بمجرد انك تضغط ضغطه وحده على الصوره راح يبان ملامح التحديد عليها
نروح للصوره التجميليه العلويه اليسرى ونعطيها محاذاه لليسار
نروح للصوره التجميليه العلويه اليمنى ونعطيها محاذاه لليمين
نروح للصوره التجميليه السفليه اليسرى ونعطيها محاذاه لليسار
نروح للصوره التجميليه السفليه اليمنى ونعطيها محاذاه لليمين
صار شكل الاستايل كذا 100%
اللحين في نفس الجداول نحط الماوس ونعطيه امر التنصيف
بواسطة هذي الاداه
ونروح نضغط على التعليمات البرمجيه من اسفل الفرونت بيج
------
اضافه غير مطلوبه في هذا الدرس ولكن للفائده
الأن سنعمل على وضع الروابط في الصورة
الرئيسية : index.php
لوحة التحكم : usercp.php
البحت : search.php
قائمة الأعضاء : memberlist.php
التعليمات : faq.php
التقويم : calendar.php
الأن طريقة إدراجها برابط في الصورة و الجزء المحدد
نضغط على شرط الخيارات بالزر الأيمن للماوس و نختار images كما بالصورة
ليظهر لنا هدا الشريط
و نحدد الصورة المراد وضع الرابط بزجء منها أو كلها تم نختار المربع الملون في الصورة باللون الورديو نحدد المنطقة التي نريد أن نضع بها رابط
سنحدد في الصورة بالمربع كلمة الرئيسية فقط
و عند التحديد سيضهر لك جدول تدرج فيه الرابط الدس يرد و سنستعمل الروابط التي دكرتها مسبقا
تم نضغط على ok و إن أدنا إضافة تعليق عند مرور الماوس على الرابط يضهر تعليق فوق الرابط
تم نكتب العبارة التي نريد
الأن سنضع الرابط في المتلت الدي يوجد بالفوتر و نضع الرابط كما هو مبين بالصورة top#
الأن مرحلة تحديد الفوتر و الهيدر من خلال كود HTML سنضع الماوس في الجدول الدي بالوسط أي مكان تواجد المنتدى كما دكرت سابقا
ليكون متل هكدا
-------------
تم نتدهب لمنطقة الكود
الكود المحدد يمتل الهيدر
الكود المحدد يمتل الفوتر
الأن سندخل للوحة تحكم المنتدى
و نتبع المراحل التي بالصور
و نضغط ok على الإستايل الإفتراضي
الأن هده هي الحقول التي سنلصق بها كود الهيدر و الفوتر
الأن سنعود للفرونت بيج لننسخ الكود الدي حددناه للهيدر و نلصقه بمكان الهيدر بلوحة التحكم
الأن لاحظ كيف سألصق الكود
نمسك الصدوق الاول الـ header ونمسح كل مافيه ومانبقى الا
$spacer_open
$_phpinclude_output
أما الأن بالنسبة للفوتر فسنلصق الكود في في الأسفل
ننسخ هدا الكود الخاص بالفوتر من الفرونت بيج و نلصقه في الحقل الخاص به في لوحة التحكم
كما بالصورة
و نحفظ التعديل بالضغط على حفظ
الأن سندهب لنرى كيف أصبح الإستايل بالمنتدى
و هكذا تم بحمد الله تركيب التصميم على المنتدى وفي الدرس التالي سوف نتعلم كيفيه تعديل الوان قوالب الستايل css ليتناسب مع التصميم
اتمنى ان ارى تطبيقاتكم واي استفسار او نقطه غير واضحه ارجوا عدم التردد
انا حاولت اجمع لكم اوضح الطرق ليتضح الدرس
واعذروني على اللخبطه الا سويتها لكم المفروض الدرس كله على الستايل الاخضر
بس لقيت الشرح حقه مطول واصعب شوي فجبت لكم شرح اوضح وكلها تدور حول نفس الفكره والاهم النتيجه النهائيه لو تفهم راح تطبق بدون مشاكل
شركة كافيه هوست : فى خدمة العملاء والناس دئمأ
مشكلة الفوتر والجانبين
النمط المتتابع
