هذا الدرس غايه بل قمه فى السهوله
كل ما عليك قبل البدأ فى المتابعه أن تكون مدرك للإستايل جيداُ
هذا الدرس مقدم هدية منى لأستاذى الغالى Alrai3 وأستاذى الجليل خالدالحربي
المهم كما قولت نبدأ بترمس شاى حلو كده ونبدأ فى صب أول كوب :bleh:
مع إرتشاف الرشفه الأولى نقول هذه هى الصوره التى سوف نعمل عليها فى تطاير الجدول حول الناف بار navbar
https://mwadah.com/images/imgcache/2007/04/164.imgcache
نبدأ بقول بسم الله الرحمن الرحيم
سوف يتم تقطيع الصوره بهذا الشكل أضغط على الصوره لرئيتها بكامل شرحها وكل جزء المراد منه
[IMGO="JPG"]http://www.traidnt.org/up/pic.php?u=1779O37FH&i=415 5[/IMGO]
سوف يكون التقطيع هاكذا موضح بالصوره العلويه كل جزء أين يتم توزيعه
http://www.mwadah.com/imgcache/11120.imgcache
إنتهينا من التقطيع لمن لم يقطع حمل الصور فى المرفق وتابع معنا الشرح
الأن جاء دور توزيع الصور فى الفرونت بيج
1- نفتح الفرونت بيج
2- عمل جديد
3- إذالة كافة الأكواد بداخل الصفحه لتكون فارغه
4- حدد كما موضح بالصور التاليه
https://mwadah.com/images/imgcache/2007/04/165.imgcache
بعد رسم الجداول كما موضح عاليه عليك بتحديد خصائص الجدول
موضح
https://mwadah.com/images/imgcache/2007/04/166.imgcache
الكل متابع تمام ولا حد نام لا أنا عايز ناس صاحيه أرتشف كوب من الشاي لحسن شكله برد :shiny:
تم تحديد خصائص الجدول الحمد لله
نبدأ فى توزيع الصور ولاحظ هنا شئ مهم الصور موضحه العلويه خمس صور
إثنان يمين وإثنان يسار وواحده خلفيه للوسط
التقسيم يتم فى الفرونت بيج
بعد إدراج الصور الزاويه بمعنى أدق التى على الجوانب وفى الوسط خفيه وصوره يتم إعطاء منطقة الوسط فى الخليه العلويه والسفليه فقط
كما موضح بالصوره
https://mwadah.com/images/imgcache/2007/04/167.imgcache
وبعد إختيار الخصائص للجدول يتم تقسيم الجزء الأول من الخليه الأولى والجزء الأخيرمن الخليه
يعنى للتوضيح أكثر
قف بالموس فى وسط الخليه وكلك يمين وأتبع الصوره التاليه
https://mwadah.com/images/imgcache/2007/04/168.imgcache
ثم إنقسام الخلايه
https://mwadah.com/images/imgcache/2007/04/169.imgcache
لكى يعطى لنا هذا الشكل النهائى قبل التوزيع
https://mwadah.com/images/imgcache/2007/04/170.imgcache
ويتم التوزيع كالتالى
https://mwadah.com/images/imgcache/2007/04/171.imgcache
1- إدراج الزوايه يمين ويسار
2- إدراج الخلفيه ثم إدراج صورة لكى تأخذ حجم الخلفيه
3- إدراج خلفية الوسط قبل توزيع باقى الصور كما بالصورة التاليه
https://mwadah.com/images/imgcache/2007/04/172.imgcache
بكده بنكون إنتهينا من التقسيم ملحوظه فقط عند إدراج الصوره الثانيه بجانب الذاويه
نضغط التحديد
https://mwadah.com/images/imgcache/2007/04/173.imgcacheثمhttps://mwadah.com/images/imgcache/2007/04/174.imgcache
طبعا هذا الإجراء سوف بتم على الخلايا العلويه والخلايا السفليه
على فكره نسينه حاجه مهمه جداُ
,
,
,
,
ترمس الشاى نصب كوب أخر :tears:
ونتبع الكلام وإلى بيدخل يشعل القداحه :smoke1:
إنتهينا من التوزيع السليم والحمد لله سوف يظهر لنا على هذا الشكل
https://mwadah.com/images/imgcache/2007/04/175.imgcache
بعد التأكد التام من التوزيع الصحيح نقوم بإستبدال الروابط تابع الشرح
https://mwadah.com/images/imgcache/2007/04/176.imgcache
1- دالة البحث
2- الكود الذى نريد إذالته
سوف يكون بهذا الشكل
https://mwadah.com/images/imgcache/2007/04/177.imgcache
1- أستبدال
2- الكود المراد إذالته
3- الموافقه على الإستبدال بلاشئ
الشكل النهائى بعد الإستبدال
https://mwadah.com/images/imgcache/2007/04/178.imgcache
إنتهينا والحمد لله من توزيع الصور جيداُ داخل الفرونت بيج
نأتى الأن للأهم
إرتشاف كوب أخر من الشاي ثم المتابعه
نذهب إلى المنتدى أى كان سيرفر أبتشى أو قائم على النت طبعاُ مع مراعات مسار الصور جيداُ
المهم نأتى بقالب الناف بار navbar
نضعه فى صفحه جديده فى الفرونت بيج مع إذالة كافة الأكواد الموجوده
نبدء بالبحث عن الكود
ونضع أسفله هذه العلامات ========================= ==كود PHP:<!-- breadcrumb, login, pm info -->
ثم نبحث عن الكود
ونضع أعلاه هذه العلامات========================= ==كود PHP:<!-- / nav buttons bar -->
وما وضعنا بينهم العلامات هيه المنطقه المراده الخاصه بالتقطير وتطاير الصور حول الجدول
الأن جاء المهم ظلل ما بين العلامات الموضحه ثم كلك يمين ثم نسخ
ثم نذهب للصفحه المصممه الأولى ونضع مؤشر الموس فى وسط الجدول ثم إنقسام وحدد مثل ما بالصوره التاليه
على هذا الكود كما موضح بالصوره التالية
https://mwadah.com/images/imgcache/2007/04/179.imgcache
هذه هية العلامه التى توضح المسافات وسط الجدول نقوم بإذالتها ولا زال مؤشر الموس مكانه نضع بست لما قومنا بنسخه من قالب الناف بار
برب الرجاء الإنتباه وإعادة قرائة ما قولت إسأل ألف مره ولا تخطأ مره
بعد النسخ واللصق نختار تصميم ونشوف شو صار تجد الصورة التايه
https://mwadah.com/images/imgcache/2007/04/180.imgcache
بكده نكون إنتهينا من تطاير الجدول 100%
لم يبقا علينا سوى الضغط على تعليمات البرمجه ثم Ctrl +A
نسخ ما بداخل الصفحه كاملاُ ونذهب لصفحة الناف بار التى حددنا ما نريد بتلك العلامات ========================= ==
نظلل ما بينهم ثم Delete
ولصق الكود الذى نسخناه من صفحة التصميم
ولا تنسى إذالة تلك العلامات ========================= ==
وهنا بعد إكتمال الدرس بقول ألف مبروك تم تقطير الجدول بكل سهوله لم يبقا غير خطوه واحده وأخيره
وهيه نسخ كامل جدول الناف بار ولصقه فى مكانه داخل جدول المنتدى لكى يصبح مثل هذه الصوره
https://mwadah.com/images/imgcache/2007/04/181.imgcache
للمعاينه على الطبيعه هنـــــــــــــــــــــــ ـــــــا
مرفق كامل الصور المطروحه بالدرس صور التصميم مقطعه لمن احب متابعة الدرس خطوه خطوه ومرفق أيضاُ قالب الناف بار مقطر لمن أراد رأيته أو تبديل الصور المرفقه بالدرس بصور أخرى لديه
الدرس مشروح على نسخة 3.5.4
وأى سؤال بإذن الله أخوكم حاضر له بالتوفيق والخير نلتقى
فالسماح على الخطأ والنسيان
فإن كان بيه خطأ فإنه منى وأنسانى إياه الشيطان الرجيم
وإن أصبت فلله الحمد والمنة أن وفقت في ذلك
وفي ختام هذا الشرح أدعوا الله لي ولكم ولوالدينا ولمن أحببناه في الدنيا
بالهداية والصلاح في الدنيا وأن يجمعنا جميعاً في الفردوس الأعلى ....
سبحانك اللهم وبحمدك , أشهد أن لا اله إلا أنت أستغفرك وأتوب إليك
أخوكم فى الله
Ali Losha
https://mwadah.com/images/imgcache/2007/04/182.imgcache
منقووول مع التحيه
