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

بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته

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

نشاهد جميعاً بعض صفحات المواقع تتمدد كلما كبرت شاشة المتصفح .. وتصغر بصغرها كذلك ...

طريقة عمل التمدد سهلة للغاية ... واليوم سنقوم بشرحها ..

نحتاج طبعا لبرنامج الفرونت بيج للعمل عليه ...

سنأخذ مثال توضيحي فقط ... ويقاس عليه كل الاشياء الاخرى ...

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

1) نفتح البرنامج ... ونبدأ بصفحة جديدة

2) نقوم بإدراج جدول مكون من ثلاث خانات بالطول وبالعرض ..

https://mwadah.com/images/imgcache/2009/05/54.png

3) على الجدول نقوم بالضغط بالزر الايمن للفأرة .. ونختار خصائص الجدول ..

https://mwadah.com/images/imgcache/2009/05/55.png

ثم نجعل الخصائص كما بالصورة ..

https://mwadah.com/images/imgcache/2009/05/56.png

لاحظ أننا قمنا بجعل الجدول متمدد بنسبة 100% حتى تكون الصفحة متمددة ..

ستصبح الصفحة هكذا ..

https://mwadah.com/images/imgcache/2009/05/57.png

4) الآن سنأخذ بعض الصور كمثال .. وسندرجها بالجدول ..

https://mwadah.com/images/imgcache/2009/05/58.png

سنقوم الآن بإدراجها من خلال قائمة إدراج >> إدراج صورة من مجلد

https://mwadah.com/images/imgcache/2009/05/59.png

لاحظ الصور وأماكن إدراجها ..

https://mwadah.com/images/imgcache/2009/05/60.png

ستصبح هكذا ..

https://mwadah.com/images/imgcache/2009/05/61.png

5) الآن يبقى لدينا صور مناطق التمدد ..

https://mwadah.com/images/imgcache/2009/05/62.png

لجعل الصور متمددة فإننا ندرجها على شكل خلفية .. وليس على شكل صورة .. لاحظ ..

https://mwadah.com/images/imgcache/2009/05/63.png

https://mwadah.com/images/imgcache/2009/05/64.png

https://mwadah.com/images/imgcache/2009/05/65.png

ثم ندرج باقي الصور بنفس الطريقة

https://mwadah.com/images/imgcache/2009/05/66.png

سيصبح هكذا

https://mwadah.com/images/imgcache/2009/05/67.png

6) الآن نقوم بسحب أطراف الخلايا ..

https://mwadah.com/images/imgcache/2009/05/68.png

لنرى الناتج النهائي ..

https://mwadah.com/images/imgcache/2009/05/69.png

انتهى الشرح الحمد الله
منقول للفائدة

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

سلمت يدك

الله يسلمك

و موفق بإذن الله ... لك مني أجمل تحية .