منتدى فريق جيوش هكر العراق

<!-- ssaallmm جميع الحقوق محفوظة لـ -->
<p align="center"><font face="Tahoma">أهلا وسهلا بكـ مرة أخرى يا,
$bbuserinfo[username].</font></p>
<p align="center"><font face="Tahoma">نور المنتدى بوجودك</font></p>
<p align="center"><font face="Tahoma">إن شاء الله تفيد وتستفيد  </font></p>
<p align="center"><font color="#FF0000" face="Tahoma">لاتدع الشيطان يلهيك عن
أداء الصلاة في وقتها  </font></p>
<p align="center"><font face="Tahoma">مع تحيات فريق إدارة منتديات أهل الأنبار </font></p>
<!-- ssaallmm جميع الحقوق محفوظة لـ -->

منتدى فريق جيوش هكر العراق

اي شي تريد تلكية
 
الرئيسيةاليوميةمكتبة الصورس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول

اهلا وسهلا بكم في منتدى فريق جيوش هكر العراق نرجو التسجيل في النتدى قبل اغلاق التسجيل شكرا لكم
دخول
اسم العضو:
كلمة السر:
ادخلني بشكل آلي عند زيارتي مرة اخرى: 
:: لقد نسيت كلمة السر
سحابة الكلمات الدلالية
المواضيع الأخيرة
الساعة
بحـث
 
 

نتائج البحث
 
Rechercher بحث متقدم
الساعة اليوم
عدد زوار المنتدى
تسجيل صفحاتك المفضلة في مواقع خارجية
تسجيل صفحاتك المفضلة في مواقع خارجية Digg  تسجيل صفحاتك المفضلة في مواقع خارجية Delicious  تسجيل صفحاتك المفضلة في مواقع خارجية Reddit  تسجيل صفحاتك المفضلة في مواقع خارجية Stumbleupon  تسجيل صفحاتك المفضلة في مواقع خارجية Slashdot  تسجيل صفحاتك المفضلة في مواقع خارجية Yahoo  تسجيل صفحاتك المفضلة في مواقع خارجية Google  تسجيل صفحاتك المفضلة في مواقع خارجية Blinklist  تسجيل صفحاتك المفضلة في مواقع خارجية Blogmarks  تسجيل صفحاتك المفضلة في مواقع خارجية Technorati  

قم بحفض و مشاطرة الرابط منتدى فريق جيوش هكر العراق على موقع حفض الصفحات
تويتر
احصيات المنتدى
PageRank
زوار المنتدى
Flag Counter
اعلان
حصل على برنامج Adobe Flash player

شاطر | 
 

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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
المدير العام

avatar

الجدي عدد المساهمات : 263
نقاط : 1104
السٌّمعَة : 0
تاريخ التسجيل : 22/04/2012
العمر : 22
الموقع : العراق

مُساهمةموضوع: درس توزيع لأهم القوالب تأطير رباعي css    الثلاثاء يوليو 09, 2013 1:24 pm

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]السلام عليكم ورحمة الله [/b]
[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]نظرا لطلب الاخوان بوضع دروس لتأطير القوالب قمت بطرح هذه الدروس وهية سلسلة بسيطة لتأطير اكثر القوالب في سكربت vBulletin Version 3.x.x 
وان شاء الله ستكون على مراحل هية (تقطيع التصميم بالفوتوشوب) (التوزيع بخاصية css بالفرونت بيج ) (اختيار القوالب ومعرفت اماكنها والتوزيع عليها) 
وسيكون هذا الدرس هو المرحلة الاولى والثانية بأذن الله وباقي الدروس المرحلة الاخيرة وفي كل درس سيتم وضع قالبين او اكثر حسب توفيق رب العالمين .
اذن سنحتاج لبرنامجين الفوتوشوب والفرونت بيج واذا لم يتوفر الفرونت بيج غير مهم لأننا سنكتب الاكواد كتابة ستحتاج لأي محرر مثل النوتباد وهو متوفر[/b]



