[دورة عمل مجله] الدرس مفصل الثالث تجهيز صفحة index

[walid]

http://www.dzbatna.com/images/icons/iconrote.gif [ط¯ظˆط±ط© ط¹ظ…ظ„ ظ…ط¬ظ„ظ‡] ط§ظ„ط¯ط±ط³ ط§ظ„ط«ط§ظ„ط« طھط¬ظ‡ظٹط² طµظپط*ط© index (http://www.dzbatna.com/t476169/)




دروس سابقة

[دورة عمل مجله] الدرس مفصل الاول تجهيز اعدادات الcss (http://www.dzbatna.com/t473109/)

[دورة عمل مجله] الدرس مفصل الثاني عمل قواعد بيانات للتعديل لاعدادات الcss (http://www.dzbatna.com/t474304/)
اخواني عند النقل حافظوا على حقوقي فوالله لقد حافظت على حقوق المصمم حتى بشئ انا برمجتة http://www.dzbatna.com/images/smilies/cupidarrow.gif
والأن مع الدرس مفصل الثالث وهو تجهيز صفحة مثل هذه الصفحة وهذا مايجب ان ينتج لدينا بالنهاية طبعا مع امكانية تعديل الالوان والقالب template بكل سهوله http://www.dzbatna.com/images/smilies/1eye.gif...

طبعا كل شئ واسمه واضح يعني اسم الشريط راح نقدر نعدله والبيانات الي تتحرك راح نقدر نعدلها يمكن وضع شريط اخر مواضيع المنتدى forum او اخبار الجزيرة وغيره..


لكبر الصورة ادخل لها من هنا (http://www.alfarh.com/mhamadalfarh/mk/index/1.jpg)


الأن نقوم بعمل (انشاء) صفحه باسم index.php ونقوم بالتالي :-

http://www.alfarh.com/mhamadalfarh/mk/index/2.jpg
http://www.alfarh.com/mhamadalfarh/mk/index/3.jpg

لماذا؟ ؟ ؟

لتطبيق التمبلت الي فيه اعدادات الcss وكل شئ داخل التمبلت...شاهد ماذا حصل http://www.dzbatna.com/images/smilies/cupidarrow.gif

الأن نقوم بعمل جدول الشريط وهو كالتالي :-

http://www.alfarh.com/mhamadalfarh/mk/index/4.jpg

http://www.alfarh.com/mhamadalfarh/mk/index/5.jpg
الان نقوم بالتعديل ليصبح بالشكل التالي:-

http://www.alfarh.com/mhamadalfarh/mk/index/6.jpg

الان نقوم بوضع الستايل style css على الجدول فاليكن اسم الشريط له border2 ومحتويات الشريط لها border3

كالتالي كتوضيح فقط لاسم الشريط وقد شرح طريقةنا في الدرس مفصل السابق كيف نركب css على الجدول http://www.dzbatna.com/images/smilies/cupidarrow.gif




http://www.alfarh.com/mhamadalfarh/mk/index/7.jpg

وفي الدرس مفصل القادم سوف نضع كيف راح نعمل تعديل لاسم الشريط ومحتواه لكن الان راح نجهزها لان الدرس مفصل طويل..
طيب ليش عاكسين اماكن الكلام ؟؟؟

لان الدريم ويفر في الجداول الافقيه يعكس الاتجاهات فاليمين يسار واليسار يمين http://www.dzbatna.com/images/smilies/cupidarrow.gif وهكذا تفادينا المشكلة

الان سوف اشرح طريقة كيف نرتب الجداول التي بالاسفل وكيف نقسمها على الصفحة بحيث مهما امتدت يمتد الجدول مع الصفحة http://www.dzbatna.com/images/smilies/santa_1.gif...

اولا ننزل انتر عن الشريط ثم نسوي نفس هذا الجدول ..

http://www.alfarh.com/mhamadalfarh/mk/index/8.jpg

الان نغيير مكان الجدول ونخليه على اليسار كالتالي:-

http://www.alfarh.com/mhamadalfarh/mk/index/9.jpg

الان من نعمل جدول بنفس الاعدادات ونخلي مكانه باليمين

الان نعمل نفس الجدول ونخلي مكانه في الوسط http://www.dzbatna.com/images/smilies/cupidarrow.gif لينتج..

http://www.alfarh.com/mhamadalfarh/mk/index/10.jpg


الان نقوم بتقسيم الجدول الاوسط ونظعه 50%

http://www.alfarh.com/mhamadalfarh/mk/index/11.jpg

نقوم بتكرار هذا الشئ على الايمن بقيمة 20% وعلى الاوسط بقيمة 50% يبقى عنا 10% وهذا مساحة مجاني freeة للزوار http://www.dzbatna.com/images/smilies/shiny01.gif


والان خطوات اخيرة :-

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

لكن بدون عمل انتر بين كل قائمة والاخرى...

لكبر الصورة ادخل لها من هنا (http://www.alfarh.com/mhamadalfarh/mk/index/1.jpg)

وقم بعمل الجداول على css

بحيث الجدول الاعلى (القوائم الرئيسية + اسم البلوك )
تأخذ border2
ومحتوياتها تأخذ border3




واسف على التقصير





التعديل الأخير كان بواسطة محمد الفرح; 02 - 07 - 2014 الساعة 19:27

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




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