شرح عمل هيدر متمدد بالتفصيل وبالصور ومتوافق مع جميع المتصفحات
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
حياكم الله
أحبتي في الله
أحيانا كثيرة نريد ان نعمل هيدر متمدد
او نعدل على هيدر آخر
ولكن نرى أننا نفشل في عمل ذلك
اليوم عملت لكم درس مفصّل بالصور كاملة
أرجوا أن ينال رضاكم وأن تستفيدوا منه جميعا
قبل كل شيء أريد أن أوضّح أن لدينا نوعين من الهيدر
الهيدر الأول - عبارة عن خمسة قطع - وهنا الجدول يتوزع في الهيدر على خمسة عواميد
الهيدر الثاني - عبارة عن ثلاثة قطع - وهنا الجدول يتوزع على ثلاثة عواميد
اليوم سيكون تركيزنا على الأول
لأنه هو الأكثر تعقيدا والأكثر إنتشارا
نأتي إلى الخطوات الأولى على بركة الله :
1 - نصمم هيدر حسب الرغبة ثم نقوم بتقطيعه بواسطة أداة التقطيع في الفوتوشوب
نقطعها كما في الصورة الى خمسة قطع
https://mwadah.com/images/imgcache/2.../1009.imgcache
سنجد ان الصور اصبحت 7 قطع نمسح الزائدة منها ونحتفظ ب5 قطع
ثم نفتح الفرونت بيج
ونقوم بما يأتي بالتفصيل
إفتح مشروع جديد
قم بإختيار html أسفل الصفحة
https://mwadah.com/images/imgcache/2.../1010.imgcache
سترى فيه كود افتراضي
قم بإختياره كما في الصورة وإمسحها
https://mwadah.com/images/imgcache/2.../1011.imgcache
الآن قم بإختيار عادي - كما في الصورة
https://mwadah.com/images/imgcache/2.../1012.imgcache
ثم قم بإنشاء جدول ذات خمسة عواميد
كما في الصورة
https://mwadah.com/images/imgcache/2.../1013.imgcache
https://mwadah.com/images/imgcache/2.../1014.imgcache
سيظهر لنا الجدول بهذا الشكل
https://mwadah.com/images/imgcache/2.../1015.imgcache
نذهب إلى خصائص الجدول
ونعدل الخيارات كما في الصورة
https://mwadah.com/images/imgcache/2.../1016.imgcache
https://mwadah.com/images/imgcache/2.../1017.imgcache
يتبع ,.....
رد: شرح عمل هيدر متمدد بالتفصيل وبالصور ومتوافق مع جميع المتصفحات
بعد ذلك نرى ان الجدول أصبح بهذا الشكل
https://mwadah.com/images/imgcache/2.../1005.imgcache
نذهب الى الخلية الأولى على اليسار
ونضغط عليه بالزر اليمين في الماوس
فتظهر لنا الخيارات
نختار منها
خصائص الخلية
https://mwadah.com/images/imgcache/2.../1006.imgcache
الآن يجب أن نركز على الدرس بشكل جيد
نحن نريد هيدر متمدد بمعنى ان يملأ الشاشة 100 %
ولدينا هنا خمسة أعمدة ثلاثة منها ثابتة
واثنان متمدد
كما ياتي :
1- الأول من اليمين نختار النسبة المئوية في خصائص الخلية على 1 %
2 - الثاني نختار 48 %
3 - الوسط نختار 1 %
4 - الرابع ما قبل الأخير نختار 49 %
5 - الاخير على اليسار نختار 1 %
https://mwadah.com/images/imgcache/2.../1007.imgcache
ألان نأتي للتوضيح أكثر - كما ذكرنا أننا نريد تمدد 100 %
ثلاثة ثابتة واثنان متمدد
عندما نختار على الثلاثة الثابتة 1% تكون لدينا 3
بمعنى تبقى لدينا 97 %
يجب ان نوزع هذا المتبقي على الصورتين اللتين جهزناهما للتمدد
إذا 49 + 48 = 97 + 3 للصور الثابتة التي على اليمين وعلى اليسار وفي الوسط أصبح لدينا 100%
وتكون النتيجة أن يصبح الجدول كما في الصورة
https://mwadah.com/images/imgcache/2.../1008.imgcache
يتبع ,.....
رد: شرح عمل هيدر متمدد بالتفصيل وبالصور ومتوافق مع جميع المتصفحات
الان نقوم بإدراج الصور
وسنلاحظ أن الصور المجهزة للتمدد
تظهر بالشكل التالي :
https://mwadah.com/images/imgcache/2.../1000.imgcache
نقوم بالضغط على الصورة مرتين او مرة واحدة بالزر اليمين في الماوس
نختار خصائص الصورة
https://mwadah.com/images/imgcache/2.../1001.imgcache
نقوم بتعديل الخيارات كما في الصورة
https://mwadah.com/images/imgcache/2.../1002.imgcache
بمعنى نختار عرض الصورة 100 % بالنسبة المئوية
ونضغط موافق
لتكون النتيجة كما في الصورة
https://mwadah.com/images/imgcache/2.../1003.imgcache
وبعد التطبيق على الطرفين وإدراج الصور كاملة
نرى أن الصورة إكتملت
كما نلاحظ في الصورة
https://mwadah.com/images/imgcache/2.../1004.imgcache
ثم نقوم بتعديل روابط الصور
ونقوم بنسخ الكود
في قالب الهيدر في الستايل
وتمت العملية بنجاح
أتمنى أن أكون قد وفقت في إيصال الفكرة بشكل جيد اليكم
وان تستفيدوا من الدرس
واعتذر إليكم عن اي سهو او خطأ أو نسيان
ولا تنسوني في دعائكم
ولكم مني أجمل تحية
اخوكم الدكتور
مصطفى الكردي
رد: شرح عمل هيدر متمدد بالتفصيل وبالصور ومتوافق مع جميع المتصفحات
نورتم الموضوع وحياكم الله
رد: شرح عمل هيدر متمدد بالتفصيل وبالصور ومتوافق مع جميع المتصفحات
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .