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

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

تكويد الصفحة الرئيسية عن طريق  html

البناء الاساس 

نقوم اولا بانشاء مجلد اساس للمشروع ونسميه اي اسم ثم بعد ذلك قم بأنشاء مجموعة المجلدات والملفات كما بالصورة
 
ثم نقوم بفتح مجلد index.html مع اي برنامج تحرير نصوص وليكن notepad++
ويمكنك تحميل من الموقع الرسمى من هنا 
البناء الرئيسي لاي صفحة HTML يكون على الشكل

 

شرح المثال

  • <!DOCTYPE html> تمثل اعلان ان الصفحةهى بلغة HTML5 
  • <html> هو التاج الاساس لصفحة الويب 
  • <head> يحتوي على التعريفات الازمة لصفحة الويب
  • <title> يحتوي عنوان صفحة الويب
  • <body> يحتوي جسم صفحة الويب
نقوم الان بأنشاء ملف نسميه styles.css فى مجلد css
والان لنربط ملف css بملف html
نقوم باضافة السطر التالى  الى الجزء الخاص ب head
 bootstrap.minونقوم بتحميل البوتستراب من هنا  وفك الضغط  واستدعاء ملف
  الجزء الاخير من الكود مخصص لل fontawesome للايقونات وسنتكلم عليه بتعمق فى درس قادم 

وفى نهاية الصفحة قبل </body> مباشرتًا
نضع الكود

 

الملفان السابقين ضروريان لتشغيل Bootstap وسيكون درس الدرس القادم  مفصل لشرح اعمق لل Bootsrap

الان نبدء فى بناء الهيدر وهو اول جزء من المدونة على حسب هذه الصورة

 
 
 
فالهيدر يحتوي على الجزئين اللوجو والقائمة الرئيسية
 
الكود
 

والان الى شرح الكود
 
  • <header>فى HTML 5 اضيف هذا الوسم لجعل المتصفحات تتعرف بسهولة على الهيدر الخاص بصفحة الويب والذي اعطناه ال ID site-header للاستخدام فى ملف CSS فيما بعد
  • قمنا بعمل Logo h2 واضفنا span هذا لاعطاء لون مختلف  لكلمة التقنية
اضيف هذا الوسم <nav> ايضًا فى HTML 5 لجعل المتصفحات تتعرف بسهولة على القائمة واعطيناه ال ID site-nav
  • class=”list-inline” كلاس خاص ب Bootstrap لجعل القائمة افقية 
  • <i class=”fa fa-facebook”> هذه الايقونات الخاصة ب Fontawsome 
  • <div class=”clear”></div> سنتحدث عنها لاحقًا
والان الى كود CSS
 
شرح الكود
 
ال CSS تقوم بوضع بعض الاعدادات على الكود مثل بعض المسافات والتزينات ونقوم بحذف هذه الاعدادات الافتراضية حتى تؤثر على عملنا
 

بعد ذلك ننتقل الى الكود الخاص بتزيين الصفحة الرئيسية

 

الكود

ابعض الافكار المستخدمة فى الكود

  • الفرق بين marin , padding كلاهما يستخدم لاعطاء مسافة للعنصر لاظهاره وعدم الخلط
 
ولكن كما هو موضح بالصورة maring حشو خارجى ولكن padding حشو داخلى
 
  • transition

هى خاصية لعمل تأثير جمالى عن طريق الانتقال من حالة الى حالة

ويتم تحديد ثلاثة اشياء
الزمن و نوع الانتقال والخاصية المراد تطبيق التأثير عليها مثل اللون وغيره

مثال

للمزيد عن هذه الخاصية هنا
  • float يقوم بتعويم العنصر الى اليمين او اليسار
فلو اردنا عمل على سبيل المثال عمل هذا
 
سنقوم بتعويم القائمة الى اليمين وايقونات التواصل الاجتماعى الى اليسار
ونقوم بعمل هذا الdiv الفارغ واعطاءه الكلاس  clear
الذى يقوم بكسر التعويم حتى لا تؤثر على العنصر التالى
وفى ملف css نعطى الكلاس clear 
clear:both;
 
كانت هذه ابرز الافكار التى بنى عليه كود css والكود الكامل تطبيق على هذه الافكار 
والى هنا ننتهى من الدرس وشكرًا 

شاركه مع اصدقائك

كتب بواسطة admin

مؤسس مطور

التعليقات

اترك تعليقك

شاركنا بتعليقاتك حول الموضوع

*

Comments