5 / معرفة المسارات , تركيب install الاكواد , شرح طريقة مصور , فيديو , الاسهل على الاطلاق

[admin]

http://www.dzbatna.com/images/icons/iconrote.gif 5 / ظ…ط¹ط±ظپط© ط§ظ„ظ…ط³ط§ط±ط§طھ , طھط±ظƒظٹط¨ ط§ظ„ط§ظƒظˆط§ط¯ , ط´ط±ط* ظ…طµظˆط± , ظپظٹط¯ظٹظˆ , ط§ظ„ط§ط³ظ‡ظ„ ط¹ظ„ظ‰ ط§ظ„ط§ط·ظ„ط§ظ‚ (http://www.dzbatna.com/t2213236/)




http://upload.dzbatna.net/upfiles/mi372123.png

,
,
,






1 / تصميم الاستايل style شرح طريقة مصور , فيديو , الاسهل على الاطلاق (http://www.dzbatna.com/t2192575/)
2 / تقطيع الاستايل style شرح طريقة مصور , فيديو , الاسهل على الاطلاق (http://www.dzbatna.com/t2195265/)
3 / توزيع الهيدر header والفوتر شرح طريقة مصور , فيديو , الاسهل على الاطلاق (http://www.dzbatna.com/t2199075/)
4/ توزيع التاطير الرباعي شرح طريقة مصور , فيديو , الاسهل على الاطلاق (http://www.dzbatna.com/t2211093/)


http://upload.dzbatna.net/upfiles/mJD72695.png


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


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

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


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

http://upload.dzbatna.net/upfiles/Aq460505.png

وبعد ذلك نضغط من الكيبورد 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 اسطر الاخيره كما موضح

http://upload.dzbatna.net/upfiles/ZRh61344.png


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



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





رمز PHP:

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



كما موضح هنا

http://upload.dzbatna.net/upfiles/ubW61556.png


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



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

http://upload.dzbatna.net/upfiles/mJD72695.png

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

http://upload.dzbatna.net/upfiles/oXF61830.png



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



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

http://upload.dzbatna.net/upfiles/mJD72695.png





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

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

http://upload.dzbatna.net/upfiles/4hM64097.png


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

http://upload.dzbatna.net/upfiles/mJD72695.png

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

http://upload.dzbatna.net/upfiles/z4465395.png


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

http://upload.dzbatna.net/upfiles/mJD72695.png

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

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

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

http://upload.dzbatna.net/upfiles/GEO65567.png

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

كما موضح

http://upload.dzbatna.net/upfiles/Y7i65931.png


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

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

رمز PHP:

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

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

http://upload.dzbatna.net/upfiles/3nA66214.png


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


رمز PHP:

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



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

http://upload.dzbatna.net/upfiles/yyX66550.png


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

http://upload.dzbatna.net/upfiles/mJD72695.png


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>



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

كما موضح ..

http://upload.dzbatna.net/upfiles/ogJ67594.png



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


http://upload.dzbatna.net/upfiles/mJD72695.png

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

http://www.dzbatna.com/attachments/679971d1357412570t-13.png (http://www.dzbatna.com/attachments/679971d1357412570-13.png)


http://upload.dzbatna.net/upfiles/mJD72695.png



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

http://upload.dzbatna.net/upfiles/mJD72695.png


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

لاتنسى ان تغير الجودة بهذه الطريقه ليظهر بشكل اوضح
http://upload.dzbatna.net/upfiles/2LM75314.gif

,


,
,



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




http://upload.dzbatna.net/upfiles/gMO58738.png

http://upload.dzbatna.net/upfiles/gMO58738.pnghttp://upload.dzbatna.net/upfiles/gMO58738.png

http://upload.dzbatna.net/upfiles/gMO58738.png
http://upload.dzbatna.net/upfiles/gMO58738.pnghttp://upload.dzbatna.net/upfiles/gMO58738.png









http://upload.dzbatna.net/upfiles/P3L68252.png





اليوتيوب ~ youtube .................................................. ..هنا (http://www.youtube.com/watch?v=tV3wRJ5OtQA)
فور شيرد ~ 4shared .................................................. هنا (http://www.4shared.com/zip/TGPoRFNk/___101.html)





http://upload.dzbatna.net/upfiles/mJD72695.png



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


http://upload.dzbatna.net/upfiles/Qil76159.png











ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/txt.gif الاقسسام.txt (http://www.traidnt.net/vb/attachments/680215d1357634085-الاقسسام.txt) (1.9 كيلوبايت, عدد مرات المشاهدة 25 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©