السلام عليكم ورحمة الله
نظرا لطلب الاخوان بوضع دروس لتأطير
القوالب قمت بطرح هذه الدروس وهية سلسلة بسيطة لتأطير اكثر القوالب في
سكربت vBulletin Version 3.x.x
وان شاء الله ستكون على مراحل هية (تقطيع
التصميم بالفوتوشوب) (التوزيع بخاصية css بالفرونت بيج ) (اختيار القوالب
ومعرفت اماكنها والتوزيع عليها)
وسيكون هذا الدرس هو المرحلة الاولى
والثانية بأذن الله وباقي الدروس المرحلة الاخيرة وفي كل درس سيتم وضع
قالبين او اكثر حسب توفيق رب العالمين .
اذن سنحتاج لبرنامجين الفوتوشوب والفرونت
بيج واذا لم يتوفر الفرونت بيج غير مهم لأننا سنكتب الاكواد كتابة ستحتاج
لأي محرر مثل النوتباد وهو متوفر
مرفق مع الدرس التصميم psd للي يحب يغير عليه مسموح ملف txt بأسم css الاكواد جاهزة لمن يحتاجه ويغير عليها مثل ما يحب ملف txt بأسم class الكلاسات جاهزة التحميل من
هنا بسم الله الرحمن الرحيم نبدأ الدرس الاول (التقطيع بالفوتوشوب)لاحظ الصورة التالية وهية مثال على طريقة التقسيم المستطيل باللون الاصفر سيكون الهيدر واللون الاحمر سيكون بودي(الاعمدة الجانبية) والاخضر الفوتر ستكون الطريقة نفس الطريقة المعتمدة بطريقة تقطيع الاستايل 
نختار اداة slice tool كما موضحة بالصورة التالية ونقوم بالتقطيع كما خططنا يالصورة السابقة لمن يملك برنامج بواجهة عربية اسم الاداة (اداة الشرائح-او التشريح)
لاحظ الان طريقة التقطيع بالصورة التالية وكما موضح هناك ارقام للتقطيع ( 01-02-03-04-05 )
واضح ايضا عند النظر للصورة هناك ارقام
بارزة وارقام غير بارزة البارزة هية باللون الازرق (01-03-05 ) سوف نحتاج
الى هذه الملاحظة فيما بعد
بعد ما قطعنا الصورة نحفظها بالطريقة التالية نذهب لقائمة file ومن القائمة نختار save for كما موضح بالصورة التالية الواجهة العربية القائمة (ملف ) (حفظ كصفحة ويب) واختصار هذا الخيار واضح من الصورة التالية 
بعدها تظهر قائمة كبيرة نختار منها صيغة الصور وانا اختار png ولكم الحرية بأختيار الصيغة
بعدها نضغط على كلمة save في اليمين الاسفل الواجهة العربية (حفظ)
تظهر القائمة التالية وهية المسمى للصور وتأكد من الخيار الثاني image only لكي يحفظ الصور فقط بعدها اضغط على save
الواجهة العربية (الصور فقط)
الان سيقوم البرنامج بحفظ الصور داخل مجلد اسمه image ندخل علية ونمسح الصور الي مالها لازمه
س: ماهية الصور الي مالها لازمة
ج:وضحت مسبقا هناك ارقام بارزة وارقام غير بارزة (الغير بارزة مالها لازمة ) توضح الصورة التالية
الان عدنا ثلاث صور واسمائها (frame_01.png) (frame_03.png) (frame_05.png) وهذه الاسماء لاني سميتها بعد التقطيع الى frame
ملاحظة : اسماء الصور انت تسميها حسب ما تحب لكن اتبع الطرق معي لكي تتجنب الخطأ
نقوم بأستبدال الاسماء
frame_01.png الى header
frame_03.png الى body
frame_05.png الى footer
الان نرفع الصور الى الفوتوشوب ونقطعها مره ثانية كما موضح بالصورة التالية لاحظ هناك صور بارزة وصور غير بارزة
قطعنا الهيدر الى 3 والبودي الى 2 الفوتير الى 3
ملاحظة: اتبعت الطريقة التالية لكي لايكون خطأ في مقاسات الصور ان شاء الله انت بعد ما تتعلم الطريقة قطع مثل ما تحب
انت راح تشوف الطريقة طويلة في المرة الاولى لكن ثق بالممارسة تشوفها اسهل الطرق وادقها
بعد ما قطعت نفس طريقة الحفظ في المرة الاولى
الان ندخل الى مجلد الصور ونمسح الصور الي مالها لازمة
تبقت عدنا الصور التالية (اعرفك على اماكنها لكي لايكون هناك خطأ عند تغير المسمى اذا انت حاب تغيير )header_01.png الصورة العلوية في الجهة اليسرى header_03.png نطقة التمدد( نطقة التمدد هية صورة تكرر نفسها بشكل عرضي او طولي في المسافات الفارغة عند تمدد الاستايل )frame_05.png الصورة العلوية في الجهة اليمنى body_01.png العمود الايسر body_03.png العمود الايمن footer_01.png الصورة السفلية اليسرى footer_03.png نقطة تمدد السفليةfooter_05.png الصورة السفلية اليمنى لاحظ جعلنا الصور بالترتيب من اليسار الى اليمن من (01-05) لكي لا نخطأ عند التوزيع انتهى التقطيع وننتقل بأذن الله للتوزيع ملاحظة: قبل التوزيع الاكواد تحمل نفس الاوامر تقريبا الامر الي يشرح بالكود الاول لن اكرر شرحة لتقليص عدد الصور في الدرس نفتح برنامج الفرونت بيج في نهاية البرنامج مكتوب code والواجهة العربية مكتوب تعليمات برمجية اضغط عليها راح تظهرلك اكواد امسحها والي يستعمل النوتباد لا يعمل شي اول شي نكتب الكود التالي ودائما الكود الاول للتمدد وانا اخترت حرف اتش يعني هيدر وحرف الار ريبيت تكرار 
بعدها نكتب الكود التالي ولاحظ الاسم المحدد باللون
الاصفر اسم المجلد واللون الاخضر الصورة مع الصيغة اذا كان مجلد الصور
مباشرة داخل
مجلد المنتدى تكتبه مباشر مثل ما انا كاتبه واذا كان داخل مجلد خاص بأستايل اكتب مجلد الاستايل قبله اي على هذا النحو
('stylename/frame/header_03.png')
نكمل باقي الكود المحدد باللون الاصفر وهو الارتفاع بالبكسل وارتفاع الصورة عندي 36 شوف الارتفاع كم عندك وحطه
اللون الاخضر وهو امر تكرار الصورة x يعني تكرار عرضي (تمدد عرضي)
الان نقفل الكود الاول ونجي نكتب الثاني
اللون الاصفر وسم لقفل الكود الاول اللون الاخضر العرض شوف عرض الصورة كم وخلي المقاس بالبكسل
اللون الازرق امر عدم تكرار الصورة اللون الزهري الاتجاه وهذه الصورة بما انها في يسار الهيدر نعطيها امر اتجاه لليسار
اللون الزهري الثاني وهو خاص بالكود للصورة الثالثة للهيدر نعطيه اتجاه لليمين
الان نأتي الاعمدة الجابية احنا عملنا صورتين من دون تمدد نكتب اسم الكود وبداخلة نكتب الكود باللون الاصفر
وهو امر لجعل القالب الي راح نركب عليه بالوسط يملاء الفراغ الوسطي تسطيع استبداله بلون اذا كنت حاب هذا امر اللون
ننتقل للكود الثاني الخاص بالعمود الايسر
اللون الازرق امر تمدد طولي y لانها اعمده يجب ان تتمدد بالطول والاخضر الاتجاه لليسار لانه العامود الايسر
بعده الكود الخاص بالعمود الايمن باللون البنفسجي اتجاه لليمين واللون الزهري هو امر للمباعدة اي لمباعدة الاعمدة عن التصميم
كلما زاد الرقم ابتعد اكثر عن التصميم والنقصان عكسي
الان نأتي لأكواد الفوتر وتم شرح جميع الاوامر الي بداخلها ما عليك الا النظر والتطبيق
ملاحظة :ماتم شرحة بالاعلى من اكواد البعض يسميها
استايل والبعض يسميها تعاريف css احنا راح نسميها تعاريف css ان تم ذكر مثل
هذه الجمله في الدروس القادمة مقصدها ما شرحناه بالاعلى
الان نجي نكتب اكواد الكلاسات وهذه الاكواد هية التي سوف نضعها داخل القوالب اما التعاريف سأقوم بشرح مكانها فيما بعد
نكتب بالفرونت بيج التاليdiv> وطريقة الكتابة نقلب للكتابة بالانكليزية
نضغط من الكيبورد على shift وحرف (و) بالكيبورد وبعدها الحروف div بعدها
فاصلة اي زر سبيس الطويل
بمجر اعطاء فاصلة سيظهر كما في الصورة التالية
اختار كلاس هذا الشرح من دون فاصلة بعده مباشرة ضع رمز = بعدها العلامة "
اكتب اسم الكلاس واسم الكلاس يكون نفس اسماء اكواد التعاريف وبنفس التسلسل
لاحظ الصورة
باللون الزهري تم شرحة والاصفر هو الاسم نغلق الاسم بــ " وهذه العلامة بالضغط على شفت وحرف( ط) اللون الازرق خاتمة شفت و(ز)
بمجر وضع الخاتمة يعطيك كود نهاية الكلاس الموضح باللون الازرق الان بعد ما
نحتاج نكتب كل الكلاسات بنفس الطريقة نأخذ الي عملناه كوبي ونعمل بيست
لاحظ الصورة التالية
مع تغيير المسميات كما موضح باللون الاخضر
الان نرفع كود نهاية الكلاس من اول كلاس ونحطة بالنهاية كما في الصورة التالي
انتهينة من الهيدر نعمل للفوتر نفسه ونجي الى الاعمدة لاحظ الصورة التالية
الهيدر محدد باللون الاخضر والفوتر باللون الازرق لكن الاعمدة نصف باللون الازرق ونصف بالاخضر ؟؟؟
اللون الاخضر من كلاسات الاعمدة يكون بنهاية الهيدر واللون الازرق من كلاسات الاعمدة يروح في بداية الفوتير لاحظ الصورة التالية
ليكون هذا شكل الكلاسات في النهاية احفظ الي عملته في ملف نوتباد من تعاريف على جهة وكلاسات على جهة اخرى
ملاحظة : الكلاسات باللون الاخضر سنسميها الكلاسات العلوية واللون الازرق
الكلاسات السفلى اذا تم ذكرها فيما يلي القصد هو ما تم ذكره حاليا
الى هنا نهاية درس التقطيع والتوزيع فيما يلي ستكون الدروس فقط وضع هذه
الاكواد في داخل القوالب معرفة القوالب ومواضعها من خلال امثلة وهيه اسهل
ما يكون
اين توضع تعاريف css وطريقة البحث عن القالب وكيفية البحث داخل القالب في
لوحة التحكم والفرونت بيج حتى لا تكون هناك اسئلة بهذا الخصوص
تعاريف css من لوحة التحكم اذهب الى الاستايلات والقوالب بعدها التحكم بالقوالب
بعدها راح تظهر لوحة انزل للنهاية
انتهى
البحث عن القالب من داخل لوحة التحكم
كما موضح بالسهم من الاستايلات والقوالب نختار البحث عن القوالب
يظهر المربع التالي وموضح بالصورة تكتب اسم القالب الى راح نقدمة بالدرس ابحث عنه بالانكليزي
طريقة البحث عن كود داخل القالب من داخل لوحة التحكم
بعد الدخول للقالب تجد المربع اسفل يمين القالب والصورة تعبر عن المطلوب
طريقة البحث عن كود داخل القالب في الفرونت بيج
اضغط من الكيبورد على زرCtrl وحرف F يظهر المربع التالي والصورة تعبر عن المطلوب
انتهى التالي هو التوزيع داخل القالب
الان نبدأ الشرح والقالب الأول هو النافبار لانه يعتبر من القوالب الرئيسية
نبحث عن القالب navbar
نبحث داخل القالب عن الكود
رمز Code:
<!-- breadcrumb, login, pm info -->
وهو ثاني كود بالضبط فوقه مباشرة نضع الكود العلوي من الكلاسات
الان نبحث عن
رمز Code:
<!-- / nav buttons bar -->
تحته مباشرة نضع الكود السفلي الخاص بالكلاسات
انتهينا من النافبار مثال عليه بعد التأطير
نجي لقالب الفروم هوم نبحث عن القالب FORUMHOME
نبحث داخل القالب عن
رمز Code:
<!-- main -->
فوقها مباشرة الكلاسات العلوية
بعدها ابحث عن
رمز Code:
$forumhome_markread_script
فوقها مباشر ضع الكلاسات السفلية
بعدها ابحث عن
رمز Code:
<!-- what's going on box -->
فوقها مباشرة الكلاسات العلوية وهية على بعد سطرين من الكود الي شرح بالاعلى لاحظ الصورة
بعدها ابحث عن
رمز Code:
$template_hook[forumhome_wgo_pos5]
اسفلها تجد كلمة </table> اسفل كلمة تيبل ضع الكلاسات لاحظ الصورة
الكود التالي
رمز Code:
<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 شرطية تمنع رؤوية المحتوى بالنسبة لمجموعات محددة واقرب مثال هو كلمة تسجيل تظهر للزائر ولاتظهر للعضو
مثال 
موضوع: درس توزيع لأهم القوالب تأطير رباعي css 
السبت فبراير 16, 2013 1:26 pm
