السلام عليكم ورحمة الله وبركاته
نبدأ اليوم الدرس الرابع من بعد ان ركبنا في الدرس الماضي السيرفر الشخصي والمنتدى على اجهزتنا.
نبدأ على بركة الله
لو تتذكرون في الدرس الثاني في الدورة قمنا بتقطيع التصميم الذي صممناه
وعند حفظ التقطيع الصور التي في الستايل حُفظت في مجلد اسمه images
الان هذا المجلد نضعه داخل مجلد جديد نسميه على مزاجنا وانا سأسميه qalbelak
يعني يكون بهذا المسار
Images >>> qalbelak
ونأخذ مجلد qalbelak ونضعه في مجلد vb الذي هو في قرص الـ c كما سبق وقلنا
على المسار
c >>> AppServ >>> www >>> vb >>> qalbelak
اعتقد الى هنا الفكرة واضحة
الآن يجب ان يكون لديك برنامج الفرونت بيج
بعدها ندخل المنتدى الشخصي على الذي قمنا بتنصيبه على اجهزتنا
وعلى هذا الرابط
www.localhost/vb
نسجل دخول للمنتدى وندخل الى لوحة تحكم المنتدى
ونذهب الى الستايلات والقوالب >> التحكم بالستايلات
بعدها الستايل الافتراضي ننقر بالمكان الذي حدته بالون البنفسجي
ونختار قالب header
الان نترك صفحة لوحة تحكم المنتدى على صفحة الهايدر لنا عوده لها في وقت لاحق ونفتح برنامج الفرونت بيج
بعد فتحه نضغط على تعليمات برمجيه تجدها في اسفل الصفحة على اليمين
سنجد فيه اكواد نضللها ونمسحها
بعدها نضغط على تصميم
ستظهر الصفحة بيضاء
من فوق من ادراج جدول نختار كما في الصورة
بعدها نضع المؤشر في وسط الجدول ونضغط كلك ايمن ونختار كما في الصورة
نعمل خصائص الجدول كما انا عملت في الصورة ونضغط موافق
الان ايضاً نضع المؤشر في وسط الجدول وكلك ايمن ونختار خصائص الخلية كما في الصورة
لوضع منطقة التمدد في الهايدر
وبعدها
وبعدها نذهب الى المجلد الصور الذي وضعناه في مجلد vb
نختار صورة التمدد الاولى للهايدر كما في الصورة
بعدها اضغط في وسط الجدول و ستجد في اعلى صفحة البرنامج ايقونة ادراج صورة انقر عليها واختار اول صورة للهايدر كما في الصورة
اخترنا اول صورة في الهايدر ولاحظو اعطيناها محاذاة الى اليمين
بعدها كلك يمين على الصوة واختيار خصائص الصورة
وبعدها نعمل كما في الصورة لكي نحافظ على تناسق ابعاد الستايل
ونضغط على موافق
وايضاً من ادراج صورة من ملف نختار الصورة الثانية للهايدر
وايضاً نعمل كما عملنا في الصورة الأولى ولكن هذه المرة محاذاة الى اليسار
والان ايضاً ندخل الى خصائص الصورة
ونعمل كما في الصورة
الان ننقر على التعليمات البرمجية سيظهر لنا كود ماعملناه في التصميم ونظلل كما الذي انا محدده في الصورة /file://appserv/www/vb في الصورة
وكلك ايمن على ما ظللناه واختيار استبدال
بعدها تظهر لنا كما في الصورة
ستظهر لنا نافذة صغيرة يقول ان تم الانتهاء من البحث نعطية موافق وبعدها اغلاق
وسيكون الكود المتبقي كما في الصورة
الان نذهب الى صفحة قالب الهايدر التي دخلنا عليها وقلنا سنعود اليها في وقت لاحق
ونظلل الكود كما وضحت في الصورة ونمسحه (الذي انا حددته فقط)
وننسخ الكود الذي في الفرونت بيج بأكمله ونلصقه مكانه ونعطي حفظ
الان اذهب الى صفحة المنتدى الرئيسية ولاحظ التغيير كما في الصورة
الى هنا انتهينا من الهايدر الان جاء دور الفوتر وهو المنطقة السفلية من الستايل
نذهب الى قالب الفوتر وندخل عليه
نركته سنعود الى هذه الصفحة في وقت لاحق
نذهب الى الفرونت بيج ونمسح جميع الاكواد الموجوده في التعليمات البرمجيه كما سبق وعملنا في الهايدر وبعدها نضغط على تصميم
ونقوم بأدراج جدول كما فعلنا بالهايدر .. صف وعمود واحد ايضاً كما عملنا في الهايدر
ايضاً كلك في وسط الجدول ونختار خصائص الجدول
وكما في الصورة
وبعدها كلك في وسط الجدول ونختار خصائص الخلية
وبعدها
ونختار منطقة تمدد الفوتر كما في الصورة
وبعدها من ادراج صورة من ملف نختار اول صورة للفوتر
ويضاً كما فعلنا بالهايدر من محاذات نحو اليمين والدخول الى خصائص الصورة
وبعدها
والان الصورة الثانية وايضاً محاذات الى جهة اليسار والدخول الى خصائص الصورة
وبعدها
وبعدها
الان نضغط على التعليمات البرمجية سيظهر لنا كود عملنا في صفحة التصميم
نظلل ماقمت انا بتظلليه والنقر عليه كلك يمين واختيار استبدال والكود المحدد هو /file://appserv/www/vb فقط
ستظهر لنا هذه الصفحة
نضغط على استبدال
ستظهر بعدها هذه النافذة نضغط ok وبعدها اغلاق
الان نذهب الى صفحة الفوتر التي قلنا سنعود اليها في وقت لاحق
وننزل الى اسفل القالب واسفل <******/> نضيف الكود الخاص بالفوتر من الفرونت بيج
كما في الصورة
وبعد الحفظ نذهب الى صفحة المنتدى الرئيسية ونشاهد التغيير
الى هنا قمنا بالانتهاء من الفوتر ومن قبله الهايدر
وبهذا نكون قد انهينا الدرس لهذا اليوم وان شاء الله يكون الدرس سهل التطبيق
::ملاحظة::
تم شرح الدرس بالتفصيل الممل لانه تقريباً اهم درس لكيفية التعامل مع برنامج الفرونت بيج وكيفية التصميم عليه ونقل الاكواد الى القوالب لكي تظهر على شكل ستايل
بعض الخطوات كان ممكن ان اتجاوزها ولا اعيدها لتكرارها بين فتره واخرى
ولكن حرصي على ان اقدم الدرس بالتفصيل ولكي لا يحدث أي خطأ للمصمم المبتدأ أرتأيت ان اعطي الدرس خطوة بخطوة
طبقوا الدرس وانتظروني في الدرس القادم
لاتنسوني بصالح الدعاء لي ولوالدي
حبي وتقديري للجميع
اخوكم علي
مدير شبكة لك قلبي للتصميم والرتفيه
مواقع النشر (المفضلة)