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

بسم الله نبدأ الآن بــ ..

الشاشة القياسية : هذا تعريف مهم لابد ان تعرفه كمصمم و هى مقياس دقة عرض الشاشة , حتى سنوات قليلة مضت كان المقياس الشائع للشاشة 800 × 600 بيكسل (لاحظ ان العرض الافتراضى للويندوز XP بعد انتهاء التنصيب مباشرة يستخدم هذا المقياس) ..
و لمن لم يستوعب هذا : لاحظ الصورة







و لكن ما علاقة دقة الشاشة بالتصميم ؟ ...
هذه علاقة قوية .. دقة الشاشة هى التى تتحكم فى حجم شاشة العرض و بالتالى لابد و ان تعلم المقياس المناسب للتصميم و الذى يتناسب مع اقل دقة ممكنة للعرض (المقياس الافتراضى) و بالتالى تضمن ان تصميمك يمر بأفضل حالاته فى كل المقاييس الممكنة .. مع الشرح ستفهم اكثر.

• نستخدم فى هذا الدرس برنامج [فقط العضوات المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]

الخطوة رقم (1):

من قائمة File اختر New ثم ادخل القياسات الموضحة بالصورة

لاحظ أن :

• قيم كلا من العرض و الطول بالبيكسل Pixels.
• استخدمنا للعرض المقياس 800 بيكسل بالذات .. لماذا؟ .. حتى يتناسب تصميمك مع اقل دقة ممكنة كما قلنا سالفاً .

الصفحة جاهزة الآن للتصميم .. لاحظ ان مقياس العرض يبدأ من اليسار بالصفر و يتنهى عند اليمين بـ 800 ..

الخطوة رقم (2):

الآن .. من القائمة View اختر New Guide

ثم ادخل القيم التالية :

الخطوة رقم (3):

قم بتكرار الخطوة رقم (2) السابقة و لكن ادخل القيمة 800 px هذه المرة ..

الخطوة رقم (4):

الآن سوف نقوم بتعديل المقياس قليلاً .. من القائمة Image نختار Canvas Size

و نزيد قيمة عرض التصميم 800 بيكسل قليلا و ليكن 1000 بيكسل مثلاً

و يكون الشكل النهائى كالتالى (تم استخدام خلفية زرقاء للتوضيح فقط)

لاحظ أن :

• الخطوط الاسترشادية الطولية Guids و التى تم انشاءها من الخطوات رقم (2) و (3) هى التى لها اللون التركوازى ..
• لماذا زدنا العرض عن المقياس المقرر ؟ .. هذه خطوة هامة .. فكر قليلاً .. لقد اتفقنا ان العرض القياسى و هو 800 بيكسل هو ما سنعمل به .. و لكن ماذا لو كان الزائر لموقعك يستخدم دقة اكبر للشاشة الخاصة به (1024 × 768 بيكسل مثلاً) .. عندها سيظهر له موقعك بالطريقة الموضحة بالاعلى .. التصميم الاساسى 800 بيكسل .. و ما يتبقى من الجانبين زيادة سوف يظهر بهذه الطريقة (جزء اضافى) .. اذن لابد من تخصيص جزء من التصميم للعمل كخلفية للموقع . لهذا كان لابد من رسم خطوط استرشادية حتى لا نتعداها قيخرج التصميم عن المقياس المحدد له.

من القائمة View اختر New Guide ..

ثم ادخل القيم التالية :

• لتحديد مقياس الفوتر و ليكن 200 بيكسل ...

من القائمة View اختر New Guide ..

ثم ادخل القيم التالية :

ليصبح لديك الشكل التالى : (تم استخدام خلفية زرقاء للتوضيح فقط)

و بهذا يكون التصميم جاهزاً للعمل .. اطرح لكم مثالاً منتهياً من احد تصميماتى :

اخيراً اتمنى ان تكونوا قد استفدتم من الدرس

منقووووول للفائده