اشترك في قناتنا ليصلك جديدنا

اشترك في قناتنا على اليوتيوب ليصلك جديدنا

كذلك الاعجاب بصفحتنا على الفيسبوك

توزيع واجهة موقع باستخدام css و html الجزء 3

توزيع واجهة موقع باستخدام css و html الجزء 3


صفحة 1 من 2 12 الأخيرةالأخيرة
النتائج 1 إلى 10 من 14

الموضوع: توزيع واجهة موقع باستخدام css و html الجزء 3

  1. #1
    هكر متميز Array الصورة الرمزية Abdullhadi JC
    تاريخ التسجيل
    Jul 2009
    الدولة
    Underworld
    المشاركات
    1,069

    new توزيع واجهة موقع باستخدام css و html الجزء 3





    بسم الله الرحم الرحيم

    نكمل سلسلة هذه الدروس بالجزء الثالث والأخير, وسنشرح كما تطرقنا سابقاً لعمل مثل هذا الشكل:





    حيث انتهينا من عمل الـ Header وهو أول مستطيل في الأعلى وكالك من الجزء الجانبي الأيمن المستطيل الذي على اليمين وكذلك الـ Footer وهو الجزء السفلي من الموقع باقي لنا الجزء الجانبي الأيسر والمستطيلان الصغيران اللذان تحت الهيدر وفوق الفوتر لأي محتوى وهما بسيطان جداً.

    فبعد الانتهاء من العمل سيكون كالتالي:





    بسم الله نبدأ بإنشاء الجانب الأيسر من الموقع وذلك بإضافة العنصر أو الوسم الخاص بالـ HTML في داخل الـ باسم
    <div id=”side_left”></div>
    وذلك بعد عنصر الجانب الأيمن
    <div id=”side_right”></div>:

    كود HTML:
    <div id="side_left">
        <ul class="side_menu">
          <li>
          <h2>الرعاة الإعلاميون</h2>
            <ul>
              <li><a href="http://www.islamway.com"><img src="images/banner1.gif" /></a></li>
              <li><a href="http://www.islamweb.net"><img src="images/banner2.gif" /></a></li>
              <li><a href="http://www.gafelh.com"><img src="images/banner3.gif" /></a></li>
            </ul>
          </li>
        </ul>
        <ul class="side_menu">
          <li>
          <h2>شاركنا الآن</h2>
            <ul>
              <li>يمكنك المشاركة في دعم الموقع لنصرة الرسول صلى الله عليه وسلم ونشر مبادئه وقيمه العالية لتكسب الأجر العظيم من الله حيث الله أمرنا بالاقتداء به والسعي إلى طاعة الله وطاعة رسوله الكريم جعلني الله وإياكم من من يسمعون الكلام ويتبعون أحسنه</li>
            </ul>
          </li>
        </ul>
    </div>
    بعد إضافة العناصر المطلوبة في القائمة الجانبية نقوم بتنسيقها باستخدام الـ CSS هناك بعض الأجزاء التي عُملت من قبل مثل القائمة ستكون بشكل أنيق بنفس القائمة الجانبية اليمنى وهنا تكمن قيمة الـ CSS فقط سنقوم بمواساتها بالجانب الأيسر وذلك من خلال التعديل على ملف style.css أول شي نضيف هذا الكود:

    كود HTML:
    img {
    border:none;
    }
    هذا الكود لكي يجعل الحدود لأي صوره فيها رابط بدون حدود بحيث أنه بطبيعة الحال يقوم بوضع حد كبير جداً في هذه الحالة لا نريده, ثم نكمل بإضافة:

    كود HTML:
    #side_left {
        float:left;
        width:180px;
    }
    ونقوم بتحرير #content بإضافة margin-left:180px; ليكون كاملاً كالتالي:

    كود HTML:
    #content {
        margin-right:180px;
        margin-left:180px;
        padding:10px;
    }

    فقط لا غير، الآن شاهد النتيجة:




    جانب أيسر بالكامل رائع وجميل, حسناً سنقوم الآن بإضافة مستطيل تحت الهيدر (الجزء العلوي) بالطريقة التالية:

    قبل <div id=”side_right”> والذي يكون بعد جزء header نضيف التالي :

    كود HTML:
    <div id="navigation">أنت هنا ( <a href="index.htm">الصفحة الرئيسية</a> )</div>
    ثم نتجه إلى ملف style.css ونضيف النمط الخاص بالـ navigation كالتالي:
    كود HTML:
    #navigation {
        padding:7px;
        border:1px solid #a2e9a2;
        background:#e9f9e9;
        font-family:Tahoma;
        font-size:8pt;
        margin-top:5px;
    }

    الآن نضيف المستطيل الذي أعلى الفوتر بإضافته قبل <div id=”footer”> كالتالي:
    كود HTML:
    <div id="footer_menu">
        <a href="index.htm">الرئيسية</a> |
        <a href="#">من نحن</a> |
        <a href="#">ادعمنا</a> |
        <a href="#">اتصل بنا</a> |
        <a href="#">إلى الأعلى</a>
    </div>

    ثم نعطيها النمط التالي:

    كود HTML:
    #footer_menu {
        text-align:center;
        font-family:Tahoma;
        font-size:8pt;
        border-top:1px solid #b9e9b9;
        padding-top:7px;
        margin-top:10px;
    }
    لتصبح النتيجة النهائية كالتالي:



    الى هنا انتهى الجزء الأخير من الدرس
    ويمكنك تحميل نتيجة الدرس من المرفقات لرؤيتها وتحليل الشيفرة وفهمها
    ^______________^
    انتظروني في دروس جديدة وحصرية





    الملفات المرفقة الملفات المرفقة
    التعديل الأخير تم بواسطة Abdullhadi JC ; 05-10-2012 الساعة 04:58 PM


  2. #2
    هكر نشيط Array الصورة الرمزية m-d
    تاريخ التسجيل
    Apr 2012
    المشاركات
    130

    افتراضي رد: توزيع واجهة موقع باستخدام css و html الجزء 3

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


  3. #3
    هكر متميز Array الصورة الرمزية Abdullhadi JC
    تاريخ التسجيل
    Jul 2009
    الدولة
    Underworld
    المشاركات
    1,069

    افتراضي رد: توزيع واجهة موقع باستخدام css و html الجزء 3

    الله يخليك,, تسلم .
    مشكور على المرور الجميل



  4. #4
    هكر مجتهد Array الصورة الرمزية اخلاقي تاج راسي
    تاريخ التسجيل
    Apr 2010
    المشاركات
    273

    افتراضي رد: توزيع واجهة موقع باستخدام css و html الجزء 3



    ربي يعطيكـ العافيه
    شرح رآئع

    تحيآتي لكـ يآ أستاذي


  5. #5
    هكر متميز Array الصورة الرمزية Abdullhadi JC
    تاريخ التسجيل
    Jul 2009
    الدولة
    Underworld
    المشاركات
    1,069

    افتراضي رد: توزيع واجهة موقع باستخدام css و html الجزء 3

    الله يعافيك حيو
    مشكور على المرو


  6. #6
    هكر مبتديء Array
    تاريخ التسجيل
    Mar 2010
    المشاركات
    2

    افتراضي رد: توزيع واجهة موقع باستخدام css و html الجزء 3

    الف شكر على الموضوع الرائع و على الطرح الاروع الى الامام ان شاء رب العزة سبحانه وتعالى



  7. #7
    هكر متميز Array الصورة الرمزية Abdullhadi JC
    تاريخ التسجيل
    Jul 2009
    الدولة
    Underworld
    المشاركات
    1,069

    افتراضي رد: توزيع واجهة موقع باستخدام css و html الجزء 3

    اقتباس المشاركة الأصلية كتبت بواسطة fofaz مشاهدة المشاركة
    الف شكر على الموضوع الرائع و على الطرح الاروع الى الامام ان شاء رب العزة سبحانه وتعالى
    العفو اخي الكريم ,, لم اقم بفعل شيء يذكر ,


  8. #8
    هكر متميز Array الصورة الرمزية sssssss
    تاريخ التسجيل
    Jan 2012
    المشاركات
    1,323

    افتراضي رد: توزيع واجهة موقع باستخدام css و html الجزء 3

    مشكور اخي موضوع رائععععع


  9. #9
    هكر متميز Array الصورة الرمزية Abdullhadi JC
    تاريخ التسجيل
    Jul 2009
    الدولة
    Underworld
    المشاركات
    1,069

    افتراضي رد: توزيع واجهة موقع باستخدام css و html الجزء 3

    انت الرائع اخي ومشكور على المرور



  10. #10
    هكر متألق Array الصورة الرمزية سارة الغامدي
    تاريخ التسجيل
    Jan 2012
    المشاركات
    6,473

    افتراضي رد: توزيع واجهة موقع باستخدام css و html الجزء 3

    يعطيك العافية .. تم تقييمك


