1. أهلا وسهلاً بكم في :: IQ-TeaM FORUM :: .
    إذا كانت هذه الزيارة الأولى أو لديك الرغبة بالانضمام لأعضاء شبكة عراق تيم فيجب الاطلاع على خصوصية الشبكه فربما بقائك زائر افضل لك من الانضمام بحيث أن قوانين شبكة عراق تيم لا تتناسب مع اهتماماتك .
    • للأطلاع على الخصوصية وسياسة الاستخدام - التفاصيل
    • بعد الاطلاع على سياسة الموقع وقوانين شبكة عراق تيم يمكنك التسجيل معنا - تسجيل عضو جديد
    إستبعاد الملاحظة
  2. الملاحظات
    عزيزي زائر تم اطلاق الموقع الرسمي لبرنامج الاختراق Spy-Note
    إستبعاد الملاحظة
حالة الموضوع:
مغلق
  1. الحربي
    rankrank
    DeveloPer Plus

    عضو منذ:
    ‏9 ديسمبر 2011
    عدد المشاركات:
    69
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    20
    الإقامة:
    Ӄ Ŵ Ť
    بسم الله الرحمن الرحيم

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

    اهلاً بكم اخوتي و اطاب الله ايامكم بكل خير ,, اليوم بأذن الله سوف اطرح درس طال انتظاره و لا اخفي عليكم اني كُنت من احد مُترقبيه ,,

    و من الله علي بإن حاولت حاولت حتى فشلت و فشلت ثم نجحت بعمل استايل جانبي
    و الذي سوف نتطرق إليه بالدرس اليوم و الذي يجب ان تكون مُلم ولو 20% من :-


    • Html
    • Css

    نبتدأ بالدرس على بإسم الله ,,

    ـأولاً لنفتح برنامج الفوتوشوب و نُصمم استايل جانبي و نقطعه و هذه صورة توضيحيه لطريقة التصميم و التقطيع ...

    [​IMG]

    الأن نذهب نحفظه كصفحة ويب عن طريق ..
    File > Save For Web
    ,,

    نتوجه إلى محررك الخاص و انا من مُستخدمي
    (Adobe Dreamweaver CS5)
    و تابع الصُور
    ,,
    [​IMG]
    ,,
    [​IMG]
    ,,
    [​IMG]
    ,,
    [​IMG]
    ,,
    [​IMG]
    ,,
    [​IMG]
    ,,
    [​IMG]
    ,,
    [​IMG]
    ,,
    [​IMG]
    ,,

    ,,
    الأن نذهب نقيس عرض القائمة الجانبية
    ,,
    [​IMG]
    ,,
    كما نرى أن العرض 270 بعد ذلك نذهب إلى (خلفية المنتدى/Body) ونعدل


    خواص CSS الإضافية
    ,,


    [​IMG]
    ,,
    الأن نضع في خانة الخلفية صورة نقطة التمدد للقائمة الجانبية و نكررها بشكل
    رأسي من جهة أعلي و يمين مثال على الكود
    كود PHP:
    url(al7erbi/aL7eRbI_05.jpgrepeat-y top right
    و الأن هذا الناتج بعد عمل الخطوات السابقة
    ,,
    [​IMG]
    ,,
    بعد ذلك نعود لمحبُوبنا (Adobe Dreamweaver CS5) و ننظف الاكواد ليصبح بالشكل الآتي
    ,,
    [​IMG]
    ,,
    [​IMG]
    ,,
    [​IMG]
    ,,
    [​IMG]
    ,,
    [​IMG]


    ,,
    1. تم تعريف id الـ al7erbi-y

    1. تم إدراج صورة التمدد و وضعها بتكرار رأسي
    2. تم وضع عرض صورة التمدد و هي 270 px
    3. هُنا تم تحديد وضعية العنصر و تم وضعه بشكل مطلق absolute
    4. هُنا تم وضع اليمين صفر و من الاعلى صفر
    5. تم تعريف id الـ al7erbi-y-1
    6. هُنا تم وضع الصورة التجميلية للهيدر من غير تكرار وتم وضعها أعلى اليمين
    7. هنا تم تحديد عرض الصورة بـ 270 Px
    8. نحديد طولها بـ 167 Px
    9. هُنا تم تعريف id الـ al7erbi-y-2
    10. تم إدراج صورة تجميلية الخاصة بالأزرار مع عدم تكرارها أسفل اليمين
    11. هنا تم تحديد عرضها بـ 270 Px
    12. تم تحديد طولها بـ 175Px
    ,,

    و الأن الاكواد التي بين وسم
    كود PHP:
    <body></body>
    ضعها بـ الفوتر او الهيدر و انا افضل الهيدر و الاكواد التي بين وسم
    كود PHP:
    <style type="text/css"> </style>
    نضعها في تعاريف CSS الإضافية ,

    تحميل صور الشرح

    [​IMG]

    ,او

    [​IMG]

    او

    [​IMG]
    ,,

    و إلى هُنا اُنهي الدرس

     
    جاري تحميل الصفحة...
  2. D 1 r k
    DeveloPer Plus

    عضو منذ:
    ‏9 ابريل 2012
    عدد المشاركات:
    136
    الإعجابات المتلقاة:
    5
    نقاط الجائزة:
    50
    الوظيفة:
    Currently Student
    الإقامة:
    United States
    رد: الدرس المنتظر شرح تصميم إستايل جانبي و وضع الاعلانات و الروابط و الاكواد

    تسلم لي يـ الغلا .. *:"
     
  3. HcJ
    V • I • P

    عضو منذ:
    ‏11 سبتمبر 2011
    عدد المشاركات:
    99
    الإعجابات المتلقاة:
    1
    نقاط الجائزة:
    50
    الإقامة:
    ّّّ~ مصر ~
    نظام التشغيل:
    Linux
    رد: الدرس المنتظر شرح تصميم إستايل جانبي و وضع الاعلانات و الروابط و الاكواد

    مشكور اخوي وبارك الله فيك.
     
حالة الموضوع:
مغلق

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

جاري تحميل الصفحة...