أول درس من نوعه تعلم تأطير الجداول ونبدأ بالناف بار navbar

هذا الدرس غايه بل قمه فى السهوله
كل ما عليك قبل البدأ فى المتابعه أن تكون مدرك للإستايل جيداُ
هذا الدرس مقدم هدية منى لأستاذى الغالى Alrai3 وأستاذى الجليل خالدالحربي
المهم كما قولت نبدأ بترمس شاى حلو كده ونبدأ فى صب أول كوب
مع إرتشاف الرشفه الأولى نقول هذه هى الصوره التى سوف نعمل عليها فى تطاير الجدول حول الناف بار navbar



نبدأ بقول بسم الله الرحمن الرحيم
سوف يتم تقطيع الصوره بهذا الشكل أضغط على الصوره لرئيتها بكامل شرحها وكل جزء المراد منه
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4155
سوف يكون التقطيع هاكذا موضح بالصوره العلويه كل جزء أين يتم توزيعه

إنتهينا من التقطيع لمن لم يقطع حمل الصور فى المرفق وتابع معنا الشرح
الأن جاء دور توزيع الصور فى الفرونت بيج
1- نفتح الفرونت بيج
2- عمل جديد
3- إذالة كافة الأكواد بداخل الصفحه لتكون فارغه
4- حدد كما موضح بالصور التاليه

بعد رسم الجداول كما موضح عاليه عليك بتحديد خصائص الجدول
موضح

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

وبعد إختيار الخصائص للجدول يتم تقسيم الجزء الأول من الخليه الأولى والجزء الأخيرمن الخليه
يعنى للتوضيح أكثر
قف بالموس فى وسط الخليه وكلك يمين وأتبع الصوره التاليه

ثم إنقسام الخلايه



لكى يعطى لنا هذا الشكل النهائى قبل التوزيع

ويتم التوزيع كالتالى

1- إدراج الزوايه يمين ويسار
2- إدراج الخلفيه ثم إدراج صورة لكى تأخذ حجم الخلفيه
3- إدراج خلفية الوسط قبل توزيع باقى الصور كما بالصورة التاليه

بكده بنكون إنتهينا من التقسيم ملحوظه فقط عند إدراج الصوره الثانيه بجانب الذاويه
نضغط التحديد
ثم
طبعا هذا الإجراء سوف بتم على الخلايا العلويه والخلايا السفليه
على فكره نسينه حاجه مهمه جداُ
,
,
,
,
ترمس الشاى نصب كوب أخر :tears:
ونتبع الكلام وإلى بيدخل يشعل القداحه :smoke1:
إنتهينا من التوزيع السليم والحمد لله سوف يظهر لنا على هذا الشكل

بعد التأكد التام من التوزيع الصحيح نقوم بإستبدال الروابط تابع الشرح

1- دالة البحث
2- الكود الذى نريد إذالته
سوف يكون بهذا الشكل

1- أستبدال
2- الكود المراد إذالته
3- الموافقه على الإستبدال بلاشئ
الشكل النهائى بعد الإستبدال

إنتهينا والحمد لله من توزيع الصور جيداُ داخل الفرونت بيج
نأتى الأن للأهم
إرتشاف كوب أخر من الشاي ثم المتابعه
نذهب إلى المنتدى أى كان سيرفر أبتشى أو قائم على النت طبعاُ مع مراعات مسار الصور جيداُ
المهم نأتى بقالب الناف بار navbar
نضعه فى صفحه جديده فى الفرونت بيج مع إذالة كافة الأكواد الموجوده
نبدء بالبحث عن الكود

كود PHP:

<!-- breadcrumb, login, pm info --> 


ونضع أسفله هذه العلامات ===========================
ثم نبحث عن الكود

كود PHP:

<!-- / nav buttons bar --> 


ونضع أعلاه هذه العلامات===========================
وما وضعنا بينهم العلامات هيه المنطقه المراده الخاصه بالتقطير وتطاير الصور حول الجدول

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


هذه هية العلامه التى توضح المسافات وسط الجدول نقوم بإذالتها ولا زال مؤشر الموس مكانه نضع بست لما قومنا بنسخه من قالب الناف بار
برب الرجاء الإنتباه وإعادة قرائة ما قولت إسأل ألف مره ولا تخطأ مره
بعد النسخ واللصق نختار تصميم ونشوف شو صار تجد الصورة التايه

بكده نكون إنتهينا من تطاير الجدول 100%
لم يبقا علينا سوى الضغط على تعليمات البرمجه ثم Ctrl +A
نسخ ما بداخل الصفحه كاملاُ ونذهب لصفحة الناف بار التى حددنا ما نريد بتلك العلامات ===========================
نظلل ما بينهم ثم Delete
ولصق الكود الذى نسخناه من صفحة التصميم
ولا تنسى إذالة تلك العلامات ===========================

وهنا بعد إكتمال الدرس بقول ألف مبروك تم تقطير الجدول بكل سهوله لم يبقا غير خطوه واحده وأخيره
وهيه نسخ كامل جدول الناف بار ولصقه فى مكانه داخل جدول المنتدى لكى يصبح مثل هذه الصوره


للمعاينه على الطبيعه هنــــــــــــــــــــــــــــــا

مرفق كامل الصور المطروحه بالدرس صور التصميم مقطعه لمن احب متابعة الدرس خطوه خطوه ومرفق أيضاُ قالب الناف بار مقطر لمن أراد رأيته أو تبديل الصور المرفقه بالدرس بصور أخرى لديه
لتحميل الناف بار


لتحميل الصور الخاصه بالدرس لتطبيقه

لتحميل صور شرح الدرس

الدرس مشروح على نسخة 3.5.4
وأى سؤال بإذن الله أخوكم حاضر له بالتوفيق والخير نلتقى

فالسماح على الخطأ والنسيان
فإن كان بيه خطأ فإنه منى وأنسانى إياه الشيطان الرجيم
وإن أصبت فلله الحمد والمنة أن وفقت في ذلك
وفي ختام هذا الشرح أدعوا الله لي ولكم ولوالدينا ولمن أحببناه في الدنيا
بالهداية والصلاح في الدنيا وأن يجمعنا جميعاً في الفردوس الأعلى ....

سبحانك اللهم وبحمدك , أشهد أن لا اله إلا أنت أستغفرك وأتوب إليك
أخوكم فى الله
Ali Losha

يعطيك الف عافية اخوي الحب الباقي

ماقصرت على الموضوع

تحياتي

يعطيك الف عافية اخوي الحب الباقي

ماقصرت على الموضوع

الاخ الحب الباقي

ماقصرت يالغالي

الله يعطيك العافيه

جهد رائع

تقبل تحياتي

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

بارك الله فيك على الموضوع المفيد

وبارك الله فيك على المجهود الكبير

بيض الله وجهك

اتمنالك التوفيق إن شاء الله

أخيك ابوروان

يعطيك العافيه اخي الحب الباقي

وبارك الله فيك على المجهود الكبير

اخوك
سلطان

يعطيك الف عافيه اخي الحب الباقي

مشكور وماقصرت

تحياتي وتقديري
عاشق بريده

الحب الباااااااااااااقي



صح لسانك و بيض الله وجهك

الله يـعـطـيـكم الـعـافيـــــــــــة عـــلى الـــمــــرور


اخـوكم الـحـب الـبـاقـي


دمتم بخير