الويب العربي - كيف اجعل موقعي يناسب جميع الشاشات

أخي الكريم قمت بشرح الدرس كما وعدتك ووضعته في موضوع مستقل وتجده على هذه العناوين:
http://www.mghol.com/vb/showthread.php?t=8028

http://www.arabwebtalk.com/showthread.php?t=33220

وإليك الشرح:

السلام عليكم ورحمة الله وبركاته

كثير من أصحاب المواقع يبحث عن شرح لكيفية جعل واجهة موقعه أو أي صفحة كانت تتعامل تلقائياً مع مقاسات الشاشة سواء 800 *600 أو 1024*768 .... الخ , وهنا سأحاول الشرح بدعمه بصور توضيحية ولا نريد سوى الدعاء .

الطريقة تعتمد على (الهيدر) والهيدر يطلق على رأس التصميم , وسنبدأ الشرح بالهيدر الخاص بشبكة عالم المجهول
http://www.mghol.com/vb/

ولكي نحافظ على محتوى الدرس للأجيال القادمة , قمت بحفظ الصور حتى لو تغير الستايل أو التصميم يكون موجود لدينا العمل هنا مرفق مع الشرح .
صورة توضيحية للهيدر:

كيف نقوم بعمل هيدر يتمدد على حساب مقاس الشاشة ؟
نعمل جدول في الفرونت بيج مكون من ثلاث خانات :
الخانة الأولى : تكون على اليمين وعادةً نضع فيها شعار الموقع
الخانة الثانية : تكون في الوسط وهي (البؤرة) النقطة الرئيسية للتمدد .
الخانة الثالثة : وتكون في الميسرة (الجهة اليسرى) وعادةً تكون بنر للموقع أو مساحة إعلانية .

وهذهِ صورة من خلال عملنا في الفرونت بيج يوضح لنا كيفية تهيأة الجدول :

في الخانة الأولى قلنا هي خانة شعار الموقع ووضعنا هذا الشعار :

في الخانة الثانية وهي (منطقة التمدد) وضعنا خلفية لونية أو خلفية صورة , وضعنا هذهِ الصورة كخلفية:

نضعها من خلال الفرونت بيج , نضع الماوس على المنطقة الوسطى التي نريدها أن تكون منطقة التمدد ونضغط بيمين الماوس ونختار (خصائص الخلية) وبعدها نضع في قائمة الخلفية الصورة التي نريدها عبر كلمة استعراض ؛ لاحظ الصورة :

وفي الخانة الثالثة نضع الصورة المكملة للتصميم أو بنر دعائي كما في شبكة عالم المجهول

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

الصورة الأساسية هي هذه , لاحظ صغرها :

يجب أن تكون الصورة المستخدمة لخلفية منطقة التمدد سادة أو بمؤثرات أفقية ,حتى لاتؤثر في انضباط واتزان التصميم اذا تمددت , وأنت من خلال هذا العمل ستفهم مقصدي, الصورة ستتمدد على هذا النحو تلقائياً :

لاحظت كيف يكون التعامل التلقائي ببساطة ؟

لكل تصميم أختلافات , أحياناً تكون منطقة التمدد الأولى وأحياناً وسطية وأحياناً الآخيرة , من يحدد المنطقة الرئيسية للتمدد هو عملك وتصميمك .

هناك تصاميم لا يمكن أن تزرع فيها منطقة تمدد , لأنك لو وضعت ستكون مشوهة وتخرب تناشق العمَل , لذا من الأفضل للمصمم أن يستخدم البساطة في العمَل والتنسيق في الهيدر لكي يتعامل مع مقاسات الشاشات بدون وضع مؤثرات في منطقة التمدد .

أتمنى أن أكون وفقت في شرح العمَل , وما نطلبه هو الدعاء لا غير .