ملتقى قبيلة حرب الرسمي - أول درس من نوعه تعلم تأطير الجداول ونبدأ بالناف بار navbar

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

http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4154

نبدأ بقول بسم الله الرحمن الرحيم
سوف يتم تقطيع الصوره بهذا الشكل أضغط على الصوره لرئيتها بكامل شرحها وكل جزء المراد منه
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4155
سوف يكون التقطيع هاكذا موضح بالصوره العلويه كل جزء أين يتم توزيعه
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4139
إنتهينا من التقطيع لمن لم يقطع حمل الصور فى المرفق وتابع معنا الشرح
الأن جاء دور توزيع الصور فى الفرونت بيج
1- نفتح الفرونت بيج
2- عمل جديد
3- إذالة كافة الأكواد بداخل الصفحه لتكون فارغه
4- حدد كما موضح بالصور التاليه
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4141
بعد رسم الجداول كما موضح عاليه عليك بتحديد خصائص الجدول
موضح
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4145
الكل متابع تمام ولا حد نام لا أنا عايز ناس صاحيه أرتشف كوب من الشاي لحسن شكله برد :shiny:
تم تحديد خصائص الجدول الحمد لله
نبدأ فى توزيع الصور ولاحظ هنا شئ مهم الصور موضحه العلويه خمس صور
إثنان يمين وإثنان يسار وواحده خلفيه للوسط
التقسيم يتم فى الفرونت بيج
بعد إدراج الصور الزاويه بمعنى أدق التى على الجوانب وفى الوسط خفيه وصوره يتم إعطاء منطقة الوسط فى الخليه العلويه والسفليه فقط
كما موضح بالصوره
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4143
وبعد إختيار الخصائص للجدول يتم تقسيم الجزء الأول من الخليه الأولى والجزء الأخيرمن الخليه
يعنى للتوضيح أكثر
قف بالموس فى وسط الخليه وكلك يمين وأتبع الصوره التاليه
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4146
ثم إنقسام الخلايه
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4147

لكى يعطى لنا هذا الشكل النهائى قبل التوزيع
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4161
ويتم التوزيع كالتالى
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4162
1- إدراج الزوايه يمين ويسار
2- إدراج الخلفيه ثم إدراج صورة لكى تأخذ حجم الخلفيه
3- إدراج خلفية الوسط قبل توزيع باقى الصور كما بالصورة التاليه
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4140
بكده بنكون إنتهينا من التقسيم ملحوظه فقط عند إدراج الصوره الثانيه بجانب الذاويه
نضغط التحديد
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4157ثمhttp://www.traidnt.org/up/pic.php?u=1779O37FH&i=4158
طبعا هذا الإجراء سوف بتم على الخلايا العلويه والخلايا السفليه
على فكره نسينه حاجه مهمه جداُ
,
,
,
,
ترمس الشاى نصب كوب أخر :tears:
ونتبع الكلام وإلى بيدخل يشعل القداحه :smoke1:
إنتهينا من التوزيع السليم والحمد لله سوف يظهر لنا على هذا الشكل
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4138
بعد التأكد التام من التوزيع الصحيح نقوم بإستبدال الروابط تابع الشرح
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4148
1- دالة البحث
2- الكود الذى نريد إذالته
سوف يكون بهذا الشكل
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4149
1- أستبدال
2- الكود المراد إذالته
3- الموافقه على الإستبدال بلاشئ
الشكل النهائى بعد الإستبدال
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4150
إنتهينا والحمد لله من توزيع الصور جيداُ داخل الفرونت بيج
نأتى الأن للأهم
إرتشاف كوب أخر من الشاي ثم المتابعه
نذهب إلى المنتدى أى كان سيرفر أبتشى أو قائم على النت طبعاُ مع مراعات مسار الصور جيداُ
المهم نأتى بقالب الناف بار navbar
نضعه فى صفحه جديده فى الفرونت بيج مع إذالة كافة الأكواد الموجوده
نبدء بالبحث عن الكود

كود PHP:


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

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

كود PHP:


		
			
<!-- / nav buttons bar -->

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

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

http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4152
هذه هية العلامه التى توضح المسافات وسط الجدول نقوم بإذالتها ولا زال مؤشر الموس مكانه نضع بست لما قومنا بنسخه من قالب الناف بار
برب الرجاء الإنتباه وإعادة قرائة ما قولت إسأل ألف مره ولا تخطأ مره
بعد النسخ واللصق نختار تصميم ونشوف شو صار تجد الصورة التايه
http://www.traidnt.org/up/pic.php?u=1779O37FH&i=4166
بكده نكون إنتهينا من تطاير الجدول 100%
لم يبقا علينا سوى الضغط على تعليمات البرمجه ثم Ctrl +A
نسخ ما بداخل الصفحه كاملاُ ونذهب لصفحة الناف بار التى حددنا ما نريد بتلك العلامات ===========================
نظلل ما بينهم ثم Delete
ولصق الكود الذى نسخناه من صفحة التصميم
ولا تنسى إذالة تلك العلامات ===========================

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

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

مرفق كامل الصور المطروحه بالدرس صور التصميم مقطعه لمن احب متابعة الدرس خطوه خطوه ومرفق أيضاُ قالب الناف بار مقطر لمن أراد رأيته أو تبديل الصور المرفقه بالدرس بصور أخرى لديه
لتحميل الناف بار
http://www.00op.com/up/include/images/up.gif

لتحميل الصور الخاصه بالدرس لتطبيقه
http://www.00op.com/up/include/images/up.gif
لتحميل صور شرح الدرس
http://www.00op.com/up/include/images/up.gif
الدرس مشروح على نسخة 3.5.4
وأى سؤال بإذن الله أخوكم حاضر له بالتوفيق والخير نلتقى

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

سبحانك اللهم وبحمدك , أشهد أن لا اله إلا أنت أستغفرك وأتوب إليك
أخوكم فى الله
Ali Losha
http://www.asmilies.com/smiliespic/islamic-s/025.gif