درس توزيع لأهم القوالب تأطير رباعي css

Mohamed Ali · 19 مايو 2012

[FONT=a_AntiqueTradyBrk]السلام عليكم ورحمة الله [/FONT]
[FONT=a_AntiqueTradyBrk]نظرا لطلب الاخوان بوضع دروس لتأطير القوالب قمت بطرح هذه الدروس وهية سلسلة بسيطة لتأطير اكثر القوالب في سكربت vBulletin Version 3.x.x [/FONT]
[FONT=a_AntiqueTradyBrk]وان شاء الله ستكون على مراحل هية (تقطيع التصميم بالفوتوشوب) (التوزيع بخاصية css بالفرونت بيج ) (اختيار القوالب ومعرفت اماكنها والتوزيع عليها) [/FONT]
[FONT=a_AntiqueTradyBrk]وسيكون هذا الدرس هو المرحلة الاولى والثانية بأذن الله وباقي الدروس المرحلة الاخيرة وفي كل درس سيتم وضع قالبين او اكثر حسب توفيق رب العالمين .[/FONT]
[FONT=a_AntiqueTradyBrk]اذن سنحتاج لبرنامجين الفوتوشوب والفرونت بيج واذا لم يتوفر الفرونت بيج غير مهم لأننا سنكتب الاكواد كتابة ستحتاج لأي محرر مثل النوتباد وهو متوفر[/FONT]

مرفق مع الدرس التصميم psd للي يحب يغير عليه مسموح
ملف txt بأسم css الاكواد جاهزة لمن يحتاجه ويغير عليها مثل ما يحب
ملف txt بأسم class الكلاسات جاهزة
التحميل من هنا
[FONT=a_AntiqueTradyBrk]بسم الله الرحمن الرحيم [/FONT]
[FONT=a_AntiqueTradyBrk]نبدأ الدرس الاول (التقطيع بالفوتوشوب)[/FONT]
[FONT=a_AntiqueTradyBrk]لاحظ الصورة التالية وهية مثال على طريقة التقسيم المستطيل باللون الاصفر سيكون الهيدر واللون الاحمر سيكون بودي(الاعمدة الجانبية) والاخضر الفوتر [/FONT]
[FONT=a_AntiqueTradyBrk]ستكون الطريقة نفس الطريقة المعتمدة بطريقة تقطيع الاستايل [/FONT]

[FONT=a_AntiqueTradyBrk]نختار اداة slice tool كما موضحة بالصورة التالية ونقوم بالتقطيع كما خططنا يالصورة السابقة [/FONT]
[FONT=a_AntiqueTradyBrk]لمن يملك برنامج بواجهة عربية اسم الاداة (اداة الشرائح-او التشريح)[/FONT]

[FONT=a_AntiqueTradyBrk]لاحظ الان طريقة التقطيع بالصورة التالية وكما موضح هناك ارقام للتقطيع ( 01-02-03-04-05 )[/FONT]
[FONT=a_AntiqueTradyBrk]واضح ايضا عند النظر للصورة هناك ارقام بارزة وارقام غير بارزة البارزة هية باللون الازرق (01-03-05 ) سوف نحتاج الى هذه الملاحظة فيما بعد[/FONT]

[FONT=a_AntiqueTradyBrk]بعد ما قطعنا الصورة نحفظها بالطريقة التالية نذهب لقائمة file ومن القائمة نختار save for كما موضح بالصورة التالية [/FONT]
[FONT=a_AntiqueTradyBrk]الواجهة العربية القائمة (ملف ) (حفظ كصفحة ويب) واختصار هذا الخيار واضح من الصورة التالية [/FONT]

[FONT=a_AntiqueTradyBrk]بعدها تظهر قائمة كبيرة نختار منها صيغة الصور وانا اختار png ولكم الحرية بأختيار الصيغة[/FONT]
[FONT=a_AntiqueTradyBrk]بعدها نضغط على كلمة save في اليمين الاسفل الواجهة العربية (حفظ)[/FONT]

[FONT=a_AntiqueTradyBrk]تظهر القائمة التالية وهية المسمى للصور وتأكد من الخيار الثاني image only لكي يحفظ الصور فقط بعدها اضغط على save[/FONT]
[FONT=a_AntiqueTradyBrk]الواجهة العربية (الصور فقط)[/FONT]

[FONT=a_AntiqueTradyBrk]الان سيقوم البرنامج بحفظ الصور داخل مجلد اسمه image ندخل علية ونمسح الصور الي مالها لازمه [/FONT]
[FONT=a_AntiqueTradyBrk]س: ماهية الصور الي مالها لازمة [/FONT]
[FONT=a_AntiqueTradyBrk]ج:وضحت مسبقا هناك ارقام بارزة وارقام غير بارزة (الغير بارزة مالها لازمة ) توضح الصورة التالية [/FONT]

[FONT=a_AntiqueTradyBrk]الان عدنا ثلاث صور واسمائها (frame_01.png) (frame_03.png) (frame_05.png) وهذه الاسماء لاني سميتها بعد التقطيع الى frame[/FONT]
[FONT=a_AntiqueTradyBrk]ملاحظة : اسماء الصور انت تسميها حسب ما تحب لكن اتبع الطرق معي لكي تتجنب الخطأ [/FONT]
[FONT=a_AntiqueTradyBrk]نقوم بأستبدال الاسماء[/FONT]
[FONT=a_AntiqueTradyBrk]frame_01.png الى header [/FONT]
[FONT=a_AntiqueTradyBrk]frame_03.png الى body[/FONT]
[FONT=a_AntiqueTradyBrk]frame_05.png الى footer[/FONT]
[FONT=a_AntiqueTradyBrk]الان نرفع الصور الى الفوتوشوب ونقطعها مره ثانية كما موضح بالصورة التالية لاحظ هناك صور بارزة وصور غير بارزة [/FONT]
[FONT=a_AntiqueTradyBrk]قطعنا الهيدر الى 3 والبودي الى 2 الفوتير الى 3 [/FONT]
[FONT=a_AntiqueTradyBrk]ملاحظة: اتبعت الطريقة التالية لكي لايكون خطأ في مقاسات الصور ان شاء الله انت بعد ما تتعلم الطريقة قطع مثل ما تحب[/FONT]
[FONT=a_AntiqueTradyBrk]انت راح تشوف الطريقة طويلة في المرة الاولى لكن ثق بالممارسة تشوفها اسهل الطرق وادقها [/FONT]

[FONT=a_AntiqueTradyBrk]بعد ما قطعت نفس طريقة الحفظ في المرة الاولى [/FONT]
[FONT=a_AntiqueTradyBrk]الان ندخل الى مجلد الصور ونمسح الصور الي مالها لازمة [/FONT]

[FONT=a_AntiqueTradyBrk]تبقت عدنا الصور التالية (اعرفك على اماكنها لكي لايكون هناك خطأ عند تغير المسمى اذا انت حاب تغيير )[/FONT]
[FONT=a_AntiqueTradyBrk]header_01.png الصورة العلوية في الجهة اليسرى [/FONT]
[FONT=a_AntiqueTradyBrk]header_03.png نطقة التمدد( نطقة التمدد هية صورة تكرر نفسها بشكل عرضي او طولي في المسافات الفارغة عند تمدد الاستايل )[/FONT]
[FONT=a_AntiqueTradyBrk]frame_05.png الصورة العلوية في الجهة اليمنى [/FONT]
[FONT=a_AntiqueTradyBrk]body_01.png العمود الايسر [/FONT]
[FONT=a_AntiqueTradyBrk]body_03.png العمود الايمن [/FONT]
[FONT=a_AntiqueTradyBrk]footer_01.png الصورة السفلية اليسرى [/FONT]
[FONT=a_AntiqueTradyBrk]footer_03.png نقطة تمدد السفلية[/FONT]
[FONT=a_AntiqueTradyBrk]footer_05.png الصورة السفلية اليمنى [/FONT]
[FONT=a_AntiqueTradyBrk]لاحظ جعلنا الصور بالترتيب من اليسار الى اليمن من (01-05) لكي لا نخطأ عند التوزيع انتهى التقطيع وننتقل بأذن الله للتوزيع [/FONT]
[FONT=a_AntiqueTradyBrk]ملاحظة: قبل التوزيع الاكواد تحمل نفس الاوامر تقريبا الامر الي يشرح بالكود الاول لن اكرر شرحة لتقليص عدد الصور في الدرس [/FONT]
[FONT=a_AntiqueTradyBrk]نفتح برنامج الفرونت بيج في نهاية البرنامج مكتوب [/FONT][FONT=a_AntiqueTradyBrk]code والواجهة العربية مكتوب تعليمات برمجية اضغط عليها راح تظهرلك اكواد امسحها والي يستعمل النوتباد لا يعمل شي [/FONT]
[FONT=a_AntiqueTradyBrk]اول شي نكتب الكود التالي ودائما الكود الاول للتمدد وانا اخترت حرف اتش يعني هيدر وحرف الار ريبيت تكرار [/FONT]

