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

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


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

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

  1. #1

    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

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


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

    تحياتي

  3. #3

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

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

  4. #4

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

    سبحان الله وبحمده سبحان ربي العضيم

  5. #5

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

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

  6. #6

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

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

  7. #7

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

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

  8. #8

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

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

  9. #9

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

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

  10. #10

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

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

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

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

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

المفضلات

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

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