قم بكتآبة هذا الكود مثل مآ بالصورة <style type="text/css"></style> وبين القوسين آضغط آنتر عشآن بينهآ بنكتب الأكوآد
^^ لآحظ آلكود اللي كتبنآه مضلل باللون الأزرق =)
وهذآ شرحفيديو27 ثآنية مرفوع ع اليوتيوب - للتوضيح فقط - < يعني آذا كتبت الكود مثل الصورة مآفي دآعي تشوفه
آلى آلحين تمآم الأمور ولآ يآلله نبدأ بكتآبة الكلآسلآت بين الوسمين <body> و <
معلينآ من الأكوآد اللي يهمنآ آلآن آلكلآسات
آكتب هذا الكلآس <div class="h1"></div> وبين العلآمتين >< آضغط آنتر و آكتب من بداية السطر <div class="h2"></div> <div class="h3"></div> تآبع الصورة موضحه فيهآ كلآسات الهيدر والفوتر
طبعآ نكرر نفس الأمر للفوتر مع تغيير h إلى f طبعآ تقدر تغير الحرف لكن خلك معي بالشرح h تعني هيدر و f فوتر والصورة فيهآ كل شي وآضح مآذآ تعني h1 و h2 و و ..
بعد كتآبة الكلآسات آذكر آلله وصل على نبيك
نتجه لكتآبة الأكوآد بين الكود للي كتبنآه في البدآية صورة للتوضيح والتذكير
طبعآ قد كتبنآه في البدآيه ولآ لآ آلآن تعآل في بداية السطر وآكتب . ثم h1 ثم { بعدهآ تطلع لك قائمة آختر منها background-image:
ثم اضغط على pick Url
وآختر صورة التمدد
بعدهآ آختم السطر بفاصلة منقوطة بالضغط على حرف الكآف وآضغط آنتر تنزل سطر جديد وتطلع لك نفس القآئمة الأولى ولكن نختآر منهآ
ومن ثم نختار repeat-x يعني تمدد
ونختم السطر بفاصلة منقوطة بالضغط على حرف الكآف . ثم تطلع لنا نفس القائمة السابقة اكتب حرف h واختر height وتعني الارتفآع للصورة
وآضغط على ...pick length وآكتب الارتفاع وآختم السطر بفآصلة منقوطة
طبعآ وضحنآ سابقآ آن h1 تعني نقطة التمدد لمعرفة ارتفاع الصورة آضغط عليهآ الزر الأيمن + خصائص + ملخص > وآكتب الارتفاع
الشكل النهآئي لكود صورة التمدد
بسسيطة ولآ لآ البرنآمج يسآعدك آصلآ يعني الأمور سهله جدآ بسسسس تركيز
نفس الأوآمر والطريقة مع الصورة اليسرى واليمنى للهيدر إلآ بعض الاضافات بتشاهدها موضحه في الصورة التآلية
وطريقة كتآبتها كما سبق
# تصحيح RIGHT تعني يمين وليس يسآر # < في كود h3
طبعآ عرض الصورة نطلعه مثل الآرتفآع وبعدهآ تضغط حرف الكآف فآصلة منقوطة وتنزل سطر جديد تطلع لك القآئمة وآضغط حرف f وآختر float وحدد مكآن الصورة هي يمين ولآ يسآر . .
الآن نفس الطريقة نطبقها مع الفوتر
f1 صورة التمدد f2 الصورة اليسرى f3 الصورة اليمنى
شآهد الصورة لجميع الأكوآد
الهيدر
والفوتر
وهذآ شرح فيديو مدته 6 دقآيق للتوضيح
آلحين بعد الإنتهآء حدد على الكود في البرنآمج وآنسخه وآلصقه في مفكره وآحفظه لليوم الأسود ههههه آحفظه عشآن لو يصير مشكلة ولآ شي آلآ وعندك الكود موجود . آعذروني شرحت لكم بآللغه العآمية اللي مآفهم شي يقولي جزء الدوآفير بيكون في نفس الموضوع آنتظروني . . موفقين حبآيبي !
موضوع: توزيع الهيدر والفوتر css - فيديو وصور - # الدرس الثآني # 
الجمعة يونيو 21 2013, 17:31
