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

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


قبل كل شيء أريد أن أوضّح أن لدينا نوعين من الهيدر
الهيدر الأول - عبارة عن خمسة قطع - وهنا الجدول يتوزع في الهيدر على خمسة عواميد
الهيدر الثاني - عبارة عن ثلاثة قطع - وهنا الجدول يتوزع على ثلاثة عواميد
اليوم سيكون تركيزنا على الأول
لأنه هو الأكثر تعقيدا والأكثر إنتشارا
نأتي إلى الخطوات الأولى على بركة الله :
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


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

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

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

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

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

اسعدني مروركم استاذي الحبيب
نورتم الموضوع وحياكم الله
تلاميذكم ومنكم نتعلم
:n200659:
:n200678:

شكرا أخى الكريم على هذا الجهد المتميز

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

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

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

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

بيّض الله وجهك أخوي مصطفى

ولك تحياتي

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

ربنا يبارك فيك يا دكتور :n200678:

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

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

بارك الله فيك اخي ولكن لو سمحتلي لم افهم شيء واحد فقظ

بدانا بالعمل والتقطيع بالفيتوشوب انت لم تربط بين العملين الصور المقطعة ماذا نفعل بها عند الانتقال الي الفرنت بيج

انا عملت الطريقة ولم اجد اي ربط في الموضوع اتمني التوضيح

ولكم الشكر

اخي الكريم بعد التقطيع تقوم بحفظ الصور وترقيمها
وكام وضحت ستكون لديك حسب القطع لو طبقته بشكل صحيح 7 قطع تمسح اثنين منها وهي التي لا تظهر في اطراف التمدد
والخمسة الباقية تخليهم عندك وتروح تعمل جدول مثل ما هو موضّح في الفرونت بيج
وتقوم بإدراج الصورة كل منها حسب المكان المخصص لها
وانتهى
تحياتي

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

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

بالتوفيق :n200672:

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

بارك الله فيك

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

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

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

السلام عليكم

مشكوووور أخوي جزاك الله خير

عملت بنر متمدد ونجح الحمـد لله

بس صار عندي مشكلة في التمدد في باقي الصفحة !

هل إذا أعطيتك ملف القالب تقدر تشوف لي طريقة حتى تصير الصفحة كلها متمددة بدون زيادة ولا نقص ؟؟

وبارك الله فيك

أخي الغالي المشكلة ليست في التمدد
ولا في الهيدر
إنما هناك كود css إضافي في خلفية المنتدى
حاول تتأكد منها وامسحها
تحياتي

وفقك الله لما يحب ويرضى
جزاك الله عني خير جزاء

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

[align=center]جزاك الله خير اخوي مصطفى

والله انك حليت عقدة كنت اعاني منها

سبق و ان تابعت دروس تصميم الاستايلات وما عقدني الا التوزيع بالفرونت بيج

و بالرغم من اني اطبق شرح التوزيع بالفرونت بيج الا ان النتيجه ان الهيدر ما يتمدد مع حجم الشاشه

لكن بعد موضوعك هذا الحمدلله نجحت ولأول مره بعمل هيدر متمدد بحجم الشاشه

جزاك الله وجعل الجنه منزلك ومنزل لواليدك بالاخره

[/align]

بارك الله فيك أخي مصطفي على هذا الشرح

موفق بإذن الله ... لك مني أجمل تحية .

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


هاوي ديزاين

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

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

شكرا أخي الكريم

بارك الله فيك

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

شكرا لك اخي على الشرح الجميل

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

شكــــــــــــراا وباارك الله فــيك,,

دمـــــــــــــت موفق,,