5 / ظ…ط¹ط±ظپط© ط§ظ„ظ…ط³ط§ط±ط§طھ , طھط±ظƒظٹط¨ ط§ظ„ط§ظƒظˆط§ط¯ , ط´ط±ط* ظ…طµظˆط± , ظپظٹط¯ظٹظˆ , ط§ظ„ط§ط³ظ‡ظ„ ط¹ظ„ظ‰ ط§ظ„ط§ط·ظ„ط§ظ‚





,
,
,




اليوم يااخوان باذن الله راح نبدأ بالدرس مفصل الخامس والـ بيتم فيه شرح طريقة لـ النقاط الاساسية لتكملة الدورة وهي من الدروس المهمة
اولا , معرفة تحديد مسار الصورة بشكل سهل , بالاضافة الى تركي قالب templateي الهيدر header والفوتر
+ القوالب الـ بيتم تأطيرها مثل النافبار والفروم هوم ..


طيب اول شي كيف نقدر نحدد المسار الصحيح لاي استايل style ؟؟
المسار الصحيح للاستايل style بيبدأ من المجلد الـ بداخله الاستايل style .

ثانيا بيتم رفع الصور داخل مجلد vb المسمى عادة بهذا الاسم


1 / طريقة ازالة المسارات الزائده
كما بشرح طريقة الفيديو تبين انه بامكاننا عمل ذلك بالتحديد قبل اسم مجلد الصور الرئيسي مباشرة الى قبل هذه العلامة "'"
كما بالشكل



وبعد ذلك نضغط من الكيبورد Ctrl + h
ونجعل الـ Replace with
فارغ , ونعم Replace All
وبكذا نكون طبقنا الامر على كامل الاكواد

والان تبقى علينا رفع مجلد الصور الخاص بنا على احدى برامج الـ FTP

سيكون ايضا مسار رفع المجلد بهذه الطريقة
www / vb / name file

نستبدل طبعا name file باسم المجلد الخاص بالاستايل style

الان نجي لطريقة عمل استايل style جديد من داخل لوحة التحكم الخاصه بالمنتدى forum

1/ لوحة التحكم , 2/ الاستايل styleات والقوالب , 3/ التحكم بالاستايل styleات , في اخر الصفحة نجد
4/ اضافة استايل style جديد نضغط عليه ونعمل اسم افتراضي لاسم الاستايل style ومن ثم 5/ حفظ .


الان نجي لطريقة تركيب install اكواد الهيدر headerوالفوتر

1 / لوحة التحكم ’ 2/ الاستايل styleات والقوالب ’ 3/ التحكم بالاستايل styleات ’ 4 نختار الاستايل style الـ تم عملة ف الخطوة السابقة .
وبعد ذلك نذهب من الخيارات الى القوالب الشائعة .

بعد ذلك سيآتي لنا ثلاث قوالب , الهيدر header , الهيد انكلود , الفوتر
بيتم التعديل فقط على قالب templateي الهيدر header + الفوتر

بالنسبة للهيدر سيتم مسح كامل ما بالقالب template باستثناء 3 اسطر الاخيره كما موضح



||||||||||||||||| - يتم مسح هذه الاكواد


وسيتم وضع فقط كلاسات الهيدر header


رمز PHP:
<code style="white-space:nowrap"> <code> <!--header-->
<div id="header">
<div class="right"></div>
<div class="left"></div>
</div>
<!--header-->
</code> </code>


كما موضح هنا



|||||||||||||||| - هذه كلاسات الهيدر header .


بكذا انتهينا من الهيدر header .



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




|||||||||||||||| - هذه كلاسات الفوتر .


بكذا انتهينا من قالب templateي الهيدر header والفوتر





الان نجي لتركيب install تعاريف css الـ تم عملها بالدرس مفصلي الثالث والرابع ..
ملاحظه : التعاريف كاملة لـ الهيدر header والفوتر , والتأطير الرباعي ..

يتم وضعها من خيارات css الرئيسي




الان تم تركيب install الهيدر header والفوتر وتعاريف كامل الهيدر header والفوتر والتاطير الرباعي



بعد الاطلاع على مثال لما عملناه نلاحظ يوجد حواف على الصور زائده لاتعطي شكلا جمالي
يتم ازالتها من خلال , css رئيسي
خلفية الصفحة
خيارات css الاضافيه وجعل قيم margin 0 0 0 0px
كما موضح ..




وبكذا يكون قد ازلنا الحواف الزائده والمشوهة للشكل العام ..



الان نجي لطريقة تأطير قالب templateي النافبار + الفروم هوم

1 / النافبار ,, navbar

هذا هو قالب template النافبار



يتم تعديله من خلال , التحكم بالاستايل styleات البحث في القوالب

كما موضح




بعد ذلك ستجد مسمى على اليمين بنفس الاسم الـ تم البحث عنه
اضغط عليه ومن ثم تعديل

وبالضغط من على الكيبورد Ctrl + f
إبحث عن الجملة joomla التالية

رمز PHP:
<code style="white-space:nowrap"> <code> <!-- breadcrumb, login, pm info -->
</code> </code>

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




وبعد ذلك قم بالبحث عن

رمز PHP:
<code style="white-space:nowrap"> <code> <!-- / nav buttons bar -->
</code> </code>


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




بكذا انتهينا من تأطير النافبار تأطير رباعي ..




2 / الفروم هوم ,, forumhome

هذا القالب template يتضمن اقسام المنتدى forum بالاضافة الى الاحصائيات اسفل المنتدى forum


نبحث بنفس الطريقة السابقة على القالب template , وبعد ذلك
نقوم بالبحث داخل القالب template
على


رمز PHP:
<code style="white-space:nowrap"> <code> <!-- main -->
</code> </code>


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

رمز PHP:
<code style="white-space:nowrap"> <code> <!-- /main -->
</code> </code>


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


بكذا اطرنا الاقسام

نجي لطريقة تأطير الاحصائيات


نبحث بنفس القالب template على


رمز PHP:
<code style="white-space:nowrap"> <code> <!-- what's going on box -->
</code> </code>





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

ونبحث ايضا على


رمز PHP:
<code style="white-space:nowrap"> <code> <!-- end what's going on box -->
</code> </code>


ونضع تحت


رمز PHP:
<code style="white-space:nowrap"> <code> </table>
</code> </code>


الاكواد السفلية

كما موضح ..





بكذا تم تأطير الاحصائيات




نظرة سريعة لما قمنا بعمله








ملاحظة : رجائي الرجوع الى الفيديو لتثبيت setup واتضاح بعض المعلومات



ثانيا : الشرح طريقة فيديو (صوت وصورة)

لاتنسى ان تغير الجودة بهذه الطريقه ليظهر بشكل اوضح


,
,
,

المشاهدة والتحميل






  • اليوتيوب ~ youtube .................................................. ..هنا
  • فور شيرد ~ 4shared ..................................................هنا





وفي الختام نسأل من الله العلي القدير ان نكون قد وفقنا في توصيل المعلومة على اكمل وجه , وعلى لقاء ان شاء الله في الدرس مفصل القادم ,, والـ بيتم شرح طريقة فيه طريقة تركيب install تأطير اكثر القوالب شيوعا .





الملفات المرفقة [TR]
الاقسسام.txt (1.9 كيلوبايت, عدد مرات المشاهدة 25 مرة) [/TR]



©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©