منتديات التاريخ المنسي
<div style="text-align: center;"><img src="https://i.servimg.com/u/f27/11/57/48/93/m0dy_n10.gif"><br></div>


منتديات التاريخ المنسي
<div style="text-align: center;"><img src="https://i.servimg.com/u/f27/11/57/48/93/m0dy_n10.gif"><br></div>

منتديات التاريخ المنسي
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

منتديات التاريخ المنسيدخول

التاريخ المنسي


descriptionوداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css Emptyوداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css

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

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

اكبر من 800*600

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

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

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

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

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

css

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

[وحدهم المشرفون لديهم صلاحيات معاينة هذا الرابط]

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

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

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

وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css 1

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

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

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

وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css 2

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

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

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

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

وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css 3

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

وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css 4

كما يمكنك عكس العملية بمعنى انك تقوم بتصميم الاستايل من البداية على الدقة 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

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

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

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

descriptionوداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css Emptyرد: وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css

more_horiz
وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css 2305341217442403eu2
وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css W340

descriptionوداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css Emptyرد: وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css

more_horiz
يسلمووووو كروش على المجهودات

descriptionوداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css Emptyرد: وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css

more_horiz
شكراااااااا

descriptionوداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css Emptyرد: وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css

more_horiz
شكرا لك

descriptionوداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css Emptyرد: وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css

more_horiz
يعطيك الصحة موح بصح مافهمت والو هههههههههههههههههههههههههههههههههههه انا راسي تقيل فهاد العفايس
confused confused confused

descriptionوداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css Emptyرد: وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css

more_horiz
شكرااااااا

descriptionوداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css Emptyرد: وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css

more_horiz
شكرااااااا

descriptionوداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css Emptyرد: وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css

more_horiz
شكرااااااا

descriptionوداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css Emptyرد: وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css

more_horiz
مرسي

descriptionوداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css Emptyرد: وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css

more_horiz
شكرا
privacy_tip صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى