بحث متقدم | التسجيل
الويب العربي
  تسجيل دخول
 
   
   

  ملاحظة
الموقع متاح للإطلاع والقراءة فقط، المشاركة والمواضيع الجديدة غير متاحة حالياً لحين تطوير الموقع.




الموقع متاح للإطلاع والقراءة فقط، المشاركة والمواضيع الجديدة غير متاحة حالياً لحين تطوير الموقع.

عـودة للخلف   الويب العربي المركز التعليمي المجاني تطويرالمواقع

تطويرالمواقع تبادل خبرات ، سكربتات ، تصاميم ،استفسارات

موضوع مغلق اضف موضوع جديد
 
خيارات الموضوع طريقة العرض
 
قديم 25-07-2005, 08:20 PM
الصورة الشخصية لـ زمــzemamــام
زمــzemamــام زمــzemamــام غير متصل
عضو
 
تاريخ التسجيل: Oct 2004
مشاركة: 351
مستوى تقييم العضوية: 20
زمــzemamــام is on a distinguished road
الافتراضي درس مهم جداً : كيف تجعل تصميمك يتمدد على جميع مقاسات الشاشة , بالتفصيل الممل

بسم الله الرحمن الرحيم

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

من الامور المهمة جداً والتي يجب على المصمم اتقانها ومعرفتها هي خاصية تمديد التصميم على جميع مقاسات الشاشة

ونظراً لانعدام درس تفصيلي عن هذه الخاصية .. وكل ما وجدته عبارة عن نصائح بسيطة غير واضحة

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

قبل ان ندخل في الموضوع ساتحدث قليلاً عن الشاشات :

معروف ان للشاشات مقاسات مختلفة ومتعددة .. واشهرها واكثرها انتشاراً هو المقاس الاصغر .. وهو (( 800*600 )) , وهو المقاس الافتراضي والاكثر استخداماً في التصاميم , لكن ماذا يحصل ان صممت تصميم مختلف عن مقاس الشاشة ؟

اذا كان التصميم مصمم على مقاس اكبر من ((800*600 )) فإن المستخدم سيظطر للتحريك يميناً ويساراً حتى يطلع على الموقع .. وهذي العملية مزعجة جداً ولا يُقبل حصولها في التصاميم

الامر الآخر اذا كان التصميم مصمم على مقاس ((800*600 )) والمستخدم يستخدم دقة شاشة اكبر .. ما سيحصل هو ظهور فراغات على يمين ويسار الشاشة .. وهو امر ليس مزعج كما في الحالة الاولى , ولكن هناك حركة جميلة لتفادي وجود هذه الفراغات وهي تمديد التصميم لجعله يتمدد على جميع مقاسات الشاشة من اصغرها إلى اكبرها

المتطلبات :

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

الدرس :

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

سنشرح على مثال بسيط جداً حتى تفهم الفكرة وتبدأ انت بنفسك باعداد تطبيقات لا نهائية من الفكرة الاساسية .. سنعمل على مجرد خامة من لون واحد

1- افتح برنامج الفوتوشوب .. وافتح العمل بأي مقاس .. ضعه مثلاً (( 500*100 بكسل ))

2- ارسم مستطيل بأي لون تريد

3- الان وهذه الخطوة المهمة .. اذهب واختر اداة الـ (( Slice Tool )) انظر الصورة



4- اذهب للمستطيل .. واعمل في منتصف المستطيل مربع عرضه واحد او اثنين بكسل .. من اعلى المستطيل إلى اسفله .. وحدد الجهة اليمنى والجهة اليسار للمستطيل .. بذلك يكون لديك ثلاث مناطق محددة وهي المناطق المطلوبة .. انظر الصورة



5- اضغط على (( file )) ثم اضغط على (( Save For Web )) .. انظر الصورة



