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

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

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

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

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

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

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

مقالات ذات صلة

تصميم موقع ب HTML و CSS من الصفر حتى الاحتراف

مقدمة السلام عليكم ورحمة الله وبركاته  ومرحبًا بكم فى سلسلة بناء المواقع بأستخدام  HTML و CSS و Bootstrap هذه...

الدرس الثانى : تهئية الملفات وتكويد االهيدر

تعلمنا فى الدرس السابق كيفية نسخ الالوان وقراءة المقاسات من تصميم الفوتوشوب  والان الى تكويد صحفة المدونة الرئيسية اولًا...

الدرس الثالث : نظرة اعمق حول Bootstrap بوتستراب

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

الدرس الرابع : تكويد مكان نشر المقالات

السلام عليكم ورحمة الله وبركاته درس اليوم حول تكويد مكان لنشر البوستات وكما تنذكر كان هذا هو التصميم البسيط...

كتب بواسطة عمرو العربى

مؤسس مطور

التعليقات

اترك تعليقك

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

*