بعدها نكتب الكود التالي ولاحظ الاسم المحدد باللون الاصفر اسم المجلد واللون الاخضر الصورة مع الصيغة اذا كان مجلد الصور مباشرة داخل
مجلد المنتدى تكتبه مباشر مثل ما انا كاتبه واذا كان داخل مجلد خاص بأستايل اكتب مجلد الاستايل قبله اي على هذا النحو
('stylename/frame/header_03.png')

نكمل باقي الكود المحدد باللون الاصفر وهو الارتفاع بالبكسل وارتفاع الصورة عندي 36 شوف الارتفاع كم عندك وحطه
اللون الاخضر وهو امر تكرار الصورة x يعني تكرار عرضي (تمدد عرضي)

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

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

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

الان نأتي لأكواد الفوتر وتم شرح جميع الاوامر الي بداخلها ما عليك الا النظر والتطبيق

ملاحظة :ماتم شرحة بالاعلى من اكواد البعض يسميها استايل والبعض يسميها تعاريف css احنا راح نسميها تعاريف css ان تم ذكر مثل هذه الجمله في الدروس القادمة مقصدها ما شرحناه بالاعلى
الان نجي نكتب اكواد الكلاسات وهذه الاكواد هية التي سوف نضعها داخل القوالب اما التعاريف سأقوم بشرح مكانها فيما بعد
نكتب بالفرونت بيج التاليdiv> وطريقة الكتابة نقلب للكتابة بالانكليزية نضغط من الكيبورد على shift وحرف (و) بالكيبورد وبعدها الحروف div بعدها فاصلة اي زر سبيس الطويل
بمجر اعطاء فاصلة سيظهر كما في الصورة التالية

اختار كلاس هذا الشرح من دون فاصلة بعده مباشرة ضع رمز = بعدها العلامة " اكتب اسم الكلاس واسم الكلاس يكون نفس اسماء اكواد التعاريف وبنفس التسلسل لاحظ الصورة

باللون الزهري تم شرحة والاصفر هو الاسم نغلق الاسم بــ " وهذه العلامة بالضغط على شفت وحرف( ط) اللون الازرق خاتمة شفت و(ز)
بمجر وضع الخاتمة يعطيك كود نهاية الكلاس الموضح باللون الازرق الان بعد ما نحتاج نكتب كل الكلاسات بنفس الطريقة نأخذ الي عملناه كوبي ونعمل بيست لاحظ الصورة التالية

مع تغيير المسميات كما موضح باللون الاخضر

الان نرفع كود نهاية الكلاس من اول كلاس ونحطة بالنهاية كما في الصورة التالي

انتهينة من الهيدر نعمل للفوتر نفسه ونجي الى الاعمدة لاحظ الصورة التالية

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

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

اين توضع تعاريف css وطريقة البحث عن القالب وكيفية البحث داخل القالب في لوحة التحكم والفرونت بيج حتى لا تكون هناك اسئلة بهذا الخصوص
تعاريف css
من لوحة التحكم اذهب الى الاستايلات والقوالب بعدها التحكم بالقوالب

بعدها راح تظهر لوحة انزل للنهاية

انتهى
البحث عن القالب من داخل لوحة التحكم
كما موضح بالسهم من الاستايلات والقوالب نختار البحث عن القوالب

يظهر المربع التالي وموضح بالصورة تكتب اسم القالب الى راح نقدمة بالدرس ابحث عنه بالانكليزي

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

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

انتهى التالي هو التوزيع داخل القالب
الان نبدأ الشرح والقالب الأول هو النافبار لانه يعتبر من القوالب الرئيسية
نبحث عن القالب navbar
نبحث داخل القالب عن الكود

كود:

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

وهو ثاني كود بالضبط فوقه مباشرة نضع الكود العلوي من الكلاسات

الان نبحث عن

كود:

 <!-- / nav buttons bar -->

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

انتهينا من النافبار مثال عليه بعد التأطير

نجي لقالب الفروم هوم نبحث عن القالب FORUMHOME
نبحث داخل القالب عن

كود:

<!-- main -->

فوقها مباشرة الكلاسات العلوية

بعدها ابحث عن

كود:

$forumhome_markread_script

فوقها مباشر ضع الكلاسات السفلية

بعدها ابحث عن