6- ستفتح لك نافذة جديدة .. فيها مجموعة اعدادات .. لك الحرية في تغييرها .. مثلاً وضع الصورة بصيغة (( gif )) او (( jpg )) او غيرها من الصيغ .. وايضاً تستطيع التحكم في جودة الصور .. اضغط على الجزء اللي ترغب بالتعديل عليه وتظهر لك الخواص

7- اذا انهيت الاعدادت اللي تحتاجها .. اضغط على (( save )) وتأكد من المكان اللي تضع الصورة فيه .. غالباً لما تضع الصور في مجلد معين يظهر لك مجلد آخر داخل المجلد الذي اخترته باسم (( images )) .. بمعنى اوضح .. لنفترض انك ترغب بحفظ الصور في ملف المستندات واخترت المستندات وضغطت حفظ .. لن تظهر لك مباشرة في المستندات .. ما سيحصل هو ظهور مجلد جديد باسم (( images )) وستجد الصور بداخله

8- بعد عملية الحفظ ستظهر لك الاجزاء التي حددتها مع بقية الاجزاء الاخرى التي لم تحددها .. غير مهم .. نحن نحتاج الاجزاء التي حددناها .. انظر الصورة (( التي حددتها بالاحمر هي الاجزاء المطلوبة وهي التي حددناها سابقاً باداة الـ (( Slice Tool ))




بانتهائنا من الجزء المتعلق بالفوتوشوب نكون قد انتهينا من الجزء الاكبر .. ولم يبقى إلا اليسير باذن الله

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

1- اضف جدول من ثلاث خانات

2- حدد الجدول ثم اضغط باليمين ثم اذهب إلى خصائص الجدول واجعل اتجاه الجدول من اليمين إلى اليسار .. واجعل حجم الحدود = صفر .. انظر الصورة



3- اذهب للخلية التي في المنتصف واذهب إلى خصائص الخلية .. واجعل تمددها بنسبة (( 100% )) واجعل لها خلفية وتكون الخلفية هي الصورة التي حددناها وجعلنا عرضها 1 او 2 بيكسل .. انظر للصورة



4- بعد ذلك اذهب للمجلد الذي يحتوي على الصور .. واعمل نسخ للصورة اليمنى والصقها في الخلفية اليمنى .. واعمل نسخ للصورة اليسرى واعمل لصق في الخلية اليسرى

5- سيظهر لك مثل التالي :



بكذا انتهى الدرس ولله الحمد .. ولم يتبقى إلا خطوات بسيطة يعرفها اغلب المصممين .. طبعاً بعد حفظ العمل .. تعمل تغيير لامتداد الصور إلى الامتداد الذي سيكون هو مجلد الصور في موقعك .. مثلاً انا سأضع الصور في مجلد في موقعي اسمه (( img )) .. فيه عدة طرق للتعديل .. ساشرح اسهلها :

1- اضغط على الصورة باليمين ثم اضغط من القائمة على خصائص الصورة .. بعد دخولك للخصائص اضغط على ايقونة عام في الاعلى .. ومن هناك عدل امتداد الصورة إلى الامتداد اللي تريده .. انظر الصورة



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

ملاحظة مهمة : هذه العملية مهمة جداً لتصميم السكربتات مثل المنتديات والمجلات حيث ان الصور تكون في مكان آخر غير المجلد الرئيسي .. في هذه الحالة اذا اردت رفع الصفحة مباشرة بدون تعديل الامتداد فلا يوجد اشكالية .. لكن ضع الصور في نفس المجلد الذي تضع فيه الصفحة

الآن هناك حركة جمالية اخيرة اذا اردت فعلها فهي جميلة .. وهي الغاء الفراغات اعلى واسفل وجوانب الصفحة

وطريقتها كالتالي :

اضغط على اي مكان فارغ في الصفحة باليمين .. ثم اضغط على خصائص الصفحة ثم اذهب إلى خيارات متقدمة .. ستجد مجموعة من الهوامش .. ضعها جميعاً اصفار اذا اردت ازالة الفراغات في جميع الاتجاهات .. او يمكنك وضع صفر في جهة واحدة .. لك الحرية في الاختيار .. انظر الصورة



الآن ارفع الصفحة إلى المجلد الرئيسي في موقعك .. وارفع الصور الى المجلد الذي حددته في الامتداد قبل قليل .. انا سارفعها في مجلد (( img )) انت ضعها في المجلد الذي حددته

تفضل هذي هي النتيجة النهائية .. اذهب وعدل في قياسات شاشتك إلى ما تريد .. وستجد ان المستطيل سيتمدد معك اينما ذهبت وكيفما فعلت

http://www.zemam.com/drs.htm


الآن وبعد ان اتقنت الفكرة والخاصية .. الباب مفتوح امامك .. يمكن عمل تريد من التحديدات والتمديدت ويمكن عمل عدة اجزاء وعدة تمديدات وعدة تقسيمات وصور .. ما سبق هو شرح الفكرة .. التطبيقات لا نهائية .. سأضع بعض الصور من تصميمنا لعملاء زمام لخدمات التصميم حتى تفهم التطبيقات التي يمكن عملها في هكذا مجال

* يمكنك عمل الفكرة في البانرات .. مثل :



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

* يمكنك استخدامها على المنتديات او المجلات مثل :



* يمكنك استخدامها في الفوتر اسفل الصفحة مثل :




متى لا يمكنك استعمالها ؟ عندما يكون لديك تصميم ممتلىء بالصور .. فيمكنك تطبيقها لكنها تشوه التصميم .. لذلك يميل الكثير من المصممين عندما لا يكون في تصاميهم مناطق فراغ يمكن جعلها منطقة تمدد .. عندما لا يكون لديهم مثل ذلك يجعلون التصميم ذو مقياس ثابت على (( 800*600 ))

ولكي تتوضح لديك الصورة بالمقصد من تصميم ممتلى بالصور وغير متوفر به مكان للتمدد انظر للصورة التالية :



ملاحظة جميع الصور اعلاه حقوقها محفوظة لزمام لخدمات التصميم ولعملائه الكرام

وأي استفسار أو سؤال انا حاظر .. وباذن الله يكون هناك استفادة من هذا الموضوع .. وعذراً على الإطالة والأخطاء الإملائية إن وجدت

مع أطيب الأمنيات

زمام لخدمات التصميم
http://www.zemam.com






  #21  
قديم 30-07-2005, 08:34 AM
سعودية سعودية غير متصل
عضو
 
تاريخ التسجيل: Jul 2005
مشاركة: 82
مستوى تقييم العضوية: 19
سعودية is on a distinguished road
الافتراضي

جزاك الله خير





  #22  
قديم 31-07-2005, 07:23 AM
الصورة الشخصية لـ زمــzemamــام
زمــzemamــام زمــzemamــام غير متصل
عضو
 
تاريخ التسجيل: Oct 2004
مشاركة: 351
مستوى تقييم العضوية: 20
زمــzemamــام is on a distinguished road
الافتراضي

ALMGRAT

برونايل للتصميم

abomshary

Wael Hindam

super-design

سعودية


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





  #23  
قديم 04-08-2005, 10:29 PM
مُجَاهِد مُجَاهِد غير متصل
عضو
 
تاريخ التسجيل: Mar 2004
مشاركة: 316
مستوى تقييم العضوية: 21
مُجَاهِد is on a distinguished road
الافتراضي

روعة اخي الكريم ..

الف الف شكر لك ..






التوقيع
بو مُجَاهِد..
  #24  
قديم 05-08-2005, 12:24 AM
كيبورد كيبورد غير متصل
عضو
 
تاريخ التسجيل: Sep 2004
مشاركة: 51
مستوى تقييم العضوية: 20
كيبورد is on a distinguished road
Smile

درس في منتهى الروعه
الله يعطيك العافيه ونتمنى أن لاتحرمنا من هذه الدروس الرائعة






التوقيع
تم تعديل التوقيع لمخالفته قوانين الويب العربى.
AWT 3,
مشرف قضايا ونزاعات.
  #25  
قديم 05-08-2005, 12:36 AM
K4Host.Com K4Host.Com غير متصل
عضو
 
تاريخ التسجيل: Jul 2005
المدينة: Egypt
مشاركة: 31
مستوى تقييم العضوية: 0
K4Host.Com is on a distinguished road
إرسال رسالة عبر MSN إلى K4Host.Com
الافتراضي

مشكور اخوي زمام
والله درس مهم جدا






التوقيع
شركة K4HosT.Com للإستضافة والتصميم

Www.K4Host.Com

إستضافة, تصميم بانرات, شعارات, بطاقات, (تركيب منتديات,مجلة نيوك), إشهار مواقع

للمراسلة عبر الايميل :
k4host@hotmail.com

الخبرة والتميز لا يأتين من فراغ
  #26  
قديم 07-08-2005, 10:07 PM
peer peer غير متصل
عضو
 
تاريخ التسجيل: Dec 2004
مشاركة: 84
مستوى تقييم العضوية: 20
peer is on a distinguished road
الافتراضي

ممكن نعرف الطريقه للواجهه الجاهزة واللتي تظهر في شاشه 1024 على اليسار


كيف تتم عمليه توسيطها





  #27  
قديم 10-08-2005, 05:13 PM
الصورة الشخصية لـ زمــzemamــام
زمــzemamــام زمــzemamــام غير متصل
عضو
 
تاريخ التسجيل: Oct 2004
مشاركة: 351
مستوى تقييم العضوية: 20
زمــzemamــام is on a distinguished road
الافتراضي

مُجَاهِد

كيبورد

K4Host.Com

العفو .. وشاكر لكم تواجدكم وحضوركم الكريم



peer

يا ليت توضح الواجهة ايش ؟ بالـ html او واجهة منتدى او واجهة php .. إلخ

وان شاء الله نقدر نخدمك





موضوع مغلق



خيارات الموضوع
طريقة العرض

قوانين المشاركة
لا يمكنك إضافة موضوع جديد
لا يمكنك الرد على المواضيع
لا يمكنك إضافة مرفقات
لا يمكنك تعديل مشاركاتك

كود vB متاح
كود [IMG] متاح
كود HTML مغلق
إنتقل إلى

مواضيع مشابهة
الموضوع الكاتب القسم مشاركة آخر مشاركة
[الدرس الثاني]شرح تركيب استايل بالتفصيل الممل ( دورة التطوير ) الصريح جداً قسم المنتديات 82 01-12-2007 08:55 PM
جعل الموقع يتعامل تلقائياً مع مقاسات الشاشة مجهول تطويرالمواقع 16 01-07-2007 07:50 PM
درس تصميم موقع بالفوتوشوب بالتفصيل الممل byassir تطويرالمواقع 1 10-01-2007 03:25 PM
احمى منتداك رغم انف الحاقدين بالتفصيل الممل serag777 قسم المنتديات 13 12-09-2006 11:30 PM
ماهي الطريقة التي تجعل الموقع يتعامل تلقائيا مع مقاسات الشاشة al3mad طلبات البرمجة والتصميم والتطوير 3 20-02-2005 09:03 AM


جميع الأوقات بتوقيت مكة المكرمة. الساعة الآن » 06:21 PM.

Powered by vBulletin
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.


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

صحيفة متخصصة في متابعة أخبار وجديد الإنترنت العربي
والحوارات الصحفية ومعلومات تقنية متنوعة .

   
 
 

للتواصل مع فريق عمل الويب العربي
يمكنك ذالك من خلال مركز الدعم والمساندة.

 الدعم الفني |  اعتماد العضويات |  قوانين الإنتساب |  إتفاقية الإستخدام |  أهداف الويب العربي |  دليل الشركات |  مكتبة الويب |  صحيفة الويب العربي |  الرئيسية