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

[ناصر مهدى]

بسم الله الرحمن الرحيم
الحمد لله رب العالمين، والصلاة والسلام على رسوله الكريم ..
:: درس في كيفية جعل صفحة الموقع تتمدد بتمدد شاشة المتصفح ::
نشاهد جميعاً بعض صفحات المواقع تتمدد كلما كبرت شاشة المتصفح .. وتصغر بصغرها كذلك ...
طريقة عمل التمدد سهلة للغاية ... واليوم سنقوم بشرحها ..
نحتاج طبعا لبرنامج الفرونت بيج للعمل عليه ...
سنأخذ مثال توضيحي فقط ... ويقاس عليه كل الاشياء الاخرى ...
لنبدأ على بركة الله ...
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
------------------------------
منقول للفائدة
تحياتي

[ناصر مهدى]

الآن دعونا نأخذ مثال بسيط لكيفية اختيار منطقة التمدد ..!
افرض أن لديك مثل هذه الصورة بصفحة الموقع ..
http://absba6.absba.org/teamwork7/saif02/246310/246611438f13d9d6606.jpg
كيف نجعلها تتمدد ...
أولا يجب علينا اختيار منطقة معينة تصلح لأن تكون منطقة تمدد ... لاحظ اختياري في الصورة ..!
http://absba6.absba.org/teamwork7/saif02/246310/478031438f13ecd6725.jpg
ثم علينا أن نقسم تلك الصورة الى عدة صور من ظمنها صورة خاصة بمنطقة التمدد ..
الجزء الأيسر:
http://absba6.absba.org/teamwork7/saif02/246310/839633438f132e96457.jpg
منطقة التمدد:
http://absba6.absba.org/teamwork7/saif02/246310/962908438f133df31a5.jpg
الجزء الأيمن:
http://absba6.absba.org/teamwork7/saif02/246310/436045438f13532d6da.jpg
بعد ذلك نقوم بإدراج الصور .. وكذلك بإدراج صورة منطقة التمدد على شكل خلفية .. لنحصل على شكل متمدد ..
http://absba6.absba.org/teamwork7/saif02/246310/208.png
-----------------------
وبهذه الطريقة تستطيع عمل صفحة موقعك بشكل متمدد ... وقس على ذلك عمل استايلات المنتديات المتمددة .. وثيمات المجلات ... لانها في النهاية هي نفس الطريقة المستخدمة ... !
اتمنى أكون وفقت في شرح الطريقة .. نسألكم الدعاء.
هذا الدرس منقول للفائده

[Mostafa Megahed]

شكرا يا كبير على الشرح

جزاك الله كل خير ..

[diabian.sakr]

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
بارك الله فيك اخى الكريم
على النقل الجيد
بارك الله فيك
ادامك الله لنا يا غالى
اخوك
احمد صقر

[ناصر مهدى]

الشكر لله يا احمد

[Salman Design]

تسلم ياغالى بجد شرح رائع

\

[abadi]

تجربة تجربة تجربة تجربة تجربة تجربة تجربة تجربة
تجربة تجربة تجربة تجربة تجربة تجربة تجربة تجربة تجربة
تجربة تجربة تجربة تجربة تجربة تجربة تجربة تجربة تجربة تجربة

[abadi]

يا مصطفى انا مضيع وارجو منكم التوضيح
كيفية المشاركة او طرح موضوع
عفوا انا جديد على المنتديات

يوجد ازارير ارغب في تجربتا

سوال : اقدر اخصص كتابتي واسئلتي لك لوحدك علشان ما نضحك الناس عليا
هل سيصلني جواب

[abadi]

سامحوني عمال اتعلم

في عندي ملف ارغب في نشرة ، للدكتور علي شراب ، الموضوع عن القائد و المدير

[abadi]

اكتر شيء مضيع الطارة هو عجلة الماوس
اطلع فوق وانزل تحت بسرعة رهيبة وماني عارف ايش .... الخ

المفيد عندي اشياء للنشر هل من طريق ؟

[abadi]

تسلم ياغالى بجد شرح رائع
\

وين يكتبون
وين يردون
انا بجرب والباقي على الله

[raed mohammed]

شكراً يا غالي على الشرح الممتاز

[ناصر مهدى]

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

[ahmed##]

يا جماعة ممكن حد يكلمنى

[ناصر مهدى]

ياغالى ماهو فى شرح فى الموضوع