المساعد الشخصي الرقمي

عرض الإصدار الكامل : كيفية ضبط تصميم موقع بالفوتوشوب لجميع دقات الشاشة

زميل
30/10/2007, 06:51 PM
السلام عليكم ورحمة الله وبركاته
أخواني وأخواتي الكرام ..
قمت بتصميم موقع بالفوتوشوب .. وأريد ان اجعله مضبوطا لجميع دقات الشاشة ..
ولا اخفيكم أنني قد بدأت العمل غي ضبط بإستخدام برنامج الفرونت وضبط خصائص الجدول لتكون العرض والطول بالنسبة المئوية ولكن واجهته مشكله في تمدد الصور للتوافق مع جحم خلية الجدول .. وعندما قمت بتغير طول وعرض الصورة إلى النسبة المئوية ظهرت بحجم كبير وممدد أكثر من الأزم
هذا وأرجو من لديه الخبرة في التعامل في مثل هذه الأمور موافاتي به ..
مع خالص شكري لسعة صدركم
ALWALEED DOS
30/10/2007, 06:53 PM
والله ما ادري ..
سجن الأشواق
30/10/2007, 08:42 PM
:: درس في كيفية جعل صفحة الموقع تتمدد بتمدد شاشة المتصفح ::


نشاهد جميعاً بعض صفحات المواقع تتمدد كلما كبرت شاشة المتصفح .. وتصغر بصغرها كذلك ...


طريقة عمل التمدد سهلة للغاية ... واليوم سنقوم بشرحها ..



نحتاج طبعا لبرنامج الفرونت بيج للعمل عليه ...



سنأخذ مثال توضيحي فقط ... ويقاس عليه كل الاشياء الاخرى ...



لنبدأ على بركة الله ...


1) نفتح البرنامج ... ونبدأ بصفحة جديدة


2) نقوم بإدراج جدول مكون من ثلاث خانات بالطول وبالعرض ..

http://absba6.absba.org/teamwork7/saif02/246310/44674438f11311f34a.png




3) على الجدول نقوم بالضغط بالزر الايمن للفأرة .. ونختار خصائص الجدول ..


http://absba6.absba.org/teamwork7/saif02/246310/150999438f115e21d14.png




ثم نجعل الخصائص كما بالصورة ..

http://absba6.absba.org/teamwork7/saif02/246310/766716438f1171419f3.png







لاحظ أننا قمنا بجعل الجدول متمدد بنسبة 100% حتى تكون الصفحة متمددة ..



ستصبح الصفحة هكذا ..

http://absba6.absba.org/teamwork7/saif02/246310/295798438f1185553a2.png





4) الآن سنأخذ بعض الصور كمثال .. وسندرجها بالجدول ..


http://absba6.absba.org/teamwork7/saif02/246310/719657438f122066e3d.png




سنقوم الآن بإدراجها من خلال قائمة إدراج >> إدراج صورة من مجلد


http://absba6.absba.org/teamwork7/saif02/246310/948153438f1197a5e4a.png




لاحظ الصور وأماكن إدراجها ..


http://absba6.absba.org/teamwork7/saif02/246310/702931438f11a5618d5.png




ستصبح هكذا ..


http://absba6.absba.org/teamwork7/saif02/246310/109477438f11b2d6cab.png




5) الآن يبقى لدينا صور مناطق التمدد ..


http://absba6.absba.org/teamwork7/saif02/246310/255295438f11d0d9577.png




لجعل الصور متمددة فإننا ندرجها على شكل خلفية .. وليس على شكل صورة .. لاحظ ..


http://absba6.absba.org/teamwork7/saif02/246310/667703438f1236473af.png


http://absba6.absba.org/teamwork7/saif02/246310/523579438f12495863d.png

http://absba6.absba.org/teamwork7/saif02/246310/492112438f125e64acb.png





ثم ندرج باقي الصور بنفس الطريقة

http://absba6.absba.org/teamwork7/saif02/246310/532397438f127433ed3.png







سيصبح هكذا


http://absba6.absba.org/teamwork7/saif02/246310/919491438f1286ba45e.png




6) الآن نقوم بسحب أطراف الخلايا ..

http://absba6.absba.org/teamwork7/saif02/246310/404224438f12983b630.png







لنرى الناتج النهائي ..



http://absba6.absba.org/teamwork7/saif02/246310/175.png


@@@@@@ http-@@@@@="@@@@@@@-Language" @@@@@@@="en-us"> http://absba6.absba.org/teamwork7/saif02/246310/886448438f12bda4808.png (http://absba6.absba.org/teamwork7/saif02/246310/886448438f12bda4808.png)



------------------------------


منقول للفائدة
تحياتي
legend2000
31/10/2007, 09:50 PM
ملاحظة عند التصميم :

قم بالتركيز على نقاط التمدد
فمثلا عند تصميم بنر ( شعار ) ضع في الحسبان ان تتمدد الصفحه فتضع خلفيه للخليه بالجدول تشبه خلفيه البنر

