الموضوع: ((الدرس الرابع)) تصميم ستايل احترافي ..متمدد....صل الى الأحتراف مع لك قلبي

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

نبدأ اليوم الدرس الرابع من بعد ان ركبنا في الدرس الماضي السيرفر الشخصي والمنتدى على اجهزتنا.

نبدأ على بركة الله

لو تتذكرون في الدرس الثاني في الدورة قمنا بتقطيع التصميم الذي صممناه
وعند حفظ التقطيع الصور التي في الستايل حُفظت في مجلد اسمه 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 وبعدها اغلاق




الان نذهب الى صفحة الفوتر التي قلنا سنعود اليها في وقت لاحق
وننزل الى اسفل القالب واسفل <******/> نضيف الكود الخاص بالفوتر من الفرونت بيج
كما في الصورة




وبعد الحفظ نذهب الى صفحة المنتدى الرئيسية ونشاهد التغيير



الى هنا قمنا بالانتهاء من الفوتر ومن قبله الهايدر

وبهذا نكون قد انهينا الدرس لهذا اليوم وان شاء الله يكون الدرس سهل التطبيق

::ملاحظة::
تم شرح الدرس بالتفصيل الممل لانه تقريباً اهم درس لكيفية التعامل مع برنامج الفرونت بيج وكيفية التصميم عليه ونقل الاكواد الى القوالب لكي تظهر على شكل ستايل
بعض الخطوات كان ممكن ان اتجاوزها ولا اعيدها لتكرارها بين فتره واخرى
ولكن حرصي على ان اقدم الدرس بالتفصيل ولكي لا يحدث أي خطأ للمصمم المبتدأ أرتأيت ان اعطي الدرس خطوة بخطوة

طبقوا الدرس وانتظروني في الدرس القادم



لاتنسوني بصالح الدعاء لي ولوالدي



حبي وتقديري للجميع

اخوكم علي
مدير شبكة لك قلبي للتصميم والرتفيه

بصراحة درس رائع ومفهوم جدا اخي لك قلبي بارك الله فيك
لكن اخي وقفت عند ادراج الجدول مافهمت انت حاط مربع واحد فقط طيب واحنا مقطعين الهيدر الى ثلاثة يعني احط ثلاثة مربعات ولا اييييييييييييييه
على فكرة انا نسيت كلمة المرور في موقعك وماجاتني وحدة جديدة ياريت تبعتهالي عشان ادخل الموقع بارك الله فيك

بصراحة درس رائع ومفهوم جدا اخي لك قلبي بارك الله فيك
لكن اخي وقفت عند ادراج الجدول مافهمت انت حاط مربع واحد فقط طيب واحنا مقطعين الهيدر الى ثلاثة يعني احط ثلاثة مربعات ولا اييييييييييييييه
على فكرة انا نسيت كلمة المرور في موقعك وماجاتني وحدة جديدة ياريت تبعتهالي عشان ادخل الموقع بارك الله فيك

اهلا اختي
نعم الجدول فيه مربع واحد وادراج منطقة التمدد التي شرحتها والصور التي ادرجتها في نفس الجدول
يعني عندما قطعتي الهايدر الى ثلاث اجزاء هي صورتين ومنطقة تمدد واحده
التطبيق والادراج يحصل في الجدول نفسه رغم اننا قطعنا الهايدر الى ثلاث اجزاء
ونفس الحالة في الفوتر

اتمنى فهمتي وان لم تفهمي لاتترددي بالسؤال او الاستفسار

اما بالنسبة للباسوورد سأرسله لك على الرسائل الخاصة بس بشرط لا تنسيه مره ثانية

قولي نعم

تحياتي

اسعدني مرورك اخي ابو راشد

شكراً لك على الرد

تحياتي