كود:

<!-- what's going on box -->

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

بعدها ابحث عن

كود:

 $template_hook[forumhome_wgo_pos5]

اسفلها تجد كلمة </table> اسفل كلمة تيبل ضع الكلاسات لاحظ الصورة

الكود التالي

كود:

<br />

هو لعمل مسافة (فراغ) لذالك وضعنا الكلاسات فوقه لكي لا تكون مسافة في التصميم

امثلة عن الفروم هوم بعد تأطير

قالب شوثيرد ويمكن تأطيره على شكل مفصول ومتصل راح اشرح طريقة التأطير المفصول
لاني لم اصادف درس حول هذه الطريقة في المنتديات
نبدأ الدرس
نبحث عن قالب:

PHP:

SHOWTHREAD

داخل القالب نبحث عن:

PHP:

<!-- controls above postbits -->

فوقه مباشرة نضع الكلاسات العلوية

الان نبحث عن :

PHP:

<!-- / toolbar -->

اسفله مباشرة الكلاسات السفلى

نبحث عن

PHP:

<!-- / start  table -->

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

الان نبحث عن

PHP:

<!-- / controls below postbits -->

اسفلة مباشر كلاسات سفلى

نبحث عن

PHP:

<if condition="$bookmarksites">

فوقها مباشر كلاسات علوية

نبحث عن

PHP:

<!-- / social bookmarking links -->

اسفلها موجود نهاية بطاقة وهو كود

PHP:

</if>

اسفل هذا الكود تضع كلاسات سفلى لاحظ الصورة

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

الان نبحث عن

PHP:

$ad_[ad_showthread_beforeqr]

فوق هذا الكود ضع كلاسات سفلى واسفل هذا الكود كلاسات علوية الصورة التالية توضح

نبحث عن

PHP:

<!-- next / previous links -->

اسفلها نضع كلاسات سفلى

نبحث عن

PHP:

<if condition="$show['activeusers']">

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

الان تبقى خطوة واحدة نبحث عن

PHP:

$template_hook[showthread_after_activeusers]

فوقها نضع كلاسات سفلى لاحظ الصورة

الى هنا انتهى سنرى شكل القالب بعد التأطير مختلف تماما

تأطير قالب( يوزر كب شيل) USERCP_L وهذا القالب هو القائمة الجانبية في
لوحة تحكم العضو ونظرا لقلة عرض القالب يتحاشاه الكثير لانه سيكون هناك تضارب في الصور
الحل الامثل لتأطيره في هذا الموضوع تابع
صورة القالب

الحل هو زيادة حجم عرض القالب على حسب تصميمنا اولانذهب ونرى مقاسات صورنا واكبر صورة في تصميمنا من حيث العرض كانت عرضها 183 بكسل والمقابله لها كان حجم عرضهاهو 70 نجمع العددين يكون 253
اوكي نفتح القالب ونبحث عن

PHP:

<!-- usercp nav -->

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

شفنا نهاية هذا الكود كلمة border="0" اوكي بجانبها نضع امر للعرض ويكون العرض هو 253 وفوق الكود التالي

PHP:

<!-- usercp nav -->

نضع الكلاسات العلوية لاحظ الصورة التالية السهم الاحمر يوضح امر العرض

الان ابحث عن

PHP:

<script type="text/script"> vbmenu_register("nav_newitems");

فوقها موجود نهاية كود </div> فوق الــ</div> مباشرة نضع الكلاسات السفى

الشكل بعد التأطير

الان ننتقل لقالب يوزر كب USERCP وهية لوحة تحكم العضو
نبحث عن قالب

PHP:

USERCP

نبحث بداخلة عن

PHP:

<!-- ############## SUBSCRIBED THREADS ############## -->

اسفه مباشرة نضع الكلاسات العلوية

الان نبحث عن

PHP:

<!-- ############## END NEW REPUTATION ############## -->

اسفلها توجد نهاية بطاقة </if> اسفل الـ </if> نضع الكلاسات السفلى
وهذا لان if شرطية تمنع رؤوية المحتوى بالنسبة لمجموعات محددة واقرب مثال هو كلمة تسجيل تظهر للزائر ولاتظهر للعضو

مثال

Abdul Rahim · 19 مايو 2012

جزاك الله كل خير ,

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

جزيل الشكر

البحث

البحث

درس توزيع لأهم القوالب تأطير رباعي css

Mohamed Ali

[ VIP ]

Abdul Rahim

[ أعضاء فى القلب ]