1. أهلا وسهلاً بكم في :: IQ-TeaM FORUM :: .
    إذا كانت هذه الزيارة الأولى أو لديك الرغبة بالانضمام لأعضاء شبكة عراق تيم فيجب الاطلاع على خصوصية الشبكه فربما بقائك زائر افضل لك من الانضمام بحيث أن قوانين شبكة عراق تيم لا تتناسب مع اهتماماتك .
    • للأطلاع على الخصوصية وسياسة الاستخدام - التفاصيل
    • بعد الاطلاع على سياسة الموقع وقوانين شبكة عراق تيم يمكنك التسجيل معنا - تسجيل عضو جديد
    إستبعاد الملاحظة
الكاتب : Microsoft | المشاهدات : 1,736 | الردود : 4
حالة الموضوع:
مغلق
  1. Microsoft V • I • P

    الأنتساب:
    ‏26 أكتوبر 2011
    المشاركات:
    193
    الإعجابات المتلقاة:
    3
    نقاط الجائزة:
    50
    الإقامة:
    home
    اللغة البرمجية:
    Ruby
    [​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 Developer

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

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

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

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

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

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

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

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

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