الدرس الاول : قراءة الالوان والمقاسات للاستخدام فى الكود

التصميم لشكل الموقع

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


طبعًا يمكنك الابداع كما شئت واختيار الالوان المناسبه لذوقك

يمكنك تحميل القالب كامل الذي قمت بتصميم من اجل هذه الدورة من هنا

نسخ الالوان من التصميم

اللون فى لغة HTML  مكون من ستة خانات
مثال  #F0F8FF
وكل شفرة تشير الى لون معين على حسب نسبة الاحمر والاخضر و الازرق فى هذا اللون
فميثل كل زوج ارقم من اليسار نسب الاحمر والاخضر والازرق بالترتيب
الان الى النقطة الاهم كيفية نسخ كود اللون من التصميم على برنامج محرر الصور الفوتوشوب او GIMP
من اجل استخدامه فى لغة HTML
وانا هنا ساشرح على برنامج الفوتوشوب
برنامج GIMP يعمل بطريقة مشابهة
اذا كنت تستخدم الفوتوشوب فمن هذه الاداة   يمكنك الوقوف على اللون الذي تريده فى التصميم ثم  بعد ذلك الضغط بزر الفأرة اليمين على 

بعد ذلك ستظهر لك هذه النافذة


قم بنسخ الكود المحدد فى الصورة للاستخدام فى HTML

قراءة المقاسات من التصميم 

لقراءة المقاسات والابعاد نستخدم اداة Ruler Tool ويمكن استخدامها كما فى الصوة


وتسخدم عن طريق الضغط على بداية المسافة المراد قياسها والسحب حتى نهاية المسافة 
ويتم قراءة القياسات كما بالصورة


اذا كنت تقيس بشكل افقى تقوم بقراءة Wعلى انها المسافة
واذا كنت تقيس بشكل رأسي تقوم بقراءة ال H على انها المسافة
لا حظ ان المسافات هنا بالبكسل 
اذا كانت غير ذلك قم بالضغط على CONTROL + K
ثم Units & Rulers
واجعل Ruler بوحدة Pexels

شارك الموضوع

مواضيع ذات صلة