صفحة 1 من 2 12 الأخيرةالأخيرة

المواضيع المتشابهه

  1. [درس] توزيع واجهة موقع باستخدام css و html الجزء 1
    بواسطة Abdullhadi JC في المنتدى تطوير المواقع والمنتديات
    مشاركات: 6
    آخر مشاركة: 03-08-2013, 04:03 AM
  2. [درس] توزيع واجهة موقع باستخدام css و html الجزء 2
    بواسطة Abdullhadi JC في المنتدى تطوير المواقع والمنتديات
    مشاركات: 11
    آخر مشاركة: 07-19-2012, 01:17 AM
  3. مشاركات: 10
    آخر مشاركة: 06-28-2012, 06:44 AM
  4. قالب (واجهة موقع) بلاك هاك مفتوح المصدر
    بواسطة Abdullhadi JC في المنتدى منتدى الإستايلات والتصاميم
    مشاركات: 30
    آخر مشاركة: 11-04-2011, 11:58 PM
  5. ممكن كيف اخترق موقع html
    بواسطة aminox في المنتدى قسم المشاكل والإستفسارات
    مشاركات: 0
    آخر مشاركة: 02-03-2010, 08:15 PM

وجد الزوار هذه الصفحة بالبحث عن:

كود واجهة موقع

برنامج لعمل الهيدر

توزيع واجهة موقع باستخدام css و html

اكواد واجهات مواقع

استخدام html في الهكر

[درس] توزيع واجهة موقع باستخدام css و html الجزء 2 - جيوش الهكرز

كود عمل ال footer في الموقع

توزيع واجهة موقع باستخدام css و html الجزء 4

توزيع واجهة موقع باستخدام الجزء الثاني

واجهة موقع بال php

منتدى html css

style css html منتديات

توزيع واجهة موقع باستخدام css و html الجزء 3

دورة توزيع واجهة css

توزيع واجهة موقع باستخدام الجزء الثالث

واجهات بال html

كود لعمل واجهه صفحة

واجهة موقع css rar

صفحات html باستخدام css

دورة توزيع واجهه موقع توزيع كامل بالـ

توزيع واجهة موقع باستخدام css و html الجزء 2 جيوش الهكرز

واجهة موقع - Css

توزيع واجهة موقع باستخدام css و html الجزء 3 جيوش الهكرز

واجهة html css

كود واجهة موقع HTML

المفضلات

أذونات المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •