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

[الرحال 1]

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

الحمد لله رب العالمين، والصلاة والسلام على رسوله الكريم ..

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

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

مثلا تلاحظ هنا ان صفحة منتدى عشاق تكبر اذا قمت بتكبير شاشة المتصفح وتصغر اذا قمت بتصغيرها .. وتكون على استطالة الصفحة بنسبة 100% ...

كذلك الحال بالنسبة لموقع عشاق ... فصفحته متمددة ...

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

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

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

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

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

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

http://www.yourimagelink.com/pics/44674438f11311f34a.png

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

http://www.yourimagelink.com/pics/150999438f115e21d14.png

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

http://www.yourimagelink.com/pics/766716438f1171419f3.png

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

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

http://www.yourimagelink.com/pics/295798438f1185553a2.png

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

http://www.yourimagelink.com/pics/719657438f122066e3d.png

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

http://www.yourimagelink.com/pics/948153438f1197a5e4a.png

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

http://www.yourimagelink.com/pics/702931438f11a5618d5.png

ستصبح هكذا ..

http://www.yourimagelink.com/pics/109477438f11b2d6cab.png

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

http://www.yourimagelink.com/pics/255295438f11d0d9577.png

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

http://www.yourimagelink.com/pics/667703438f1236473af.png

http://www.yourimagelink.com/pics/523579438f12495863d.png

http://www.yourimagelink.com/pics/492112438f125e64acb.png

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

http://www.yourimagelink.com/pics/532397438f127433ed3.png

سيصبح هكذا

http://www.yourimagelink.com/pics/919491438f1286ba45e.png

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

http://www.yourimagelink.com/pics/404224438f12983b630.png

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

http://www.yourimagelink.com/pics/618545438f12e03e175.png

http://www.yourimagelink.com/pics/886448438f12bda4808.png

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


الآن دعونا نأخذ مثال بسيط لكيفية اختيار منطقة التمدد ..!

افرض أن لديك مثل هذه الصورة بصفحة الموقع

http://www.yourimagelink.com/pics/246611438f13d9d6606.jpg

كيف نجعلها تتمدد ...

أولا يجب علينا اختيار منطقة معينة تصلح لأن تكون منطقة تمدد ... لاحظ اختياري في الصورة ..!

http://www.yourimagelink.com/pics/478031438f13ecd6725.jpg

ثم علينا أن نقسم تلك الصورة الى عدة صور من ظمنها صورة خاصة بمنطقة التمدد ..

الجزء الأيسر:

http://www.yourimagelink.com/pics/839633438f132e96457.jpg

منطقة التمدد:

http://www.yourimagelink.com/pics/962908438f133df31a5.jpg

الجزء الأيمن:

http://www.yourimagelink.com/pics/436045438f13532d6da.jpg

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

http://www.yourimagelink.com/pics/943350438f1401be208.png

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

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

مع تحيات

اخوكم /الرحال الغريب

[الوفاء طبعي]

وايد وربي جميل لا هنت تقبل التحية والاحترام يالغالي


اتمنى المزيد والمفيد من مشاركاتك لا هنت تقبل التحية

[الرحال 1]

تســــــــلم اخوي معمر على ردك الجمييييل

[الوجيـه]

يسلمووووووووووووووووو








لا هنت





تحياتي