[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]مرفق مع الدرس التصميم psd للي يحب يغير عليه مسموح 
ملف txt بأسم css الاكواد جاهزة لمن يحتاجه ويغير عليها مثل ما يحب 
ملف txt بأسم class الكلاسات جاهزة 
التحميل من هنا 
بسم الله الرحمن الرحيم 
نبدأ الدرس الاول (التقطيع بالفوتوشوب)
لاحظ الصورة التالية وهية مثال على طريقة التقسيم المستطيل باللون الاصفر سيكون الهيدر واللون الاحمر سيكون بودي(الاعمدة الجانبية) والاخضر الفوتر 
ستكون الطريقة نفس الطريقة المعتمدة بطريقة تقطيع الاستايل 

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


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]لاحظ الان طريقة التقطيع بالصورة التالية وكما موضح هناك ارقام للتقطيع ( 01-02-03-04-05 )
واضح ايضا عند النظر للصورة هناك ارقام بارزة وارقام غير بارزة البارزة هية باللون الازرق (01-03-05 ) سوف نحتاج الى هذه الملاحظة فيما بعد[/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "][/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]بعد ما قطعنا الصورة نحفظها بالطريقة التالية نذهب لقائمة file ومن القائمة نختار save for كما موضح بالصورة التالية 
الواجهة العربية القائمة (ملف ) (حفظ كصفحة ويب) واختصار هذا الخيار واضح من الصورة التالية 
[/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]بعدها تظهر قائمة كبيرة نختار منها صيغة الصور وانا اختار png ولكم الحرية بأختيار الصيغة
بعدها نضغط على كلمة save في اليمين الاسفل الواجهة العربية (حفظ)[/b]



[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "][/b]



[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]تظهر القائمة التالية وهية المسمى للصور وتأكد من الخيار الثاني image only لكي يحفظ الصور فقط بعدها اضغط على save
الواجهة العربية (الصور فقط)[/b]



[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "][/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]الان سيقوم البرنامج بحفظ الصور داخل مجلد اسمه image ندخل علية ونمسح الصور الي مالها لازمه 
س: ماهية الصور الي مالها لازمة 
ج:وضحت مسبقا هناك ارقام بارزة وارقام غير بارزة (الغير بارزة مالها لازمة ) توضح الصورة التالية[/b]



[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "][/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]الان عدنا ثلاث صور واسمائها (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 
ملاحظة: اتبعت الطريقة التالية لكي لايكون خطأ في مقاسات الصور ان شاء الله انت بعد ما تتعلم الطريقة قطع مثل ما تحب
انت راح تشوف الطريقة طويلة في المرة الاولى لكن ثق بالممارسة تشوفها اسهل الطرق وادقها[/b]




[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "][/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]بعد ما قطعت نفس طريقة الحفظ في المرة الاولى 
الان ندخل الى مجلد الصور ونمسح الصور الي مالها لازمة[/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "] 
تبقت عدنا الصور التالية (اعرفك على اماكنها لكي لايكون هناك خطأ عند تغير المسمى اذا انت حاب تغيير )
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 والواجهة العربية مكتوب تعليمات برمجية اضغط عليها راح تظهرلك اكواد امسحها والي يستعمل النوتباد لا يعمل شي 
اول شي نكتب الكود التالي ودائما الكود الاول للتمدد وانا اخترت حرف اتش يعني هيدر وحرف الار ريبيت تكرار 
[/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]بعدها نكتب الكود التالي ولاحظ الاسم المحدد باللون الاصفر اسم المجلد واللون الاخضر الصورة مع الصيغة اذا كان مجلد الصور مباشرة داخل 
مجلد المنتدى تكتبه مباشر مثل ما انا كاتبه واذا كان داخل مجلد خاص بأستايل اكتب مجلد الاستايل قبله اي على هذا النحو 
('stylename/frame/header_03.png')[/b]



[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "][/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]نكمل باقي الكود المحدد باللون الاصفر وهو الارتفاع بالبكسل وارتفاع الصورة عندي 36 شوف الارتفاع كم عندك وحطه 
اللون الاخضر وهو امر تكرار الصورة x يعني تكرار عرضي (تمدد عرضي)[/b]



[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "][/b]



[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]الان نقفل الكود الاول ونجي نكتب الثاني
اللون الاصفر وسم لقفل الكود الاول اللون الاخضر العرض شوف عرض الصورة كم وخلي المقاس بالبكسل 
اللون الازرق امر عدم تكرار الصورة اللون الزهري الاتجاه وهذه الصورة بما انها في يسار الهيدر نعطيها امر اتجاه لليسار
اللون الزهري الثاني وهو خاص بالكود للصورة الثالثة للهيدر نعطيه اتجاه لليمين 
[/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "][/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]الان نأتي الاعمدة الجابية احنا عملنا صورتين من دون تمدد نكتب اسم الكود وبداخلة نكتب الكود باللون الاصفر 
وهو امر لجعل القالب الي راح نركب عليه بالوسط يملاء الفراغ الوسطي تسطيع استبداله بلون اذا كنت حاب هذا امر اللون  
ننتقل للكود الثاني الخاص بالعمود الايسر 
اللون الازرق امر تمدد طولي y لانها اعمده يجب ان تتمدد بالطول والاخضر الاتجاه لليسار لانه العامود الايسر
بعده الكود الخاص بالعمود الايمن باللون البنفسجي اتجاه لليمين واللون الزهري هو امر للمباعدة اي لمباعدة الاعمدة عن التصميم 
كلما زاد الرقم ابتعد اكثر عن التصميم والنقصان عكسي[/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "][/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]الان نأتي لأكواد الفوتر وتم شرح جميع الاوامر الي بداخلها ما عليك الا النظر والتطبيق[/b]



[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "][/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]ملاحظة :ماتم شرحة بالاعلى من اكواد البعض يسميها استايل والبعض يسميها تعاريف css احنا راح نسميها تعاريف css ان تم ذكر مثل هذه الجمله في الدروس القادمة مقصدها ما شرحناه بالاعلى 
الان نجي نكتب اكواد الكلاسات وهذه الاكواد هية التي سوف نضعها داخل القوالب اما التعاريف سأقوم بشرح مكانها فيما بعد 
نكتب بالفرونت بيج التاليdiv> وطريقة الكتابة نقلب للكتابة بالانكليزية نضغط من الكيبورد على shift وحرف (و) بالكيبورد وبعدها الحروف div بعدها فاصلة اي زر سبيس الطويل 
بمجر اعطاء فاصلة سيظهر كما في الصورة التالية 

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


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]باللون الزهري تم شرحة والاصفر هو الاسم نغلق الاسم بــ " وهذه العلامة بالضغط على شفت وحرف( ط) اللون الازرق خاتمة شفت و(ز) 
بمجر وضع الخاتمة يعطيك كود نهاية الكلاس الموضح باللون الازرق الان بعد ما نحتاج نكتب كل الكلاسات بنفس الطريقة نأخذ الي عملناه كوبي ونعمل بيست لاحظ الصورة التالية 

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




[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]الان نرفع كود نهاية الكلاس من اول كلاس ونحطة بالنهاية كما في الصورة التالي 
[/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]انتهينة من الهيدر نعمل للفوتر نفسه ونجي الى الاعمدة لاحظ الصورة التالية[/b]




[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "][/b]




[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]الهيدر محدد باللون الاخضر والفوتر باللون الازرق لكن الاعمدة نصف باللون الازرق ونصف بالاخضر ؟؟؟
اللون الاخضر من كلاسات الاعمدة يكون بنهاية الهيدر واللون الازرق من كلاسات الاعمدة يروح في بداية الفوتير لاحظ الصورة التالية 
[/b]


[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]ليكون هذا شكل الكلاسات في النهاية احفظ الي عملته في ملف نوتباد من تعاريف على جهة وكلاسات على جهة اخرى 
ملاحظة : الكلاسات باللون الاخضر سنسميها الكلاسات العلوية واللون الازرق الكلاسات السفلى اذا تم ذكرها فيما يلي القصد هو ما تم ذكره حاليا 
الى هنا نهاية درس التقطيع والتوزيع فيما يلي ستكون الدروس فقط وضع هذه الاكواد في داخل القوالب معرفة القوالب ومواضعها من خلال امثلة وهيه اسهل ما يكون[/b]
[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]


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


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


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

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

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


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



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

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز Code:
[/b]

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]وهو ثاني كود بالضبط فوقه مباشرة نضع الكود العلوي من الكلاسات 


الان نبحث عن[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز Code:
[/b]

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]تحته مباشرة نضع الكود السفلي الخاص بالكلاسات


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



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

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز Code:
[/b]

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]فوقها مباشرة الكلاسات العلوية 



بعدها ابحث عن[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز Code:
[/b]
$forumhome_markread_script

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]فوقها مباشر ضع الكلاسات السفلية 


بعدها ابحث عن[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز Code:
[/b]

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]فوقها مباشرة الكلاسات العلوية وهية على بعد سطرين من الكود الي شرح بالاعلى لاحظ الصورة 




بعدها ابحث عن[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز Code:
[/b]
$template_hook[forumhome_wgo_pos5]

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]اسفلها تجد كلمة
اسفل كلمة تيبل ضع الكلاسات لاحظ الصورة 



الكود التالي[/b]
[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز Code:
[/b]


[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]هو لعمل مسافة (فراغ) لذالك وضعنا الكلاسات فوقه لكي لا تكون مسافة في التصميم 

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






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

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
SHOWTHREAD  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]داخل القالب نبحث عن:
[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
<!-- controls above postbits -->  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]فوقه مباشرة نضع الكلاسات العلوية 

الان نبحث عن :
[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
<!-- / toolbar -->  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]اسفله مباشرة الكلاسات السفلى 

[/b]


[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]


نبحث عن 
[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
<!-- / start  table -->  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]اسفله مباشرة كلاسات علوية 

الان نبحث عن 
[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
<!-- / controls below postbits -->  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]اسفلة مباشر كلاسات سفلى 

نبحث عن 
[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
<if condition="$bookmarksites">  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]فوقها مباشر كلاسات علوية 

نبحث عن 
[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
<!-- / social bookmarking links -->  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]اسفلها موجود نهاية بطاقة وهو كود[/b]
[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
</if>  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]اسفل هذا الكود تضع كلاسات سفلى لاحظ الصورة 

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

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
$ad_[ad_showthread_beforeqr]  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]فوق هذا الكود ضع كلاسات سفلى واسفل هذا الكود كلاسات علوية الصورة التالية توضح

نبحث عن
[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
<!-- next / previous links -->  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]اسفلها نضع كلاسات سفلى 

نبحث عن 
[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
<if condition="$show['activeusers']">  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]وهية على بعد كم سطر مما شرح بالخطوة السابقة نضع فوقها كلاسات علوية لاحظ الصورة التالية 

الان تبقى خطوة واحدة نبحث عن 
[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
$template_hook[showthread_after_activeusers]  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]فوقها نضع كلاسات سفلى لاحظ الصورة 

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



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


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

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
<!-- usercp nav -->  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
اسفلها مباشرة هناك بداية جدول هذا القالب نظرة عليه ونرجع للشرح الصورة التالية 


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

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
<!-- usercp nav -->  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
نضع الكلاسات العلوية لاحظ الصورة التالية السهم الاحمر يوضح امر العرض 


الان ابحث عن 
[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
<script type="text/script"> vbmenu_register("nav_newitems");  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
فوقها موجود نهاية كود فوق الــ مباشرة نضع الكلاسات السفى 


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


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

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
USERCP  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
نبحث بداخلة عن 
[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
<!-- ############## SUBSCRIBED THREADS ############## -->  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
اسفه مباشرة نضع الكلاسات العلوية 


الان نبحث عن 
[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "]رمز PHP:
[/b]
الكود:
<!-- ############## END NEW REPUTATION ############## -->  

[b class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
اسفلها توجد نهاية بطاقة اسفل الـ نضع الكلاسات السفلى 
وهذا لان if شرطية تمنع رؤوية المحتوى بالنسبة لمجموعات محددة واقرب مثال هو كلمة تسجيل تظهر للزائر ولاتظهر للعضو


مثال 
[/b]
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://hakraliraq.montadalhilal.com
 
درس توزيع لأهم القوالب تأطير رباعي css
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى فريق جيوش هكر العراق :: دورات تعليم وتصميم الإستايلات-
انتقل الى: