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