من طرف السلام عليكم ورحمة الله وبركاته
دائما يعاني المصمم من مشكلة التمدد وعدم التوافق مع جميع الدقات بحيث يظهر التصميم صغير عند التصفح بدقة
اكبر من 800*600
فحبيت اطرح لكم طريقة جديدة تخلصكم من عناء التمدد
وهي طريقة لتمديد الاستايل بواسطة ال css
للمعلومية هي ليست تمدد بالمعنى المعروف ولكنها لعبة بسيطة تستخدم بواسطة المتغير class="tmdd" وربما هي معروفة لدى الجميع بواسطة الخلفية الثابتة هي تقريبا نفس الفكرة ولكن تستخدم الخلفية هذه المرة كتكملة للتصميم
الفكرة بإختصار : بعد الانتهاء من تقطيع وتركيب الاستايل بشكل عادي جدا سوف تقوم بتصميم استايل وتكملته
بواسطة الفوتوشوب ليصبح عرض الاستايل 1002 بكسل ثم تجعل الصورة الجديدة كخلفية للجدول بواسطة ال
css
وهنا مثال للمعاينه
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
نبدا الشرح ونتوكل على الله سوف يكون الشرح على الهدر الخاص بلاستايل ونفس الموضوع مع الفوتر
بعد الانتهاء من تصميمك نقوم بفتح الاستايل على الفوتوشوب
نقوم بفتح الهدر ثم من قائمة image نقوم بإختيار Canvas size
نقوم بإختيار عرض التصميم 1002 بكسل كما موضح
هذه الحركة تزيد من عرض الصفحة دون زيادة عرض التصميم وسوف تلاحظ تكون فراغات على يميين ويسار
التصميم كما موضح
الحين انت وشطارتك بالتصميم
عليك تكملة التصميم الخاص بك ليصبح مناسب وبشكل انيق على العرض الجديد وكذلك عليك جعله ايضا متناسق مع دقة 800 يعني تقريبا هذه الطريقة تعتمد على ابداع المصمم
انا كملت التصميم وظهر معي كالتالي
هنا صورة التصميم قبل التكملة
وهنا الصورة بعد التكملة (قصدت ادراج الصور بالتصميم والمنحنيات حتى اوضح ان الطريقة تناسب الكل)
كما يمكنك عكس العملية بمعنى انك تقوم بتصميم الاستايل من البداية على الدقة 1002 وتصغره بعد ذلك ليصبح
مناسب مع دقة 776
اللى تشوفه اريح لك سويه
طيب الحين بالنسبة للتصميم الخاص بالعرض 776 سوف نقوم بتقطيعه وتوزيع باي طريقة تريدها او من خلال
الطرق العادية ماراح تفرق معنا
اما التصميم الخاص بالدقة 1002 فسوف نقوم بتقطيعه على شكل صورة واحدة
بعد ذلك تقوم بفتح برنامج الدريم ويفر وتصنع فئة بسيطة تحتوي على صورة عرضها 100% وغير قابلة
للتكرار وذات محاذاة للوسط
وهذا مثال
رمز PHP:
.tmdd {
height: 190px;
width: 100%;
background-image: url
(lesson/images/background.gif);
background-repeat: no-repeat;
background-position: center;
}
بعد ذلك نتوجه الى قالب الهدر الخاص بنا سوف نلاحظ الجدول به كالتالي
رمز PHP:
<table width="776" height="190" border="0"
cellpadding="0" cellspacing="0">
نقوم بإضافة الفئة الى الجدول
ليصبح
رمز PHP:
<table class="tmdd" width="776" height="190" border="0"
cellpadding="0" cellspacing="0">
والملاحظ هو اضافة الفئة الى الجدول
رمز PHP:
class="tmdd"
مع مراعاة تغيير الاسماء
ربما تحدث لديك بعض الفراغات في الصور على حسب تقطيعك وتوزيع لذلك يفضل لحل هذه المشكلة جعل جميع
الصور خلية واحدة عن طريق دمج الخلايا
يمكنك ايضا تجميل التصميم عن طريق اضافة خلفية ثابتة في الوسط بواسطة الجافا سكربت والدوال الشرطية بحيث
لا تظهر الخلفية الا لمستخدمين الدقة الاعلى من 1024
مثال
رمز PHP:
<script type="text/javascript">
if (screen.width<=800)
{
document.write('<style type="text/css"><!--body
{background-image: url(nb-alqlob/images/s-
bg.jpg);background-repeat:repeat-y;background-position:
center;}--></style>');
}
else
{
document.write('<style type="text/css"><!--body
{background-image: url(nb-alqlob/images/s-
bg.jpg);background-repeat:repeat-y;background-position:
center;}--></style>');
}
</script>
كما يمكنك جعل عرض التصميم 1270 ومن ثم جعل الخلفية مناسب مع الدقات 800 و 1024 وكذلك
1280
وينتج لك في النهاية تصميم جميل وانيق ومتوافق مع جميع دقات العرض بطريقة جميلة وجديدة
في النهاية اسال الله ان ينال الشرح اعجابكم
وان تنال الفكرة اعجاب الجميع
والله يوفقكم جميعا
دائما يعاني المصمم من مشكلة التمدد وعدم التوافق مع جميع الدقات بحيث يظهر التصميم صغير عند التصفح بدقة
اكبر من 800*600
فحبيت اطرح لكم طريقة جديدة تخلصكم من عناء التمدد
وهي طريقة لتمديد الاستايل بواسطة ال css
للمعلومية هي ليست تمدد بالمعنى المعروف ولكنها لعبة بسيطة تستخدم بواسطة المتغير class="tmdd" وربما هي معروفة لدى الجميع بواسطة الخلفية الثابتة هي تقريبا نفس الفكرة ولكن تستخدم الخلفية هذه المرة كتكملة للتصميم
الفكرة بإختصار : بعد الانتهاء من تقطيع وتركيب الاستايل بشكل عادي جدا سوف تقوم بتصميم استايل وتكملته
بواسطة الفوتوشوب ليصبح عرض الاستايل 1002 بكسل ثم تجعل الصورة الجديدة كخلفية للجدول بواسطة ال
css
وهنا مثال للمعاينه
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
نبدا الشرح ونتوكل على الله سوف يكون الشرح على الهدر الخاص بلاستايل ونفس الموضوع مع الفوتر
بعد الانتهاء من تصميمك نقوم بفتح الاستايل على الفوتوشوب
نقوم بفتح الهدر ثم من قائمة image نقوم بإختيار Canvas size
نقوم بإختيار عرض التصميم 1002 بكسل كما موضح
هذه الحركة تزيد من عرض الصفحة دون زيادة عرض التصميم وسوف تلاحظ تكون فراغات على يميين ويسار
التصميم كما موضح
الحين انت وشطارتك بالتصميم
عليك تكملة التصميم الخاص بك ليصبح مناسب وبشكل انيق على العرض الجديد وكذلك عليك جعله ايضا متناسق مع دقة 800 يعني تقريبا هذه الطريقة تعتمد على ابداع المصمم
انا كملت التصميم وظهر معي كالتالي
هنا صورة التصميم قبل التكملة
وهنا الصورة بعد التكملة (قصدت ادراج الصور بالتصميم والمنحنيات حتى اوضح ان الطريقة تناسب الكل)
كما يمكنك عكس العملية بمعنى انك تقوم بتصميم الاستايل من البداية على الدقة 1002 وتصغره بعد ذلك ليصبح
مناسب مع دقة 776
اللى تشوفه اريح لك سويه
طيب الحين بالنسبة للتصميم الخاص بالعرض 776 سوف نقوم بتقطيعه وتوزيع باي طريقة تريدها او من خلال
الطرق العادية ماراح تفرق معنا
اما التصميم الخاص بالدقة 1002 فسوف نقوم بتقطيعه على شكل صورة واحدة
بعد ذلك تقوم بفتح برنامج الدريم ويفر وتصنع فئة بسيطة تحتوي على صورة عرضها 100% وغير قابلة
للتكرار وذات محاذاة للوسط
وهذا مثال
رمز PHP:
.tmdd {
height: 190px;
width: 100%;
background-image: url
(lesson/images/background.gif);
background-repeat: no-repeat;
background-position: center;
}
بعد ذلك نتوجه الى قالب الهدر الخاص بنا سوف نلاحظ الجدول به كالتالي
رمز PHP:
<table width="776" height="190" border="0"
cellpadding="0" cellspacing="0">
نقوم بإضافة الفئة الى الجدول
ليصبح
رمز PHP:
<table class="tmdd" width="776" height="190" border="0"
cellpadding="0" cellspacing="0">
والملاحظ هو اضافة الفئة الى الجدول
رمز PHP:
class="tmdd"
مع مراعاة تغيير الاسماء
ربما تحدث لديك بعض الفراغات في الصور على حسب تقطيعك وتوزيع لذلك يفضل لحل هذه المشكلة جعل جميع
الصور خلية واحدة عن طريق دمج الخلايا
يمكنك ايضا تجميل التصميم عن طريق اضافة خلفية ثابتة في الوسط بواسطة الجافا سكربت والدوال الشرطية بحيث
لا تظهر الخلفية الا لمستخدمين الدقة الاعلى من 1024
مثال
رمز PHP:
<script type="text/javascript">
if (screen.width<=800)
{
document.write('<style type="text/css"><!--body
{background-image: url(nb-alqlob/images/s-
bg.jpg);background-repeat:repeat-y;background-position:
center;}--></style>');
}
else
{
document.write('<style type="text/css"><!--body
{background-image: url(nb-alqlob/images/s-
bg.jpg);background-repeat:repeat-y;background-position:
center;}--></style>');
}
</script>
كما يمكنك جعل عرض التصميم 1270 ومن ثم جعل الخلفية مناسب مع الدقات 800 و 1024 وكذلك
1280
وينتج لك في النهاية تصميم جميل وانيق ومتوافق مع جميع دقات العرض بطريقة جميلة وجديدة
في النهاية اسال الله ان ينال الشرح اعجابكم
وان تنال الفكرة اعجاب الجميع
والله يوفقكم جميعا
» الان صمم موقعك في خمس خطوات بسيطة(مع الشرح)
» فن تسويق المنتج
» فن تسويق المنتج
» <iframe name="I1" width="651" height="4349" src="mr.x@xxx.com">
» اختراق الاجهزة عن طريق ال ip
» ارجوا المساعده
» برنامج الداونلود اكسلريتور وهو من اروع البرامج لتسريع تنزيل الملفات من الإنترنت
» Templates for free برنامج جميل جدا باستطاعته ان يعطيك ويحرر قوالب جديدة لصفحتك
» xara webstyle , بالإصدار الرابع ,لتصميم كل رسومات الويب
» وفاة المدرب العراقي الاسطورة عمو بابا
» كأس القارات: الفيفا يرفض الاحتجاج المصري
» إنتر ميلان بتسعة لاعبين يسقط ميلان ويغرد وحيدا على قمة الدوري
» سر جمالك هنا !!!
» طريقة نشر منتداك في جوجل و محركات البحث---حصري---
» تقدم شركة برنامج البث المباشر (بامبيوزر) حسابات كاملة بدون إعلانات
» مشكلة انخفاض عدد متابعي الصفحات على فيسبوك
» رونالدو ـ جميع التصريحات التي نسبت لي غير صحيحة
» تعرّفي على الخلطات الطبيعية للعناية بالشعر وتغذيته
» Accelerate 2003 v4.0 Retail برنامج لزيادة سرعة اتصالك بالانترنت حقيقي وفعال , بعد تنصيبه وتفعيله بالفعل ستشعر الفرق
» يرنامج SMS-it! المجاني يسمح لك بإرسال قصيرة و مسجات إلى أي هاتف محمول عن طريق الحاسوب الشخصي
» Oxygen Phone Manager for Symbian phones برنامج اوكسجين لادارة جميع انواع الموبايلات و الهواتف الذكية التي تستخدم نظام سيمبيان
» i.Xchange Mobile Partner MT A02 1 برنامج جميل ويسهل من تنظيم الرسايل في جوالك.
» برنامج Nokia PC Suite هو برنامج رسمي ومجاني من الشركة المصنعة الشهيرة .نوكيا. للهواتف النفالة
» هذا البرنامج BlackBerry Database Viewer خاص لمستخمدي جهاز بلاك بيري black berry
» Quick Slide Shown هذا البرنامج والادوات العديدة الموجودة فيه تستطيع بسهولة انشاء افلام فلاش بصيغ عديدة.
» ميرو من افضل البرامج التي تساعدك على تحميل الفيديو من الانترنت والتعامل معها على جهازك
» subtitle workshop 2.51 subtitle workshop 2.51 من اقوى البرامج في مجال ترجمة الافلام والفيديوهات.
» Coollector موسوعة الافلام ويكيبيديا للأفلام
» بالـ css طريقه صنع زر نشط يتغير عند مرور الماوس عليه بسهولة
» الان وحصريا ... اسهل واقوى طريقة لاحاطة وتاطير جميع القوالب بإستخدام Css
» وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css
» إستيل المنتدى الإسلامي هديه لكل أعضاء منتدانا الكرام
» تصميم وتطوير مواقع الانترنت
» اشتري دردشة 123 فلاش شات واحصل على الدومين والاستضافة مجانا
» Snake Eye Vision برنامج عبارة عن نسخ تقنية او نسخ قدرة عين الافعى وتحويلها الى تقنية وكتابتها كبرنامج
» Times Tables هل طفلك يواجه صعوبة في تنظيم وقته ؟ ليس لديك الوقت لتساعد طفلك ايضا ؟
» Basic Algebra Shape-Up برنامج متميز من البرامج التفاعلية والتعليمية الرياضية الذي يهدف إلى تبسيط الجبر بحيث يعلم الطلاب إنشاء الصيغ الرياضية
» Math Games Level 1 Math Games Level 1 هذا البرنامج التعليمي المختص بتعليم الرياضيات منذ البداية من جمع وضرب من الرقم 1 حتى 12
» MultipliK12 لعبة تعليمية تختص بتقوية مهارات الطفل الحسابية بشكل ممتع و شيق يحث الطفل على على التعلم و ينمي لديه حب تعلم الرياضيات.