جعل الموقع يتعامل تلقائياً مع مقاسات الشاشة

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

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

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

لدينا العمل هنا مرفق مع الشرح .

صورة توضيحية للهيدر:




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

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




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





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





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





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



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

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



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

http://www.mghol.com/dros/site600-800/4.gif

http://www.mghol.com/dros/site600-800/1.gif

http://www.mghol.com/dros/site600-800/2.gif

http://www.mghol.com/dros/site600-800/3.gif

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

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

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

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

منقول

ان شاء الله استفدتو منه


هاوي قصيد

الله ينور عليك مثل مانورة علينا بالموضوع الحلو

تسلم اخوي فارس


اتمنى استفدت



مشكوور على المرور

مشكوووووووووووووووور على الموضوع المفيد

مشكور اخوي

رائع بارك الله فيك

تحياتى لك

ما شاء الله
موضوع حلو

جميل جداً
موفق

شكرا لك اخوي