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

[loulou ange]

http://www.dzbatna.com/images/icons/iconrote.gif ط¯ط±ط³ طھظˆط²ظٹط¹ ظ„ط£ظ‡ظ… ط§ظ„ظ‚ظˆط§ظ„ط¨ طھط£ط·ظٹط± ط±ط¨ط§ط¹ظٹ css (http://www.dzbatna.com/t1835249/)



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



مرفق مع الدرس مفصل التصميم psd للي يحب يغير عليه مسموح
ملف txt بأسم css الاكواد جاهزة لمن يحتاجه ويغير عليها مثل ما يحب
ملف txt بأسم class الكلاسات جاهزة
التحميل من هنا (http://upload.dzbatna.net/code.php?f=load&sb=200&idxmc=809371&d=1)
بسم الله الرحمن الرحيم
نبدأ الدرس مفصل الاول (التقطيع بالفوتوشوب)
لاحظ الصورة التالية وهية مثال على طريقة التقسيم المستطيل باللون الاصفر سيكون الهيدر header واللون الاحمر سيكون بودي(الاعمدة الجانبية) والاخضر الفوتر
ستكون الطريقة نفس الطريقة المعتمدة بطريقة تقطيع الاستايل style
http://upload.dzbatna.net/upfiles/vjZ26777.png (http://upload.dzbatna.net/)
نختار اداة slice tool كما موضحة بالصورة التالية ونقوم بالتقطيع كما خططنا يالصورة السابقة
لمن يملك برنامج بواجهة interface عربية اسم الاداة (اداة الشرائح-او التشريح)
http://upload.dzbatna.net/upfiles/qHn26852.png (http://upload.dzbatna.net/)


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


http://upload.dzbatna.net/upfiles/4By26877.png (http://upload.dzbatna.net/)


بعد ما قطعنا الصورة نحفظها بالطريقة التالية نذهب لقائمة file ومن القائمة نختار save for كما موضح بالصورة التالية
الواجهة interface العربية القائمة (ملف ) (حفظ كصفحة ويب) واختصار هذا الخيار واضح من الصورة التالية
http://upload.dzbatna.net/upfiles/drs26900.png (http://upload.dzbatna.net/)


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



http://upload.dzbatna.net/upfiles/LPz26949.png (http://upload.dzbatna.net/)



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



http://upload.dzbatna.net/upfiles/TcA26974.png (http://upload.dzbatna.net/)


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



http://upload.dzbatna.net/upfiles/pzW26998.png (http://upload.dzbatna.net/)


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




http://upload.dzbatna.net/upfiles/z2v27036.png (http://upload.dzbatna.net/)


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


http://upload.dzbatna.net/upfiles/flm29162.png (http://upload.dzbatna.net/)
تبقت عدنا الصور التالية (اعرفك على اماكنها لكي لايكون هناك خطأ عند تغير المسمى اذا انت حاب تغيير )
header_01.png الصورة العلوية في الجهة اليسرى
header_03.png نطقة التمدد( نطقة التمدد هية صورة تكرر نفسها بشكل عرضي او طولي في المسافات الفارغة عند تمدد الاستايل style )
frame_05.png الصورة العلوية في الجهة اليمنى
body_01.png العمود الايسر
body_03.png العمود الايمن
footer_01.png الصورة السفلية اليسرى
footer_03.png نقطة تمدد السفلية
footer_05.png الصورة السفلية اليمنى
لاحظ جعلنا الصور بالترتيب من اليسار الى اليمن من (01-05) لكي لا نخطأ عند التوزيع انتهى التقطيع وننتقل بأذن الله للتوزيع
ملاحظة: قبل التوزيع الاكواد تحمل نفس الاوامر تقريبا الامر الي يشرح طريقة بالكود code الاول لن اكرر شرح طريقةة لتقليص عدد الصور في الدرس مفصل
نفتح برنامج الفرونت بيج في نهاية البرنامج مكتوب code والواجهة interface العربية مكتوب تعليمات برمجية اضغط عليها راح تظهرلك اكواد امسحها والي يستعمل النوتباد لا يعمل شي
اول شي نكتب الكود code التالي ودائما الكود code الاول للتمدد وانا اخترت حرف اتش يعني هيدر وحرف الار ريبيت تكرار
http://upload.dzbatna.net/upfiles/XnJ27100.png (http://upload.dzbatna.net/)


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



http://upload.dzbatna.net/upfiles/GNB27128.png (http://upload.dzbatna.net/)


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



http://upload.dzbatna.net/upfiles/OY527153.png (http://upload.dzbatna.net/)



الان نقفل الكود code الاول ونجي نكتب الثاني
اللون الاصفر وسم لقفل الكود code الاول اللون الاخضر العرض شوف عرض الصورة كم وخلي المقاس بالبكسل
اللون الازرق امر عدم تكرار الصورة اللون الزهري الاتجاه وهذه الصورة بما انها في يسار الهيدر header نعطيها امر اتجاه لليسار
اللون الزهري الثاني وهو خاص بالكود code للصورة الثالثة للهيدر نعطيه اتجاه لليمين
http://upload.dzbatna.net/upfiles/SRg27182.png (http://upload.dzbatna.net/)


http://upload.dzbatna.net/upfiles/mYz27206.png (http://upload.dzbatna.net/)


الان نأتي الاعمدة الجابية احنا عملنا صورتين من دون تمدد نكتب اسم الكود code وبداخلة نكتب الكود code باللون الاصفر
وهو امر لجعل القالب template الي راح نركب عليه بالوسط يملاء الفراغ الوسطي تسطيع استبداله بلون اذا كنت حاب هذا امر اللون http://upload.dzbatna.net/upfiles/ksI27265.png (http://upload.dzbatna.net/)
ننتقل للكود code الثاني الخاص بالعمود الايسر
اللون الازرق امر تمدد طولي y لانها اعمده يجب ان تتمدد بالطول والاخضر الاتجاه لليسار لانه العامود الايسر
بعده الكود code الخاص بالعمود الايمن باللون البنفسجي اتجاه لليمين واللون الزهري هو امر للمباعدة اي لمباعدة الاعمدة عن التصميم
كلما زاد الرقم ابتعد اكثر عن التصميم والنقصان عكسي


http://upload.dzbatna.net/upfiles/jXn27243.png (http://upload.dzbatna.net/)


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



http://upload.dzbatna.net/upfiles/zrB27293.png (http://upload.dzbatna.net/)


ملاحظة :ماتم شرح طريقةة بالاعلى من اكواد البعض يسميها استايل style والبعض يسميها تعاريف css احنا راح نسميها تعاريف css ان تم ذكر مثل هذه الجمله في الدروس القادمة مقصدها ما شرح طريقةناه بالاعلى
الان نجي نكتب اكواد الكلاسات وهذه الاكواد هية التي سوف نضعها داخل القوالب اما التعاريف سأقوم بشرح طريقة مكانها فيما بعد
نكتب بالفرونت بيج التاليdiv> وطريقة الكتابة نقلب للكتابة بالانكليزية نضغط من الكيبورد على shift وحرف (و) بالكيبورد وبعدها الحروف div بعدها فاصلة اي زر سبيس الطويل
بمجر اعطاء فاصلة سيظهر كما في الصورة التالية
http://upload.dzbatna.net/upfiles/Y8B27330.png (http://upload.dzbatna.net/)
اختار كلاس هذا الشرح طريقة من دون فاصلة بعده مباشرة ضع رمز = بعدها العلامة " اكتب اسم الكلاس واسم الكلاس يكون نفس اسماء اكواد التعاريف وبنفس التسلسل لاحظ الصورة


http://upload.dzbatna.net/upfiles/Hgz27351.png (http://upload.dzbatna.net/)باللون الزهري تم شرح طريقةة والاصفر هو الاسم نغلق الاسم بــ " وهذه العلامة بالضغط على شفت وحرف( ط) اللون الازرق خاتمة شفت و(ز)
بمجر وضع الخاتمة يعطيك كود code نهاية الكلاس الموضح باللون الازرق الان بعد ما نحتاج نكتب كل الكلاسات بنفس الطريقة نأخذ الي عملناه كوبي ونعمل بيست لاحظ الصورة التالية
http://upload.dzbatna.net/upfiles/XMM27383.png (http://upload.dzbatna.net/)
مع تغيير المسميات كما موضح باللون الاخضر




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



http://upload.dzbatna.net/upfiles/YLM27407.png (http://upload.dzbatna.net/)


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




http://upload.dzbatna.net/upfiles/DRb27445.png (http://upload.dzbatna.net/)




الهيدر header محدد باللون الاخضر والفوتر باللون الازرق لكن الاعمدة نصف باللون الازرق ونصف بالاخضر ؟؟؟
اللون الاخضر من كلاسات الاعمدة يكون بنهاية الهيدر header واللون الازرق من كلاسات الاعمدة يروح في بداية الفوتير لاحظ الصورة التالية
http://upload.dzbatna.net/upfiles/KSx27467.png (http://upload.dzbatna.net/)


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