كثير من أصحاب المواقع يبحث عن شرح لكيفية جعل واجهة موقعه أو أي صفحة كانت تتعامل تلقائياً مع مقاسات الشاشة سواء 800 *600 أو 1024*768 .... الخ , وهنا سأحاول الشرح بدعمه بصور توضيحية ولا نريد سوى الدعاء .
الطريقة تعتمد على (الهيدر) والهيدر يطلق على رأس التصميم , وسنبدأ الشرح بالهيدر الخاص بشبكة عالم المجهول http://www.mghol.com/vb/
ولكي نحافظ على محتوى الدرس للأجيال القادمة , قمت بحفظ الصور حتى لو تغير الستايل أو التصميم يكون موجود لدينا العمل هنا مرفق مع الشرح .
صورة توضيحية للهيدر:
كيف نقوم بعمل هيدر يتمدد على حساب مقاس الشاشة ؟
نعمل جدول في الفرونت بيج مكون من ثلاث خانات :
الخانة الأولى : تكون على اليمين وعادةً نضع فيها شعار الموقع
الخانة الثانية : تكون في الوسط وهي (البؤرة) النقطة الرئيسية للتمدد .
الخانة الثالثة : وتكون في الميسرة (الجهة اليسرى) وعادةً تكون بنر للموقع أو مساحة إعلانية .
وهذهِ صورة من خلال عملنا في الفرونت بيج يوضح لنا كيفية تهيأة الجدول :
في الخانة الأولى قلنا هي خانة شعار الموقع ووضعنا هذا الشعار :
في الخانة الثانية وهي (منطقة التمدد) وضعنا خلفية لونية أو خلفية صورة , وضعنا هذهِ الصورة كخلفية:
نضعها من خلال الفرونت بيج , نضع الماوس على المنطقة الوسطى التي نريدها أن تكون منطقة التمدد ونضغط بيمين الماوس ونختار (خصائص الخلية) وبعدها نضع في قائمة الخلفية الصورة التي نريدها عبر كلمة استعراض ؛ لاحظ الصورة :
وفي الخانة الثالثة نضع الصورة المكملة للتصميم أو خلفية لنفس الصورة وبداخل الخانة جدول كما هو موضح اعلاه للإعلانات أو بنر دعائي كما في شبكة عالم المجهول
لكي نتعرف على منطقة التمدد أكثر سأضع الصورة الأساسية بنفس الحجم اللتي استخدمتها خلفية لمنطقة التمدد لهذا الهيدر , وأضع تصوير لكيفية التمدد وتعامل الشاشة تلقائي مع الصفحة
الصورة الأساسية هي هذه , لاحظ صغرها :
يجب أن تكون الصورة المستخدمة لخلفية منطقة التمدد سادة أو بمؤثرات أفقية ,حتى لاتؤثر في انضباط واتزان التصميم اذا تمددت , وأنت من خلال هذا العمل ستفهم مقصدي, الصورة ستتمدد على هذا النحو تلقائياً :
لاحظت كيف يكون التعامل التلقائي ببساطة ؟
لكل تصميم أختلافات , أحياناً تكون منطقة التمدد الأولى وأحياناً وسطية وأحياناً الآخيرة , من يحدد المنطقة الرئيسية للتمدد هو عملك وتصميمك .
هناك تصاميم لا يمكن أن تزرع فيها منطقة تمدد , لأنك لو وضعت ستكون مشوهة وتخرب تناشق العمَل , لذا من الأفضل للمصمم أن يستخدم البساطة في العمَل والتنسيق في الهيدر لكي يتعامل مع مقاسات الشاشات بدون وضع مؤثرات في منطقة التمدد .
أتمنى أن أكون وفقت في شرح العمَل , وما نطلبه هو الدعاء لا غير .
رغبة مني في توضيح الرؤية أكثر وتبسيط الشرح للمتلقي سأسترسل فيه عبر هيدر الويب العربي
سنأخذ هيدر الويب العربي إلى الفرونت بيج وسيتضح لنا العمل انه على هذهِ الهيئة:
الويب العربي جدول الهيدر من ثلاث خانات
خانة وضع فيها الشعار (logo)
والخانة الثانية والثالثة وضع فيهم خلفية هذهِ الصورة:
صغيرة جداً ولكنها تتمدد تلقائي دون أن تترك تشوه في العمل أو تمايل أو تخبط
قم بتمديدها عبر برنامج رسومي كالفوتوشوب وستلاحظ انها تتمدد بدون أن تفقد دقتها
ووضع فوق الخانة الثالثة (في الجهة اليسرى) اعلان فوق خلفية الصورة التي استخدمها بواسطة (ارفاق صورة)
وليس خلفية صورة , ووضع هذا الإعلان
وأحب أضيف أنه لو قابل أي شخص صاحب موقع أو منتدى ظهور شريط في أسفل المتصفح فليتأكد بأن السبب من الهيدر وعليه مراجعة أكواد الجداول والتأكد بأن عرض الجداول 100% ويأن عرض الصور لم يتجاوز 780 بكسل
تحيّاتي
أبومساعد
آخر تعديل بواسطة أبومساعد ، 15-08-2006 الساعة 06:23 AM.
السبب: تعديل الإسم
اخوي انا موقعي على هاذي البرمجه تصممه تصممه لي ولك سعرك اخوي لانه اكثر الشركات ما عرفوا يصمومه ويقولون برمجه خاصه وماعرف ايش
ونا من فتره ادور احد يصمملي وكنت اتوقع انه مافي احد بيقدر يصمملي غير المصمم في دبي تبع الشركه الرسميه وهو من اصل اجنبي مايعرف لصاميم العربيه فياريت تضيفني اخوي ادفعلك انته ولا ادفع حق ناس تقولي برمجه خاصه واسعار خياليه ولا الشركه الرسميه الي تحصل فوائد كثير
جعل الموقع يتعامل تلقائياً مع مقاسات الشاشة
النمط المتتابع
