بسم الله الرحمن الرحيم
الحمد لله رب العالمين، والصلاة والسلام على رسوله الكريم ..
:: درس في كيفية جعل صفحة الموقع تتمدد بتمدد شاشة المتصفح ::
نشاهد جميعاً بعض صفحات المواقع تتمدد كلما كبرت شاشة المتصفح .. وتصغر بصغرها كذلك ...
طريقة عمل التمدد سهلة للغاية ... واليوم سنقوم بشرحها ..
نحتاج طبعا لبرنامج الفرونت بيج للعمل عليه ...
سنأخذ مثال توضيحي فقط ... ويقاس عليه كل الاشياء الاخرى ...
لنبدأ على بركة الله ...
1) نفتح البرنامج ... ونبدأ بصفحة جديدة
2) نقوم بإدراج جدول مكون من ثلاث خانات بالطول وبالعرض ..
3) على الجدول نقوم بالضغط بالزر الايمن للفأرة .. ونختار خصائص الجدول ..
ثم نجعل الخصائص كما بالصورة ..
لاحظ أننا قمنا بجعل الجدول متمدد بنسبة 100% حتى تكون الصفحة متمددة ..
ستصبح الصفحة هكذا ..
![ط§ط¶ط؛ط· ط¹ظ„ظ‰ ط§ظ„طµظˆط±ط© ظ„ط±ط¤ظٹطھظ‡ط§ ط¨ط§ظ„طط¬ظ… ط§ظ„ط·ط¨ظٹط¹ظٹ](http://www.beetco.com/vb/images/statusicon/wol_error.gif)
هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 550x232 .
4) الآن سنأخذ بعض الصور كمثال .. وسندرجها بالجدول ..
سنقوم الآن بإدراجها من خلال قائمة إدراج >> إدراج صورة من مجلد
![ط§ط¶ط؛ط· ط¹ظ„ظ‰ ط§ظ„طµظˆط±ط© ظ„ط±ط¤ظٹطھظ‡ط§ ط¨ط§ظ„طط¬ظ… ط§ظ„ط·ط¨ظٹط¹ظٹ](http://www.beetco.com/vb/images/statusicon/wol_error.gif)
هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 550x208 .
لاحظ الصور وأماكن إدراجها ..
![ط§ط¶ط؛ط· ط¹ظ„ظ‰ ط§ظ„طµظˆط±ط© ظ„ط±ط¤ظٹطھظ‡ط§ ط¨ط§ظ„طط¬ظ… ط§ظ„ط·ط¨ظٹط¹ظٹ](http://www.beetco.com/vb/images/statusicon/wol_error.gif)
هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 550x479 .
ستصبح هكذا ..
![ط§ط¶ط؛ط· ط¹ظ„ظ‰ ط§ظ„طµظˆط±ط© ظ„ط±ط¤ظٹطھظ‡ط§ ط¨ط§ظ„طط¬ظ… ط§ظ„ط·ط¨ظٹط¹ظٹ](http://www.beetco.com/vb/images/statusicon/wol_error.gif)
هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 550x138 .
5) الآن يبقى لدينا صور مناطق التمدد ..
لجعل الصور متمددة فإننا ندرجها على شكل خلفية .. وليس على شكل صورة .. لاحظ ..
ثم ندرج باقي الصور بنفس الطريقة
سيصبح هكذا
![ط§ط¶ط؛ط· ط¹ظ„ظ‰ ط§ظ„طµظˆط±ط© ظ„ط±ط¤ظٹطھظ‡ط§ ط¨ط§ظ„طط¬ظ… ط§ظ„ط·ط¨ظٹط¹ظٹ](http://www.beetco.com/vb/images/statusicon/wol_error.gif)
هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 550x275 .
6) الآن نقوم بسحب أطراف الخلايا ..
![ط§ط¶ط؛ط· ط¹ظ„ظ‰ ط§ظ„طµظˆط±ط© ظ„ط±ط¤ظٹطھظ‡ط§ ط¨ط§ظ„طط¬ظ… ط§ظ„ط·ط¨ظٹط¹ظٹ](http://www.beetco.com/vb/images/statusicon/wol_error.gif)
هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 550x265 .
لنرى الناتج النهائي ..
![ط§ط¶ط؛ط· ط¹ظ„ظ‰ ط§ظ„طµظˆط±ط© ظ„ط±ط¤ظٹطھظ‡ط§ ط¨ط§ظ„طط¬ظ… ط§ظ„ط·ط¨ظٹط¹ظٹ](http://www.beetco.com/vb/images/statusicon/wol_error.gif)
هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 550x258 .
![ط§ط¶ط؛ط· ط¹ظ„ظ‰ ط§ظ„طµظˆط±ط© ظ„ط±ط¤ظٹطھظ‡ط§ ط¨ط§ظ„طط¬ظ… ط§ظ„ط·ط¨ظٹط¹ظٹ](http://www.beetco.com/vb/images/statusicon/wol_error.gif)
هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 700x256 .
------------------------------
تحياتي