مشكله فى تصميم ستايل ساعدونى الله يكرمكم

crazy.works

 

 

الساحرالمحب

اخي الكريم

أنت عن طريق أي برنامج

تقطع وتضيف الصور ؟



وهل تعرف طريقة وضع نقطة التمدد؟


اخي انصحك بتصميم الهدر

على برنامج الفرونت بيج


_________________________

وهذه طريقة أخرى

لكيفية التصميم بواسطة CSS






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

دائما يعاني المصمم من مشكلة التمدد وعدم التوافق مع جميع الدقات بحيث يظهر التصميم صغير عند التصفح بدقة

اكبر من 800*600

فحبيت اطرح لكم طريقة جديدة تخلصكم من عناء التمدد

وهي طريقة لتمديد الاستايل بواسطة ال css

للمعلومية هي ليست تمدد بالمعنى المعروف ولكنها لعبة بسيطة تستخدم بواسطة المتغير class="tmdd" وربما هي معروفة لدى الجميع بواسطة الخلفية الثابتة هي تقريبا نفس الفكرة ولكن تستخدم الخلفية هذه المرة كتكملة للتصميم

الفكرة بإختصار : بعد الانتهاء من تقطيع وتركيب الاستايل بشكل عادي جدا سوف تقوم بتصميم استايل وتكملته

بواسطة الفوتوشوب ليصبح عرض الاستايل 1002 بكسل ثم تجعل الصورة الجديدة كخلفية للجدول بواسطة ال

css

وهنا مثال للمعاينه

http://zozika.net/test/index.php?styleid=4

نبدا الشرح ونتوكل على الله سوف يكون الشرح على الهدر الخاص بلاستايل ونفس الموضوع مع الفوتر

بعد الانتهاء من تصميمك نقوم بفتح الاستايل على الفوتوشوب

نقوم بفتح الهدر ثم من قائمة image نقوم بإختيار Canvas size



نقوم بإختيار عرض التصميم 1002 بكسل كما موضح

هذه الحركة تزيد من عرض الصفحة دون زيادة عرض التصميم وسوف تلاحظ تكون فراغات على يميين ويسار

التصميم كما موضح



الحين انت وشطارتك بالتصميم

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

انا كملت التصميم وظهر معي كالتالي

هنا صورة التصميم قبل التكملة



وهنا الصورة بعد التكملة (قصدت ادراج الصور بالتصميم والمنحنيات حتى اوضح ان الطريقة تناسب الكل)



كما يمكنك عكس العملية بمعنى انك تقوم بتصميم الاستايل من البداية على الدقة 1002 وتصغره بعد ذلك ليصبح

مناسب مع دقة 776

اللى تشوفه اريح لك سويه

طيب الحين بالنسبة للتصميم الخاص بالعرض 776 سوف نقوم بتقطيعه وتوزيع باي طريقة تريدها او من خلال

الطرق العادية ماراح تفرق معنا

اما التصميم الخاص بالدقة 1002 فسوف نقوم بتقطيعه على شكل صورة واحدة

بعد ذلك تقوم بفتح برنامج الدريم ويفر وتصنع فئة بسيطة تحتوي على صورة عرضها 100% وغير قابلة

للتكرار وذات محاذاة للوسط

وهذا مثال


رمز PHP:

(lesson/images/background.gif);
background-repeat: no-repeat;
background-position: center;
}

بعد ذلك نتوجه الى قالب الهدر الخاص بنا سوف نلاحظ الجدول به كالتالي


رمز PHP:

cellpadding="0" cellspacing="0">

نقوم بإضافة الفئة الى الجدول

ليصبح

رمز PHP:

cellpadding="0" cellspacing="0">

والملاحظ هو اضافة الفئة الى الجدول


رمز PHP:



مع مراعاة تغيير الاسماء

ربما تحدث لديك بعض الفراغات في الصور على حسب تقطيعك وتوزيع لذلك يفضل لحل هذه المشكلة جعل جميع

الصور خلية واحدة عن طريق دمج الخلايا

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

لا تظهر الخلفية الا لمستخدمين الدقة الاعلى من 1024

مثال


رمز PHP:

{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

وينتج لك في النهاية تصميم جميل وانيق ومتوافق مع جميع دقات العرض بطريقة جميلة وجديدة

في النهاية اسال الله ان ينال الشرح اعجابكم

وان تنال الفكرة اعجاب الجميع

والله يوفقكم جميعا


_______________________________________
منقووووووووووووووووووول لمساعده الأخ