حالة الموضوع:
مغلق
  1. Microsoft

    Microsoft V • I • P

    الأنتساب:
    ‏26 أكتوبر 2011
    المشاركات:
    193
    الإعجابات المتلقاة:
    3
    نقاط الجائزة:
    18
    الإقامة:
    home
    [​IMG]

    السسسلآم عليكم
    كيفكم وشخبآركم

    في البدآية الدرس هذآ ينقسم جزأين
    الأول : للمبتدأين وآللي مآورآهم شي
    الثآني : للدوآفير وآلمستعجلين
    [​IMG]
    # آوآمر نستخدمهآ ع الكيبورد #
    لكتآبة الفآصلة المنقوطة
    حرف الكآف (ك)
    لكتآبة القوس <
    shift + ز

    لكتآبة القوس >
    shift + و

    لكتآبة القوس {
    shift + د

    لكتآبة القوس }
    shift + ج
    [​IMG]
    نبدأ بجزء آلمبتدأين
    آلحين نفتح الآكسبريشن ونلعن آبليس &:"
    قم بتأشير المآوس نهآية السطر
    <title>Untitled 1</title>
    وآضغط آنتر

    [​IMG]

    قم بكتآبة هذا الكود مثل مآ بالصورة
    <style type="text/css"></style>
    وبين القوسين آضغط آنتر عشآن بينهآ بنكتب الأكوآد

    [​IMG]

    ^^ لآحظ آلكود اللي كتبنآه مضلل باللون الأزرق =)
    وهذآ شرح فيديو 27 ثآنية مرفوع ع اليوتيوب - للتوضيح فقط - < يعني آذا كتبت الكود مثل الصورة مآفي دآعي تشوفه

    [YOUTUBE]1Pp9c6x0Vh4&feature=player_embedded[/YOUTUBE]
    [​IMG]
    آلى آلحين تمآم الأمور ولآ &:"
    يآلله
    نبدأ بكتآبة الكلآسلآت بين الوسمين <body> و </body>
    [​IMG]

    معلينآ من الأكوآد اللي يهمنآ آلآن آلكلآسات

    آكتب هذا الكلآس
    <div class="h1"></div>
    وبين العلآمتين >< آضغط آنتر و آكتب من بداية السطر
    <div class="h2"></div>
    <div class="h3"></div>
    تآبع الصورة موضحه فيهآ كلآسات الهيدر والفوتر

    [​IMG]

    طبعآ نكرر نفس الأمر للفوتر مع تغيير h إلى f
    طبعآ تقدر تغير الحرف لكن خلك معي بالشرح h تعني هيدر و f فوتر
    والصورة فيهآ كل شي وآضح مآذآ تعني h1 و h2 و و ..
    [​IMG]

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


    [​IMG]

    طبعآ قد كتبنآه في البدآيه ولآ لآ
    آلآن تعآل في بداية السطر وآكتب . ثم h1 ثم {
    بعدهآ تطلع لك قائمة آختر منها background-image:

    [​IMG]

    ثم اضغط على pick Url


    [​IMG]

    وآختر صورة التمدد

    [​IMG]

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

    [​IMG]

    ومن ثم نختار
    repeat-x
    يعني تمدد

    [​IMG]

    ونختم السطر بفاصلة منقوطة بالضغط على حرف الكآف .
    ثم تطلع لنا نفس القائمة السابقة اكتب حرف h واختر height وتعني الارتفآع للصورة

    [​IMG]


    وآضغط على ...pick length وآكتب الارتفاع
    وآختم السطر بفآصلة منقوطة


    [​IMG]

    طبعآ وضحنآ سابقآ آن h1 تعني نقطة التمدد
    لمعرفة ارتفاع الصورة آضغط عليهآ الزر الأيمن + خصائص + ملخص > وآكتب الارتفاع


    [​IMG]

    الشكل النهآئي لكود صورة التمدد

    [​IMG]

    بسسيطة ولآ لآ
    البرنآمج يسآعدك آصلآ يعني الأمور سهله جدآ
    بسسسس تركيز &:"
    [​IMG]


    نفس الأوآمر والطريقة مع الصورة اليسرى واليمنى للهيدر إلآ بعض الاضافات بتشاهدها موضحه في الصورة التآلية


    وطريقة كتآبتها كما سبق



    [​IMG]




    # تصحيح RIGHT تعني يمين وليس يسآر # < في كود h3

    طبعآ عرض الصورة نطلعه مثل الآرتفآع وبعدهآ تضغط حرف الكآف فآصلة منقوطة
    وتنزل سطر جديد تطلع لك القآئمة وآضغط حرف f وآختر float وحدد مكآن الصورة
    هي يمين ولآ يسآر . .




    الآن نفس الطريقة نطبقها مع الفوتر

    f1 صورة التمدد
    f2 الصورة اليسرى
    f3 الصورة اليمنى
    شآهد الصورة لجميع الأكوآد

    الهيدر
    [​IMG]

    والفوتر


    [​IMG]


    وهذآ شرح فيديو مدته 6 دقآيق للتوضيح
    [YOUTUBE]OLspFggep7w&feature=player_embedded[/YOUTUBE]

    [​IMG]

    آلحين بعد الإنتهآء حدد على الكود في البرنآمج وآنسخه وآلصقه في مفكره وآحفظه لليوم الأسود &:"
    ههههه آحفظه عشآن لو يصير مشكلة ولآ شي آلآ وعندك الكود موجود .
    آعذروني شرحت لكم بآللغه العآمية اللي مآفهم شي يقولي &:"
    جزء الدوآفير بيكون في نفس الموضوع آنتظروني . .
    موفقين حبآيبي !


     
  2. shbl

    shbl Developer

    الأنتساب:
    ‏7 مارس 2012
    المشاركات:
    24
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    الإقامة:
    السعوديه
    رد: توزيع الهيدر والفوتر css - فيديو وصور - # الدرس الثآني #

    مشكور ولك مودتي
    منتظرين جديدك
     
  3. Wo0oLf

    Wo0oLf DeveloPer Plus

    الأنتساب:
    ‏22 مارس 2012
    المشاركات:
    123
    الإعجابات المتلقاة:
    4
    نقاط الجائزة:
    18
    الوظيفة:
    طالب جامعي Computer science
    الإقامة:
    مقيم في لبنان
    رد: توزيع الهيدر والفوتر css - فيديو وصور - # الدرس الثآني #

    وعليكم السلآم ورحمة الله وبركآته ،،
    يعطيك ألف ع ـآفية ،
     
  4. sTRANGE WORLd

    sTRANGE WORLd Developer

    الأنتساب:
    ‏28 مارس 2012
    المشاركات:
    104
    الإعجابات المتلقاة:
    2
    نقاط الجائزة:
    18
    الوظيفة:
    قهر الحمايات
    الإقامة:
    مجهول
    رد: توزيع الهيدر والفوتر css - فيديو وصور - # الدرس الثآني #

    ماشاء الله تبارك الرحمن
    يعطيك الف عافيه وبصراحه تستحق كلمه فنان بجدارهـ
     
  5. Mr.B4dR

    Mr.B4dR Developer

    الأنتساب:
    ‏5 سبتمبر 2011
    المشاركات:
    40
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    رد: توزيع الهيدر والفوتر css - فيديو وصور - # الدرس الثآني #

    يسلملي هـ آلانآمل الحـلوة
    آلله يعطيـک آلعافيۃ
     
حالة الموضوع:
مغلق

مشاركة هذه الصفحة