| الدرس السادس | . توزيع وتأطير الجداول .

[فاصله]

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

نكمل اليوم اللي باقي من تركيب الاستايل ... وهو توزيع وتركيب الجدول ....
نفتح الفرونت بيج ونسوي هذي الخطوات ...

ننتقل الى الفرونت بيج لتوزيع الجدول
عند فتحه بتطلع صفحه بيضا نهايتها مكتوب تعليمات برمجيه نظلله كله ونمسح الموجود وننتقل الى تصميم ...ونتبع الخطوات ...

بعد انتقالنا الى صفحة التصميم نضغط رايت كلك ونعدل خصائص الصفحة كالتالي :





نضيف جدول بصف وعمود واحد :
مضلله بالرمادي ايقونة الجدول

ننزل سطر ونضيف جدول بصف واحد وثلاث أعمدة - ننزل بالماوس مو إنتر -

الشكل النهائي لهم زي كذا

وننزل سطر ونضيف جدول بصف وعمود واحد ..
وبعدها على كل جدول رايت كلك >> خصائص الجدول ..
ونكرر الخطوات على كل جدول ..

نضيف صورة الجدول العلوي نضغط على الجدول ثم أيقونة الصورة مثل اضافة الهيدر والفوتر بالضبط نفس الخطوات

شكل جدولي بعد التركيب العلوي والسفلي ...
* نقطه مهمة لآزم تركزون عليها ... في الجدول الثاني فيه خطين حددتهم بالاحمر نسحبهم بالماوس واحد لليمين والثاني لليسار
ونخلي مسافة بسيطة جدا ...

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

الشكل بعد التوزيع

ننتقل الى تعليمات برمجيه ونستبدل زوائد الصور مثل ماسوينا في الهيدر والفوتر ..

ثم ننتقل الى تعليمات برمجيه ونضلل اللينك ورايت كلك ونعمل استبدال للكل هذاهو االلينك
file:///C:/AppServ/www/vb/

مثل كذا :








اللون الازرق الجزء العلوي واللون الاحمر الجزء السفلي ...
ننسخ الكود بالكامل ونحفظه في المفكره لاننا بنحتاجه في تأطيرات قادمة






ننتقل الى تأطير النافبار ..
المنتدى >>> لوحة تحكم الادارة >> >>> الاستايلات والقوالب >> البحث في القوالب

ونبحث عن كلمة Navbar

نضغط مرتين وننتقل الى مربع النافبار ... ثم نبحث عن هذا الكود
<!-- breadcrumb, login, pm info -->

اذا ضغطنا بحث يطلع تلقائي في البوكس أزرق على الكلمه المطلوبه

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

- المربع يوجد فيه سطرين نفس الكلمه احنا نبي الثاني -
<!-- / nav buttons bar -->

وننسخ التوزيع السفلي من الفرونت بيج ونسوي سطر جديد فوق الكلمه ويتم لصق الكود ونسوي حفظ ومعاينة

الشكل النهائي له

يتبع بإذن الله ..

[فاصله]

تأطير أقسام المنتدى :

طبعا بعد توزيع الجدول احفظوا الاكواد بمفكره عشان اذا جيتوا تأطرون مره ثانيه
ماتوزعون من جديد ...

طبعا ماتحفظونها بمفكره وقبل تستخدمونها لصقوها في منطقة الاكواد عشان تميزون بين العلوي والسفلي وتنسخون المطلوب .. - الصوره موجوده فوق اللي توضح العلوي والسفلي -


أول شي نضيف أقسام عشان نشوف تأطيرنا كيف بيكون ..

لوحة تحكم الاداره > المنتديت والمراقبين >> اضافة منتدى جديد




خطوات إضافة المنتدى الرئيسي نختار كما في الصورة :




ثم حفظ

لاضافة أقسام تحت المنتدى :








ثم حفظ
إضافة الاقسام بنفس الطريقة ..
الشكل بعد اضافة الاقسام ..



نأتي الان لتأطير الاقسام متصل :

نتابع الصور :
المنتدى >>> لوحة تحكم الادارة >> >>> الاستايلات والقوالب >> البحث في القوالب

ونبحث عن كلمة forumhome
دبل كلك عليها ..




يفتح لنا القالب ونبحث أيضاء عن هذا الكود بنفس طريقة النآفبار :
<!-- main -->
نسوي سطر جديد فوق الكلمه ونلصق الجزء العلوي من الجدول







ونبحث أيضا عن كلمة :
<!-- /main -->
وسطر جديد تحتها ونلصق الجزء السفلي من الجدول ...
وحفظ

الشكل النهائي لتأطير أقسام المنتدى - متصل -



يتبع ..

[فاصله]

توسيط أسماء أقسام المنتدى الرئيسيه :

لوحة تحكم الادارة >> الاستايلات والقوالب >> البحث في القوالب نبحث عن كلمة forumhome_forumbit_level1_nopost

>


اذا طلع لنا نضغط مرتين عليه : ونكتب في خانة البحث في القالب
<td class="tcat"


ونشيله ونحط هذا الكود


<td class="tcat" align="center"






حفظ


بعد التوسيط

[فاصله]

الدرس يبيله تركيز تركيز تركيز ولازم تقرونه كذا مره عشان تستوعبونه ..
ماأقدر أشرح بغير الصور لآن برنامج الفيديو عندي خرب ولآلقيت له حل الى الآن ...

الواجب :
تطبيق الدرس
صورة للنافبار بعد التأطير
صورة للأقسام بعد التأطير
صورة لتوسيط أقسام المنتدى

[وولد الخفجي]

[align=center]باك

ان شالله تمام

..

.






اذا فيه شي نسيت مااصوره اعذريني لاني طبقت الدرس بسرعه[/align]

[فاصله]

اقتباس المشاركة الأصلية كتبت بواسطة وولد الخفجي [align=center]باك ان شالله تمام .. . اذا فيه شي نسيت مااصوره اعذريني لاني طبقت الدرس بسرعه[/align]

صورة للنافبار بعد التأطير وينها ؟!!
تطبيقك الثاني ممتآز ..

[وولد الخفجي]

[فاصله]

اقتباس المشاركة الأصلية كتبت بواسطة وولد الخفجي

صورة للنافبار بعد التأطير وينها ؟!!
هذي صورة قالب النافبار وش أسوي فيها :d
ابي الشكل بعد التأطير .. بعد ماركبت الجدول ... اللي فيه الاسم واسم المنتدى

[وولد الخفجي]

قصدك هذي ؟؟؟؟




--------------------------------------------------

[فاصله]

لآ لآ
أقصد هذي