منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم


درس عمل هيدر باللوغو بتقنية css مثل منتدانا الحبيب

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

درس عمل هيدر باللوغو بتقنية css مثل منتدانا الحبيب

مُساهمة من طرف JAR7 في 31/03/16, 09:57 am

درس عمل هيدر باللوغو بتقنية css مثل منتدانا الحبيب

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

نكمل سلسله دروسنا بعمل درس هيدر باللوغو كما هو متواجد بمنتدانا تقنيات

من خلال الهيدر نلاحظ امور

اوﻻ خلفية موحد مكرر على طول الهيدر
ثانيا لوغو على اليمين وهو يوجد شعار واسم المنتدى
ثالثا نافبار بلون ازرق علوي
رابعا ظل للهيدر بلون رمادي اسفله

.........

كما وضحنا بدرسنا الاول كيف نعمل الاكواد الان تطبيق للامور مباشرتا

نفتح قالب overall_header

نضيف اعلى وسم </head>

الكود الاتي الحاوي ﻻكواد css
الرمز:

<style>
هنا الاكواد تضاف
</style>

ونبدا بأوامر css للهيدر  

اوﻻ نبدا باضافة كود البودي لنعمل له تمدد للهيدر يمين ويسار واعلى
لكي ﻻ يكون هناك فراغ بالهيدر بهذة الاتجاهات

الرمز:

body{ margin: 0; }

خلصنا من هالامر نبدا بكود النافبار العلوي

حيث يحوي امر ارتفاع النافبار وامر تمدد وامر لون النافبار

لون النافبار
background-color: #034671;

امر التمدد بعرض المنتدى
background-repeat: repeat;

امر ارتفاع
height: 50px;

وتسمية بيكون مثلا navb

اذا الكود كامل css

الرمز:
.navb {

background-color: #034671;

background-repeat: repeat;


height: 50px;

}

الان نكمل خصائص css للهيدر

خلفية للهيدر مع ظل للاسفل بلون مخالف

نضع امر الخلفية
background-color: #FAFAFA;
امر المدد بعرض منتدى

background-repeat: repeat;

امر الارتفاع

height: 120px;

امر الظل
border-top: 2px solid #C80202;
ونسمية الهيدر الخلفية مثلا hhb

والكود css لخلفية الهيدر هتكون كالاتي

الرمز:
.hhb {
background-color: #FAFAFA;

background-repeat: repeat;

height: 120px;
border-top: 2px solid #C80202;
}

الان اللوغو وهو دة

https://i84.servimg.com/u/f84/16/46/77/76/111010.png

ويتكون كود css بتاعه من

صورة اللوغو
background: url("https://i84.servimg.com/u/f84/16/46/77/76/111010.png")
امر عدم تكرار الصورة
background-repeat: no-repeat;
امر الاتجاة باليمين او اليسار
float: right;
امر الارتفاع  الصورة
height: 67px;
امر العرض الصورة
width: 250px;
امر تحريك موقع الصورة ﻻسفل
margin-top: 30px;
امر تحريك موقع الصورة لليسار

margin-right: 20px;

ونعطي له تسمية logoo

اذا هيكون كود css هكذا

الرمز:
.logoo {
background: url("http://i84.servimg.com/u/f84/16/46/77/76/111010.png")؛
background-repeat: no-repeat;
float: right;
height: 67px;
width: 250px;
margin-top: 30px;
margin-right: 20px;
}

..........

انتهينا من اوامر css واكودها ونظيفها كما ذكرنا فوق موقعها

الان نبحث عن  بقالب الهيدر
{JAVASCRIPT}

ونضيف اسفلها كلاسات لعمل اكواد css بالمنتدى الطريقة دةة للنسخة الثانية تابعووو

الكلاس الاول النافبار
<div class="navb"></div>
الكلاس الثاني الهيدر
<div class="hhb">

<div class="logoo"></div>

</div>
حيث الخلفية تكون بالبداية ونضع كلاس اللوغو قبل قفل كلاس الخلفية هكذا

ونسجل وانتهينا من الدرس

سوف يكون درسنا القادم وضع ازرار بالنافبار بمشيئة الله



JAR7
ادارة المنتدى


الجنس : انثى
عدد المساهمات : 2202
التقييم : 290
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: درس عمل هيدر باللوغو بتقنية css مثل منتدانا الحبيب

مُساهمة من طرف yalla في 31/03/16, 03:09 pm

رائع بارك الله فيكي

yalla
عضو نشيط


