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

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

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

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

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


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

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

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

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





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




    في الجزء الأول من درس توزيع واجهة موقع باستخدام css و html
    تطرقنا إلى عمل جزء علوي وقائمة جانبية واحدة تحتوي على عدة قوائم داخلية وجزء محتوى في وسط الصفحة فقط ولكن طبعاً بالتفصيل الممل واعتماداً على المعايير القياسية وبالاكواد والصور والمصدر, يمكنك مشاهدة الشكل السابق في الجزء الأول وكيف سنقوم بتطويره وتعلم المزيد من هذه اللغتين الرائعتين والمهمتين في عالم تطوير وتصميم المواقع والتطبيقات.

    نود أن نكمل الدرس لنحاول أن نتطرق إلى النقاط التالية:

    • إضافة قائمة جانبية ثانية إلى اليسار (Left Side)
    • إضافة جزء سفلي (Footer)
    • إضافة قائمة علوية (Header Menu)
    • إضافة قائمة سفلية (Footer Menu)

    وسنتطرق إلى المزيد من النقاط الأخرى كعمل إطارات وعمل أزرار بخلفية جميلة وعند تمرير الفأرة يتم تغيير صورة الخلفية بأفضل طريقه وغيرها الكثير والكثير…
    سأركز على عمل شكل كهذا





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





    كود HTML:
    <div id="footer">
        <!-- هنا محتوى الجزء السفلي -->
    </div>




    بعدها يمكننا بكل بساطة عمل أي شي في الجزء السفلي باستخدام CSS وذلك من خلال #footer مثل إضافة صورة خلفية أو حدود أو تباعد أو نوع الخط أو ألوان الروابط فيه … إلخ

    لنقل أنك قمت بتصميم هذه الخلفية باستخدام الفوتوشوب باسم footer_bg.gif وحفظتها داخل مجلد images في موقعي





    حسناً الآن لدينا صورة الخلفية للجزء السفلي سنقوم بعرضه باستخدام CSS وذلك كالتالي:

    كود HTML:
    #footer {
        background:url(images/footer_bg.gif);
        height:56px;
    }



    اللآن الجزء السفلي ممتاز بالكود الذي تم كتابته ولكن سترى النتيجة التي لا تسرك كالتالي:






    تعمدت أن أظهر هذا الخطأ لكي نتعلم منه دائماً عندما ترى نتيجة سلبية يجب عليك مراجعة الكود جيداً ويجب طبعاً أن تكون لديك أساسيات ذلك, عموماً هذه الخطوة يجب عليك فهمها لأنها مهمة في عالم كود الـ XHTML و الـ CSS
    عندما أردنا أن جعل القائمة الجانبية اليمنى والمحتوى بجانب بعض مع أنهما وسوم div التي دائماً تكون تحت بعض فقد استخدمنا float:right في الدرس الأول والذي يعني باللغة العربية تعويم فإذا كان أي شي عائم لابد وأن يكون هناك ما يعوم حوله كالغواصة عندما تعوم ويكون بجانبها أعماق البحر هذا التعويم عند إضافته يجب أن يتوقف في حدود أنت تحددها لنرى ذلك من خلال الصورة التوضيحية التالية:





    ستلاحظ أن content يجب أن يكون لديه بجانبه عنصر عائم من حوله وذلك بسبب أنه يحمل الخاصية float, فيجب عليك إيقافه بعد الإنتهاء منه من خلال إضافة وسم جديد وإعطاءه الخاصية clear بالـ CSS كالصورة التوضيحية التالية:





    بشكل تطبيقي الآن نضيف الوسم التالي قبل وسم الفوتر الذي أضفناه قبل قليل:

    كود HTML:
    <div class="clear"></div>



    ليصبح هو والجزء السفلي كالتالي:

    كود HTML:
    <div class="clear"></div>
    <div id="footer">
        <!-- هنا محتوى الجزء السفلي -->
    </div>



    الآن نتجه إلى ملف style.css كما تم توضيحه في الصورة السابقة ونضيف السطر التالي بإمكانك جعله في آخر سطر أو أي مكان

    كود HTML:
    .clear {
    clear:both;
    }



    الآن لنرى النتيجة:





    جميل جداً الآن وطبعاً كل ما قمت بتنسيق الموقع أكثر كل ما كان أفضل فمثلاً هذه المنطقة يفضل عمل مسافة علوية بسيطة في الجزء السفلي فسأقوم بتعديلها من خلال الـ CSS






    الكود الخاص بإضافة مسافة بسيطة في الأعلى من الجزء السفلي (footer) من خلال style.css كالتالي:

    كود HTML:
    #footer {
    background:url(images/footer_bg.gif);
    height:56px;
    margin-top:10px;
    }



    وطبعاً الجزء الذي أضفناه فقط ( margin-top:10px; ) لتصبح النتيجة كالتالي:





    في الدرس التالي سنقوم بتكملة الدرس وسنتطرق إلى القائمة الجانبية التي على يسار الموقع لتكون لدينا قائمتين جانبيتين واحدة على اليمين والثانية على اليسار حيث أن هذه النقطة تم طلبها كثيراً وهي فعلاً نقطه مهمة سنقوم بتعلمها باستخدام المعايير القياسية وبدون استخدام الجداول بالكامل.

    انتظروني في الجزء الأخير من الدرس




















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

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


    ربي يعطيكـ العافيه

    تحياتي


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

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

    ربي يعافيك ويخليك
    مشكور على المرو
    تحياتي لك



  4. #4
    هكر مجتهد Array الصورة الرمزية فتفوته حمره
    تاريخ التسجيل
    Jun 2012
    الدولة
    تبــــــــوك
    المشاركات
    216

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



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

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

    العفوو
    مشكور على المرور الجمييل


  6. #6
    هكر مبتديء Array
    تاريخ التسجيل
    Aug 2011
    المشاركات
    21

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

    يسلمووو اخي حلو الشرح



  7. #7
    هكر مبتديء Array
    تاريخ التسجيل
    Aug 2011
    المشاركات
    21

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

    اخوي عبد الهادي ليه الـ...


  8. #8
    هكر مبتديء Array
    تاريخ التسجيل
    Aug 2011
    المشاركات
    21

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

    الصور الثلاث الاخيرة ما


  9. #9
    هكر مبتديء Array
    تاريخ التسجيل
    Aug 2011
    المشاركات
    21

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

    ماموجوووووووووووووووودة



  10. #10
    هكر مبتديء Array
    تاريخ التسجيل
    Aug 2011
    المشاركات
    21

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

    عالعموووم .. بلييز لاقيلناا احل


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

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

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

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

واجهة موقع html

تصميم موقع الكتروني باستخدام html

تصميم واجهة الموقع css3

تصميم خلفيه لموقع بواسطه css

انشاء موقع الكتروني html

كيفية انشاء واجة للموقع باستخدام php

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

مواقع بالhtml

تصميم واجهة موقع بلغة html

أكواد انشاء موقع الكترني html

كود cssوhtml لتصميم موقع

تصميم موقع وتوزيع الصور

شرح عمل تصميم وتوزيعه ب css

تصميم واجهات المواقع html

كيفية تصميم واجهة موقع بواسطة css html

كودات تصميم موقع cssوhtml

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

شرح توزيع واجهه

توزيع موقع شخصي css

تصميم مواقع php بنفسك شرح مع الاكواد

تصميم موقع الكتروني html

كيفية تغيير واجهة الموقع بعد الاختراق

تقسيم واجهة الموقع html

مراحل انشاء موقع الكتروني html

تصمصم موقع إلكتروني XTMAL

المفضلات

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

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