السلام عليكم ورحمة الله وبركاته
نبدأ اليوم الدرس الرابع من بعد ان ركبنا في الدرس الماضي السيرفر الشخصي والمنتدى على اجهزتنا.
نبدأ على بركة الله
لو تتذكرون في الدرس الثاني في الدورة قمنا بتقطيع التصميم الذي صممناه
وعند حفظ التقطيع الصور التي في الستايل حُفظت في مجلد اسمه images
الان هذا المجلد نضعه داخل مجلد جديد نسميه على مزاجنا وانا سأسميه qalbelak
يعني يكون بهذا المسار
Images >>> qalbelak
ونأخذ مجلد qalbelak ونضعه في مجلد vb الذي هو في قرص الـ c كما سبق وقلنا
على المسار
c >>> AppServ >>> www >>> vb >>> qalbelak
اعتقد الى هنا الفكرة واضحة
الآن يجب ان يكون لديك برنامج الفرونت بيج
بعدها ندخل المنتدى الشخصي على الذي قمنا بتنصيبه على اجهزتنا
وعلى هذا الرابط
www.localhost/vb
نسجل دخول للمنتدى وندخل الى لوحة تحكم المنتدى
ونذهب الى الستايلات والقوالب >> التحكم بالستايلات
https://mwadah.com/images/imgcache/2009/01/537.jpg
بعدها الستايل الافتراضي ننقر بالمكان الذي حدته بالون البنفسجي
https://mwadah.com/images/imgcache/2009/01/538.jpg
ونختار قالب header
https://mwadah.com/images/imgcache/2009/01/539.jpg
الان نترك صفحة لوحة تحكم المنتدى على صفحة الهايدر لنا عوده لها في وقت لاحق ونفتح برنامج الفرونت بيج
بعد فتحه نضغط على تعليمات برمجيه تجدها في اسفل الصفحة على اليمين
https://mwadah.com/images/imgcache/2009/01/540.jpg
سنجد فيه اكواد نضللها ونمسحها
https://mwadah.com/images/imgcache/2009/01/541.jpg
بعدها نضغط على تصميم
https://mwadah.com/images/imgcache/2009/01/542.jpg
ستظهر الصفحة بيضاء
من فوق من ادراج جدول نختار كما في الصورة
https://mwadah.com/images/imgcache/2009/01/543.jpg
بعدها نضع المؤشر في وسط الجدول ونضغط كلك ايمن ونختار كما في الصورة
https://mwadah.com/images/imgcache/2009/01/544.jpg
نعمل خصائص الجدول كما انا عملت في الصورة ونضغط موافق
https://mwadah.com/images/imgcache/2009/01/545.jpg
الان ايضاً نضع المؤشر في وسط الجدول وكلك ايمن ونختار خصائص الخلية كما في الصورة
لوضع منطقة التمدد في الهايدر
https://mwadah.com/images/imgcache/2009/01/546.jpg
وبعدها
https://mwadah.com/images/imgcache/2009/01/547.jpg
وبعدها نذهب الى المجلد الصور الذي وضعناه في مجلد vb
https://mwadah.com/images/imgcache/2009/01/548.jpg
https://mwadah.com/images/imgcache/2009/01/549.jpg
نختار صورة التمدد الاولى للهايدر كما في الصورة
https://mwadah.com/images/imgcache/2009/01/550.jpg
بعدها اضغط في وسط الجدول و ستجد في اعلى صفحة البرنامج ايقونة ادراج صورة انقر عليها واختار اول صورة للهايدر كما في الصورة
https://mwadah.com/images/imgcache/2009/01/551.jpg
اخترنا اول صورة في الهايدر ولاحظو اعطيناها محاذاة الى اليمين
https://mwadah.com/images/imgcache/2009/01/552.jpg
بعدها كلك يمين على الصوة واختيار خصائص الصورة
https://mwadah.com/images/imgcache/2009/01/553.jpg
وبعدها نعمل كما في الصورة لكي نحافظ على تناسق ابعاد الستايل
ونضغط على موافق
https://mwadah.com/images/imgcache/2009/01/554.jpg
وايضاً من ادراج صورة من ملف نختار الصورة الثانية للهايدر
https://mwadah.com/images/imgcache/2009/01/555.jpg
وايضاً نعمل كما عملنا في الصورة الأولى ولكن هذه المرة محاذاة الى اليسار
https://mwadah.com/images/imgcache/2009/01/556.jpg
والان ايضاً ندخل الى خصائص الصورة
https://mwadah.com/images/imgcache/2009/01/557.jpg
ونعمل كما في الصورة
https://mwadah.com/images/imgcache/2009/01/558.jpg
الان ننقر على التعليمات البرمجية سيظهر لنا كود ماعملناه في التصميم ونظلل كما الذي انا محدده في الصورة /file://appserv/www/vb في الصورة
وكلك ايمن على ما ظللناه واختيار استبدال
https://mwadah.com/images/imgcache/2009/01/559.jpg
بعدها تظهر لنا كما في الصورة
https://mwadah.com/images/imgcache/2009/01/560.jpg
ستظهر لنا نافذة صغيرة يقول ان تم الانتهاء من البحث نعطية موافق وبعدها اغلاق
وسيكون الكود المتبقي كما في الصورة
https://mwadah.com/images/imgcache/2009/01/561.jpg
الان نذهب الى صفحة قالب الهايدر التي دخلنا عليها وقلنا سنعود اليها في وقت لاحق
ونظلل الكود كما وضحت في الصورة ونمسحه (الذي انا حددته فقط)
https://mwadah.com/images/imgcache/2009/01/562.jpg
وننسخ الكود الذي في الفرونت بيج بأكمله ونلصقه مكانه ونعطي حفظ
الان اذهب الى صفحة المنتدى الرئيسية ولاحظ التغيير كما في الصورة
https://mwadah.com/images/imgcache/2009/01/563.jpg
الى هنا انتهينا من الهايدر الان جاء دور الفوتر وهو المنطقة السفلية من الستايل
نذهب الى قالب الفوتر وندخل عليه
https://mwadah.com/images/imgcache/2009/01/564.jpg
نركته سنعود الى هذه الصفحة في وقت لاحق
نذهب الى الفرونت بيج ونمسح جميع الاكواد الموجوده في التعليمات البرمجيه كما سبق وعملنا في الهايدر وبعدها نضغط على تصميم
ونقوم بأدراج جدول كما فعلنا بالهايدر .. صف وعمود واحد ايضاً كما عملنا في الهايدر
https://mwadah.com/images/imgcache/2009/01/543.jpg
ايضاً كلك في وسط الجدول ونختار خصائص الجدول
https://mwadah.com/images/imgcache/2009/01/544.jpg
وكما في الصورة
https://mwadah.com/images/imgcache/2009/01/545.jpg
وبعدها كلك في وسط الجدول ونختار خصائص الخلية
https://mwadah.com/images/imgcache/2009/01/546.jpg
وبعدها
https://mwadah.com/images/imgcache/2009/01/547.jpg
ونختار منطقة تمدد الفوتر كما في الصورة
https://mwadah.com/images/imgcache/2009/01/565.jpg
وبعدها من ادراج صورة من ملف نختار اول صورة للفوتر
https://mwadah.com/images/imgcache/2009/01/566.jpg
ويضاً كما فعلنا بالهايدر من محاذات نحو اليمين والدخول الى خصائص الصورة
https://mwadah.com/images/imgcache/2009/01/567.jpg
وبعدها
https://mwadah.com/images/imgcache/2009/01/568.jpg
والان الصورة الثانية وايضاً محاذات الى جهة اليسار والدخول الى خصائص الصورة
https://mwadah.com/images/imgcache/2009/01/569.jpg
وبعدها
https://mwadah.com/images/imgcache/2009/01/570.jpg
وبعدها
https://mwadah.com/images/imgcache/2009/01/558.jpg
الان نضغط على التعليمات البرمجية سيظهر لنا كود عملنا في صفحة التصميم
نظلل ماقمت انا بتظلليه والنقر عليه كلك يمين واختيار استبدال والكود المحدد هو /file://appserv/www/vb فقط
https://mwadah.com/images/imgcache/2009/01/571.jpg
ستظهر لنا هذه الصفحة
نضغط على استبدال
https://mwadah.com/images/imgcache/2009/01/572.jpg
ستظهر بعدها هذه النافذة نضغط ok وبعدها اغلاق
https://mwadah.com/images/imgcache/2009/01/573.jpg
الان نذهب الى صفحة الفوتر التي قلنا سنعود اليها في وقت لاحق
وننزل الى اسفل القالب واسفل <******/> نضيف الكود الخاص بالفوتر من الفرونت بيج
كما في الصورة
https://mwadah.com/images/imgcache/2009/01/574.jpg
وبعد الحفظ نذهب الى صفحة المنتدى الرئيسية ونشاهد التغيير
https://mwadah.com/images/imgcache/2009/01/575.jpg
الى هنا قمنا بالانتهاء من الفوتر ومن قبله الهايدر
وبهذا نكون قد انهينا الدرس لهذا اليوم وان شاء الله يكون الدرس سهل التطبيق
::ملاحظة::
تم شرح الدرس بالتفصيل الممل لانه تقريباً اهم درس لكيفية التعامل مع برنامج الفرونت بيج وكيفية التصميم عليه ونقل الاكواد الى القوالب لكي تظهر على شكل ستايل
بعض الخطوات كان ممكن ان اتجاوزها ولا اعيدها لتكرارها بين فتره واخرى
ولكن حرصي على ان اقدم الدرس بالتفصيل ولكي لا يحدث أي خطأ للمصمم المبتدأ أرتأيت ان اعطي الدرس خطوة بخطوة
طبقوا الدرس وانتظروني في الدرس القادم
https://mwadah.com/images/imgcache/2009/01/416.gif
لاتنسوني بصالح الدعاء لي ولوالدي
https://mwadah.com/images/imgcache/2009/01/417.gif
حبي وتقديري للجميع
اخوكم علي
مدير شبكة لك قلبي للتصميم والرتفيه
