الدورات المتخصصه : تصميم واجهة interface موقع ( تمبليت ) من الصفر : الدرس مفصل 5 والاخير

[linnou]

بسمــــ الله الرحمن الرحيمــ

الدرس مفصل الأول هنا

http://dzbatna.net/vb/showthread.php?p=9040915

الدرس مفصل الثاني هنا

http://dzbatna.net/vb/showthread.php?t=970215

الدرس مفصل الثالث هنا

http://dzbatna.net/vb/showthread.php?t=971210

الدرس مفصل الرابع هنا

http://dzbatna.net/vb/showthread.php?t=973051



اهلا بكم بالجزء الأخير من الدوره ......

^_^

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

حاليا صممنا وقطعنا وجهزنا شغلنا للتركيب install ممممممممممممممم وش نسوي الحين ؟؟؟؟


اكيد نركب ^_^


نبــــــــداء على بركة الله .


افتح برنامج الفرونت بيج .. والى نشتغل عليه هو الاصدار 2003 عربي

http://www.ashwae.com/up/uploads/weeeb-T/4/1.jpg

بعدها نروح الى ملف --- فتح

http://www.ashwae.com/up/uploads/weeeb-T/4/2.jpg

ونفتح الصفحه المرفقه مع الدرس مفصل .. وهي صفحة انا جهزتها كهيكل للتركيب install تركب عليها .. طبعا اذا فهمت الفكره تقدر تغير فيها على كيفك ... وهي مرفقه بأخر هذا الدرس مفصل ....

http://www.ashwae.com/up/uploads/weeeb-T/4/3.jpg

الحين نبــداء بالثقيل ^_^

راح نضغط داخل الخليه ( الخليه = مربع صغير او جزء من الجدول )

لاحظ مكان الخليه الى راح ندرج فيها جدول ... نضغط داخليها كما بالرقم 1 ثم نضغط على الجدول كما بالرقم 2 وننشئ جدول من 3 اعمده و 3 صفوف

http://www.ashwae.com/up/uploads/weeeb-T/4/4.jpg

الحين الجدول الى سويناه .. نضغط داخله بالزر الأيمن .. ونختار خصائي الجدول

http://www.ashwae.com/up/uploads/weeeb-T/4/5.jpg

اعمل الاعدادات كما بالصوره

http://www.ashwae.com/up/uploads/weeeb-T/4/6.jpg

الحين اصبح المربع الى سويناه مربع صغير بدون حدود .. وهذا كله حتى نركب القائمه الجانبيه داخله .. الحين نضغط داخل الخليه الاولى على اليمين فوق كما بالرقم 1.. وندرج داخلها صوره . كما بالرقم 2

http://www.ashwae.com/up/uploads/weeeb-T/4/7.jpg

نختار الزاويه اليمنى .. واعتقد واضحه بعد التقطيع

http://www.ashwae.com/up/uploads/weeeb-T/4/8.jpg

الحين الخليه الى تحتها ندرج فيها .. صوره على شكل خلفيه . لماذا ؟ لانها منطقة تمدد .. تابع

http://www.ashwae.com/up/uploads/weeeb-T/4/9.jpg

نضغط على استعراض ونختار الصوره . او نكتب الرابط اذا حافظه

http://www.ashwae.com/up/uploads/weeeb-T/4/10.jpg

الحين جاء وقت شد الأطراف ^_^ حتى يكون التصميم راكب 100% تابع

نجي عند الدائره الى انا محددها بالصوره ... اذا تغير شكل مؤشر الفاره اضغط واسحب الى الاخير بتجاه السهم .. تابع

http://www.ashwae.com/up/uploads/weeeb-T/4/11.jpg

يصبح كالتالي

http://www.ashwae.com/up/uploads/weeeb-T/4/12.jpg

نعمل الان للجميع كما عملنا للخليتين الى شفناهن .. طبعا كلهن ادارج صوره الا المربع الى بالنص يكون خلفيه .. ينتج التالي :

http://www.ashwae.com/up/uploads/weeeb-T/4/13.jpg

الحين نجي للخليه الى بالنص ونضغط خصائص لتغيير لونها .. حتى يتناسق التصميم

http://www.ashwae.com/up/uploads/weeeb-T/4/14.jpg

نختار الرقم 1 ثم 2 كما بالصوره

http://www.ashwae.com/up/uploads/weeeb-T/4/15.jpg

نضغط الرقم 1 حتى نختار اللون على كيفنا .. ونحدد نفس اللون القريب من الخليه .. شاهد رقم 2 والعلامه الى موضحه امامه

http://www.ashwae.com/up/uploads/weeeb-T/4/16.jpg

الحين نجي للقائمة الوسطى

^_^




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

http://www.ashwae.com/up/uploads/weeeb-T/4/17.jpg

نعطي خصائص للمربع الجديد كما تلاحظ

http://www.ashwae.com/up/uploads/weeeb-T/4/18.jpg

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

الأن بعد شد الاطراف .. نضغط بالخليه الى بالوسط ونختار تقسيم الخلايا

http://www.ashwae.com/up/uploads/weeeb-T/4/19.jpg

نقسمها الى 3 اعمده

http://www.ashwae.com/up/uploads/weeeb-T/4/20.jpg

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

http://www.ashwae.com/up/uploads/weeeb-T/4/21.jpg


طبعا نضيف الهيدر header والفوتر( فوق وتحت ) بنفس الطريقه لأن الصعب فقط في القوائم .. واعتقد الان اتضحت الصوره للجميع ^_^

هذا الشكل النهائي

http://www.ashwae.com/up/uploads/weeeb-T/4/22.jpg

وهذا شكل القائمة اليمنى مع الوصلات

http://www.ashwae.com/up/uploads/weeeb-T/4/23.jpg


حمل الملفات المطلوبه من هنـــــــــــــــــــــاااااااااااااا (http://www.ashwae.com/up/uploads/weeeb-T/4/HTML.zip)


وكل عام وانتم بخيــــــــــــــــــر


الدرس مفصل من أعداد بدر العنزي

منتديات عشوائي

www.vb.ashwae.com (http://www.vb.ashwae.com)



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