السلام عليكم ورحمة الله وبركاته
دائما يعاني المصمم من مشكلة التمدد وعدم التوافق مع جميع الدقات بحيث يظهر التصميم صغير عند التصفح بدقة
اكبر من 800*600
فحبيت اطرح لكم طريقة جديدة تخلصكم من عناء التمدد
وهي طريقة لتمديد الاستايل بواسطة ال css
للمعلومية هي ليست تمدد بالمعنى المعروف ولكنها لعبة بسيطة تستخدم بواسطة المتغير class="tmdd" وربما هي معروفة لدى الجميع بواسطة الخلفية الثابتة هي تقريبا نفس الفكرة ولكن تستخدم الخلفية هذه المرة كتكملة للتصميم
الفكرة بإختصار : بعد الانتهاء من تقطيع وتركيب الاستايل بشكل عادي جدا سوف تقوم بتصميم استايل وتكملته
بواسطة الفوتوشوب ليصبح عرض الاستايل 1002 بكسل ثم تجعل الصورة الجديدة كخلفية للجدول بواسطة ال
css
وهنا مثال للمعاينه
[وحدهم المشرفون لديهم صلاحيات معاينة هذا الرابط]
نبدا الشرح ونتوكل على الله سوف يكون الشرح على الهدر الخاص بلاستايل ونفس الموضوع مع الفوتر
بعد الانتهاء من تصميمك نقوم بفتح الاستايل على الفوتوشوب
نقوم بفتح الهدر ثم من قائمة image نقوم بإختيار Canvas size
نقوم بإختيار عرض التصميم 1002 بكسل كما موضح
هذه الحركة تزيد من عرض الصفحة دون زيادة عرض التصميم وسوف تلاحظ تكون فراغات على يميين ويسار
التصميم كما موضح
الحين انت وشطارتك بالتصميم
عليك تكملة التصميم الخاص بك ليصبح مناسب وبشكل انيق على العرض الجديد وكذلك عليك جعله ايضا متناسق مع دقة 800 يعني تقريبا هذه الطريقة تعتمد على ابداع المصمم
انا كملت التصميم وظهر معي كالتالي
هنا صورة التصميم قبل التكملة
وهنا الصورة بعد التكملة (قصدت ادراج الصور بالتصميم والمنحنيات حتى اوضح ان الطريقة تناسب الكل)
كما يمكنك عكس العملية بمعنى انك تقوم بتصميم الاستايل من البداية على الدقة 1002 وتصغره بعد ذلك ليصبح
مناسب مع دقة 776
اللى تشوفه اريح لك سويه
طيب الحين بالنسبة للتصميم الخاص بالعرض 776 سوف نقوم بتقطيعه وتوزيع باي طريقة تريدها او من خلال
الطرق العادية ماراح تفرق معنا
اما التصميم الخاص بالدقة 1002 فسوف نقوم بتقطيعه على شكل صورة واحدة
بعد ذلك تقوم بفتح برنامج الدريم ويفر وتصنع فئة بسيطة تحتوي على صورة عرضها 100% وغير قابلة
للتكرار وذات محاذاة للوسط
وهذا مثال
بعد ذلك نتوجه الى قالب الهدر الخاص بنا سوف نلاحظ الجدول به كالتالي
نقوم بإضافة الفئة الى الجدول
ليصبح
والملاحظ هو اضافة الفئة الى الجدول
مع مراعاة تغيير الاسماء
ربما تحدث لديك بعض الفراغات في الصور على حسب تقطيعك وتوزيع لذلك يفضل لحل هذه المشكلة جعل جميع
الصور خلية واحدة عن طريق دمج الخلايا
يمكنك ايضا تجميل التصميم عن طريق اضافة خلفية ثابتة في الوسط بواسطة الجافا سكربت والدوال الشرطية بحيث
لا تظهر الخلفية الا لمستخدمين الدقة الاعلى من 1024
مثال
كما يمكنك جعل عرض التصميم 1270 ومن ثم جعل الخلفية مناسب مع الدقات 800 و 1024 وكذلك
1280
وينتج لك في النهاية تصميم جميل وانيق ومتوافق مع جميع دقات العرض بطريقة جميلة وجديدة
في النهاية اسال الله ان ينال الشرح اعجابكم
وان تنال الفكرة اعجاب الجميع
دائما يعاني المصمم من مشكلة التمدد وعدم التوافق مع جميع الدقات بحيث يظهر التصميم صغير عند التصفح بدقة
اكبر من 800*600
فحبيت اطرح لكم طريقة جديدة تخلصكم من عناء التمدد
وهي طريقة لتمديد الاستايل بواسطة ال css
للمعلومية هي ليست تمدد بالمعنى المعروف ولكنها لعبة بسيطة تستخدم بواسطة المتغير class="tmdd" وربما هي معروفة لدى الجميع بواسطة الخلفية الثابتة هي تقريبا نفس الفكرة ولكن تستخدم الخلفية هذه المرة كتكملة للتصميم
الفكرة بإختصار : بعد الانتهاء من تقطيع وتركيب الاستايل بشكل عادي جدا سوف تقوم بتصميم استايل وتكملته
بواسطة الفوتوشوب ليصبح عرض الاستايل 1002 بكسل ثم تجعل الصورة الجديدة كخلفية للجدول بواسطة ال
css
وهنا مثال للمعاينه
[وحدهم المشرفون لديهم صلاحيات معاينة هذا الرابط]
نبدا الشرح ونتوكل على الله سوف يكون الشرح على الهدر الخاص بلاستايل ونفس الموضوع مع الفوتر
بعد الانتهاء من تصميمك نقوم بفتح الاستايل على الفوتوشوب
نقوم بفتح الهدر ثم من قائمة image نقوم بإختيار Canvas size
نقوم بإختيار عرض التصميم 1002 بكسل كما موضح
هذه الحركة تزيد من عرض الصفحة دون زيادة عرض التصميم وسوف تلاحظ تكون فراغات على يميين ويسار
التصميم كما موضح
الحين انت وشطارتك بالتصميم
عليك تكملة التصميم الخاص بك ليصبح مناسب وبشكل انيق على العرض الجديد وكذلك عليك جعله ايضا متناسق مع دقة 800 يعني تقريبا هذه الطريقة تعتمد على ابداع المصمم
انا كملت التصميم وظهر معي كالتالي
هنا صورة التصميم قبل التكملة
وهنا الصورة بعد التكملة (قصدت ادراج الصور بالتصميم والمنحنيات حتى اوضح ان الطريقة تناسب الكل)
كما يمكنك عكس العملية بمعنى انك تقوم بتصميم الاستايل من البداية على الدقة 1002 وتصغره بعد ذلك ليصبح
مناسب مع دقة 776
اللى تشوفه اريح لك سويه
طيب الحين بالنسبة للتصميم الخاص بالعرض 776 سوف نقوم بتقطيعه وتوزيع باي طريقة تريدها او من خلال
الطرق العادية ماراح تفرق معنا
اما التصميم الخاص بالدقة 1002 فسوف نقوم بتقطيعه على شكل صورة واحدة
بعد ذلك تقوم بفتح برنامج الدريم ويفر وتصنع فئة بسيطة تحتوي على صورة عرضها 100% وغير قابلة
للتكرار وذات محاذاة للوسط
وهذا مثال
الكود:
[/b][color=#000000][font=Simplified Arabic Fixed][b][color=#007700].[/color][color=#0000bb]tmdd [/color][/b][/font][font=Simplified Arabic Fixed][b][color=#007700]{
[/color][color=#0000bb]height[/color][color=#007700]: [/color][color=#0000bb]190px[/color][/b][/font][font=Simplified Arabic Fixed][b][color=#007700];
[/color][color=#0000bb]width[/color][color=#007700]: [/color][color=#0000bb]100[/color][/b][/font][font=Simplified Arabic Fixed][b][color=#007700]%;
[/color][color=#0000bb]background[/color][color=#007700]-[/color][color=#0000bb]image[/color][color=#007700]: [/color][/b][/font][font=Simplified Arabic Fixed][b][color=#0000bb]url
[/color][color=#007700]([/color][color=#0000bb]lesson[/color][color=#007700]/[/color][color=#0000bb]images[/color][color=#007700]/[/color][color=#0000bb]background[/color][color=#007700].[/color][color=#0000bb]gif[/color][/b][/font][font=Simplified Arabic Fixed][b][color=#007700]);
[/color][color=#0000bb]background[/color][color=#007700]-[/color][color=#0000bb]repeat[/color][color=#007700]: [/color][color=#0000bb]no[/color][color=#007700]-[/color][color=#0000bb]repeat[/color][/b][/font][font=Simplified Arabic Fixed][b][color=#007700];
[/color][color=#0000bb]background[/color][color=#007700]-[/color][color=#0000bb]position[/color][color=#007700]: [/color][color=#0000bb]center[/color][/b][/font][b][color=#007700][font=Simplified Arabic Fixed];
} [/font]
[/color][/b][/color][b]بعد ذلك نتوجه الى قالب الهدر الخاص بنا سوف نلاحظ الجدول به كالتالي
الكود:
[/b][color=#000000][font=Simplified Arabic Fixed][b][color=#007700]<[/color][color=#0000bb]table width[/color][color=#007700]=[/color][color=#dd0000]"776" [/color][color=#0000bb]height[/color][color=#007700]=[/color][color=#dd0000]"190" [/color][color=#0000bb]border[/color][color=#007700]=[/color][/b][/font][font=Simplified Arabic Fixed][b][color=#dd0000]"0"
[/color][color=#0000bb]cellpadding[/color][color=#007700]=[/color][color=#dd0000]"0" [/color][color=#0000bb]cellspacing[/color][color=#007700]=[/color][color=#dd0000]"0"[/color][/b][/font][b][color=#007700][font=Simplified Arabic Fixed]> [/font]
[/color][/b][/color][b]نقوم بإضافة الفئة الى الجدول
ليصبح
الكود:
[/b][color=#000000][font=Simplified Arabic Fixed][b][color=#007700]<[/color][color=#0000bb]table [/color][color=#007700]class=[/color][color=#dd0000]"tmdd" [/color][color=#0000bb]width[/color][color=#007700]=[/color][color=#dd0000]"776" [/color][color=#0000bb]height[/color][color=#007700]=[/color][color=#dd0000]"190" [/color][color=#0000bb]border[/color][color=#007700]=[/color][/b][/font][font=Simplified Arabic Fixed][b][color=#dd0000]"0"
[/color][color=#0000bb]cellpadding[/color][color=#007700]=[/color][color=#dd0000]"0" [/color][color=#0000bb]cellspacing[/color][color=#007700]=[/color][color=#dd0000]"0"[/color][/b][/font][b][color=#007700][font=Simplified Arabic Fixed]> [/font]
[/color][/b][/color][b]والملاحظ هو اضافة الفئة الى الجدول
الكود:
[color=#000000][font=Simplified Arabic Fixed][color=#007700]class=[/color][color=#dd0000]"tmdd" [/color][/font][/color]مع مراعاة تغيير الاسماء
ربما تحدث لديك بعض الفراغات في الصور على حسب تقطيعك وتوزيع لذلك يفضل لحل هذه المشكلة جعل جميع
الصور خلية واحدة عن طريق دمج الخلايا
يمكنك ايضا تجميل التصميم عن طريق اضافة خلفية ثابتة في الوسط بواسطة الجافا سكربت والدوال الشرطية بحيث
لا تظهر الخلفية الا لمستخدمين الدقة الاعلى من 1024
مثال
الكود:
[/b][color=#000000][font=Simplified Arabic Fixed][b][color=#007700]<[/color][color=#0000bb]script type[/color][color=#007700]=[/color][color=#dd0000]"text/javascript"[/color][/b][/font][font=Simplified Arabic Fixed][b][color=#007700]>
if ([/color][color=#0000bb]screen[/color][color=#007700].[/color][color=#0000bb]width[/color][color=#007700]<=[/color][color=#0000bb]800[/color][/b][/font][font=Simplified Arabic Fixed][b][color=#007700])
{
[/color][color=#0000bb]document[/color][color=#007700].[/color][color=#0000bb]write[/color][color=#007700]([/color][/b][/font][color=#dd0000][font=Simplified Arabic Fixed][b]'
'[/b][/font][/color][font=Simplified Arabic Fixed][b][color=#007700]);
}
else
{
[/color][color=#0000bb]document[/color][color=#007700].[/color][color=#0000bb]write[/color][color=#007700]([/color][/b][/font][color=#dd0000][font=Simplified Arabic Fixed][b]'
'[/b][/font][/color][font=Simplified Arabic Fixed][b][color=#007700]);
}
[/color]
[/b][/font][/color][b]كما يمكنك جعل عرض التصميم 1270 ومن ثم جعل الخلفية مناسب مع الدقات 800 و 1024 وكذلك
1280
وينتج لك في النهاية تصميم جميل وانيق ومتوافق مع جميع دقات العرض بطريقة جميلة وجديدة
في النهاية اسال الله ان ينال الشرح اعجابكم
وان تنال الفكرة اعجاب الجميع