ارجو ان تكون وصلت الفكره

وبالتوفيق
فـــ الأحلام ــتى
13/11/2007, 12:26 AM
السلام عليكم ,‘,‘


طبعًا أنا مصمم فوتو شوب لكن من بعد ما تقص الصور ويندرجن في الفرونت بيج دايركت ما يستوي أختلال في الصور المقصوصة,‘,‘,


لأن كل مل متر واحد يسبب في أختلال الجميع,‘,‘,



أريد توضيح لو سمحت,‘,‘,
سجن الأشواق
13/11/2007, 10:29 PM
لا ما يستوي إختلال إذا أتبعت الشرح ...
لاحظ أنك بتسوي منطقة تمدد عشان ما يصير أي إختلال
فـــ الأحلام ــتى
25/11/2007, 01:33 AM
اهااا

مشكوووووووووور أخوي على الشرح ,,,,,,,من بعد اليوم ما بندفع للشركات مقابل تعديل الموقع القابل للتمدد,‘,‘,


خخخخخخخخخخخخخ
عمان ويب
25/11/2007, 06:58 PM
:: درس في كيفية جعل صفحة الموقع تتمدد بتمدد شاشة المتصفح ::


نشاهد جميعاً بعض صفحات المواقع تتمدد كلما كبرت شاشة المتصفح .. وتصغر بصغرها كذلك ...


طريقة عمل التمدد سهلة للغاية ... واليوم سنقوم بشرحها ..



نحتاج طبعا لبرنامج الفرونت بيج للعمل عليه ...



سنأخذ مثال توضيحي فقط ... ويقاس عليه كل الاشياء الاخرى ...



لنبدأ على بركة الله ...


1) نفتح البرنامج ... ونبدأ بصفحة جديدة


2) نقوم بإدراج جدول مكون من ثلاث خانات بالطول وبالعرض ..

http://absba6.absba.org/teamwork7/saif02/246310/44674438f11311f34a.png




3) على الجدول نقوم بالضغط بالزر الايمن للفأرة .. ونختار خصائص الجدول ..


http://absba6.absba.org/teamwork7/saif02/246310/150999438f115e21d14.png




ثم نجعل الخصائص كما بالصورة ..

http://absba6.absba.org/teamwork7/saif02/246310/766716438f1171419f3.png







لاحظ أننا قمنا بجعل الجدول متمدد بنسبة 100% حتى تكون الصفحة متمددة ..



ستصبح الصفحة هكذا ..

http://absba6.absba.org/teamwork7/saif02/246310/295798438f1185553a2.png





4) الآن سنأخذ بعض الصور كمثال .. وسندرجها بالجدول ..


http://absba6.absba.org/teamwork7/saif02/246310/719657438f122066e3d.png




سنقوم الآن بإدراجها من خلال قائمة إدراج >> إدراج صورة من مجلد


http://absba6.absba.org/teamwork7/saif02/246310/948153438f1197a5e4a.png




لاحظ الصور وأماكن إدراجها ..


http://absba6.absba.org/teamwork7/saif02/246310/702931438f11a5618d5.png




ستصبح هكذا ..


http://absba6.absba.org/teamwork7/saif02/246310/109477438f11b2d6cab.png




5) الآن يبقى لدينا صور مناطق التمدد ..


http://absba6.absba.org/teamwork7/saif02/246310/255295438f11d0d9577.png




لجعل الصور متمددة فإننا ندرجها على شكل خلفية .. وليس على شكل صورة .. لاحظ ..


http://absba6.absba.org/teamwork7/saif02/246310/667703438f1236473af.png


http://absba6.absba.org/teamwork7/saif02/246310/523579438f12495863d.png

http://absba6.absba.org/teamwork7/saif02/246310/492112438f125e64acb.png





ثم ندرج باقي الصور بنفس الطريقة

http://absba6.absba.org/teamwork7/saif02/246310/532397438f127433ed3.png







سيصبح هكذا


http://absba6.absba.org/teamwork7/saif02/246310/919491438f1286ba45e.png




6) الآن نقوم بسحب أطراف الخلايا ..

http://absba6.absba.org/teamwork7/saif02/246310/404224438f12983b630.png







لنرى الناتج النهائي ..



http://absba6.absba.org/teamwork7/saif02/246310/175.png


@@@@@@ http-@@@@@="@@@@@@@-Language" @@@@@@@="en-us"> http://absba6.absba.org/teamwork7/saif02/246310/886448438f12bda4808.png (http://absba6.absba.org/teamwork7/saif02/246310/886448438f12bda4808.png)



------------------------------


منقول للفائدة
تحياتي


يعطيك الف عافية اخي سجين الاشواااق :)
فـــ الأحلام ــتى
13/12/2007, 04:22 PM
بس غذا كان لموقع وتمت تقطيع الصورة بشكل مبعثر أيش نسوي