الموضوع: شرح عمل هيدر متمدد بالتفصيل وبالصور ومتوافق مع جميع المتصفحات

بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
حياكم الله
أحبتي في الله
أحيانا كثيرة نريد ان نعمل هيدر متمدد
او نعدل على هيدر آخر
ولكن نرى أننا نفشل في عمل ذلك
اليوم عملت لكم درس مفصّل بالصور كاملة
أرجوا أن ينال رضاكم وأن تستفيدوا منه جميعا


قبل كل شيء أريد أن أوضّح أن لدينا نوعين من الهيدر
الهيدر الأول - عبارة عن خمسة قطع - وهنا الجدول يتوزع في الهيدر على خمسة عواميد
الهيدر الثاني - عبارة عن ثلاثة قطع - وهنا الجدول يتوزع على ثلاثة عواميد
اليوم سيكون تركيزنا على الأول
لأنه هو الأكثر تعقيدا والأكثر إنتشارا
نأتي إلى الخطوات الأولى على بركة الله :
1 - نصمم هيدر حسب الرغبة ثم نقوم بتقطيعه بواسطة أداة التقطيع في الفوتوشوب
نقطعها كما في الصورة الى خمسة قطع


سنجد ان الصور اصبحت 7 قطع نمسح الزائدة منها ونحتفظ ب5 قطع
ثم نفتح الفرونت بيج

ونقوم بما يأتي بالتفصيل
إفتح مشروع جديد
قم بإختيار html أسفل الصفحة



سترى فيه كود افتراضي
قم بإختياره كما في الصورة وإمسحها



الآن قم بإختيار عادي - كما في الصورة

ثم قم بإنشاء جدول ذات خمسة عواميد
كما في الصورة






سيظهر لنا الجدول بهذا الشكل


نذهب إلى خصائص الجدول
ونعدل الخيارات كما في الصورة







يتبع ,.....

بعد ذلك نرى ان الجدول أصبح بهذا الشكل


نذهب الى الخلية الأولى على اليسار
ونضغط عليه بالزر اليمين في الماوس
فتظهر لنا الخيارات
نختار منها
خصائص الخلية


الآن يجب أن نركز على الدرس بشكل جيد
نحن نريد هيدر متمدد بمعنى ان يملأ الشاشة 100 %
ولدينا هنا خمسة أعمدة ثلاثة منها ثابتة
واثنان متمدد
كما ياتي :
1- الأول من اليمين نختار النسبة المئوية في خصائص الخلية على 1 %
2 - الثاني نختار 48 %
3 - الوسط نختار 1 %
4 - الرابع ما قبل الأخير نختار 49 %
5 - الاخير على اليسار نختار 1 %


ألان نأتي للتوضيح أكثر - كما ذكرنا أننا نريد تمدد 100 %
ثلاثة ثابتة واثنان متمدد
عندما نختار على الثلاثة الثابتة 1% تكون لدينا 3
بمعنى تبقى لدينا 97 %
يجب ان نوزع هذا المتبقي على الصورتين اللتين جهزناهما للتمدد
إذا 49 + 48 = 97 + 3 للصور الثابتة التي على اليمين وعلى اليسار وفي الوسط أصبح لدينا 100%

وتكون النتيجة أن يصبح الجدول كما في الصورة



يتبع ,.....

الان نقوم بإدراج الصور
وسنلاحظ أن الصور المجهزة للتمدد
تظهر بالشكل التالي :



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


نقوم بتعديل الخيارات كما في الصورة



بمعنى نختار عرض الصورة 100 % بالنسبة المئوية
ونضغط موافق
لتكون النتيجة كما في الصورة




وبعد التطبيق على الطرفين وإدراج الصور كاملة
نرى أن الصورة إكتملت
كما نلاحظ في الصورة



ثم نقوم بتعديل روابط الصور
ونقوم بنسخ الكود
في قالب الهيدر في الستايل
وتمت العملية بنجاح

أتمنى أن أكون قد وفقت في إيصال الفكرة بشكل جيد اليكم
وان تستفيدوا من الدرس
واعتذر إليكم عن اي سهو او خطأ أو نسيان
ولا تنسوني في دعائكم

ولكم مني أجمل تحية
اخوكم الدكتور
مصطفى الكردي

نورتم الموضوع وحياكم الله

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .