|
جعل الموقع يتعامل تلقائياً مع مقاسات الشاشة
السلام عليكم ورحمة الله وبركاته كثير من أصحاب المواقع يبحث عن شرح لكيفية جعل واجهة موقعه أو أي صفحة كانت تتعامل تلقائياً مع مقاسات الشاشة سواء 800 *600 أو 1024*768 .... الخ , وهنا سأحاول الشرح بدعمه بصور توضيحية ولا نريد سوى الدعاء . الطريقة تعتمد على (الهيدر) والهيدر يطلق على رأس التصميم , وسنبدأ الشرح بالهيدر الخاص بشبكة عالم المجهول http://www.mghol.com/vb/ ولكي نحافظ على محتوى الدرس للأجيال القادمة , قمت بحفظ الصور حتى لو تغير الستايل أو التصميم يكون موجود لدينا العمل هنا مرفق مع الشرح . صورة توضيحية للهيدر:  كيف نقوم بعمل هيدر يتمدد على حساب مقاس الشاشة ؟ نعمل جدول في الفرونت بيج مكون من ثلاث خانات : الخانة الأولى : تكون على اليمين وعادةً نضع فيها شعار الموقع الخانة الثانية : تكون في الوسط وهي (البؤرة) النقطة الرئيسية للتمدد . الخانة الثالثة : وتكون في الميسرة (الجهة اليسرى) وعادةً تكون بنر للموقع أو مساحة إعلانية . وهذهِ صورة من خلال عملنا في الفرونت بيج يوضح لنا كيفية تهيأة الجدول :  في الخانة الأولى قلنا هي خانة شعار الموقع ووضعنا هذا الشعار :  في الخانة الثانية وهي (منطقة التمدد) وضعنا خلفية لونية أو خلفية صورة , وضعنا هذهِ الصورة كخلفية:  نضعها من خلال الفرونت بيج , نضع الماوس على المنطقة الوسطى التي نريدها أن تكون منطقة التمدد ونضغط بيمين الماوس ونختار (خصائص الخلية) وبعدها نضع في قائمة الخلفية الصورة التي نريدها عبر كلمة استعراض ؛ لاحظ الصورة :  وفي الخانة الثالثة نضع الصورة المكملة للتصميم أو خلفية لنفس الصورة وبداخل الخانة جدول كما هو موضح اعلاه للإعلانات أو بنر دعائي كما في شبكة عالم المجهول  لكي نتعرف على منطقة التمدد أكثر سأضع الصورة الأساسية بنفس الحجم اللتي استخدمتها خلفية لمنطقة التمدد لهذا الهيدر , وأضع تصوير لكيفية التمدد وتعامل الشاشة تلقائي مع الصفحة الصورة الأساسية هي هذه , لاحظ صغرها :  يجب أن تكون الصورة المستخدمة لخلفية منطقة التمدد سادة أو بمؤثرات أفقية ,حتى لاتؤثر في انضباط واتزان التصميم اذا تمددت , وأنت من خلال هذا العمل ستفهم مقصدي, الصورة ستتمدد على هذا النحو تلقائياً :   لاحظت كيف يكون التعامل التلقائي ببساطة ؟ لكل تصميم أختلافات , أحياناً تكون منطقة التمدد الأولى وأحياناً وسطية وأحياناً الآخيرة , من يحدد المنطقة الرئيسية للتمدد هو عملك وتصميمك . هناك تصاميم لا يمكن أن تزرع فيها منطقة تمدد , لأنك لو وضعت ستكون مشوهة وتخرب تناشق العمَل , لذا من الأفضل للمصمم أن يستخدم البساطة في العمَل والتنسيق في الهيدر لكي يتعامل مع مقاسات الشاشات بدون وضع مؤثرات في منطقة التمدد . أتمنى أن أكون وفقت في شرح العمَل , وما نطلبه هو الدعاء لا غير . مجهول |
رغبة مني في توضيح الرؤية أكثر وتبسيط الشرح للمتلقي سأسترسل فيه عبر هيدر الويب العربي سنأخذ هيدر الويب العربي إلى الفرونت بيج وسيتضح لنا العمل انه على هذهِ الهيئة:  الويب العربي جدول الهيدر من ثلاث خانات خانة وضع فيها الشعار (logo)  والخانة الثانية والثالثة وضع فيهم خلفية هذهِ الصورة:  صغيرة جداً ولكنها تتمدد تلقائي دون أن تترك تشوه في العمل أو تمايل أو تخبط قم بتمديدها عبر برنامج رسومي كالفوتوشوب وستلاحظ انها تتمدد بدون أن تفقد دقتها ووضع فوق الخانة الثالثة (في الجهة اليسرى) اعلان فوق خلفية الصورة التي استخدمها بواسطة (ارفاق صورة) وليس خلفية صورة , ووضع هذا الإعلان  هل اتضحت الصورة ؟ |
مشكور وماقصّرت أخوي مجهول
وأحب أضيف أنه لو قابل أي شخص صاحب موقع أو منتدى ظهور شريط في أسفل المتصفح فليتأكد بأن السبب من الهيدر وعليه مراجعة أكواد الجداول والتأكد بأن عرض الجداول 100% ويأن عرض الصور لم يتجاوز 780 بكسل :) تحيّاتي أبومساعد |
مشكور اخوي على هذا الشرح الرائع والوافي
جزاك الله 1000 خير تحياتي |
شكراً يا مجهول
دائماً شروحك تكون واضحة وسهلة يستحق التثبيت لفائدته |
راااااااااااااائع أخي الحبيب
وانا فعلا أطبق ذلك فى موقعي شكرا لك , |
الله يعطيك العافيه
شرح ممتاز |
الأخ أبو مساعد , يا هلا بك وشكراً لاضافتك المفيدة .
الاخوة جميعاً ؛ شكراً جميعاً وأملنا أن يتم الاستفادة من الشرح والابتعاد عن المؤثرات التي تعيق تمدد الموقع وظهوره بشكل مرن وسهل للمتصفح . |
ماشاء الله درس جيد وشرح و افي جعله الله قي ميزان حسناتك
|
درس ممتاز وشرح متميز
|
مشكور على جهدك
|
جازاكم الله خيرا
|
الاخوة جميعاً / السلام عليكم
شكراً لمروركم ونتمنى أن يتم الاستفادة من الشرح |
شكور جدا جدا تعمل جيد
|
والله انك عجيب الي مصمم موقعي عامل فيها دينصور وشركه رمسيه وبرمجه خاصه وماعرف شو ههههههههههههههههههههههههه
هاذه موقعي نفس البرمجه www.chat4dubai.com شكرا اخوي |
اخوي انا موقعي على هاذي البرمجه تصممه تصممه لي ولك سعرك اخوي لانه اكثر الشركات ما عرفوا يصمومه ويقولون برمجه خاصه وماعرف ايش
ونا من فتره ادور احد يصمملي وكنت اتوقع انه مافي احد بيقدر يصمملي غير المصمم في دبي تبع الشركه الرسميه وهو من اصل اجنبي مايعرف لصاميم العربيه فياريت تضيفني اخوي ادفعلك انته ولا ادفع حق ناس تقولي برمجه خاصه واسعار خياليه ولا الشركه الرسميه الي تحصل فوائد كثير chat4dubai@msn.com |
شكرا لك اخوي
بالتوفيق.. |
| جميع الأوقات بتوقيت مكة المكرمة. الساعة الآن » 06:57 AM. |
Powered by vBulletin
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Copyright © ArabWebTalk.Com 2004-2012