الجنس : ذكر
عدد المساهمات : 46
التقييم : 14
تاريخ التسجيل : 19/03/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: درس عمل هيدر باللوغو بتقنية css مثل منتدانا الحبيب

مُساهمة من طرف وهبة الساحر في 31/03/16, 03:22 pm

تَحية تلطفهآ قلوب طيبة ونقٌية
آ‘لتميزٍ لآ يقفٌ عندْ أولْ خطوٍة إبدآعٌ
بلْ يتعدآه في إستمرآرٍ آلعَطآءْ
ووآصلي فيٌ وضعٌ بصمـتكـ بكل
حرٍفٌ تزخرفيه لنآ‘
مِنْ هنآ أقدمٌ لكـ بآقـة وردْ ومحبـة
وٍنحن دوٍمآ نترٍقبٌ آلمَزٍيدْ بفارغ الصبر
مواضيعكِ الراقية



وهبة الساحر
القلوب المكسورة كالزجاج المكسور خطرة و مؤذية لا تحتاج للحب بقدر ما تحتاج للوحدة حتى يتم شفاؤها . . !!
     


وهبة الساحر
ادارة المنتدى


الجنس : ذكر
عدد المساهمات : 335
التقييم : 61
تاريخ التسجيل : 07/03/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: درس عمل هيدر باللوغو بتقنية css مثل منتدانا الحبيب

مُساهمة من طرف JAR7 في 31/03/16, 05:11 pm

منورين جميعا .. ♥



JAR7
ادارة المنتدى


الجنس : انثى
عدد المساهمات : 2202
التقييم : 290
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: درس عمل هيدر باللوغو بتقنية css مثل منتدانا الحبيب

مُساهمة من طرف Mr.Hamod في 31/03/16, 11:30 pm

كنت اريد متابعة الدورة وحسبتها بفيديو اوضح ولكن طلعت كتابة للاسف

عمومأ درس رائع بالتوفيق ان شاء الله

Mr.Hamod
مشرف المنتدى


الجنس : ذكر
عدد المساهمات : 30
التقييم : 12
تاريخ التسجيل : 14/03/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: درس عمل هيدر باللوغو بتقنية css مثل منتدانا الحبيب

مُساهمة من طرف JAR7 في 31/03/16, 11:40 pm

كتابة للاسف !!!
بالعكس الكتابة افضل من شرح فيديو بدون صوت
بكل الاحوال من اراد التعلم ﻻ يهمة الطريقة بل يهمة ان يتعلم ويطور نفسه
منور



JAR7
ادارة المنتدى


الجنس : انثى
عدد المساهمات : 2202
التقييم : 290
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: درس عمل هيدر باللوغو بتقنية css مثل منتدانا الحبيب

مُساهمة من طرف Mr.Hamod في 31/03/16, 11:45 pm

طيب حجرب

Mr.Hamod
مشرف المنتدى


الجنس : ذكر
عدد المساهمات : 30
التقييم : 12
تاريخ التسجيل : 14/03/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: درس عمل هيدر باللوغو بتقنية css مثل منتدانا الحبيب

مُساهمة من طرف Mr.Yakoub في 19/04/16, 08:47 pm

شكرآ جزيلا على الموضوع الرائع و المميز 
واصل تالقك معنا في المنتدى 
بارك الله فيك اخي ... 
ننتظر منك الكثير من خلال ابداعاتك المميزة 
لك منـــــــ اجمل تحية ــــــــــي

Mr.Yakoub
الاشراف العام


الجنس : ذكر
عدد المساهمات : 548
التقييم : 3
تاريخ التسجيل : 28/02/2016
اوسمتي : :1:0:0

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: درس عمل هيدر باللوغو بتقنية css مثل منتدانا الحبيب

مُساهمة من طرف البراق في 20/04/16, 04:15 pm

شكرا ع الطرح المميز

عاشت الايادي

••

مع أجمل ودْ مني

البراق
عضو نشيط


الجنس : ذكر
عدد المساهمات : 110
التقييم : 25
تاريخ التسجيل : 14/04/2016
اوسمتي : :3:4:3

معاينة صفحة البيانات الشخصي للعضو http://raad2.montadalitihad.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: درس عمل هيدر باللوغو بتقنية css مثل منتدانا الحبيب

مُساهمة من طرف JAR7 في 20/04/16, 04:56 pm

منورين حبايبي



JAR7
ادارة المنتدى


الجنس : انثى
عدد المساهمات : 2202
التقييم : 290
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

تحتاج إلى أن يكون عضوا لتستطيع الرد.

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


انشاء حساب جديد

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى