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

[فاصله]

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

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


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

http://www.alraidiah.org/up/up/33028191920120226.gif (http://www.alraidiah.org/up/up/33028191920120226.gif)



http://www.alraidiah.org/up/up/33028194820120226.gif (http://www.alraidiah.org/up/up/33028194820120226.gif)

بعد انتقالنا الى صفحة التصميم نضغط رايت كلك ونعدل خصائص الصفحة كالتالي :
http://www.alraidiah.org/up/up/33028199620120226.gif (http://www.alraidiah.org/up/up/33028199620120226.gif)

http://www.alraidiah.org/up/up/33028209520120226.gif (http://www.alraidiah.org/up/up/33028209520120226.gif)


نضيف جدول بصف وعمود واحد :
مضلله بالرمادي ايقونة الجدول :biggrin:
http://www.alraidiah.org/up/up/33028212620120226.gif (http://www.alraidiah.org/up/up/33028212620120226.gif)


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

http://www.alraidiah.org/up/up/33045571120120228.gif

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

http://www.alraidiah.org/up/up/33045642820120228.gif


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



http://www.alraidiah.org/up/up/33028220320120226.gif


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



http://www.alraidiah.org/up/up/33028278720120226.gif (http://www.alraidiah.org/up/up/33028278720120226.gif)

http://www.alraidiah.org/up/up/33028276720120226.gif (http://www.alraidiah.org/up/up/33028276720120226.gif)

http://www.alraidiah.org/up/up/33028286220120226.gif (http://www.alraidiah.org/up/up/33028286220120226.gif)

http://www.alraidiah.org/up/up/33028291020120226.gif (http://www.alraidiah.org/up/up/33028291020120226.gif)

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


http://www.alraidiah.org/up/up/33045708120120228.gif




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

http://www.alraidiah.org/up/up/33045867120120228.gif



الشكل بعد التوزيع
http://www.alraidiah.org/up/up/33045875020120228.gif


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


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

مثل كذا :

http://www.alraidiah.org/up/up/33028397120120226.gif (http://www.alraidiah.org/up/up/33028397120120226.gif)


http://www.alraidiah.org/up/up/33028404520120226.gif (http://www.alraidiah.org/up/up/33028404520120226.gif)



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

http://www.alraidiah.org/up/up/33045991520120228.gif




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

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

http://www.alraidiah.org/up/up/33046032420120228.gif


http://www.alraidiah.org/up/up/33046052920120228.gif


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


http://www.alraidiah.org/up/up/33046073420120228.gif


اذا ضغطنا بحث يطلع تلقائي في البوكس أزرق على الكلمه المطلوبه
http://www.alraidiah.org/up/up/33046080320120228.gif






















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

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


http://www.alraidiah.org/up/up/33046119020120228.gif




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

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


http://www.alraidiah.org/up/up/33046136220120228.gif




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

[فاصله]

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

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

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


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

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

http://www.alraidiah.org/up/up/33059675620120301.gif


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

http://www.alraidiah.org/up/up/33059752320120301.gif


ثم حفظ

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

http://www.alraidiah.org/up/up/33059801720120301.gif



http://www.alraidiah.org/up/up/33059806620120301.gif


ثم حفظ
إضافة الاقسام بنفس الطريقة ..
الشكل بعد اضافة الاقسام ..
http://www.alraidiah.org/up/up/33059838220120301.gif


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

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

ونبحث عن كلمة forumhome
دبل كلك عليها ..
http://www.alraidiah.org/up/up/33059895420120301.gif



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

http://www.alraidiah.org/up/up/33045991520120228.gif (http://www.alraidiah.org/up/up/33045991520120228.gif)


http://www.alraidiah.org/up/up/33059924020120301.gif


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

الشكل النهائي لتأطير أقسام المنتدى - متصل -
http://www.alraidiah.org/up/up/33059966020120301.gif


يتبع ..

[فاصله]

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

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

>http://www.alraidiah.org/up/up/33060025720120301.gif (http://www.alraidiah.org/up/up/33060025720120301.gif)


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


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


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

http://www.alraidiah.org/up/up/33060051820120301.gif (http://www.alraidiah.org/up/up/33060051820120301.gif)


http://www.alraidiah.org/up/up/33060062820120301.gif (http://www.alraidiah.org/up/up/33060062820120301.gif)

حفظ


بعد التوسيط
http://www.alraidiah.org/up/up/33060078720120301.gif (http://www.alraidiah.org/up/up/33060078720120301.gif)

