شرح كيفية جعل صفحة الموقع تتمدد بتمدد شاشة المتصفح

[عاشق النت]

بسم الله الرحمن الرحيم
الحمد لله رب العالمين، والصلاة والسلام على رسوله الكريم ..
:: درس في كيفية جعل صفحة الموقع تتمدد بتمدد شاشة المتصفح ::
نشاهد جميعاً بعض صفحات المواقع تتمدد كلما كبرت شاشة المتصفح .. وتصغر بصغرها كذلك ...
طريقة عمل التمدد سهلة للغاية ... واليوم سنقوم بشرحها ..
نحتاج طبعا لبرنامج الفرونت بيج للعمل عليه ...
سنأخذ مثال توضيحي فقط ... ويقاس عليه كل الاشياء الاخرى ...
لنبدأ على بركة الله ...
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://www.beetco.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 550x232 .http://absba6.absba.org/teamwork7/saif02/246310/295798438f1185553a2.png

4) الآن سنأخذ بعض الصور كمثال .. وسندرجها بالجدول ..
http://absba6.absba.org/teamwork7/saif02/246310/719657438f122066e3d.png

سنقوم الآن بإدراجها من خلال قائمة إدراج >> إدراج صورة من مجلد
http://www.beetco.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 550x208 .http://absba6.absba.org/teamwork7/saif02/246310/948153438f1197a5e4a.png

لاحظ الصور وأماكن إدراجها ..
http://www.beetco.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 550x479 .http://absba6.absba.org/teamwork7/saif02/246310/702931438f11a5618d5.png

ستصبح هكذا ..
http://www.beetco.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 550x138 .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://www.beetco.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 550x275 .http://absba6.absba.org/teamwork7/saif02/246310/919491438f1286ba45e.png

6) الآن نقوم بسحب أطراف الخلايا ..
http://www.beetco.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 550x265 .http://absba6.absba.org/teamwork7/saif02/246310/404224438f12983b630.png

لنرى الناتج النهائي ..
http://www.beetco.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 550x258 .http://absba6.absba.org/teamwork7/saif02/246310/175.png


http://www.beetco.com/vb/images/statusicon/wol_error.gifهذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 700x256 .http://absba6.absba.org/teamwork7/saif02/246310/886448438f12bda4808.png

------------------------------

تحياتي

[القلم الأحمر]

مشكور على الموضوع و الشرح المتميزين
دائما متألق كما عودتنا في أمان الله