كيفية جعل الواجهة interface متمددة

[loulou ange]

بسم الله الرحمن الرحيم
الحمد لله رب العالمين، والصلاة والسلام على رسوله الكريم ..
:: درس مفصل في كيفية جعل صفحة الموقع تتمدد بتمدد شاشة المتصفح ::
نشاهد جميعاً بعض صفحات المواقع تتمدد كلما كبرت شاشة المتصفح .. وتصغر بصغرها كذلك ...
طريقة عمل التمدد سهلة للغاية ... واليوم سنقوم بشرح طريقةها ..
نحتاج طبعا لبرنامج الفرونت بيج للعمل عليه ...
سنأخذ مثال توضيحي فقط ... ويقاس عليه كل الاشياء الاخرى ...
لنبدأ على بركة الله ...
1) نفتح البرنامج ... ونبدأ بصفحة جديدة
2) نقوم بإدراج جدول مكون من ثلاث خانات بالطول وبالعرض ..
http://absba6.absba.org/teamwork7/saif02/246310/44674438f11311f34a.png
3) على الجدول نقوم بالضغط بالزر الايمن للفأرة .. ونختار خصائص الجدول ..
http://absba6.absba.org/teamwork7/saif02/246310/150999438f115e21d14.png
ثم نجعل الخصائص كما بالصورة ..
http://absba6.absba.org/teamwork7/saif02/246310/766716438f1171419f3.png
لاحظ أننا قمنا بجعل الجدول متمدد بنسبة 100% حتى تكون الصفحة متمددة ..
ستصبح الصفحة هكذا ..



http://absba6.absba.org/teamwork7/saif02/246310/295798438f1185553a2.png
4) الآن سنأخذ بعض الصور كمثال .. وسندرجها بالجدول ..
http://absba6.absba.org/teamwork7/saif02/246310/719657438f122066e3d.png
سنقوم الآن بإدراجها من خلال قائمة إدراج >> إدراج صورة من مجلد
http://absba6.absba.org/teamwork7/saif02/246310/948153438f1197a5e4a.png
لاحظ الصور وأماكن إدراجها ..
http://absba6.absba.org/teamwork7/saif02/246310/702931438f11a5618d5.png
ستصبح هكذا ..
http://absba6.absba.org/teamwork7/saif02/246310/109477438f11b2d6cab.png
5) الآن يبقى لدينا صور مناطق التمدد ..
http://absba6.absba.org/teamwork7/saif02/246310/255295438f11d0d9577.png
لجعل الصور متمددة فإننا ندرجها على شكل خلفية .. وليس على شكل صورة .. لاحظ ..
http://absba6.absba.org/teamwork7/saif02/246310/667703438f1236473af.png
http://absba6.absba.org/teamwork7/saif02/246310/523579438f12495863d.png
http://absba6.absba.org/teamwork7/saif02/246310/492112438f125e64acb.png
ثم ندرج باقي الصور بنفس الطريقة
http://absba6.absba.org/teamwork7/saif02/246310/532397438f127433ed3.png
سيصبح هكذا
http://absba6.absba.org/teamwork7/saif02/246310/919491438f1286ba45e.png
6) الآن نقوم بسحب أطراف الخلايا ..
http://absba6.absba.org/teamwork7/saif02/246310/404224438f12983b630.png
لنرى الناتج النهائي ..
http://absba6.absba.org/teamwork7/saif02/246310/175.png
http://absba6.absba.org/teamwork7/saif02/246310/886448438f12bda4808.png
------------------------------
منقول للفائدة
تحياتي









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