[فاصله]

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

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

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

باك

ان شالله تمام

..

.

http://im23.gulfup.com/2012-03-01/1330616193261.jpg


http://im23.gulfup.com/2012-03-01/133061619442.jpg

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

[فاصله]

باك

ان شالله تمام

..

.

http://im23.gulfup.com/2012-03-01/1330616193261.jpg (http://im23.gulfup.com/2012-03-01/1330616193261.jpg)


http://im23.gulfup.com/2012-03-01/133061619442.jpg (http://im23.gulfup.com/2012-03-01/133061619442.jpg)

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




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

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

http://im17.gulfup.com/2012-03-01/133061905241.jpg

[فاصله]

http://im17.gulfup.com/2012-03-01/133061905241.jpg (http://im17.gulfup.com/2012-03-01/133061905241.jpg)


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

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

قصدك هذي ؟؟؟؟

http://im22.gulfup.com/2012-03-01/1330631765151.jpg


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

[فاصله]

لآ لآ
أقصد هذي

http://www.alraidiah.org/up/up/33046136220120228.gif (http://www.alraidiah.org/up/up/33046136220120228.gif)

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

http://im13.gulfup.com/2012-03-02/1330700027221.jpg

[فاصله]

تطبيق رائع ماشا الله

[goree]

::.


فصووو حبيبتي

يعطيك العآفيه عالدرس الدسم


طبقته

بس يجيني مسافة بيضآء
مدري وش تبي من الحيآة فوقyd.885

اكيد الخطأ عندي في اوووول شيء يوم اعمل الجدول بالفرونت:frown::frown:

لاني ضعت فيه شوي:confused:

::.

[فاصله]

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

[goree]

::.

طيب شوفي

شفتي لين سويت جدول اللي هو اول واحد

وجيت بأسوي الثاني

أسويه دآخله ؟

ولا تحت <~ انا اسويه تحته


::.

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

::.

طيب شوفي

شفتي لين سويت جدول اللي هو اول واحد

وجيت بأسوي الثاني

أسويه دآخله ؟

ولا تحت <~ انا اسويه تحته


::.
تحتـــــــــــــــــــــــه

[فاصله]

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

[goree]

::.

انا جييييييييييييييت

فصوووو حبيبتي

طبقت وضبط الحمدلله

وهذآ تطبيقي

للنفابآر مدري وشسمه

http://www.alraidiah.org/up/up/33096419120120305.bmp

وهذآ ذآك الشيء وشسمه والشيء الثآني :eek:

http://www.alraidiah.org/up/up/33096437920120305.bmp


أحسسس مآعجبني جدولي ودي أغيره:frown:

و

و

و

شكر(ن) :redface:


::.

[goree]

::.


فصوووو


سعآآآآآآآآل بعد إذنك :redface:


دحين انا طالع عندي كل شيء اوكي وكل شيء
بس في مسافه بيضاء بين النفبار والجدول ..
هي كذا ؟

او انا ناقصني شيء ..



و ربي يسعد قلبك


::.

[فاصله]

تطبيقك ممتاز ماشا الله
ماشوف فيه أي شي ...
وين الابيض اللي تقصدينه ؟!!

[goree]

::.


امممم الحمدلله

انا اقصد
شوفي
مثل كذآ

http://www.alraidiah.org/up/up/33112002720120307.bmp

حآطة على الابيض اللي اقصده خط احمر عشان يوضح
:redface::redface:

[فاصله]

لآتشيلين هم بيروح بدرس اضافة الخلفية ان شا الله

[goree]

::.

كويس طمنتيني

:)

يعني أنا أووووكي


الله يسعدك


:::.

[srab]

طبقت بس التاطير طلع يفشل

برجع اطبقه مره ثانيه لعل وعسى

[srab]

جاكم الشغل اللي مدري وش يحس فيه


http://www.alraidiah.org/up/up/33279998520120327.PNG (http://www.alraidiah.org/up/up/33279998520120327.PNG)


ماحبيته ابد

احس مو راكبه الصور على بعض

لا تقولين في التوزيع

عجزت وانا اضبط توزيعه

انتظر تعليقك

[فاصله]

شوفي كله مضبوط الا الجزء السفلي ليش ؟!!
أول شي القص فيه شوية غلط ... قاصه اللون الفاتح .. المفروض على الحد الفوشي بس ..
2 | التوزيع للحد السفلي فقط .. أحسه لاف على اليسار ..